Picklist

Picklist is a component that displays a list of selectable options. When an option is selected, it is shown as selected and the value of the read-only input is updated to match it.

Standard Picklist provides a list of selectable options of which users can select only one.
Grouped Picklist provides a list of selectable options, segmented by groupings, of which users can select only one.
Icon Picklist provides a list of selectable options, trigger by an icon, of which users can select only one.
Multiselect Picklist provides a list of selectable options of which users can select one or more options at a time.
Multiselect Grouped Picklist provides a list of selectable options, segmented by groupings, of which users can select one or more options at a time.
Picklist with Search is a Picklist variation with an ability to search for options.

An option object can be:

Just a string. The component will automatically turn it into an object with a label & value property, where both have the same value.
An object with at least a label and value property. Optionally:
- sup key, for sup-label
- sub key, for sub-label
- icon key, to add an icon to an option (see icon list for names)
- disabled key, to disable this option (option will be visually disabled & no selection events will be fired)
Please note that the icon property can not be used in combination with the sup & sub keys.
The 'value' property will be used to compare options (for example, to determine if an option is 'selected'). If the 'value' property is not present, the 'label' property will be used.

The dealogicData['countries'] array used in some examples is a global variable with a list of country objects, each with the following properties:

label: country name
sup: country code
sub: capital city
group: continent name

Attributes

attribute:	type:	required?	default:	description:
label	string	no		Initial label for picklist button
icon	string	no		Icon to show in picklist button
searchable	boolean	no	`false`	Enable search on option-menu
multiple	boolean	no	`false`	Enable multi-select
error	boolean	no	`false`	Enable error-state
transparent	boolean	no	`false`	Make picklist button transparent
staticlabel	boolean	no	`false`	Make picklist label static

Methods

setCallback(callback)

Set the callback function that's called whenever the search input value changes.

param:	type:	default:	description:
callback	Function		A function that can returns either an Array of option objects or a Promise that resolves with an Array of option objects. The function receives a single parameter: the current value of the search input.

setOptions(options, openDropdown)

Set the options that populate the dropdown.

param:	type:	default:	description:
options	Array \| Object \| String		an Array of option objects, a single option object or a string
openDropdown	Boolean	`false`	should the picklist dropdown be opened?

setSelected(options)

Set the selected options.

param:	type:	default:	description:
options	Array		an Array of option objects

dropdownOpen()

Opens the datepicker dropdown

dropdownClose()

Closes the datepicker dropdown

Events

selected

Triggered whenever an option is selected. Contains a single option object in 'single' mode. Contains an Array of options objects in 'multiple' mode.

Examples

Pick List

Standard Picklist provides the user with a list of selectable options of which they can select only one.

<dl-picklist label="Select an item" id="picklist-single"></dl-picklist>

var picklist = document.querySelector('#picklist-single')
var days = [
  'Monday',
  'Tuesday',
  'Wednesday',
  'Thursday',
  'Friday',
]
picklist.addEventListener('ready', function(event) {
  if (event.target == picklist) {
    picklist.setOptions(days)
  }
})
picklist.addEventListener('selected', function(event) {
  console.log('selected ' + event.detail.label)
})

Grouped Picklist

Grouped Picklist provides the user with a list of selectable options, segmented by groupings, of which they can select only one.

<dl-picklist label="Select an item" id="picklist-grouped"></dl-picklist>

var picklistGrouped = document.querySelector('#picklist-grouped')
var options = [
    {
        label: 'Budapest',
        group: 'Europe',
    },
    {
        label: 'New York City',
        group: 'North America',
    },
    {
        label: 'Los Angeles',
        group: 'North America',
    },
    {
        label: 'Tokyo',
        group: 'Asia',
    },
    {
        label: 'Seoul',
        group: 'Asia',
    },
    {
        label: 'Hong Kong',
        group: 'Asia',
    },
]

picklistGrouped.addEventListener('ready', function(event) {
  if (event.target == picklistGrouped) {
    picklistGrouped.setOptions(options)
  }
})

picklistGrouped.addEventListener('selected', function(event) {
  console.log('selected ' + event.detail.label)
})

Icon Picklist

Icon Picklist provides the user with a list of selectable options, trigger by an icon, of which they can select only one.

<dl-picklist icon="vc-search" id="picklist-icon"></dl-picklist>

var iconPicker = document.querySelector('#picklist-icon')
var iconOptions = [{
    icon: 'arrow-refresh',
    label: 'Monday',
  },
  {
    icon: 'security-not-encrypted',
    label: 'Tuesday',
  },
  {
    icon: 'events-flight',
    label: 'Wednesday',
  },
  {
    icon: 'state-pm',
    label: 'Thursday',
  },
  {
    icon: 'arrow-trend-stutter-up',
    label: 'Friday',
  },
]

iconPicker.addEventListener('ready', function(event) {
  if (event.target == iconPicker) {
    iconPicker.setOptions(iconOptions)
  }
})

Multiselect Picklist

Multiselect Picklist provides the user with a list of selectable options of which they can select one or more options at a time.

<dl-picklist label="Select items" id="picklist-multi" multiple style="width: 20em;"></dl-picklist>

var multiPicker = document.querySelector('#picklist-multi')

var multiCountries = function() {
  var result = []
  var countryCount = dealogicData['countries'].length
  for (var i = 0; i < 8; i++) {
    var index = Math.floor(Math.random() * countryCount)
    result.push(dealogicData['countries'][index]['label'])
  }
  return result
}

multiPicker.addEventListener('ready', function(event) {
  if (event.target == multiPicker) {
    multiPicker.setOptions(multiCountries())
  }
})

Multiselect Grouped Picklist

Multiselect Grouped Picklist provides the user with a list of selectable options, segmented by groupings, of which they can select one or more options at a time. (including `sub` & `sup` properties)

<dl-picklist label="Select items" id="picklist-multi-grouped" multiple style="width: 20em;"></dl-picklist>

var multiGroupedPicker = document.querySelector('#picklist-multi-grouped')

var multiCountriesGrouped = function() {
  let results = []
  let countries = dealogicData['countries']
  const countryCount = countries.length
  const limit = Math.floor(Math.random() * 20) + 10

  for (var i = 0; i < limit; i++) {
    const index = Math.floor(Math.random() * countryCount)
    const item = countries[index]
    results.push(item)
  }

  return results
}

multiGroupedPicker.addEventListener('ready', function(event) {
  if (event.target == multiGroupedPicker) {
    multiGroupedPicker.setOptions(multiCountriesGrouped())
  }
})

Picklist with Search

Variation of Picklist with an ability to search for options.

<dl-picklist label="Select an item" id="picklist-search" searchable></dl-picklist>

var searchPicker = document.querySelector('#picklist-search')

var searchCountries = function(search) {
  var countries = dealogicData['countries']

  var results = countries.filter(function(country) {
      const label = typeof country == 'string' ? country : country.label
      return label.toLowerCase().indexOf(search) !== -1
  })

  return results
}

searchPicker.addEventListener('ready', function(event) {
  if (event.target == searchPicker) {
    searchPicker.setOptions(searchCountries('ab'))
    searchPicker.setCallback(searchCountries)
  }
})

Dealogic Styleguide

section menu