<dile-select> & <dile-select-multiple>

Web components to implement a select dropdown menu. <dile-select> implements a interface to select one single value. <dile-select-multiple> implements a interface to select multiple values in a list.

Installation

npm i dile-select

<dile-select> Usage

<script type="module">
  import 'dile-select/dile-select.js';
</script>

<dile-select label="Favorite fruit:" value="pear" class="custom" placeholder="Select a fruit" @dile-select-changed="${this.selectChanged}">
  <dile-select-item value="kiwi">Kiwi fruit</dile-select-item>
  <dile-select-item value="pear">Pear</dile-select-item>
  <dile-select-item value="apple">Apple</dile-select-item>
  <dile-select-item value="orange">Orange</dile-select-item>
  <dile-select-item value="passion_fruit">True passion fruit</dile-select-item>
</dile-select>

<dile-select-multiple> Usage

<script type="module">
  import 'dile-select/dile-select-multiple.js';
</script>

<dile-select-multiple placeholder="Select at least 1" label="Favorite cars">
  <dile-select-multiple-item value="general-motors">General Motors</dile-select-multiple-item>
  <dile-select-multiple-item value="volkswagen">Volkswagen</dile-select-multiple-item>
  <dile-select-multiple-item value="toyota">Toyota</dile-select-multiple-item>
  <dile-select-multiple-item value="fiat">Fiat</dile-select-multiple-item>
  <dile-select-multiple-item value="renault">Renault</dile-select-multiple-item>
</dile-select-multiple>

Properties

Properties specific for <dile-select>

• value (String): Stores the value of the selected item. Also Useful for the component initialization.
• uninitialized: When the component initializes, it takes the first option value as default. If uninitialized property is set to true, then the element do not initialize with any value.

Properties specific for <dile-select-multiple>

• value (Array): Stores the values of the selected items (array of strings). Also Useful for the component initialization.
• labelNumItem: For configure the selected text message. Something like "fruits selected" will show a message "3 fruits selected" when the user has selected 3 diferent options.
• uninitialized: Even the component has this property, it is unuseful in multiple select components, because there is not a default initialization, only the one you can apply with the value array property.

Common properties for both components

• name: Name for the component. So, you can know which element element is related when a changed event is received.
• opened: This defines the component open / close state. the default placeholder is 'Select'.
• selectedText: Stores the innerText of the current selected option.
• label: A label for the element.
• placeholder: Placeholder. Appears when there isn't a selected element.
• errored: Display select in a error state

Methods

• selectItem(value): this method is useful to select a item programaticaly. You should pass the string option value.
• open(): Opens the dropdown menu.
• close(): Closes the dropdown menu.

events

• dile-select-changed: dispatched when the select element changes it's current value. This custom event gives some useful data in the detail property.

Custom properties

CSS custom properties defined on <dile-select>:

Custom property	Description	Default
--dile-select-width	width of the select element	auto
--dile-select-text-color	Text color of the selected item	#303030
--dile-select-background-color	Background color of the selected item	#ddd
--dile-select-border-width	Border width of the interface. Only supports width in pixel units!!	0
--dile-select-border-color	Border color of the interface	#888
--dile-select-border-radius	Border radius of the interface	10px
--dile-select-hover-background-color	Background color when hover in a item	#eee
--dile-select-label-font-size	Label font size	1em
--dile-select-label-color	Label text color	#59e
--dile-select-label-font-weight	Label font weight	normal
--dile-select-padding-x	Horizontal padding (left & right) of the items	10px
--dile-select-padding-y	Vertical padding (top & bottom) of the items	10px
--dile-select-errored-background-color	Error background color	#f66
--dile-select-errored-text-color	Error items text color	#fff

The component <dile-select-multiple> has the same CSS custom properties than <dile-select>, and also:

Custom property	Description	Default
--dile-select-multiple-unchecked-color	Color for the checkbox in unselected state	#aaa
--dile-select-multiple-checked-color	Color for the checkbox in selected state	#26e