/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { proxyCustomElement, HTMLElement, createEvent, Build, Host } from '@stencil/core/internal/client';
import { h } from './renderer.js';
import { g as getActiveElement } from './active-element.js';
import { c as closestElement } from './dom.js';
import { a as debounceEvent } from './throttle.js';
import { F as FormControlWrap, a as FormControl } from './form-control.js';
import { d as defineCustomElement$8 } from './datalist.js';
import { d as defineCustomElement$7 } from './dropdown.js';
import { d as defineCustomElement$6 } from './icon.js';
import { d as defineCustomElement$5 } from './icon-button.js';
import { d as defineCustomElement$4 } from './menu.js';
import { d as defineCustomElement$3 } from './option.js';
import { d as defineCustomElement$2 } from './tag.js';
import { d as defineCustomElement$1 } from './tooltip.js';

const selectCss = ".sc-nano-select-h, *.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n  box-sizing: border-box;\n}\n[hidden].sc-nano-select {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    .sc-nano-select-h, *.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }.sc-nano-select-h, *.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n  box-sizing: border-box;\n}\n[hidden].sc-nano-select {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    .sc-nano-select-h, *.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }slot-fb.sc-nano-select {\n  display: contents !important;\n}\n\n[disabled].sc-nano-select-h:not([disabled=false]) {\n  opacity: 0.5;\n  position: relative;\n}\n[disabled].sc-nano-select-h:not([disabled=false])::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  cursor: not-allowed;\n}\n\n.form-ctrl.sc-nano-select {\n  min-inline-size: 100%;\n  display: block;\n}\n.form-ctrl.has-helper-end.sc-nano-select {\n  display: flex;\n  gap: 1rem;\n  container-type: inline-size;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__wrapper.sc-nano-select {\n  flex: 1 1 100%;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__helper-end.sc-nano-select {\n  display: none;\n}\n@container (min-width: 350px) {\n  .form-ctrl.has-helper-end .form-ctrl__helper-end {\n    display: block !important;\n  }\n  .form-ctrl.has-helper-end .form-ctrl__helper {\n    display: none !important;\n  }\n}\n\n.form-ctrl__wrapper.sc-nano-select {\n  display: block;\n}\n\nlabel.sc-nano-select, .form-ctrl__more.sc-nano-select, .form-ctrl__error.sc-nano-select, .form-ctrl__helper.sc-nano-select {\n  display: block;\n}\nlabel.visually-hide.sc-nano-select, .form-ctrl__more.visually-hide.sc-nano-select, .form-ctrl__error.visually-hide.sc-nano-select, .form-ctrl__helper.visually-hide.sc-nano-select {\n  clip-path: inset(50%);\n  block-size: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  inline-size: 1px;\n}\n\n.form-ctrl__float-label.sc-nano-select {\n  padding-block: 0;\n  padding-inline: var(--padding-start) 0;\n  color: var(--label-color);\n  position: absolute;\n  font-size: 1em;\n  transform: translateY(-50%);\n  inset-block-start: 50%;\n  transition: all 0.125s ease-in;\n  opacity: 1;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n  transform: none;\n  font-size: 0.75em;\n  opacity: 0.7;\n  inset-block-start: var(--padding-top);\n}\n.form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__label.sc-nano-select {\n  color: var(--label-color);\n  font-size: var(--label-font-size);\n  padding-block-end: var(--padding-bottom);\n  line-height: 1;\n  display: flex;\n  align-items: center;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-wrap.sc-nano-select {\n  flex: 1;\n  overflow-x: clip;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n  margin-block: unset;\n  margin-inline: 0 5px;\n  opacity: 0;\n  appearance: none;\n  transition: 0.3s ease opacity;\n  font-size: 0.85em;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  margin-block: unset;\n  margin-inline: auto 0;\n  font-size: var(--nano-font-size-2xs);\n  opacity: 0.5;\n}\n.has-value.sc-nano-select-h .form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n  opacity: 0.5;\n}\n\n.has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__more.sc-nano-select {\n  position: relative;\n  margin-block: var(--padding-bottom) 0;\n  margin-inline: 0;\n  opacity: 0;\n  display: none;\n  transition: all var(--nano-transition-fast) ease;\n  transition-behavior: allow-discrete;\n}\n.form-ctrl__more.sc-nano-select > *.sc-nano-select {\n  grid-column: 1;\n  grid-row: 1;\n}\n.has-helper.sc-nano-select .form-ctrl__more.sc-nano-select, .has-error.sc-nano-select .form-ctrl__more.sc-nano-select {\n  display: grid;\n  opacity: 1;\n}\n\n.form-ctrl__helper.sc-nano-select, .form-ctrl__error.sc-nano-select {\n  font-size: var(--more-font-size);\n  line-height: 1.2;\n  transition: 0.3s ease-out opacity;\n}\n\n.form-ctrl__helper.sc-nano-select {\n  font-style: italic;\n  color: var(--help-msg-color);\n}\n[show-inline-error].sc-nano-select-h:not([show-inline-error=false]).is-invalid .form-ctrl__helper.sc-nano-select {\n  opacity: 0;\n}\n\n.form-ctrl__helper-end.sc-nano-select {\n  flex: 1 1 30%;\n  min-inline-size: 150px;\n  font-size: var(--invalid-msg-font-size);\n  color: var(--help-msg-color);\n  font-style: italic;\n}\n\n.form-ctrl__error.sc-nano-select {\n  opacity: 0;\n  color: var(--invalid-msg-color);\n  font-style: italic;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__error.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  border-radius: var(--input-border-radius);\n  inline-size: 100%;\n  padding: 0 !important;\n  position: relative;\n  flex: 1 0 auto;\n  display: flex;\n  background: var(--input-bg-color);\n  border: var(--input-border-style) var(--input-border-width);\n  font-size: var(--input-font-size);\n  padding-inline-start: calc(var(--input-invalid-border-hint-width) - var(--input-border-width)) !important;\n}\n.form-ctrl__input.sc-nano-select:focus-visible, .form-ctrl__input.sc-nano-select:focus-within, .has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select {\n  outline: var(--nano-focus-ring-color) solid 3px;\n  outline-offset: -2px;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n  border-inline-start: solid var(--color-invalid) var(--input-invalid-border-hint-width);\n  padding-inline-start: 0 !important;\n}\n.is-invalid.has-focus.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n  border-color: var(--color-invalid);\n  border-inline-start: solid var(--color-invalid) var(--input-invalid-border-hint-width);\n  padding-inline-start: 0 !important;\n}\n\n.form-ctrl__input-wrap.sc-nano-select {\n  display: flex;\n  flex: 1;\n  max-inline-size: 100%;\n  align-items: center;\n}\n[type=textarea].sc-nano-select-h .form-ctrl__input-wrap.sc-nano-select {\n  align-items: start;\n}\n\n.form-ctrl__clear-btn.sc-nano-select, .form-ctrl__slot-end.sc-nano-select, .form-ctrl__slot-start.sc-nano-select, .form-ctrl__slot-value-end.sc-nano-select {\n  margin-block: 0;\n  margin-inline: 0;\n  font-size: 1em;\n  border: 0;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  display: flex;\n  align-items: center;\n  inline-size: auto;\n  padding-inline-end: var(--padding-end);\n  padding-block: var(--padding-top) var(--padding-bottom);\n}\n.form-ctrl__clear-btn.sc-nano-select:empty, .form-ctrl__slot-end.sc-nano-select:empty, .form-ctrl__slot-start.sc-nano-select:empty, .form-ctrl__slot-value-end.sc-nano-select:empty {\n  display: none;\n}\n\n.form-ctrl__slot-end.sc-nano-select {\n  padding-block: calc(var(--padding-top) / 2) calc(var(--padding-bottom) / 2);\n}\n\n.form-ctrl__slot-start.sc-nano-select {\n  padding-inline-end: 0;\n}\n.has-float-label.sc-nano-select .form-ctrl__slot-start.sc-nano-select {\n  display: none;\n}\n\n.form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start .sc-nano-select-s > *, .form-ctrl__slot-end.sc-nano-select-s > *, .form-ctrl__slot-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > :not(slot-fb), .form-ctrl__slot-value-end .sc-nano-select-s > :not(slot-fb) {\n  padding-inline: unset;\n  align-items: center;\n  display: flex;\n  block-size: 100%;\n  z-index: 1;\n}\n.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s > *, .form-ctrl__slot-end .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s > :not(slot-fb), .form-ctrl__slot-value-end .sc-nano-select-s > :not(slot-fb) {\n  pointer-events: none;\n}\n\n.form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start .sc-nano-select-s > * {\n  margin-inline: var(--padding-start) 0;\n}\n\n.form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n  pointer-events: none;\n}\n\n.form-ctrl__clear-btn.sc-nano-select {\n  color: var(--clear-btn-color);\n  padding: 0;\n  opacity: 0;\n  inline-size: 0;\n  appearance: none;\n  align-items: center;\n  overflow: hidden;\n  padding-block: var(--padding-top) var(--padding-bottom);\n}\n.is-invalid.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n  color: var(--clear-btn-color--invalid);\n}\n.has-value.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n  padding-inline: 0 var(--padding-end);\n  opacity: 1;\n  inline-size: auto;\n}\n.form-ctrl__clear-btn.sc-nano-select:hover {\n  color: var(--clear-btn-color--hover);\n}\n\n.form-ctrl__validation-icon.sc-nano-select {\n  padding-block: var(--padding-top) var(--padding-bottom);\n  padding-inline-end: var(--padding-end);\n  display: grid;\n  grid-template-areas: \"overlay\";\n}\n.sc-nano-select-h:not(.is-invalid .form-ctrl__validation-icon.sc-nano-select, .is-valid).sc-nano-select-h .form-ctrl__validation-icon.sc-nano-select {\n  display: none;\n}\n\n.form-ctrl__error-icon.sc-nano-select, .form-ctrl__success-icon.sc-nano-select {\n  color: var(--color-valid);\n  opacity: 0;\n  transition: 0.3s ease-out opacity;\n  grid-area: overlay;\n}\n\n.is-valid.sc-nano-select-h .form-ctrl__success-icon.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__error-icon.sc-nano-select {\n  color: var(--color-invalid);\n}\n.is-invalid.sc-nano-select-h .form-ctrl__error-icon.sc-nano-select {\n  opacity: 1;\n}\n\n.sc-nano-select-h {\n  \n  --placeholder-color: var(--nano-color-neutral-1000);\n  --padding-top: var(--nano-spacing-sm);\n  --padding-end: var(--nano-spacing-sm);\n  --padding-bottom: var(--nano-spacing-sm);\n  --padding-start: var(--nano-spacing-sm);\n  --color-invalid: var(--nano-color-danger-1100);\n  --color-valid: var(--nano-color-success-1000);\n  --input-font-size: var(--nano-font-size-sm);\n  --input-text-color: var(--nano-color-base-1000);\n  --input-border-width: 1px;\n  --input-border-color: var(--nano-color-neutral-300);\n  --input-border-radius: 0px;\n  --input-invalid-border-hint-width: 2px;\n  --input-border-style: solid var(--input-border-color);\n  --input-border-style--focus: solid var(--input-border-width) var(--nano-color-primary-700);\n  --input-bg-color: var(--nano-color-base-0);\n  --invalid-msg-color: var(--color-invalid);\n  --help-msg-color: var(--nano-color-base-1000);\n  --more-font-size: var(--nano-font-size-2xs);\n  --clear-btn-color: rgb(var(--nano-color-base-rgb-1000) / 60%);\n  --clear-btn-color--hover: rgb(var(--nano-color-base-rgb-1000) / 100%);\n  --clear-btn-color--invalid: rgb(var(--color-invalid) / 100%);\n  --label-color: var(--nano-color-base-1000);\n  --label-font-size: var(--nano-font-size-xs);\n  \n  position: relative;\n  inline-size: 100%;\n  padding: 0 !important;\n  display: block;\n}\n\n[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select {\n  pointer-events: none !important;\n}\n\nselect.sc-nano-select {\n  display: none;\n}\n\n.select__native-input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding: unset;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  text-overflow: ellipsis;\n  color: var(--input-text-color);\n  display: inline-block;\n  flex: 1;\n  inline-size: 100%;\n  max-inline-size: 100%;\n  max-block-size: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\n  appearance: none;\n  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n  cursor: default;\n  line-height: 2.5em;\n  \n  \n}\n.has-float-label.sc-nano-select .select__native-input.sc-nano-select {\n  line-height: 2.1em;\n  min-block-size: 2.1em;\n  padding-block-start: 1.4em;\n}\n.select__native-input.sc-nano-select::selection {\n  background: transparent;\n  color: var(--input-text-color);\n}\n.select__native-input.sc-nano-select::-moz-selection {\n  background: transparent;\n  color: var(--input-text-color);\n}\n.select__native-input.sc-nano-select::placeholder {\n  color: var(--placeholder-color);\n  font-family: inherit;\n  font-style: initial;\n  font-weight: initial;\n  line-height: inherit;\n  min-block-size: initial;\n}\n.select__native-input.sc-nano-select::-moz-placeholder {\n  line-height: 2.8em;\n  text-overflow: ellipsis;\n}\n.select__native-input.sc-nano-select:-webkit-autofill {\n  background-color: transparent;\n}\n.select__native-input.sc-nano-select::-webkit-search-decoration, .select__native-input.sc-nano-select::-webkit-search-cancel-button, .select__native-input.sc-nano-select::-webkit-search-results-button, .select__native-input.sc-nano-select::-webkit-search-results-decoration {\n  appearance: none;\n}\n.select__native-input.sc-nano-select:invalid {\n  box-shadow: none;\n}\n.select__native-input.sc-nano-select::-ms-clear, .select__native-input.sc-nano-select::-ms-reveal {\n  display: none;\n}\n.select__native-input.resizable.sc-nano-select {\n  resize: vertical;\n  overflow: auto;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select {\n  line-height: 1.5em;\n  padding-block: var(--padding-top) var(--padding-bottom);\n  white-space: pre-wrap;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::placeholder {\n  line-height: 1.5em;\n}\n.has-float-label.textarea.sc-nano-select .select__native-input.sc-nano-select {\n  padding-block-start: 1.8em;\n}\n.masked.sc-nano-select .select__native-input.sc-nano-select {\n  opacity: 0;\n  position: absolute;\n  inset-inline-start: 0;\n  inset-block-start: 0;\n}\n\n.select__mask.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  pointer-events: none;\n  line-height: 2.5em;\n  min-block-size: 2.5em;\n}\n\n.select__down-arrow.sc-nano-select {\n  color: var(--nano-color-primary-1200);\n  transition: rotate var(--nano-transition-x-fast) linear;\n}\n.is-open.sc-nano-select .select__down-arrow.sc-nano-select {\n  rotate: 180deg;\n}\n\n.select__multi-wrap.sc-nano-select {\n  padding-block: 0 var(--padding-bottom);\n  padding-inline: 0;\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  overflow: hidden;\n  align-items: flex-start;\n}\n.has-float-label.sc-nano-select .select__multi-wrap.sc-nano-select {\n  padding-block-start: 1em;\n}\n\n.select__multi-input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: var(--padding-bottom) 0;\n  min-inline-size: 50px;\n  inline-size: 100%;\n  max-block-size: 100%;\n  appearance: none;\n  border: 0;\n  outline: none;\n  display: inline-block;\n  background: transparent;\n  flex: 0;\n  position: relative;\n  box-sizing: border-box;\n  line-height: calc(2.5em - var(--padding-bottom));\n  block-size: calc(2.5em - var(--padding-bottom));\n}\n.select__multi-input.sc-nano-select:not(:has(~ nano-tag)) {\n  flex: 1;\n}\n\nnano-tag.sc-nano-select {\n  --color-non-interactive: var(--nano-color-primary-1000);\n  margin-block: var(--padding-bottom) 0;\n  margin-inline: var(--padding-start) 0;\n  line-height: 1.4;\n}\n\n.form-ctrl__float-label.sc-nano-select {\n  inline-size: calc(100% - (1em + var(--padding-start) * 2));\n}\n\n.has-focus.sc-nano-select-h select.sc-nano-select, .has-focus.sc-nano-select-h a.sc-nano-select, .has-focus.sc-nano-select-h button.sc-nano-select {\n  pointer-events: auto;\n}";

