Select Component

This a styleable select Web Component built using Stencil.

Usage

Populating the options

  <avn-select id="sample"></avn-select>
  <script>
    const avnSelect = document.querySelector('#sample');
    avnSelect.options = [
      {
        "label": "Orange",
        "value": "OR"
      },
      {
        "label": "Apple",
        "value": "APP"
      }
    ];
  </script>

OR you can initialize it declaratively

  <avn-select id="sample">
    <avn-option value="OR">Orange</avn-option>
    <avn-option value="APP">Apple</avn-option>
  </avn-select>

NOTE: this is only for initialization, for updating you need to modify the .options attribute in an immutable way eg:

  const avnSelect = document.querySelector('#sample');
  avnSelect.options = [...avnSelect.options, {label: 'Strawberry', value: 'STR'}];

Listening for change event

  const avnSelect = document.querySelector('#sample');
  avnSelect.addEventListener('change', (option) => {
    // returns { label , value }
    // do something with returned value
  })

Getting the selected value

  const avnSelect = document.querySelector('#sample');
  const selectedValue = avnSelect.value;
  // returns { label, value }

Styling

These are the available CSS variables and their default values:

:host {
  --arrow-color: #000;
  --arrow-bg-color: #fff;
  --border-color: #ccc;
  --selected-color: #0A3874;
  --hover-color: #1668d3;
  --hover-text-color: #fff;
  --height: 34px;
  --border-radius: 5px;
  --content-width: 100%;
  --content-border-radius: 0;
  --focused-border-color: rgba(8,57,114,0.5);
  --focused-border-shadow: inset 0 1px 1px; 
}