@nanoporetech-digital/components 1.15.6 → 2.1.0

package/dist/collection/components/select/select.js

@@ -1,43 +1,40 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { Build, Component, Element, Event, Host, Method, Prop, State, Watch, h, } from '@stencil/core';
-import { testLegacyStyle, debounceEvent, closestElement, createColorClasses, } from '../../utils';
-import Popover from '../../utils/popover';
+import { Build, Component, Element, Event, Host, Method, Prop, State, Watch, h, Listen, } from '@stencil/core';
+import { debounceEvent, createColorClasses, closestElement, raf, getActiveElement, } from '../../utils';
+import { FormControl, FormControlWrap } from '../form-control/form-control';
+let selectIds = 0;
 /**
  * The select component is a wrapper to the HTML select element with custom styling and additional functionality.
  * It accepts most of the same properties as the HTML [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).
  * It's multi selection functionality is vastly improved from the native solution. It allows for the control of
  * value order through drag and drop or changing the insertion point with arrow keys. It also can allow for user defined values.
  *
+ * @slot start - suitable for inline action buttons or icons that may add extra contextual information
+ * @slot end - suitable for inline action buttons or icons that may add extra contextual information
+ * @slot value-start - similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist
+ * @slot value-end - similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist
  * @slot label - if you do not set a label attribute, you can use this slot for more complex markup
- * @slot legacy - you can use this slot to wrap any old select / labels / options. This will set appropriate defaults for the nano-select
+ * @slot helper - helper text to accompany the form field underneath.
+ * @slot down-arrow - use this to replace the default down arrow
+ * @slot - default slot; nest `nano-option` elements
  */
 export class Select {
   constructor() {
-    this.listItems = [];
     this.valueItems = [];
     this.selectId = `nano-select-${selectIds++}`;
     this.rtl = false;
-    this.currLiIndex = -1;
-    this.inputSearchVal = '';
-    this.watchValue = true;
     this.onInit = true;
-    this.currInsertIndex = 0;
-    this.availOpts = [];
+    this.isLegacy = 'registerElement' in document;
+    this.currInsertIndex = -1;
     this.showErrorMsg = false;
     this.errorMessage = '';
     this.hasFocus = false;
-    this.listOpen = false;
-    this.isLegacy = 'registerElement' in document;
     this.hasLabelSlot = false;
     this.hasHelperSlot = false;
-    this.hasIconSlot = false;
-    /**
-     * This will be true when the control is in an invalid state.
-     * Validity is determined by the `required` prop. Or if custom validity message is set.
-     */
-    this.invalid = false;
+    this.inputSearchVal = '';
+    this._invalid = false;
     /**
      * This Boolean attribute lets you specify that a form control should have select focus when the page loads.
      */
@@ -82,16 +79,9 @@ export class Select {
      * in multiple mode, allow users to enter their own values
      */
     this.allowCustomValues = false;
-    /**
-     * The value of the select.
-     */
-    this.value = this.multiple
-      ? []
-      : '';
-    /**
-     * You can set options via js. domElement.options = ['option 1', 'option 2'] or [{label: 'option 1', value: 'opt-1'}]
-     */
-    this.options = [];
+    this._value = this.multiple ? [] : '';
+    this._options = [];
+    this._eOptions = [];
     /**
      * If `true`, a clear icon will appear in the select when there is a value. Clicking it clears the select.
      */
@@ -105,28 +95,26 @@ export class Select {
      * Set the amount of time, in milliseconds, to wait to trigger the `nanoSearchChange` event after each keystroke.
      */
     this.debounce = 0;
-    /**
-     * Whether to use native <select> elements. Setting to false will use a similar UI as multiple="true"
-     */
-    this.native = true;
+    /** nano-dropdown config options you can pass to the nested dropdown component */
+    this.dropDownConfig = {};
     this.customValidate = () => {
       this.nativeSelect.setCustomValidity('');
       // add custom validations 'cos html5 validations are a bit rubbish on selects
-      if (this.required && !this.getNativeValue().length) {
+      if (this.required && !this.valArray.length) {
         this.nativeSelect.setCustomValidity('Please fill in this field.');
         return true;
       }
-      if (this.getNativeValue().length &&
+      if (this.valArray.length &&
         !this.allowCustomValues &&
         !this.isValidValues()) {
         this.nativeSelect.setCustomValidity('Please choose an item from this field.');
         return true;
       }
-      if (this.max && this.getNativeValue().length > this.max) {
+      if (this.max && this.valArray.length > this.max) {
         this.nativeSelect.setCustomValidity(`Only up to ${this.max} values are allowed.`);
         return true;
       }
-      if (this.min && this.getNativeValue().length < this.min) {
+      if (this.min && this.valArray.length < this.min) {
         this.nativeSelect.setCustomValidity(`You must select a minimum of ${this.min} values.`);
         return true;
       }
@@ -135,12 +123,12 @@ export class Select {
     this.showInlineValidation = (ev) => {
       if (this.validateOn === 'submitThenDirty')
         this.validateOn = 'dirty';
-      this.invalid = false;
+      this._invalid = false;
       this.showErrorMsg = false;
       this.errorMessage = '';
       if (!this.nativeSelect.validity.valid) {
         this.errorMessage = this.nativeSelect.validationMessage;
-        this.invalid = true;
+        this._invalid = true;
         this.showErrorMsg = true;
       }
       this.nanoValidate.emit({
@@ -150,41 +138,104 @@ export class Select {
       });
     };
     this.handleInvalid = (ev) => {
-      this.invalid = true;
+      this._invalid = true;
       if (this.validateOn === 'submit')
-        this.invalid = this.showErrorMsg = this.customValidate();
+        this._invalid = this.showErrorMsg = this.customValidate();
       if (this.showInlineError)
         ev.preventDefault();
       setTimeout((_) => this.showInlineValidation(ev), 20);
     };
-    /* Event handling */
-    this.onChange = (ev) => {
-      if (!this.readonly && !this.disabled && ev) {
-        ev.preventDefault();
-        ev.stopPropagation();
+    this.setValue = (e) => {
+      e.preventDefault();
+      if (!this.multiple) {
+        this.value = e.detail.value;
+        this.selectWrap.clientWidth; // force reflow
+        this.inputCtrl.focus();
+        return;
       }
-      this.value = this.getNativeValue();
+      if (this.value && this.value.length && this.value.includes(e.detail.value))
+        return;
+      if (this.max && this.value.length === this.max)
+        return;
+      this.currInsertIndex++;
+      this.value = [
+        ...this.value.slice(0, this.currInsertIndex),
+        e.detail.value,
+        ...this.value.slice(this.currInsertIndex),
+      ];
+      this.inputSearchVal = '';
+      // this.selectWrap.clientWidth; // force reflow
     };
-    this.onBlur = () => {
-      if (this.multiple) {
-        this.currLiIndex = -1;
-        document.removeEventListener('keydown', this.handleDocumentKeyDown);
-        document.removeEventListener('mousedown', this.handleDocumentMouseDown);
+    this.removeValue = (toFind) => {
+      if (!this.multiple || !this.value.length)
+        return;
+      if (!toFind)
+        toFind = this.value[this.value.length - 1];
+      this.value = this.value.filter((val) => val !== toFind);
+      this.currInsertIndex--;
+      // this.selectWrap.clientWidth; // force reflow
+      this.setFocus();
+    };
+    this.setOptions = () => {
+      if (!this.datalist ||
+        !this.datalist.activeOptions ||
+        !this.datalist.activeOptions.length)
+        return;
+      this._eOptions = this.datalist.activeOptions.map((ao) => {
+        const { value, selected, label, filterMeta } = ao;
+        return { value, selected, label, filterMeta };
+      });
+    };
+    this.handleDocumentKeyDown = (ev) => {
+      if (!this.multiple || !this.hasFocus)
+        return;
+      if (!this.inputSearchVal) {
+        let rm;
+        switch (ev.key) {
+          case 'Backspace':
+            if (this.inputCtrl.previousElementSibling)
+              rm = this.inputCtrl.previousElementSibling;
+            else
+              break;
+            this.removeValue(rm.dataset.value || null);
+            break;
+          case 'Delete':
+            if (this.inputCtrl.nextElementSibling)
+              rm = this.inputCtrl.nextElementSibling;
+            else
+              break;
+            this.removeValue(rm.dataset.value || null);
+            break;
+          case 'ArrowLeft':
+          case 'ArrowRight':
+            if (!this.value.length)
+              break;
+            if (ev.key === 'ArrowLeft' && this.inputCtrl.previousSibling)
+              this.currInsertIndex--;
+            if (ev.key === 'ArrowRight' && this.inputCtrl.nextSibling)
+              this.currInsertIndex++;
+            setTimeout(() => {
+              this.inputCtrl.focus();
+            }, 20);
+            ev.preventDefault();
+            break;
+        }
       }
+    };
+    this.onBlur = () => {
       this.hasFocus = false;
       setTimeout(() => {
-        if (this.validateOn === 'dirty' && !this.listOpen && !this.hasFocus)
+        if (this.validateOn === 'dirty' && !this.hasFocus)
           this.showInlineValidation();
       }, 20);
       this.nanoBlur.emit();
+      if (!this.allowCustomValues && this.multiple) {
+        this.inputSearchVal = '';
+        const event = new window.Event('change');
+        this.inputCtrl.dispatchEvent(event);
+      }
     };
     this.onFocus = () => {
-      if (this.multiple) {
-        this.currLiIndex = -1;
-        document.addEventListener('keydown', this.handleDocumentKeyDown);
-        document.addEventListener('mousedown', this.handleDocumentMouseDown);
-        this.openList();
-      }
       this.hasFocus = true;
       this.nanoFocus.emit();
     };
@@ -195,27 +246,18 @@ export class Select {
       }
       if (this.multiple) {
         this.value = [];
-        let options = this.nativeSelect.querySelectorAll('option');
-        if (options.length)
-          options.forEach((n) => n.remove());
         this.currInsertIndex = -1;
-        this.setAvailOpts();
       }
       else
         this.value = '';
-      this.onChange();
+      this.inputCtrl.value = '';
+      const event = new window.Event('change');
+      this.inputCtrl.dispatchEvent(event);
     };
     this.onClick = () => {
       this.setFocus();
-      this.openList();
     };
     /* Multi event handlers */
-    this.onMultiInputBlur = () => {
-      if (this.allowCustomValues)
-        return;
-      this.inputSearchVal = '';
-      this.setAvailOpts();
-    };
     this.onDragStart = (ev) => {
       let ele = ev.target;
       this.dragVal = ele.dataset.value;
@@ -242,132 +284,87 @@ export class Select {
       this.value = [...tmpArr];
     };
     this.onMultiInput = (ev) => {
-      this.inputSearchVal = ev.target.value;
-      this.setAvailOpts();
-      this.openList();
-      this.nanoSearchChange.emit({ value: ev.target.value });
-    };
-    this.onOptFocus = (ev) => {
-      let activeEle = this.getActiveOpt();
-      if (activeEle)
-        activeEle.classList.remove('has-focus');
-      ev.target.classList.add('has-focus');
-    };
-    this.onHostClick = () => {
-      setTimeout((_) => {
-        if (!this.multiple || this.hasFocus)
-          return;
-        this.setFocus();
-      }, 20);
-    };
-    this.handleDocumentMouseDown = (ev) => {
-      const target = ev.target;
-      if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {
-        this.listOpen = false;
-        this.onBlur();
-      }
-    };
-    this.handleDocumentKeyDown = (ev) => {
-      if (!this.multiple)
-        return;
-      if (!this.inputSearchVal) {
-        let rm;
-        switch (ev.key) {
-          case 'Backspace':
-            if (this.multiInput.previousElementSibling)
-              rm = this.multiInput.previousElementSibling;
-            else
-              break;
-            this.removeValue(rm.dataset.value || null);
-            break;
-          case 'Delete':
-            if (this.multiInput.nextElementSibling)
-              rm = this.multiInput.nextElementSibling;
-            else
-              break;
-            this.removeValue(rm.dataset.value || null);
-            break;
-          case 'ArrowLeft':
-          case 'ArrowRight':
-            if (!this.value.length)
-              break;
-            if (ev.key === 'ArrowLeft' && this.multiInput.previousSibling)
-              this.currInsertIndex--;
-            if (ev.key === 'ArrowRight' && this.multiInput.nextSibling)
-              this.currInsertIndex++;
-            setTimeout(() => {
-              this.multiInput.focus();
-            }, 20);
-            ev.preventDefault();
-            break;
-        }
-      }
-      // navigated to component via keyboard. Open with down.
-      if (this.hasFocus && !this.listOpen && ev.key === 'ArrowDown') {
-        this.openList();
-        this.currLiIndex = -1;
-      }
-      // Close when tabbing outside of element
-      if (this.hasFocus && ev.key === 'Tab') {
-        setTimeout(() => {
-          if (document.activeElement &&
-            closestElement(this.el.tagName.toLowerCase(), document.activeElement) !== this.el) {
-            this.listOpen = false;
-            this.onBlur();
-            return;
-          }
-        });
-      }
-      // list open, navigate items with arrows
-      if (this.listOpen) {
-        const selectedItem = this.getActiveOpt();
-        let testIndex = this.listItems.indexOf(selectedItem) || this.currLiIndex;
-        switch (ev.key) {
-          case 'ArrowDown':
-          case 'ArrowUp':
-            ev.preventDefault();
-            if (ev.key === 'ArrowDown')
-              testIndex++;
-            else if (ev.key === 'ArrowUp')
-              testIndex--;
-            if (testIndex < 0) {
-              this.currLiIndex = 0;
-              this.multiInput.focus();
-              return;
-            }
-            let foundIndex = this.listItems[testIndex]
-              ? testIndex
-              : this.currLiIndex;
-            setTimeout(() => {
-              this.listItems[foundIndex].focus();
-              this.currLiIndex = foundIndex;
-            }, 20);
-            return;
-          case 'Enter':
-          case ' ':
-            if (this.listItems[this.currLiIndex]) {
-              this.addValue(this.listItems[this.currLiIndex].dataset.value);
-              ev.preventDefault();
-            }
-            return;
-          case 'Escape':
-            this.listOpen = false;
-            return;
-        }
-      }
-      if (this.currLiIndex > -1)
-        ev.preventDefault();
+      this.inputSearchVal = ev.target.value.trim();
+      this.nanoSearchChange.emit({ value: ev.target.value.trim() });
     };
   }
+  get selectWrap() {
+    return this._selectWrap;
+  }
+  set selectWrap(ele) {
+    if (this._selectWrap === ele)
+      return;
+    this._selectWrap = ele;
+    this.setDataListOpts();
+  }
+  get datalist() {
+    return this._datalist;
+  }
+  set datalist(ele) {
+    if (this._datalist === ele)
+      return;
+    this._datalist = ele;
+    this.setDataListOpts();
+  }
+  /**
+   * This will be true when the control is in an invalid state.
+   * Validity is determined by the `required` prop. Or if custom validity message is set.
+   */
+  get invalid() {
+    return this._invalid;
+  }
+  /**
+   * The value of the select.
+   */
+  get value() {
+    return this._value;
+  }
+  set value(val) {
+    if (typeof val === 'string') {
+      if (this.multiple)
+        this._value = val.split(',');
+      else
+        this._value = val;
+    }
+    else if (Array.isArray(val)) {
+      if (this.multiple)
+        this._value = val;
+      else
+        this._value = val[0];
+    }
+  }
+  /**
+   * You can set options via js as an array of strings: `domElement.options = ['option 1', 'option 2']` or
+   * objects `domElement.options = [{label: 'option 1', value: 'opt-1'}]`. See `nano-option` docs for all available properties.
+   * Alternatively, you can nest `<nano-option>` elements within a `<nano-select>`
+   * Regardless - reading `options` will return the current component options - slotted or otherwise
+   */
+  get options() {
+    if (this._options.length)
+      return this._options;
+    if (!this.datalist || !this.datalist.activeOptions)
+      return [];
+    return this._eOptions.map((ao) => {
+      const { value, selected, label, filterMeta } = ao;
+      return { value, selected, label, filterMeta };
+    });
+  }
+  set options(opts) {
+    this._options = opts.map((opt) => {
+      if (typeof opt === 'string')
+        return { value: opt, label: opt };
+      else
+        return opt;
+    });
+  }
   debounceChanged() {
     this.nanoSearchChange = debounceEvent(this.nanoSearchChange, this.debounce);
   }
-  // @Watch('options')
   shouldValidate() {
     if (this.onInit)
       return;
     if (this.invalid)
-      this.showErrorMsg = this.invalid = false;
+      this.showErrorMsg = this._invalid = false;
     this.customValidate();
     if (this.validateOn !== 'dirty')
       return;
@@ -376,63 +373,24 @@ export class Select {
   /**
    * Update the native select element when the value changes
    */
+  // eslint-disable-next-line @stencil/no-unused-watch
   valueChanged() {
-    if (!this.watchValue)
-      return;
-    if (this.multiple) {
-      if (typeof this.value === 'string' && !!this.value.length)
-        this.value = this.value.split(',');
-      if (this.value === null ||
-        (typeof this.value === 'string' && !this.value.length))
-        this.value = [];
-      if (this.currInsertIndex > this.value.length - 1)
+    if (this.onInit) {
+      if (this.multiple)
         this.currInsertIndex = this.value.length - 1;
+      return;
     }
-    else if (typeof this.value !== 'string' && this.value && this.value[0])
-      this.value = this.value[0];
-    this.setNativeValue();
-    this.setAvailOpts();
     setTimeout((_) => this.shouldValidate(), 20);
     this.nanoChange.emit({ value: this.value });
-    if (this.onInit)
-      return;
-  }
-  optionsChanged() {
-    this.setAvailOpts();
-    if (this.hasFocus)
-      this.openList();
   }
-  /**
-   * Setup or rip down custom combobox when select is switched from mutliple
-   */
-  multiChange() {
-    this.switchValue();
-    if (this.multiple)
-      this.setupMulti();
-    else if (this.popover)
-      this.popover.destroy();
-  }
-  setupMulti() {
-    setTimeout(() => {
-      this.setAvailOpts();
-      this.popover = new Popover(this.selectWrap, this.multiList, {
-        placement: 'bottom-start',
-        skidding: 0,
-        distance: 0,
-        onTransitionEnd: () => {
-          if (!this.listOpen) {
-            this.multiList.scrollTop = 0;
-          }
-        },
-      });
-    }, 20);
-  }
-  listOpenChange() {
-    if (this.listOpen)
-      this.popover.show();
-    else
-      this.popover.hide();
+  setDataListOpts() {
+    if (!this.datalist || !this.selectWrap)
+      return;
+    const currDWConfig = this.datalist.dropDownConfig || {};
+    this.datalist.dropDownConfig = Object.assign(Object.assign(Object.assign({}, currDWConfig), this.dropDownConfig), { tetherTo: this.selectWrap });
+    this.datalist.input = this.inputCtrl;
   }
+  // Public Methods
   /**
    * Get the current state of the control.
    * @param validateFirst - perform validation first before reporting
@@ -451,10 +409,8 @@ export class Select {
    * `select.focus()`.
    */
   async setFocus() {
-    if (this.nativeSelect && !this.multiple)
-      this.nativeSelect.focus();
-    else if (this.multiInput)
-      this.multiInput.focus();
+    this.inputCtrl.focus();
+    setTimeout(() => this.inputCtrl.click(), 50);
   }
   /**
    * Returns the native `<select>` element used under the hood.
@@ -469,225 +425,62 @@ export class Select {
   async showError(message) {
     if (this.nativeSelect) {
       this.nativeSelect.setCustomValidity(message);
-      this.nativeSelect.reportValidity();
+      this.showInlineValidation();
     }
   }
   /* Logic */
-  // sets the available options of a multi select.
-  // Removes ones already selected
-  // Filters one if user starts to search
-  setAvailOpts() {
-    if (!this.multiple)
-      return;
-    this.availOpts = this.options.filter((opt) => {
-      let toFind = typeof opt === 'string' ? opt : opt['value'];
-      let strFilter = typeof opt === 'string' ? opt : opt['label'] || opt['value'];
-      if (!toFind)
-        return false;
-      return (!this.value.includes(toFind) &&
-        (!this.multiInput ||
-          strFilter.toLowerCase().indexOf(this.inputSearchVal.toLowerCase()) >
-            -1));
-    });
-  }
-  getNativeValue() {
-    const nsl = this.nativeSelect;
-    if (!nsl)
-      return '';
-    if (!this.multiple)
-      return nsl.options[nsl.selectedIndex] &&
-        nsl.options[nsl.selectedIndex].hasAttribute('value')
-        ? nsl.options[nsl.selectedIndex].value
-        : '';
-    else {
-      return Array.from(nsl.options).map((opt) => {
-        if (opt.selected && opt.hasAttribute('value'))
-          return opt.value;
-      });
-    }
-  }
-  setNativeValue() {
-    const nsl = this.nativeSelect;
-    if (!nsl)
-      return null;
-    if (!this.multiple)
-      nsl.value = this.value;
-    else {
-      Array.from(this.nativeSelect.options)
-        .filter((opt) => {
-        if (typeof this.value === 'string')
-          return opt.value === this.value;
-        else
-          return this.value.find((val) => {
-            if (typeof val === 'string')
-              return val === this.value;
-            else if (val['value'])
-              return val === val['value'];
-          });
-      })
-        .map((opt) => {
-        opt.selected = true;
-      });
-    }
+  get valArray() {
+    return typeof this.value === 'string'
+      ? this.value.length
+        ? [this.value]
+        : []
+      : this.value;
   }
   isValidValues() {
-    const nsl = this.nativeSelect;
-    if (!nsl)
-      return null;
-    const selected = this.nativeSelect.querySelectorAll('option:checked');
-    const values = Array.from(selected).map((el) => el.value || null);
-    if (this.multiple) {
-      return values.reduce((accumulator, currentValue) => {
-        if (!accumulator)
-          return false;
-        return !!this.options.find((opt) => opt['value'] ? opt['value'] === currentValue : opt === currentValue);
-      }, true);
-    }
-    else {
-      return this.options.find((opt) => opt['value'] ? opt['value'] === values[0] : opt === values[0]);
-    }
-  }
-  openList() {
-    if (!this.multiple)
-      return;
-    if ((this.availOpts.length ||
-      (!!this.inputSearchVal.length && this.allowCustomValues)) &&
-      (!this.max || (this.max && this.value.length < this.max)))
-      this.listOpen = true;
-    else
-      this.listOpen = false;
-  }
-  addValue(value) {
-    if (!this.multiple)
-      return;
-    if (this.value && this.value.length && this.value.includes(value))
-      return;
-    if (this.max && this.value.length === this.max)
-      return;
-    this.currInsertIndex++;
-    this.value = [
-      ...this.value.slice(0, this.currInsertIndex),
-      value,
-      ...this.value.slice(this.currInsertIndex),
-    ];
-    this.inputSearchVal = '';
-    this.setAvailOpts();
-    this.selectWrap.clientWidth; // force reflow
-    this.setFocus();
-    this.openList();
-  }
-  removeValue(toFind) {
-    if (!this.multiple || !this.value.length)
-      return;
-    if (!toFind)
-      toFind = this.value[this.value.length - 1];
-    this.value = this.value.filter((val) => val !== toFind);
-    if (this.currInsertIndex > this.value.length - 1)
-      this.currInsertIndex = this.value.length - 1;
-    this.selectWrap.clientWidth; // force reflow
-    this.setFocus();
-    this.openList();
-  }
-  switchValue() {
-    this.watchValue = false;
-    if (this.multiple) {
-      if (typeof this.value === 'string' && !!this.value.length)
-        this.value = this.value.split(',');
-      else
-        this.value = [];
-      this.currInsertIndex = Math.max(this.value.length - 1, 0);
-    }
-    else if (typeof this.value !== 'string' && this.value && this.value[0])
-      this.value = this.value[0];
-    this.watchValue = true;
-  }
-  isSelected(value) {
-    if (this.multiple)
-      return this.value.find((val) => val === value);
-    else
-      value === this.value;
-  }
-  getLabel(val) {
-    let foundVal = this.options.find((opt) => {
-      return opt['value'] ? opt['value'] === val : opt === val;
-    });
-    if (!foundVal)
-      return null;
-    return foundVal['label'] ? foundVal['label'] : foundVal;
+    return this.valArray.find((val) => this.options.find((opt) => opt.value === val));
   }
   slotChangeObserver() {
-    const mo = (this.mo = new MutationObserver((mrs) => this.processSlottedContent(mrs)));
+    const mo = (this.mo = new MutationObserver(() => this.processSlottedContent()));
     mo.observe(this.el, { childList: true, subtree: true });
   }
-  processSlottedContent(mutations) {
+  processSlottedContent() {
     // see if we have label / helper content
     this.hasLabelSlot = !!this.el.querySelectorAll('[slot="label"]').length;
     this.hasHelperSlot = !!this.el.querySelector('[slot="helper"]');
-    this.hasIconSlot = !!this.el.querySelector('[slot="icon"]');
-    if (!mutations) {
-      // find legacy select. Take attrs and apply to our element
-      let existingselect = this.el.querySelector('select:not([class*="sc-nano-select"])');
-      if (existingselect) {
-        Array.from(existingselect.attributes)
-          .filter((attr) => attr.specified && attr.nodeName in this)
-          .map((attr) => (this[attr.nodeName] = attr.nodeValue));
-      }
-      // find legacy label. Apply to our element
-      let existingLabel = this.el.querySelector('label:not([class*="sc-nano-select"])');
-      if (existingLabel)
-        this.label = this.label || existingLabel.innerHTML;
-      // find legacy slotted options. Apply them and add any relevant values
-      let legacyOpts = this.el.querySelectorAll('option:not([class*="sc-nano-select"])');
-      this.watchValue = false;
-      if (legacyOpts && legacyOpts.length) {
-        let options = [];
-        legacyOpts.forEach((option) => {
-          options.push({
-            label: option.label || option.innerText,
-            value: option.value,
-          });
-          if (!option.selected || !option.value)
-            return;
-          if (this.multiple)
-            this.value.push(option.value);
-          else
-            this.value = option.value;
-        });
-        this.options = options;
-      }
-      if (legacyOpts.length || existingLabel || existingselect) {
-        // empty all legacy slotted stuff
-        let children = this.el.querySelectorAll('[slot="legacy"]');
-        if (children)
-          children.forEach((n) => n.parentNode.removeChild(n));
-      }
-      this.watchValue = true;
+    // breaking change introduced in v2. Rm in v3
+    if (!!this.el.querySelector('select:not([class*="sc-nano-select"]) option')) {
+      console.warn('nesting `<option>` elements was removed in v2. Please update your code to use `<nano-option>` elements instead.', this.el);
     }
-    if (mutations &&
-      !Array.from(mutations[0].addedNodes).find((node) => node.nodeName.toLowerCase() === 'nano-select-option'))
-      return;
-    // find nano-select-options
-    let nanoOpts = this.el.querySelectorAll('nano-select-option');
-    if (nanoOpts && nanoOpts.length) {
-      let options = [];
-      nanoOpts.forEach((option) => {
-        options.push({
-          label: option.label || option.innerText,
-          value: option.value,
-        });
-        if (!option.selected || !option.value)
-          return;
-        if (this.multiple)
-          this.value.push(option.value);
-        else
-          this.value = option.value;
-      });
-      this.options = options;
+    // breaking change introduced in v2. Rm in v3
+    if (!!this.el.querySelector('[slot="legacy"]')) {
+      console.warn('The `legacy` slot has been removed. Please update your code', this.el);
     }
-    this.setAvailOpts();
   }
-  getActiveOpt() {
-    return this.multiList.querySelector('.has-focus');
+  getLabel(toFind) {
+    let label = this.options.find((opt) => {
+      var _a;
+      return !opt.disabled && ((_a = opt.value) === null || _a === void 0 ? void 0 : _a.length) && opt.value === toFind;
+    });
+    return label && label.label ? label.label : toFind;
+  }
+  /* Event handling */
+  handleBlur(e) {
+    if (!this.hasFocus)
+      return;
+    const kev = e;
+    let target;
+    raf(() => {
+      if (kev.key) {
+        if (kev.key !== 'Tab')
+          return;
+        target = getActiveElement();
+      }
+      else
+        target = e.target;
+      if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {
+        this.onBlur();
+      }
+    });
   }
   /* Stencil Component lifecycle hooks */
   connectedCallback() {
@@ -697,7 +490,6 @@ export class Select {
     this.el.dispatchEvent(new CustomEvent('nanoDidLoad', {
       detail: this.el,
     }));
-    testLegacyStyle(this.el);
   }
   disconnectedCallback() {
     document.dispatchEvent(new CustomEvent('nanoDidUnload', {
@@ -707,133 +499,92 @@ export class Select {
       return;
     if (this.mo)
       this.mo.disconnect();
-    if (this.popover)
-      this.popover.destroy();
   }
   componentDidLoad() {
     this.slotChangeObserver();
-    if (this.multiple)
-      this.setupMulti();
     this.customValidate();
+    this.setDataListOpts();
+    raf(() => (this.onInit = false));
   }
   componentWillLoad() {
-    this.switchValue();
     this.processSlottedContent();
-    this.onInit = false;
-  }
-  renderLabel(labelId, position) {
-    let classes = {};
-    if (position === 'float') {
-      classes = { 'placeholder-as-label': true };
-    }
-    else {
-      classes = { label: true, 'visually-hide': this.hideLabel };
-    }
-    if (!this.label && !this.hasLabelSlot)
-      return;
-    return (h("label", { class: classes, htmlFor: this.selectId, id: labelId },
-      this.label && this.label,
-      !this.label && !!this.hasLabelSlot && h("slot", { name: "label" })));
   }
   render() {
     const labelId = this.selectId + '-lbl';
     const moreId = this.showInlineError || this.hasHelperSlot
       ? this.selectId + '-moreId'
       : '';
-    const listId = this.selectId + '-list';
     this.rtl = this.el.ownerDocument.dir === 'rtl';
-    this.listItems = [];
     this.valueItems = [];
-    if (this.placeholder &&
-      (!this.options[0] || this.options[0]['label'] !== this.placeholder)) {
-      this.options.unshift({ label: this.placeholder, value: '' });
-    }
-    let optionMenu = this.listOpen;
-    let valueMarkup;
-    if (this.multiple) {
-      let input = (h("input", { class: "multi-input", id: this.selectId, ref: (input) => (this.multiInput = input), disabled: this.disabled, autoFocus: this.autofocus, autocomplete: "off", onInput: this.onMultiInput, value: this.inputSearchVal, onTouchStart: this.onClick, onMouseDown: this.onClick, onFocus: this.onFocus, onBlur: this.onMultiInputBlur, placeholder: this.placeholder && !this.floatLabel && !this.value.length
-          ? this.placeholder
-          : '', role: this.multiple ? 'combobox' : '', "aria-labelledby": labelId + ' ' + moreId, "aria-controls": listId, "aria-expanded": optionMenu ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false', "aria-autocomplete": "list" }));
-      if (!!this.value.length) {
-        valueMarkup = this.value.map((val, i) => {
-          let label = this.options.find((opt) => {
-            return opt['value'] ? opt['value'] === val : opt === val;
-          });
-          label = label && label['label'] ? label['label'] : val;
-          let toReturn = (h("span", { onDragStart: this.onDragStart, onDragLeave: this.onDragLeave, onDragEnd: this.onDragEnd, draggable: true, "data-value": val, ref: (span) => this.valueItems.push(span), class: "multi-value" },
-            h("span", null, label),
-            h("button", { class: "multi-value-remove", type: "button", tabindex: "-1", onTouchEnd: () => {
-                this.removeValue(val);
-              }, onMouseUp: () => {
-                this.removeValue(val);
-              } },
-              h("nano-icon", { name: "light/times" }))));
-          if (i === 0 && this.currInsertIndex < 0)
-            toReturn = [input, toReturn];
-          else if (i === this.currInsertIndex)
-            toReturn = [toReturn, input];
-          return toReturn;
-        });
-      }
-      else
-        valueMarkup = input;
-    }
-    return (h(Host, { type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'has-value': !!this.value.length || !!this.inputSearchVal.length, 'has-focus': this.hasFocus, 'is-invalid': this.invalid, 'has-label': this.label !== null && !this.floatLabel, 'has-float-label': this.label !== null && this.floatLabel, rtl: this.rtl, 'has-multiple': this.multiple, 'multi-list-open': this.listOpen, 'has-clr-btn': this.clearSelect, masked: this.mask, legacy: this.isLegacy }), onClick: this.onHostClick },
-      !this.floatLabel && this.renderLabel(labelId),
-      h("div", { class: "select", ref: (div) => (this.selectWrap = div) },
-        this.floatLabel && this.renderLabel(labelId, 'float'),
-        h("div", { class: {
-            'native-select-wrap': true,
-            'native-select-wrap--multiple': this.multiple,
+    const compWrapOptions = (({ el, floatLabel, label, errorMessage, showInlineError, hasHelperSlot, hasLabelSlot, hideLabel, placeholder, rtl, }) => ({
+      el,
+      floatLabel,
+      label,
+      errorMessage,
+      showInlineError,
+      hasHelperSlot,
+      hasLabelSlot,
+      hideLabel,
+      placeholder,
+      rtl,
+    }))(this);
+    const wrapOptions = Object.assign(Object.assign({}, compWrapOptions), { labelId,
+      moreId, hasValue: !!this.value.length || !!this.inputSearchVal.length, controlId: this.selectId });
+    const controlOptions = (({ readonly, disabled }) => ({
+      readonly,
+      disabled,
+      clearControl: this.clearSelect,
+    }))(this);
+    return (h(Host, { type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'has-value': !!this.value.length || !!this.inputSearchVal.length, 'has-focus': this.hasFocus, 'is-invalid': this.invalid, 'has-label': this.label !== null && !this.floatLabel, 'has-float-label': this.label !== null && this.floatLabel, rtl: this.rtl, 'has-multiple': this.multiple, 'has-clr-btn': this.clearSelect, masked: this.mask, legacy: this.isLegacy }) },
+      h(FormControlWrap, Object.assign({}, wrapOptions),
+        h(FormControl, Object.assign({}, controlOptions, { onClearText: this.clearSelectValue, control: this.el, ref: (el) => (this.selectWrap = el), endValueSlot: h("slot", { name: "down-arrow" },
+            h("nano-icon", { slot: "value-end", name: "light/chevron-down" })) }),
+          this.multiple && (h("div", { class: "multi-wrap" }, this.multipleValues(labelId, moreId))),
+          !this.multiple && [
+            this.mask && (h("div", { class: "select-mask" }, this.getLabel(this.value))),
+            h("input", { id: this.selectId, class: "native-input", ref: (input) => (this.inputCtrl = input), "aria-labelledby": labelId + ' ' + moreId, disabled: this.disabled, form: this.form, placeholder: !this.floatLabel && this.placeholder ? this.placeholder : '', readOnly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
+          ])),
+      !this.readonly && !this.disabled && (h("nano-datalist", { onNanoOptionsUpdated: this.setOptions, ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selctMulti' : 'select', onNanoSelect: this.setValue, onNanoDeselect: (e) => {
+          e.preventDefault();
+          this.removeValue(e.detail.value);
+        }, options: this._options.length ? this._options : undefined },
+        this.allowCustomValues && this.multiple && !!this.inputSearchVal && (h("nano-option", { slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() },
+          h("span", { slot: "check-icon" }),
+          "Add '",
+          this.inputSearchVal,
+          "'")),
+        h("slot", null))),
+      h("select", { id: this.selectId + '-hidden', class: "native-select", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid },
+        this.allowCustomValues &&
+          this.valArray.map((val) => {
+            return (h("option", { value: val, selected: true }, val));
+          }),
+        !this.allowCustomValues &&
+          this.options.map((opt) => {
+            return (h("option", { value: opt.value, selected: this.valArray.includes(opt.value), disabled: opt.disabled, label: opt.label }, this.valArray.includes(opt.value)));
+          }))));
+  }
+  multipleValues(labelId, moreId) {
+    let input = (h("input", { class: "multi-input", id: this.selectId, ref: (input) => (this.inputCtrl = input), readOnly: this.readonly, disabled: this.disabled, autoFocus: this.autofocus, autocomplete: "off", onKeyDown: this.handleDocumentKeyDown, onInput: this.onMultiInput, value: this.inputSearchVal, onTouchStart: this.onClick, onMouseDown: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder && !this.floatLabel && !this.value.length
+        ? this.placeholder
+        : '', "aria-labelledby": labelId + ' ' + moreId }));
+    if (!this.value.length)
+      return input;
+    return this.value.map((val, i) => {
+      let toReturn = (h("span", { onDragStart: this.onDragStart, onDragLeave: this.onDragLeave, onDragEnd: this.onDragEnd, onDragOver: (e) => e.preventDefault(), draggable: true, "data-value": val, ref: (span) => this.valueItems.push(span), class: "multi-value" },
+        h("span", null, this.getLabel(val)),
+        h("button", { class: "multi-value-remove", type: "button", tabindex: "-1", onTouchEnd: () => {
+            this.removeValue(val);
+          }, onMouseUp: () => {
+            this.removeValue(val);
           } },
-          !this.multiple && this.mask && (h("div", { class: "select-mask" }, this.getLabel(this.value))),
-          this.multiple && [
-            h("div", { class: "multi-wrap" }, valueMarkup),
-            h("ul", { role: "listbox", ref: (ul) => (this.multiList = ul), "aria-multiselectable": "true", "aria-required": this.required, "aria-expanded": optionMenu ? 'true' : 'false', "aria-hidden": !optionMenu, hidden: !optionMenu, id: listId, class: {
-                'multi-select-box': true,
-                'multi-select-box--open': optionMenu,
-              } },
-              this.allowCustomValues && this.inputSearchVal.length > 0 && (h("li", { "data-value": this.inputSearchVal, role: "option", tabindex: "-1", ref: (li) => this.listItems.push(li), onMouseDown: () => {
-                  this.addValue(this.inputSearchVal);
-                }, onFocus: this.onOptFocus },
-                "Add ",
-                this.inputSearchVal)),
-              this.availOpts.map((option) => {
-                let optval, label;
-                if (option['value']) {
-                  optval = option['value'];
-                  label = option['label'] || option['value'];
-                }
-                else if (typeof option === 'string') {
-                  optval = option;
-                  label = optval;
-                }
-                if (!optval)
-                  return;
-                return (h("li", { role: "option", key: optval, "data-value": optval, ref: (li) => this.listItems.push(li), tabindex: "-1", "aria-selected": this.isSelected(optval) ? 'true' : 'false', onMouseDown: () => {
-                    this.addValue(optval);
-                  }, onFocus: this.onOptFocus }, label));
-              })),
-            h("select", { id: this.selectId + '-hidden', class: "native-select", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid }, this.value.map((val) => {
-              return (h("option", { value: val, selected: true }, val));
-            })),
-          ],
-          !this.multiple && (h("select", { id: this.selectId, class: "native-select", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId, disabled: this.disabled, form: this.form, autoFocus: this.autofocus, multiple: this.multiple, name: this.name, required: this.required, size: this.size, onBlur: this.onBlur, onFocus: this.onFocus, onInvalid: this.handleInvalid, onChange: this.onChange },
-            this.options.map((option, i) => {
-              if (option['value'] || option['label'])
-                return (h("option", { key: option['label'] + i, label: option['label'], value: option['value'], selected: option['value'] === this.value ||
-                    (!this.value && !option['value']), disabled: !option['value'] && this.required }, option['label'] ? option['label'] : option['value']));
-              else
-                return (h("option", { key: option + i, value: option, selected: option === this.value }, option));
-            }),
-            h("slot", { name: "legacy" }))),
-          this.clearSelect && !this.readonly && !this.disabled && (h("button", { type: "button", class: "select-clear-icon", tabindex: "-1", onTouchEnd: this.clearSelectValue, onMouseUp: this.clearSelectValue },
-            h("nano-icon", { name: "light/times" }))),
-          h("div", { onTouchEnd: this.onClick, onMouseUp: this.onClick, class: "select-down-icon" }, this.hasIconSlot ? (h("slot", { name: "icon" })) : (h("nano-icon", { name: "regular/chevron-down" }))))),
-      (this.showInlineError || this.hasHelperSlot) && (h("div", { class: "more", id: moreId },
-        !!this.showInlineError ? (h("div", { class: "error" }, this.errorMessage)) : (''),
-        h("div", { class: "helper" },
-          h("slot", { name: "helper" }))))));
+          h("nano-icon", { name: "light/times" }))));
+      if (i === 0 && this.currInsertIndex < 0)
+        toReturn = [input, toReturn];
+      else if (i === this.currInsertIndex)
+        toReturn = [toReturn, input];
+      return toReturn;
+    });
   }
   static get is() { return "nano-select"; }
   static get encapsulation() { return "scoped"; }
@@ -846,7 +597,7 @@ export class Select {
   static get properties() { return {
     "invalid": {
       "type": "boolean",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -858,7 +609,7 @@ export class Select {
         "tags": [],
         "text": "This will be true when the control is in an invalid state.\nValidity is determined by the `required` prop. Or if custom validity message is set."
       },
-      "getter": false,
+      "getter": true,
       "setter": false,
       "attribute": "invalid",
       "reflect": true,
@@ -873,7 +624,7 @@ export class Select {
         "references": {
           "Color": {
             "location": "import",
-            "path": "/builds/YGFYbT4i/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/vyiT33Zh/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -980,7 +731,7 @@ export class Select {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "String to place within a label element."
+        "text": "String to place within a label element. Alternatively use the 'label' slot"
       },
       "getter": false,
       "setter": false,
@@ -1103,7 +854,7 @@ export class Select {
       "getter": false,
       "setter": false,
       "attribute": "readonly",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "required": {
@@ -1224,37 +975,37 @@ export class Select {
     },
     "value": {
       "type": "string",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
-        "original": "string | Array<string | null>",
+        "original": "string | string[]",
         "resolved": "string | string[]",
-        "references": {
-          "Array": {
-            "location": "global"
-          }
-        }
+        "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "The value of the select."
       },
-      "getter": false,
-      "setter": false,
+      "getter": true,
+      "setter": true,
       "attribute": "value",
       "reflect": false,
-      "defaultValue": "this.multiple\n    ? []\n    : ''"
+      "defaultValue": "this.multiple ? [] : ''"
     },
     "options": {
       "type": "unknown",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
-        "original": "Array<\n    string | { label: string; value?: string }\n  >",
-        "resolved": "(string | { label: string; value?: string; })[]",
+        "original": "Array<OptionInterface | string>",
+        "resolved": "(string | OptionInterface)[]",
         "references": {
           "Array": {
             "location": "global"
+          },
+          "OptionInterface": {
+            "location": "import",
+            "path": "/builds/vyiT33Zh/0/Digital/nano-components/packages/components/src/components/option/option-interface.ts"
           }
         }
       },
@@ -1262,11 +1013,10 @@ export class Select {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "You can set options via js. domElement.options = ['option 1', 'option 2'] or [{label: 'option 1', value: 'opt-1'}]"
+        "text": "You can set options via js as an array of strings: `domElement.options = ['option 1', 'option 2']` or\nobjects `domElement.options = [{label: 'option 1', value: 'opt-1'}]`. See `nano-option` docs for all available properties.\nAlternatively, you can nest `<nano-option>` elements within a `<nano-select>`\nRegardless - reading `options` will return the current component options - slotted or otherwise"
       },
-      "getter": false,
-      "setter": false,
-      "defaultValue": "[]"
+      "getter": true,
+      "setter": true
     },
     "clearSelect": {
       "type": "boolean",
@@ -1328,38 +1078,42 @@ export class Select {
       "reflect": false,
       "defaultValue": "0"
     },
-    "native": {
-      "type": "boolean",
-      "mutable": false,
+    "dropDownConfig": {
+      "type": "unknown",
+      "mutable": true,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+        "original": "Partial<Dropdown>",
+        "resolved": "{ host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: \"top\" | \"top-start\" | \"top-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"right\" | \"right-start\" | \"right-end\" | \"left\" | \"left-start\" | \"left-end\"; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; }",
+        "references": {
+          "Partial": {
+            "location": "global"
+          },
+          "Dropdown": {
+            "location": "import",
+            "path": "/builds/vyiT33Zh/0/Digital/nano-components/packages/components/src/components/dropdown/dropdown.tsx"
+          }
+        }
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": "Whether to use native <select> elements. Setting to false will use a similar UI as multiple=\"true\""
+        "text": "nano-dropdown config options you can pass to the nested dropdown component"
       },
       "getter": false,
       "setter": false,
-      "attribute": "native",
-      "reflect": false,
-      "defaultValue": "true"
+      "defaultValue": "{}"
     }
   }; }
   static get states() { return {
     "currInsertIndex": {},
-    "availOpts": {},
     "showErrorMsg": {},
     "errorMessage": {},
     "hasFocus": {},
-    "listOpen": {},
-    "isLegacy": {},
     "hasLabelSlot": {},
     "hasHelperSlot": {},
-    "hasIconSlot": {}
+    "inputSearchVal": {},
+    "_eOptions": {}
   }; }
   static get events() { return [{
       "method": "nanoChange",
@@ -1377,7 +1131,7 @@ export class Select {
         "references": {
           "SelectChangeEventDetail": {
             "location": "import",
-            "path": "/builds/YGFYbT4i/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/vyiT33Zh/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1463,7 +1217,7 @@ export class Select {
         "references": {
           "InputChangeEventDetail": {
             "location": "import",
-            "path": "/builds/YGFYbT4i/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/vyiT33Zh/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1486,7 +1240,7 @@ export class Select {
         "references": {
           "ControlValidityEventDetail": {
             "location": "import",
-            "path": "/builds/YGFYbT4i/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/vyiT33Zh/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1508,7 +1262,7 @@ export class Select {
           },
           "ControlValidity": {
             "location": "import",
-            "path": "/builds/YGFYbT4i/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/vyiT33Zh/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         },
         "return": "Promise<ControlValidity>"
@@ -1605,15 +1359,21 @@ export class Select {
       "propName": "value",
       "methodName": "valueChanged"
     }, {
-      "propName": "options",
-      "methodName": "optionsChanged"
-    }, {
-      "propName": "multiple",
-      "methodName": "multiChange"
+      "propName": "dropDownConfig",
+      "methodName": "setDataListOpts"
+    }]; }
+  static get listeners() { return [{
+      "name": "mousedown",
+      "method": "handleBlur",
+      "target": "body",
+      "capture": false,
+      "passive": true
     }, {
-      "propName": "listOpen",
-      "methodName": "listOpenChange"
+      "name": "keydown",
+      "method": "handleBlur",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }]; }
 }
-let selectIds = 0;
 //# sourceMappingURL=select.js.map