let selectIds = 0;
const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.nanoChange = createEvent(this, "nanoChange", 7);
        this.nanoBlur = createEvent(this, "nanoBlur", 7);
        this.nanoFocus = createEvent(this, "nanoFocus", 7);
        this.nanoDidLoad = createEvent(this, "nanoDidLoad", 7);
        this.nanoDidUnload = createEvent(this, "nanoDidUnload", 7);
        this.nanoSearchChange = createEvent(this, "nanoSearchChange", 7);
        this.nanoValidate = createEvent(this, "nanoValidate", 7);
    }
    nativeSelect;
    valueItems = [];
    dragVal;
    mo;
    selectId = `nano-select-${selectIds++}`;
    rtl = false;
    onInit = true;
    customError = '';
    get inputCtrl() {
        return this._inputCtrl;
    }
    set inputCtrl(input) {
        if (input === this._inputCtrl)
            return;
        this._inputCtrl = input;
        this.setDataListOpts();
    }
    _inputCtrl;
    // we don't want these rendered eles decorated with @State
    // because that will cause re-renders. Use get/set to set datalist options
    _selectWrap;
    get selectWrap() {
        return this._selectWrap;
    }
    set selectWrap(ele) {
        if (this._selectWrap === ele)
            return;
        this._selectWrap = ele;
        this.setDataListOpts();
    }
    _datalist;
    get datalist() {
        return this._datalist;
    }
    set datalist(ele) {
        if (this._datalist === ele)
            return;
        this._datalist = ele;
        this.setDataListOpts();
    }
    currInsertIndex = -1;
    showErrorMsg = false;
    errorMessage = '';
    hasFocus = false;
    hasOpened = false;
    hasLabelSlot = false;
    hasHelperSlot = false;
    hasHelperEndSlot = false;
    inputSearchVal = '';
    get el() { return this; }
    /**
     * 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;
    }
    _invalid = null;
    /**
     * Current validation message - if any. @readonly
     */
    get validityMessage() {
        if (!this.nativeSelect)
            return '';
        return this.nativeSelect.validationMessage;
    }
    /**
     * This Boolean attribute lets you specify that a form control should have select focus when the page loads.
     */
    autofocus = false;
    /**
     * If `true`, the user cannot interact with the select.
     */
    disabled = false;
    /**
     * When should the field perform validation
     * @default 'submitThenDirty'
     */
    validateOn = 'submitThenDirty';
    /**
     * Whether to show validation errors underneath input
     */
    showInlineError = true;
    _label = '';
    /**
     * String to place within a label element. Alternatively you may use a label slot.
     */
    get label() {
        return this.required && !this._label.endsWith('*')
            ? this._label + ' *'
            : this._label;
    }
    set label(value) {
        this._label = value;
    }
    /**
     * Visually hide the label - but make it accessible.
     */
    hideLabel = false;
    /**
     * Enable floating label behaviour. Will disable placeholder if set.
     */
    floatLabel = false;
    /**
     * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"` or `"file"`, otherwise it is ignored.
     */
    multiple = false;
    /** When `multiple="true"`, control how many values to show within the control at once.
     * After the maximum, "+n" will be shown to indicate the number of additional items that are selected. */
    maxValuesVisible = 3;
    _maxValuesVisible;
    watchMaxValuesVisible() {
        if (!this.multiple)
            return;
        this._maxValuesVisible =
            this.maxValuesVisible === false ? NaN : Number(this.maxValuesVisible);
        // make sure maxValuesVisible is a number
        if (!Number.isNaN(this._maxValuesVisible)) {
            if (this.currInsertIndex > this._maxValuesVisible) {
                // make the input position is no more than the max
                this.currInsertIndex = this._maxValuesVisible;
            }
        }
        else {
            // if maxValuesVisible is undefined, it will be `NaN`
            this.currInsertIndex = this.value.length - 1;
        }
    }
    /**
     * The name of the control, which is submitted with the form data.
     */
    name = this.selectId + '-name';
    /**
     * Instructional text that shows before the select has a value. Text set here will be placed inside the label when a value is set.
     * If you don't want this behaviour just set the first option to have no value.
     */
    placeholder;
    /**
     * If `true`, the user cannot modify the value.
     */
    readonly = false;
    /**
     * If `true`, the user must fill in a value before submitting a form.
     * By default, setting this will also add an asterisk to the label.
     * You can disable this by using the `label` slot instead.
     */
    required = false;
    /**
     * The initial size of the control.
     */
    size;
    /**
     * Maximum number of options that can be selected when multiple is true
     */
    max;
    /**
     * Minimum number of options that can be selected when multiple is true
     */
    min;
    /**
     * The form element to associate the select with (its form owner). Must be the id of a form.
     */
    form;
    /**
     * in multiple mode, allow users to enter their own values
     */
    allowCustomValues = false;
    /**
     * The value of the select.
     */
    get value() {
        return this._value || (this.multiple ? [] : '');
    }
    set value(val) {
        if (!!val && !!this._value) {
            if (JSON.stringify(val) === JSON.stringify(this._value))
                return;
        }
        if (typeof val === 'string') {
            if (this.multiple)
                this._value = val.split(',').map((v) => v.trim());
            else
                this._value = val;
        }
        else if (Array.isArray(val)) {
            if (this.multiple)
                this._value = val;
            else
                this._value = val[0];
        }
    }
    _value;
    /**
     * Update the native select element when the value changes
     */
    valueChanged() {
        this.customValidate();
        if (this.onInit) {
            if (this.multiple) {
                this.currInsertIndex = this.value.length - 1;
            }
            return;
        }
        requestAnimationFrame(() => {
            this.shouldValidate();
            this.nanoChange.emit({ value: this.value });
        });
    }
    /**
     * 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._elementOptions.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;
        });
    }
    _options = [];
    _elementOptions = [];
    /**
     * If `true`, a clear icon will appear in the select when there is a value. Clicking it clears the select.
     */
    clearable = false;
    /**
     * Hide the native select element and cover with a value 'mask'.
     * Enables a fluid nano-select width upon value change (if required). Doesn't work with multiple="true".
     */
    mask = false;
    /**
     * Set the amount of time, in milliseconds, to wait to trigger the `nanoSearchChange` event after each keystroke.
     */
    debounce = 0;
    debounceChanged() {
        this.nanoSearchChange = debounceEvent(this.nanoSearchChange, this.debounce);
    }
    shouldValidate() {
        if (this.onInit)
            return;
        if (this.invalid)
            this.showErrorMsg = this._invalid = false;
        this.customValidate();
        if (this.validateOn !== 'dirty')
            return;
        this.showInlineValidation();
    }
    /** nano-dropdown config options you can pass to the nested dropdown component */
    dropDownConfig = {};
    setDataListOpts() {
        if (!this.datalist || !this.selectWrap)
            return;
        this.datalist.input = this.inputCtrl;
        const currDWConfig = this.datalist.dropDownConfig || {};
        this.datalist.dropDownConfig = {
            distance: 10,
            ...currDWConfig,
            ...this.dropDownConfig,
            tetherTo: this.selectWrap,
        };
    }
    /**
     * A function that customizes the tag value to be rendered when `multiple="true"`.
     * @param option - the incoming option that was selected
     * @param index - the incoming option index
     * @returns Should return either a string / templateResult or a string containing trusted HTML or an HTMLElement
     */
    valueTagTemplate;
    // Custom Events
    /**
     * Emitted when the value has changed.
     */
    nanoChange;
    /**
     * Emitted when the select loses focus.
     */
    nanoBlur;
    /**
     * Emitted when the select has focus.
     */
    nanoFocus;
    /**
     * Emitted when the select has been created.
     * @internal
     */
    nanoDidLoad;
    /**
     * Emitted when the select has been removed.
     * @internal
     */
    nanoDidUnload;
    /**
     * Emitted when a keyboard input occurred on a multiple="true" input
     */
    nanoSearchChange;
    /**
     * Called when validation is performed (which depends on `validateOn`).
     * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.
     */
    nanoValidate;
    // Public Methods
    /**
     * Get the current state of the control.
     * @param validateFirst - perform validation first before reporting
     * @returns `{ isValid: boolean, errorMessage: string }`
     */
    async reportValidity(validateFirst) {
        return new Promise((resolve) => {
            if (validateFirst) {
                this.customValidate();
                this.showInlineValidation();
            }
            setTimeout(() => {
                resolve({
                    isValid: !this._invalid,
                    errorMessage: this.nativeSelect.validationMessage,
                });
            }, 50);
        });
    }
    /**
     * Sets focus on the specified `nano-select`. Use this method instead of the global
     * `select.focus()`.
     */
    async setFocus() {
        if (!this.inputCtrl)
            return;
        this.inputCtrl.focus();
        setTimeout(() => this.inputCtrl.click(), 50);
    }
    /**
     * @returns the native `<select>` element used under the hood.
     */
    getSelectElement() {
        return Promise.resolve(this.nativeSelect);
    }
    /**
     * Invalidate the field and show a custom error message.
     * To clear the error you will need to re-call this method with an empty string.
     */
    async showError(message) {
        if (this.nativeSelect) {
            this.customError = message;
            this.nativeSelect.setCustomValidity(message);
            this.showInlineValidation();
        }
    }
    /* Logic */
    get valArray() {
        return typeof this.value === 'string'
            ? this.value.length
                ? [this.value]
                : []
            : this.value;
    }
    isValidValues() {
        return this.valArray.find((val) => this.options.find((opt) => opt.value === val));
    }
    customValidate = () => {
        if (!this.nativeSelect ||
            !!this.customError ||
            !this.nativeSelect['setCustomValidity'])
            return;
        this.nativeSelect.setCustomValidity('');
        // add custom validations 'cos html5 validations are a bit rubbish on selects
        if (this.required && !this.valArray.length) {
            this.nativeSelect.setCustomValidity('Please fill in this field.');
            return true;
        }
        if (this.valArray.length &&
            !this.allowCustomValues &&
            !this.isValidValues()) {
            this.nativeSelect.setCustomValidity('Please choose an item from this field.');
            return true;
        }
        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.valArray.length < this.min) {
            this.nativeSelect.setCustomValidity(`You must select a minimum of ${this.min} values.`);
            return true;
        }
        return false;
    };
    showInlineValidation = (ev) => {
        if (this.validateOn === 'submitThenDirty')
            this.validateOn = 'dirty';
        this._invalid = false;
        this.showErrorMsg = false;
        this.errorMessage = '';
        if (!this.nativeSelect.validity.valid) {
            this.errorMessage = this.nativeSelect.validationMessage;
            this._invalid = true;
            this.showErrorMsg = true;
        }
        this.nanoValidate.emit({
            isValid: !this.invalid,
            errorMessage: this.errorMessage,
            originalEvent: ev,
        });
    };
    handleInvalid = (ev) => {
        this._invalid = true;
        if (this.validateOn === 'submit') {
            this._invalid = this.showErrorMsg = this.customValidate();
        }
        if (this.showInlineError)
            ev.preventDefault();
        requestAnimationFrame(() => this.showInlineValidation(ev));
    };
    setValue = (e) => {
        e.preventDefault();
        if (!this.multiple) {
            this.value = e.detail.value;
            return;
        }
        if (this.value && this.value.length && this.value.includes(e.detail.value))
            return;
        if (this.max && this.value.length === this.max)
            return;
        if (Number.isNaN(this._maxValuesVisible) ||
            this.value.length <= this._maxValuesVisible) {
            this.currInsertIndex++;
        }
        this.value = [
            ...this.value.slice(0, this.currInsertIndex),
            e.detail.value,
            ...this.value.slice(this.currInsertIndex),
        ];
        this.inputSearchVal = '';
    };
    removeValue = (toFind) => {
        if (this.readonly || this.disabled)
            return;
        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 (Number.isNaN(this._maxValuesVisible) ||
            this.value.length <= this._maxValuesVisible) {
            this.currInsertIndex--;
        }
        this.setFocus();
    };
    slotChangeObserver() {
        if (Build.isServer)
            return;
        const mo = (this.mo = new MutationObserver(() => this.processSlottedContent()));
        mo.observe(this.el, { childList: true, subtree: true });
    }
    processSlottedContent() {
        // see if we have label / helper content
        this.hasLabelSlot = !!this.el.querySelectorAll('[slot="label"]').length;
        this.hasHelperSlot = !!this.el.querySelector('[slot="helper"]');
        this.hasHelperEndSlot = !!this.el.querySelector('[slot="helper-end"]');
    }
    getOptionWithValue(value) {
        let index;
        const options = this.datalist?.activeOptions?.length
            ? this.datalist.activeOptions
            : this.options;
        const option = options.find((opt, i) => {
            index = i;
            return !opt.disabled && opt.value?.length && opt.value === value;
        });
        return [option, index];
    }
    getLabel(toFind) {
        const option = this.getOptionWithValue(toFind)[0];
        return option && option.label ? option.label : toFind;
    }
    /* Event handling */
    onReset(e) {
        const form = this.form
            ? document.querySelector('#' + this.form)
            : this.el.closest('form');
        if (!form || e.target !== this.el.closest('form'))
            return;
        this.clearSelectValue();
    }
    handleBlur() {
        if (!this.hasFocus)
            return;
        requestAnimationFrame(() => {
            const target = getActiveElement();
            if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {
                this.onBlur();
            }
        });
    }
    setOptions = () => {
        if (!this.datalist ||
            !this.datalist.activeOptions ||
            !this.datalist.activeOptions.length)
            return;
        this._elementOptions = this.datalist.activeOptions.map((ao) => {
            const { value, selected, label, filterMeta } = ao;
            return { value, selected, label, filterMeta };
        });
        this.customValidate();
    };
    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;
            }
        }
    };
    onBlur = () => {
        this.hasFocus = false;
        requestAnimationFrame(() => {
            if (this.validateOn === 'dirty' && !this.hasFocus)
                this.showInlineValidation();
        });
        this.nanoBlur.emit();
        if (!this.allowCustomValues && this.multiple) {
            this.inputSearchVal = '';
            const event = new window.Event('change');
            this.inputCtrl.dispatchEvent(event);
        }
    };
    onFocus = () => {
        this.hasFocus = true;
        this.nanoFocus.emit();
    };
    clearSelectValue = (ev) => {
        if (this.clearable && !this.readonly && !this.disabled && ev) {
            ev.preventDefault();
            ev.stopPropagation();
        }
        if (this.multiple) {
            this.value = [];
            this.currInsertIndex = -1;
        }
        else
            this.value = '';
        this.inputCtrl.value = '';
        const event = new window.Event('change');
        this.inputCtrl.dispatchEvent(event);
    };
    onClick = () => {
        this.setFocus();
    };
    /* Multi event handlers */
    onDragStart = (ev) => {
        const ele = ev.target;
        this.dragVal = ele.dataset.value;
    };
    onDragEnd = (ev) => {
        this.dragVal = null;
        ev.preventDefault();
    };
    onDragLeave = (ev) => {
        const ele = ev.target;
        const spanVal = ele.dataset?.value || null;
        if (!spanVal ||
            this.dragVal === spanVal ||
            !this.value.includes(this.dragVal)) {
            ev.preventDefault();
            return;
        }
        const to = this.value.indexOf(spanVal);
        const from = this.value.indexOf(this.dragVal);
        const tmpArr = [...this.value];
        const tmpVal = tmpArr[to];
        tmpArr[to] = tmpArr[from];
        tmpArr[from] = tmpVal;
        this.value = [...tmpArr];
    };
    onMultiInput = (ev) => {
        this.inputSearchVal = ev.target.value.trim();
        this.nanoSearchChange.emit({ value: ev.target.value.trim() });
    };
    /* Stencil Component lifecycle hooks */
    connectedCallback() {
        this.debounceChanged();
        this.watchMaxValuesVisible();
        if (!Build.isBrowser)
            return;
        this.el.dispatchEvent(new CustomEvent('nanoDidLoad', {
            detail: this.el,
        }));
    }
    disconnectedCallback() {
        document.dispatchEvent(new CustomEvent('nanoDidUnload', {
            detail: this.el,
        }));
        if (!Build.isBrowser)
            return;
        if (this.mo)
            this.mo.disconnect();
    }
    componentDidLoad() {
        this.slotChangeObserver();
        this.customValidate();
        this.setDataListOpts();
        requestAnimationFrame(() => (this.onInit = false));
    }
    componentWillLoad() {
        this.processSlottedContent();
    }
    render() {
        const labelId = this.selectId + '-lbl';
        const moreId = this.showInlineError || this.hasHelperSlot
            ? this.selectId + '-moreId'
            : '';
        const helperEndId = this.hasHelperEndSlot ? this.selectId + '-helper' : '';
        this.rtl = this.el.ownerDocument.dir === 'rtl';
        this.valueItems = [];
        const compWrapOptions = (({ el, floatLabel, label, errorMessage, showInlineError, hasHelperSlot, hasHelperEndSlot, hasLabelSlot, hideLabel, placeholder, rtl, }) => ({
            el,
            floatLabel,
            label,
            errorMessage,
            showInlineError,
            hasHelperSlot,
            hasHelperEndSlot,
            hasLabelSlot,
            hideLabel,
            placeholder,
            rtl,
        }))(this);
        const wrapOptions = {
            ...compWrapOptions,
            labelId,
            moreId,
            helperEndId,
            hasValue: !!this.value.length || !!this.inputSearchVal.length,
            controlId: this.selectId,
            alwaysShowPlaceholder: false,
        };
        const controlOptions = (({ readonly, disabled }) => ({
            readonly,
            disabled,
            clearControl: this.clearable,
        }))(this);
        return (h(Host, { key: 'a2c56f43fef750f8e336a1612644761293b19bd4', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
                'has-value': !!this.value.length || !!this.inputSearchVal.length,
                'has-focus': this.hasFocus,
                'is-invalid': this._invalid === true,
                'is-valid': this._invalid === false,
                'nano-select': true,
            } }, h(FormControlWrap, { key: '632d901cdff60d36ae1a410f6c252c671eac8e63', ...wrapOptions, class: {
                'has-error': !!this.errorMessage &&
                    this.showInlineError &&
                    this._invalid === true,
                'has-helper': this.hasHelperSlot,
                'is-open': this.hasOpened,
                masked: this.mask,
            } }, h(FormControl, { key: '387a55518ed1c74ea944008c750a0ca42a6bbbe8', ...controlOptions, ref: (el) => (this.selectWrap = el), onClearText: this.clearSelectValue, control: this.el, endValueSlot: h("slot", { name: "down-arrow" }, h("nano-icon", { class: "select__down-arrow", name: "light/chevron-down" })), showInlineError: this.showInlineError }, this.multiple && (h("div", { key: '660b70b098520471d4f7653af5cc50388625cd1c', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
            this.mask && (h("div", { key: '44f53317d26f2f8b85b5c8b397ccfd68a26eebb5', class: "select__mask" }, this.getLabel(this.value))),
            h("input", { key: '04f3935c7f759e3767f32faecb9e6ef81a36c777', ref: (input) => (this.inputCtrl = input), id: this.selectId, class: "select__native-input", "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, placeholder: this.placeholder, readonly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
        ])), !this.readonly && !this.disabled && (h("nano-datalist", { key: 'aae86b85c3bd2c2c562468f2a33e52c7036ad69b', ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selectMulti' : 'select', options: this._options.length ? this._options : undefined, onNanoDeselect: (e) => {
                e.preventDefault();
                this.removeValue(e.detail.value);
            }, onNanoOptionsUpdated: this.setOptions, onNanoSelect: this.setValue,
            // @ts-expect-error - this bubbles from the nano-dropdown
            onNanoShow: () => (this.hasOpened = true), onNanoHide: () => (this.hasOpened = false) }, this.allowCustomValues &&
            this.multiple &&
            !!this.inputSearchVal && (h("nano-option", { key: 'cf744eb6bbad3ce2d8d05354d5edaf3eab07a207', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: '990e00208c403d92d1586fb0b2c4618768f5fda5', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: '54fce41f95c01e0b2ff1619209ebb15a28383677' }))), h("select", { key: '1c5ff40ac84be25c6b7075ef031b29f2b6f9b007', id: this.selectId + '-hidden', class: "select__native-ctrl", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, 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, helperEndId) {
        const input = (h("input", { class: "select__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.value.length ? this.placeholder : '', "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId }));
        if (!this.value.length)
            return input;
        const toReturn = [];
        this.value.forEach((val, i) => {
            if (!Number.isNaN(this._maxValuesVisible) && i > this._maxValuesVisible)
                return;
            let valueTag;
            if (i === this._maxValuesVisible) {
                valueTag = (h("nano-tag", { "data-value": val, key: val }, "+", this.value.length - this._maxValuesVisible));
            }
            else {
                valueTag = (h("nano-tag", { key: val, ref: (span) => this.valueItems.push(span), onDragStart: this.onDragStart, onDragLeave: this.onDragLeave, onDragEnd: this.onDragEnd, onDragOver: (e) => e.preventDefault(), onNanoClose: () => this.removeValue(val), draggable: true, tabIndex: -1, "data-value": val, closable: true }, this.valueTagTemplate ? (h("span", { innerHTML: this.valueTagTemplate
                        ? this.valueTagTemplate(...this.getOptionWithValue(val))
                        : undefined })) : (h("span", null, this.getLabel(val)))));
            }
            if (i === 0 && this.currInsertIndex < 0) {
                toReturn.push(input, valueTag);
            }
            else if (i === this.currInsertIndex) {
                toReturn.push(valueTag, input);
            }
            else {
                toReturn.push(valueTag);
            }
        });
        return toReturn;
    }
    static get watchers() { return {
        "maxValuesVisible": ["watchMaxValuesVisible"],
        "value": ["valueChanged"],
        "debounce": ["debounceChanged"],
        "required": ["shouldValidate"],
        "disabled": ["shouldValidate"],
        "min": ["shouldValidate"],
        "max": ["shouldValidate"],
        "readonly": ["shouldValidate"],
        "dropDownConfig": ["setDataListOpts"]
    }; }
    static get style() { return selectCss; }
}, [262, "nano-select", {
        "invalid": [2568],
        "validityMessage": [2049, "validity-message"],
        "autofocus": [4],
        "disabled": [516],
        "validateOn": [1025, "validate-on"],
        "showInlineError": [516, "show-inline-error"],
        "label": [7169],
        "hideLabel": [4, "hide-label"],
        "floatLabel": [4, "float-label"],
        "multiple": [4],
        "maxValuesVisible": [8, "max-values-visible"],
        "name": [1],
        "placeholder": [1],
        "readonly": [516],
        "required": [4],
        "size": [2],
        "max": [2],
        "min": [2],
        "form": [1],
        "allowCustomValues": [4, "allow-custom-values"],
        "value": [6145],
        "options": [6160],
        "clearable": [4],
        "mask": [4],
        "debounce": [2],
        "dropDownConfig": [16, "drop-down-config"],
        "valueTagTemplate": [16, "value-tag-template"],
        "currInsertIndex": [32],
        "showErrorMsg": [32],
        "errorMessage": [32],
        "hasFocus": [32],
        "hasOpened": [32],
        "hasLabelSlot": [32],
        "hasHelperSlot": [32],
        "hasHelperEndSlot": [32],
        "inputSearchVal": [32],
        "_invalid": [32],
        "_elementOptions": [32],
        "reportValidity": [64],
        "setFocus": [64],
        "getSelectElement": [64],
        "showError": [64]
    }, [[16, "reset", "onReset"], [17, "mousedown", "handleBlur"], [0, "keydown", "handleBlur"]], {
        "maxValuesVisible": ["watchMaxValuesVisible"],
        "value": ["valueChanged"],
        "debounce": ["debounceChanged"],
        "required": ["shouldValidate"],
        "disabled": ["shouldValidate"],
        "min": ["shouldValidate"],
        "max": ["shouldValidate"],
        "readonly": ["shouldValidate"],
        "dropDownConfig": ["setDataListOpts"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["nano-select", "nano-datalist", "nano-dropdown", "nano-icon", "nano-icon-button", "nano-menu", "nano-option", "nano-tag", "nano-tooltip"];
    components.forEach(tagName => { switch (tagName) {
        case "nano-select":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, Select);
            }
            break;
        case "nano-datalist":
            if (!customElements.get(tagName)) {
                defineCustomElement$8();
            }
            break;
        case "nano-dropdown":
            if (!customElements.get(tagName)) {
                defineCustomElement$7();
            }
            break;
        case "nano-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$6();
            }
            break;
        case "nano-icon-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "nano-menu":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "nano-option":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "nano-tag":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "nano-tooltip":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { Select as S, defineCustomElement as d };
