@nanoporetech-digital/components 2.1.2 → 2.2.0

package/dist/nano-components/p-5a476bba.system.entry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["src/components/datalist/datalist.scss?tag=nano-datalist&encapsulation=shadow","src/components/datalist/datalist.tsx","src/components/menu/menu.scss?tag=nano-menu&encapsulation=shadow","src/components/menu/menu.tsx","src/components/option/option.scss?tag=nano-option&encapsulation=shadow","src/components/option/option.tsx"],"names":["datalistCss","findLabel","formCtrl","foundLabel","id","document","querySelector","closest","listIds","DataList","exports","class_1","hostRef","_this","this","isNanoInput","typeToSelect","listId","isFiltered","shouldFocus","_allOptEles","actvOptEles","canOpen","optionIds","selected","_dropDownConfig","skidding","options","type","open","disableFilter","disabled","optSelected","e","stopPropagation","changeInputValue","detail","raf","inputChange","shouldOpen","handleShow","__awaiter","listBox","setFocus","inputClick","manageDropdownDisplay","inputKeydown","ignoreKeys","includes","key","typeToSelectTimeout","test","clearTimeout","window","setTimeout","setOptStartsWith","optionKeyDown","connectedInput","focus","deleteKeys","exactMatch","debounce","bind","Object","defineProperty","prototype","opts","_a","value","forEach","opt","ddc","assign","allOptEles","openWatcher","writeTask","nanoDropdown","setAttribute","toString","watchInputChange","nanoInput","host","_b","getInputElement","_c","sent","input","HTMLElement","manageSlotChangeListener","length","mo","MutationObserver","processSlottedContent","observe","childList","subtree","disconnect","undefined","flatMap","option","i","label","createElement","ariaPosinset","ariaSetsize","textContent","slot","append","__spreadArray","watchTypeChange","dwConfig","closeOnSelect","autocompleteType","readonly","tetherTo","dropDownConfig","readOnly","manageInputEvents","newInput","oldInput","removeEventListener","inputLabel","removeAttribute","addEventListener","labels","item","watchActvOptChange","c","val","optIds","hidden","isSelected","push","manageCanOpen","hasNoResult","fireActiveOptsEvent","nanoOptionsUpdated","emit","find","nanoSelected","filter","nanoDeselect","nanoSelect","defaultPrevented","event","Event","dispatchEvent","attrFind","toFind","toLowerCase","substring","foundEle","trim","filterMeta","Array","from","querySelectorAll","valStr","activeEles","indexOf","connectedCallback","componentDidLoad","componentDidRender","console","warn","render","h","Host","role","aria-owns","join","aria-label","ref","el","dialogTitle","class","dlist__dropdown","dlist--isfiltered","onNanoAfterShow","onNanoAfterHide","_","dlist__menu","dlist__menu--open","dropwdownOpen","tabIndex","onNanoSelect","onKeyDown","name","aria-live","menuCss","CANSHADOW","head","attachShadow","Menu","class_2","ignoreMouseEvents","_hasFocus","handleFocus","setActiveFocusItem","selectedItem","getItems","nanoFocus","handleClick","target","handleKeyDown","ignoreMouseTimeout","activeItem","click","items","index","preventDefault","scrollIntoView","block","_i","items_1","shadowRoot","getTextContent","handleMouseOver","menu","preventScroll","removeFocus","blur","showActiveElement","resetActiveItem","tagName","map","opened","ctx","getDirectChildren","activeElement","getActiveElement","getAttribute","classList","contains","handleBlur","hasFocus","kev","found","composedPath","nanoBlur","legacy","onClick","onMouseOver","onFocus","part","optionCss","Option","class_3","optId","valueChanged","labelContent","labelChanged","componentWillLoad","aria-selected","aria-disabled","onMouseDown","option--selected","option--disabled","option--novalue","aria-hidden"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n  * @prop --padding-top: for all nested `nano-option` elements. Defaults to #{$spacing-small};\n  * @prop --padding-bottom: for all nested `nano-option` elements. Defaults to #{$spacing-small};\n  * @prop --padding-start: for all nested `nano-option` elements. Defaults to #{$spacing-xlarge};\n  * @prop --padding-end: for all nested `nano-option` elements. Defaults to #{$spacing-xlarge};\n  * @prop --font-size: for all nested `nano-option` elements. Defaults to .8em;\n  * @prop --color: default text color of content other than `nano-option`. Defaults to $color-palegrey;\n  */\n\n  --padding-top: #{$spacing-small};\n  --padding-bottom: #{$spacing-small};\n  --padding-start: #{$spacing-xlarge};\n  --padding-end: #{$spacing-xlarge};\n  --font-size: 0.8em;\n  --color: #{$color-palegrey};\n\n  color: var(--color);\n}\n\n.dlist {\n  &--isfiltered {\n    ::slotted(*:not(nano-option):not([slot='no-result']):not([slot='list-top']):not([slot='list-bottom'])) {\n      display: none !important;\n    }\n  }\n\n  &__dropdown {\n    --min-width: 100%;\n    --overflow: auto;\n  }\n\n  &__status {\n    @include visually-hide();\n  }\n\n  &__menu {\n    --padding-top: inherit;\n    --padding-bottom: inherit;\n    --padding-start: inherit;\n    --padding-end: inherit;\n    --font-size: inherit;\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  h,\n  Host,\n  Element,\n  State,\n  Watch,\n  Prop,\n  Event,\n  EventEmitter,\n  writeTask,\n  Build,\n} from '@stencil/core';\nimport { debounce, raf } from '../../utils';\nimport type { Dropdown } from '../dropdown/dropdown';\nimport type { OptionInterface } from '../../interface';\n\nfunction findLabel(formCtrl: Element) {\n  let foundLabel: HTMLLabelElement;\n\n  if (formCtrl.id) {\n    foundLabel = document.querySelector(`label[for='${formCtrl.id}']`);\n  }\n  if (!foundLabel) {\n    foundLabel = formCtrl.closest('label');\n  }\n  return foundLabel;\n}\n\nlet listIds = 0;\n\n/**\n * `nano-datalist` a visually consistent and more flexible replacement for a native\n * [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist). Can be nested within a `nano-input`\n * or linked to any input control via the `input` prop. Is used internally within `nano-select`.\n * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using the `options` prop\n *\n * @slot - use `<nano-option>` elements for more complex html. Alternatively use the `options` prop\n * @slot list-top - shows at the top of the list when there are options present\n * @slot list-bottom - shows at the bottom of the list when there are options present\n * @slot no-result - shown when there are no results otherwise nothing will be shown\n */\n@Component({\n  tag: 'nano-datalist',\n  styleUrl: 'datalist.scss',\n  shadow: true,\n})\nexport class DataList implements ComponentInterface {\n  // Private State\n\n  private isNanoInput = false;\n  private typeToSelect = '';\n  private typeToSelectTimeout: number;\n  private nanoDropdown: HTMLNanoDropdownElement;\n  private listBox: HTMLNanoMenuElement;\n  private mo?: MutationObserver;\n  private listId = `nano-datalist-${listIds++}`;\n  private isFiltered = false;\n  private shouldFocus = false;\n  // all potential option eles. Set via slot or `options` prop.\n  // Some may get hidden due to filtering\n  private get allOptEles() {\n    return this._allOptEles;\n  }\n  private set allOptEles(opts) {\n    // when allOptEles are initially set (on slot change / options) -\n    // add options to 'selected' and fire selected event *if*\n    // value isn't set on the input\n    this._allOptEles = opts;\n    if (this.connectedInput?.value) return;\n\n    opts.forEach((opt) => {\n      if (opt.selected && !this.selected.includes(opt.value)) {\n        this.changeInputValue(opt);\n      }\n    });\n  }\n  private _allOptEles: HTMLNanoOptionElement[] = [];\n\n  @Element() host: HTMLNanoDatalistElement;\n\n  // active option eles that are not hidden.\n  @State() actvOptEles: HTMLNanoOptionElement[] = [];\n  @State() connectedInput: HTMLInputElement | HTMLTextAreaElement;\n  @State() inputLabel: HTMLLabelElement;\n  @State() hasNoResult: boolean;\n  @State() shouldOpen: boolean;\n  @State() canOpen: boolean = true;\n  @State() optionIds: string[] = [];\n\n  constructor() {\n    this.inputChange = debounce(this.inputChange.bind(this), 50);\n  }\n\n  // Public API\n\n  /** By default, items in the list will appear 'selected' when the value in the linked input control matches.\n   * However you can add other selected options via the the selected prop. */\n  @Prop({ mutable: true }) selected: string[] = [];\n\n  /** nano-dropdown config options you can pass to the nested dropdown component */\n  @Prop()\n  get dropDownConfig() {\n    return this._dropDownConfig;\n  }\n  set dropDownConfig(ddc: Partial<Dropdown>) {\n    this._dropDownConfig = { ...this._dropDownConfig, ...ddc };\n  }\n  private _dropDownConfig: Partial<Dropdown> = {\n    skidding: -1,\n  };\n\n  /** Provide an option list.\n   * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using this prop */\n  @Prop() options?: OptionInterface[] = [];\n\n  /** A selector to a HTMLInputElement */\n  @Prop() input?: string | HTMLInputElement;\n\n  /** Tweaks the datalist behaviour and linked control semantics and behaviour.\n   * e.g. 'select' will make the linked input control readonly.\n   */\n  @Prop() type: 'select' | 'selctMulti' | 'input' = 'input';\n\n  /** return all the active options currently within the datalist. Can be useful for validation */\n  @Prop()\n  get activeOptions() {\n    return this.allOptEles;\n  }\n\n  /** Force datalist open */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  @Watch('open')\n  openWatcher() {\n    writeTask(() => {\n      this.nanoDropdown.open = this.open;\n      this.connectedInput.setAttribute('aria-expanded', this.open.toString());\n    });\n  }\n\n  /** Use this option to disable to default filtering. This is useful if filtering happens\n   * externally via another method (e.g. via ajax)\n   */\n  @Prop() disableFilter = false;\n\n  /** Activate / deactivate the datalist control */\n  @Prop() disabled = false;\n\n  // State change watchers\n\n  @Watch('input')\n  async watchInputChange() {\n    let nanoInput;\n    if ((nanoInput = this.host.closest('nano-input'))) {\n      this.isNanoInput = true;\n      this.connectedInput = await nanoInput.getInputElement();\n    } else if (\n      this.input &&\n      typeof this.input === 'string' &&\n      (nanoInput = document.querySelector(this.input))\n    ) {\n      this.isNanoInput = false;\n      this.connectedInput = nanoInput;\n    } else if (this.input instanceof HTMLElement) {\n      this.connectedInput = this.input;\n    }\n  }\n\n  @Watch('options')\n  manageSlotChangeListener() {\n    if (!this.host) return;\n\n    // we're not using `options` - setup new MO\n    if ((!this.options || !this.options.length) && !this.mo) {\n      if (Build.isBrowser) {\n        const mo = (this.mo = new MutationObserver(() =>\n          this.processSlottedContent()\n        ));\n        mo.observe(this.host, { childList: true, subtree: true });\n      }\n      this.processSlottedContent();\n      return;\n    }\n\n    // we're using `options` - trash current MO\n    if (this.options?.length) {\n      if (!!this.mo) {\n        this.mo.disconnect();\n        this.mo = undefined;\n      }\n\n      // add imperative `options`\n      writeTask(() => {\n        this.allOptEles = this.options.flatMap((option, i) => {\n          if (option.value || option.label) {\n            const opt = Object.assign(document.createElement('nano-option'), {\n              label: option.label,\n              value: option.value,\n              ariaPosinset: i,\n              ariaSetsize: this.options.length,\n              selected: option.selected,\n              id: this.listId + '-option-' + i,\n              textContent: option.label ? option.label : option.value,\n              slot: 'internal-opts',\n            });\n            this.host.append(opt);\n            return opt;\n          }\n        });\n\n        if (this.connectedInput?.value.length && this.type !== 'select') {\n          this.inputChange();\n        } else this.actvOptEles = [...this.allOptEles];\n      });\n    }\n    // forceUpdate(this.host);\n  }\n\n  @Watch('type')\n  @Watch('connectedInput')\n  watchTypeChange() {\n    if (!this.connectedInput) return;\n\n    let dwConfig: Partial<Dropdown> = { closeOnSelect: false };\n    let autocompleteType: 'list' | 'both' = 'both';\n    let readonly = false;\n\n    switch (this.type) {\n      case 'selctMulti':\n        // dwConfig.closeOnSelect = false;\n        break;\n      case 'select':\n        autocompleteType = 'list';\n        readonly = true;\n        break;\n    }\n\n    if (!this.isNanoInput) {\n      dwConfig.tetherTo = this.connectedInput;\n    }\n\n    this.dropDownConfig = { ...this.dropDownConfig, ...dwConfig };\n    this.connectedInput.setAttribute('aria-autocomplete', autocompleteType);\n    this.connectedInput.readOnly = readonly;\n  }\n\n  @Watch('connectedInput')\n  manageInputEvents(newInput?: HTMLInputElement, oldInput?: HTMLInputElement) {\n    if (!!oldInput) {\n      const nanoInput = oldInput.closest('nano-input');\n      if (nanoInput) {\n        nanoInput.removeEventListener('nanoChange', this.inputChange);\n      }\n      oldInput.removeEventListener('change', this.inputChange);\n      oldInput.removeEventListener('click', this.inputClick);\n      oldInput.removeEventListener('keydown', this.inputKeydown);\n      oldInput.removeEventListener('input', this.inputChange);\n\n      this.inputLabel = null;\n\n      writeTask(() => {\n        oldInput.removeAttribute('role');\n        oldInput.removeAttribute('aria-expanded');\n        oldInput.removeAttribute('aria-controls');\n        oldInput.removeAttribute('aria-owns');\n        oldInput.removeAttribute('aria-haspopup');\n        oldInput.removeAttribute('aria-autocomplete');\n        oldInput.removeAttribute('autocomplete');\n      });\n    }\n    if (!!newInput) {\n      const nanoInput = newInput.closest('nano-input');\n      if (nanoInput) {\n        nanoInput.addEventListener('nanoChange', this.inputChange);\n      }\n      newInput.addEventListener('change', this.inputChange);\n      newInput.addEventListener('click', this.inputClick);\n      newInput.addEventListener('keydown', this.inputKeydown);\n      newInput.addEventListener('input', this.inputChange);\n      this.listId = this.host.id || this.listId;\n\n      this.inputLabel = newInput?.labels?.item(0) || findLabel(newInput);\n\n      writeTask(() => {\n        this.host.id = this.listId;\n        newInput.setAttribute('role', 'combobox');\n        newInput.setAttribute('aria-expanded', 'false');\n        newInput.setAttribute('aria-controls', this.listId);\n        newInput.setAttribute('aria-owns', this.listId);\n        newInput.setAttribute('aria-haspopup', 'listbox');\n        newInput.setAttribute('autocomplete', 'off');\n      });\n    }\n  }\n\n  @Watch('selected')\n  @Watch('actvOptEles')\n  watchActvOptChange() {\n    let c = 0;\n    const val = this.connectedInput?.value || '';\n    const optIds = [];\n\n    writeTask(() => {\n      this.allOptEles.forEach((opt, i) => {\n        if (this.actvOptEles.includes(opt)) {\n          c++;\n          opt.setAttribute('aria-posinset', c + '');\n          opt.setAttribute('aria-setsize', this.actvOptEles.length + '');\n          opt.hidden = false;\n          this.isSelected(opt, val);\n        } else {\n          opt.removeAttribute('aria-posinset');\n          opt.removeAttribute('aria-setsize');\n          opt.hidden = true;\n          opt.selected = false;\n        }\n        opt.id = this.listId + '-option-' + i;\n        optIds.push(opt.id);\n      });\n      this.optionIds = optIds;\n    });\n  }\n\n  @Watch('actvOptEles')\n  @Watch('hasNoResult')\n  manageCanOpen() {\n    if (this.actvOptEles.length || this.hasNoResult) this.canOpen = true;\n    else this.canOpen = false;\n  }\n\n  /**\n   * Opens the dropdown if it can, it should and there are items to display.\n   */\n  @Watch('shouldOpen')\n  @Watch('canOpen')\n  manageDropdownDisplay() {\n    if (this.shouldOpen && this.canOpen && !this.disabled) this.open = true;\n    if (!this.shouldOpen || !this.canOpen) this.open = false;\n  }\n\n  @Watch('actvOptEles')\n  fireActiveOptsEvent() {\n    this.nanoOptionsUpdated.emit(this.actvOptEles);\n  }\n\n  // Events\n\n  /** Fired when an item is selected. */\n  @Event() nanoSelect: EventEmitter<HTMLNanoOptionElement>;\n\n  /** Fired when a currently selected item is reselected. */\n  @Event() nanoDeselect: EventEmitter<HTMLNanoOptionElement>;\n\n  /** Fired when active options change */\n  @Event() nanoOptionsUpdated: EventEmitter<HTMLNanoOptionElement[]>;\n\n  // Private logic\n\n  private isSelected(opt: HTMLNanoOptionElement, val: string) {\n    if (val === opt.value || this.selected.includes(opt.value)) {\n      opt.selected = true;\n    } else opt.selected = false;\n  }\n\n  private get dropwdownOpen() {\n    if (!this.nanoDropdown || !this.open) return false;\n    return true;\n  }\n\n  private get exactMatch() {\n    return this.allOptEles.find(\n      (opt) => this.connectedInput.value === opt.value\n    );\n  }\n\n  /** reflect value back to the connected input unless the event is cancelled */\n  private changeInputValue(opt: HTMLNanoOptionElement) {\n    let nanoSelected;\n\n    if (this.selected.includes(opt.value)) {\n      // deselect option\n      this.selected = this.selected.filter((val) => val !== opt.value);\n      nanoSelected = this.nanoDeselect.emit(opt);\n    } else {\n      // select new option\n      this.selected = [...this.selected];\n      nanoSelected = this.nanoSelect.emit(opt);\n    }\n\n    if (!nanoSelected.defaultPrevented) {\n      if (this.connectedInput) this.connectedInput.value = opt.value;\n\n      const event = new window.Event('change');\n      this.connectedInput?.dispatchEvent(event);\n    }\n  }\n\n  // a new option has been picked\n  private optSelected = (e: CustomEvent<HTMLNanoOptionElement>) => {\n    e.stopPropagation();\n    this.changeInputValue(e.detail);\n    raf(() => this.inputChange());\n\n    if (this.type === 'select') this.shouldOpen = false;\n  };\n\n  // this is for type=\"select\" only.\n  // Filter options that start with text - aggregates letters (as opposed to getting the value from input)\n  private setOptStartsWith() {\n    const attrFind = (toFind: string) =>\n      toFind.toLowerCase().substring(0, this.typeToSelect.length) ===\n      this.typeToSelect;\n\n    const foundEle = this.allOptEles.find(\n      (opt) =>\n        opt.value.trim().length > 0 &&\n        !opt.disabled &&\n        (attrFind(opt.textContent) ||\n          attrFind(opt.value) ||\n          attrFind(opt.label) ||\n          attrFind(opt.filterMeta))\n    );\n    if (foundEle) this.changeInputValue(foundEle);\n  }\n\n  // Event handlers\n\n  private processSlottedContent() {\n    raf(() => {\n      this.allOptEles = Array.from(this.host.querySelectorAll('nano-option'));\n      this.hasNoResult = !!this.host.querySelector('[slot=\"no-result\"]');\n\n      if (this.connectedInput?.value.length && this.type !== 'select') {\n        this.inputChange();\n      } else this.actvOptEles = this.allOptEles;\n    });\n  }\n\n  // sets focus immediately on open when 'select' - mirroring native behaviour\n  private handleShow = async () => {\n    if (this.type === 'select' || this.shouldFocus) {\n      this.shouldFocus = false;\n      this.listBox.setFocus();\n    }\n  };\n\n  // any changes to the connected input value will filter the list of active options\n  private inputChange() {\n    if (this.disableFilter) {\n      this.actvOptEles = this.allOptEles;\n      return;\n    }\n\n    const val = this.connectedInput.value;\n    const valStr = val.trim().toLowerCase();\n\n    let exactMatch = false;\n    const activeEles = [];\n    const attrFind = (toFind: string) =>\n      toFind.toLowerCase().indexOf(valStr) > -1;\n\n    this.allOptEles.forEach((opt) => {\n      if (\n        (val === opt.value || val === opt.label) &&\n        this.type !== 'selctMulti'\n      ) {\n        opt.selected = true;\n        exactMatch = true;\n      } else this.isSelected(opt, val);\n    });\n\n    this.allOptEles.forEach((opt) => {\n      if (!valStr.length || exactMatch) {\n        activeEles.push(opt);\n      } else if (\n        opt.value.trim().length > 0 &&\n        !opt.disabled &&\n        (attrFind(opt.textContent) ||\n          attrFind(opt.value) ||\n          attrFind(opt.label) ||\n          attrFind(opt.filterMeta))\n      ) {\n        activeEles.push(opt);\n      }\n    });\n\n    this.isFiltered = valStr.length && !exactMatch;\n    this.actvOptEles = activeEles;\n  }\n\n  private inputClick = () => {\n    this.shouldOpen = true;\n    // open dropdown if possible\n    this.manageDropdownDisplay();\n  };\n\n  private inputKeydown = (e: KeyboardEvent) => {\n    const ignoreKeys = [\n      'Shift',\n      'ArrowRight',\n      'ArrowLeft',\n      'Escape',\n      'Enter',\n      'Tab',\n    ];\n    if (ignoreKeys.includes(e.key)) {\n      if (e.key === 'Tab') this.shouldOpen = false;\n      return;\n    }\n\n    // When select, mirror native select behaviour. Search on closed list\n    if (\n      this.type === 'select' &&\n      !['ArrowDown', 'ArrowUp'].includes(e.key) &&\n      (e.key !== ' ' || this.typeToSelectTimeout)\n    ) {\n      if (e.key === ' ' || /^[a-z0-9]+$/i.test(e.key)) {\n        clearTimeout(this.typeToSelectTimeout);\n        this.typeToSelectTimeout = window.setTimeout(() => {\n          this.typeToSelect = '';\n          this.typeToSelectTimeout = 0;\n        }, 750);\n        this.typeToSelect += e.key;\n        this.setOptStartsWith();\n      }\n      return;\n    }\n\n    this.shouldOpen = true;\n    // open dropdown if possible\n    this.manageDropdownDisplay();\n    if (['ArrowDown', 'ArrowUp'].includes(e.key)) this.shouldFocus = true;\n  };\n\n  // handles key down on options. Either 'picks'\n  // an option or passes event back to input for search / filter\n  private optionKeyDown = (\n    e: KeyboardEvent & { target: HTMLNanoOptionElement }\n  ) => {\n    const ignoreKeys = [\n      'Shift',\n      'ArrowUp',\n      'ArrowDown',\n      'Escape',\n      'Enter',\n      'Tab',\n      'Space',\n      'PageUp',\n      'PageDown',\n      'Home',\n      'End',\n      ' ',\n    ];\n    if (ignoreKeys.includes(e.key)) {\n      if (e.key === 'Escape') this.connectedInput.focus();\n      return;\n    }\n\n    const deleteKeys = ['Delete', 'Backspace'];\n    // this passes whatever's typed back to our input control\n    if (\n      this.type !== 'select' &&\n      (!this.exactMatch || deleteKeys.includes(e.key))\n    ) {\n      this.connectedInput.focus();\n    }\n  };\n\n  // Component lifecycle\n\n  connectedCallback() {\n    this.watchInputChange();\n  }\n\n  componentDidLoad() {\n    this.manageSlotChangeListener();\n    this.openWatcher();\n  }\n\n  componentDidRender(): void {\n    setTimeout(() => {\n      if (!this.connectedInput)\n        console.warn(\n          'no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop',\n          this.host\n        );\n    }, 500);\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"listbox\"\n        aria-owns={this.optionIds.join(' ')}\n        aria-label=\"Select options from the list below\"\n      >\n        <nano-dropdown\n          {...this.dropDownConfig}\n          ref={(el) => (this.nanoDropdown = el)}\n          dialogTitle=\"Select options from the list below\"\n          class={{\n            dlist__dropdown: true,\n            'dlist--isfiltered': this.isFiltered,\n          }}\n          onNanoAfterShow={this.handleShow}\n          onNanoAfterHide={(_) => (this.open = false)}\n        >\n          <nano-menu\n            hidden={!this.actvOptEles.length}\n            type=\"listbox\"\n            label={this.inputLabel ? this.inputLabel.textContent : undefined}\n            class={{\n              dlist__menu: true,\n              'dlist__menu--open': this.dropwdownOpen,\n            }}\n            tabIndex={-1}\n            onNanoSelect={this.optSelected}\n            onKeyDown={this.optionKeyDown}\n            ref={(el) => (this.listBox = el)}\n          >\n            <slot name=\"list-top\" />\n            {!this.options.length && <slot />}\n            {!!this.options.length && <slot name=\"internal-opts\" />}\n            <slot name=\"list-bottom\" />\n          </nano-menu>\n          <nano-menu\n            type=\"listbox\"\n            label=\"No results found\"\n            hidden={!!this.actvOptEles.length}\n            class={{\n              dlist__menu: true,\n              'dlist__menu--open': this.dropwdownOpen,\n            }}\n          >\n            <slot name=\"no-result\" />\n          </nano-menu>\n          {!!this.actvOptEles && (\n            <div aria-live=\"polite\" role=\"status\" class=\"dlist__status\">\n              {this.actvOptEles.length} result\n              {this.actvOptEles.length > 1 ? 's' : ''} available.\n            </div>\n          )}\n        </nano-dropdown>\n      </Host>\n    );\n  }\n}\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --padding-start: padding at the start of nav-items (left r2l / right l2r). Defaults to '10px'\n   * @prop --padding-end: padding at the end of nav-items (right r2l / left l2r). Defaults to '10px'\n   * @prop --padding-top: padding at the top of nav-items. Defaults to '10px'\n   * @prop --padding-bottom: padding at the bottom of nav-items. Defaults to '10px'\n\n   * @prop --secondary-padding-top: padding at the top of nested nav-items. Defaults to 0\n   * @prop --secondary-padding-bottom: padding at the bottom of nested nav-items. Defaults to 0\n\n   * @prop --bg-color-hover: bg hover color of nav-items. Defaults to #{$color-blue--faded};\n   * @prop --bg-color-focus: bg focus color of nav-items. Defaults to #{$color-blue--faded};\n   * @prop --bg-color-selected: bg selected color of nav-items. Defaults to #{$color-blue--faded};\n\n   * @prop --color-hover: text hover color of nav-items. Defaults to #{$color-blue}\n   * @prop --color-selected: text selected color of nav-items. Defaults to #{$color-blue}\n   * @prop --color-focus: text focus color of nav-items. Defaults to #{$color-blue}\n\n   * @prop --focus-outline: the focus style of nav-items. Defaults to 'none'\n   * @prop --font-size: default font-size for all items. Defaults .9em;\n  */\n\n  --padding-start: #{$spacing-medium};\n  --padding-end: #{$spacing-medium};\n  --padding-top: #{$spacing-small};\n  --padding-bottom: #{$spacing-small};\n  --secondary-padding-top: 0;\n  --secondary-padding-bottom: 0;\n  --bg-color-hover: #{$color-blue--faded};\n  --bg-color-focus: #{$color-blue--faded};\n  --bg-color-selected: #{$color-blue--faded};\n  --color-hover: #{$color-blue};\n  --color-selected: #{$color-blue};\n  --color-focus: #{$color-blue};\n  --focus-outline: none;\n  --font-size: 0.9em;\n\n  display: block;\n}\n\n.menu {\n  font-size: var(--font-size, 0.9em);\n  overscroll-behavior: none;\n  min-width: var(--width);\n  position: relative;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)) {\n  @include padding(\n    var(--padding-top),\n    var(--padding-end),\n    var(--padding-bottom),\n    var(--padding-start)\n  );\n\n  display: block;\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  Method,\n  h,\n  Host,\n  Element,\n  Prop,\n  Listen,\n} from '@stencil/core';\nimport {\n  getTextContent,\n  getDirectChildren,\n  getActiveElement,\n} from '../../utils';\n\nconst CANSHADOW = !!document.head.attachShadow;\n\ntype ValidElement = HTMLNanoNavItemElement | HTMLNanoOptionElement;\ntype NNI = HTMLNanoNavItemElement;\n\n/**\n * Menu element. Commonly wrapped by `nano-dropdown` with `nano-option` and `nano-nav-item` elements nested.\n * Manages focus state / active.\n * @slot - The menu's content; `nano-option`, `nano-nav-item` elements as well as <hr> and more.\n */\n@Component({\n  tag: 'nano-menu',\n  styleUrl: 'menu.scss',\n  shadow: true,\n})\nexport class Menu {\n  private ignoreMouseEvents = false;\n  private ignoreMouseTimeout: any;\n  private menu: HTMLElement;\n  private typeToSelect = '';\n  private typeToSelectTimeout: any;\n\n  @Element() private el: HTMLNanoMenuElement;\n\n  // Public API\n\n  /** get the focus state of the menu @readonly */\n  @Prop()\n  get hasFocus() {\n    return this._hasFocus;\n  }\n  private _hasFocus = false;\n\n  /** changes the role of the underlying control - sometimes required for semantics */\n  @Prop() type: 'menu' | 'listbox' = 'menu';\n\n  /** an accessible label */\n  @Prop() label: string;\n\n  // Events\n\n  /** Emitted when the menu gains focus. */\n  @Event() nanoFocus: EventEmitter;\n\n  /** Emitted when the menu loses focus. */\n  @Event() nanoBlur: EventEmitter;\n\n  /** Emitted when a menu item is selected. */\n  @Event() nanoSelect: EventEmitter<\n    HTMLNanoOptionElement | HTMLNanoNavItemElement\n  >;\n\n  // Public Methods\n\n  /** Sets focus on the menu. */\n  @Method()\n  async setFocus() {\n    if (this.menu?.focus) this.menu.focus({ preventScroll: true });\n  }\n\n  /** Removes focus from the menu. */\n  @Method()\n  async removeFocus() {\n    if (this.menu?.blur) this.menu.blur();\n  }\n\n  /** Sets the current active item */\n  @Method()\n  async showActiveElement() {\n    if (this.selectedItem)\n      this.selectedItem.scrollIntoView({ block: 'nearest' });\n  }\n\n  /** Removes any active item's state */\n  @Method()\n  async resetActiveItem() {\n    this.getItems\n      .filter((i) => i.tagName.toLowerCase() === 'nano-option')\n      .map((i) => i.setAttribute('tabindex', '-1'));\n  }\n\n  // Private methods\n\n  get getItems() {\n    let items: ValidElement[];\n    let opened = this.el.querySelectorAll('nano-nav-item.secondary-open');\n    if (opened.length) {\n      const ctx = opened[opened.length - 1] as HTMLNanoNavItemElement;\n      items = Array.from(ctx.querySelectorAll('nano-nav-item, nano-option'));\n    } else {\n      items = getDirectChildren(\n        this.el,\n        'nano-nav-item, nano-option',\n        'slot'\n      ) as ValidElement[];\n    }\n    return items.filter((el) => !el.disabled && !el.hidden);\n  }\n\n  get activeItem() {\n    const activeElement = getActiveElement();\n    return this.getItems.find(\n      (i) =>\n        i.getAttribute('tabindex') === '0' ||\n        i === activeElement ||\n        i.classList.contains('has-focus')\n    );\n  }\n\n  get selectedItem() {\n    const activeElement = getActiveElement();\n    return this.getItems.find((i) => i.selected || i === activeElement);\n  }\n\n  private async setActiveFocusItem(item?: ValidElement, focus = true) {\n    const items = this.getItems;\n    let activeItem =\n      !item || item.disabled ? items.find((i) => i.selected) || items[0] : item;\n\n    items\n      .filter((i) => i.tagName.toLowerCase() === 'nano-option')\n      .map((i: HTMLNanoOptionElement) =>\n        i.setAttribute('tabindex', i === activeItem ? '0' : '-1')\n      );\n\n    if (!focus) return;\n\n    if (activeItem) {\n      (activeItem as NNI).setFocus\n        ? (activeItem as NNI).setFocus()\n        : activeItem.focus();\n    } else this.menu.focus();\n  }\n\n  // Event Handlers\n\n  @Listen('mousedown', { target: 'body' })\n  @Listen('keydown')\n  handleBlur(e: KeyboardEvent | MouseEvent) {\n    if (!this.hasFocus) return;\n\n    const kev = e as KeyboardEvent;\n    let found: boolean;\n\n    if (kev.key) {\n      if (kev.key !== 'Tab') return;\n      found =\n        getActiveElement() &&\n        getActiveElement().closest(this.el.tagName.toLowerCase()) === this.el;\n    } else found = !!e.composedPath().find((el) => el === this.el);\n\n    if (!found) {\n      this.resetActiveItem();\n      this._hasFocus = false;\n      this.nanoBlur.emit();\n    }\n  }\n\n  private handleFocus = () => {\n    this.setActiveFocusItem(this.selectedItem || this.getItems[0]);\n\n    this._hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item = target.closest('nano-nav-item');\n\n    if (item && !item.disabled) {\n      this.nanoSelect.emit(item);\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // When keying through the menu, if the mouse happens to be hovering over a menu item and the menu scrolls, the\n    // mouseout/mouseover event will fire causing the selection to be different than what the user expects. This gives\n    // us a way to temporarily ignore mouse events while the user is interacting with a keyboard.\n    clearTimeout(this.ignoreMouseTimeout);\n    this.ignoreMouseTimeout = setTimeout(\n      () => (this.ignoreMouseEvents = false),\n      500\n    );\n    this.ignoreMouseEvents = true;\n\n    // Make a selection when pressing enter\n    switch (event.key) {\n      case ' ':\n        if (this.activeItem) this.activeItem.click();\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n      case 'PageDown':\n      case 'PageUp':\n      case 'Home':\n      case 'End':\n        const items = this.getItems;\n        const selectedItem = this.activeItem;\n        let index = items.indexOf(selectedItem);\n\n        if (items.length) {\n          event.preventDefault();\n\n          if (event.key === 'ArrowDown') {\n            index++;\n          } else if (event.key === 'ArrowUp') {\n            index--;\n          } else if (event.key === 'Home' || event.key === 'PageUp') {\n            index = 0;\n          } else if (event.key === 'End' || event.key === 'PageDown') {\n            index = items.length - 1;\n          }\n\n          if (index < 0) index = items.length - 1;\n          if (index > items.length - 1) index = 0;\n\n          this.setActiveFocusItem(items[index]);\n          if (items[index]) items[index].scrollIntoView({ block: 'nearest' });\n          return;\n        }\n        break;\n    }\n\n    // Handle type-to-search behavior when non-control characters are entered\n    if (event.key === ' ' || /^[a-z0-9]+$/i.test(event.key)) {\n      clearTimeout(this.typeToSelectTimeout);\n      this.typeToSelectTimeout = setTimeout(\n        () => (this.typeToSelect = ''),\n        750\n      );\n      this.typeToSelect += event.key;\n\n      const items = this.getItems;\n      for (const item of items) {\n        const slot = item.shadowRoot.querySelector(\n          'slot:not([name])'\n        ) as HTMLSlotElement;\n        const label = getTextContent(slot).toLowerCase().trim();\n        if (\n          label.substring(0, this.typeToSelect.length) === this.typeToSelect\n        ) {\n          this.setActiveFocusItem(item);\n          break;\n        }\n      }\n    }\n  };\n\n  private handleMouseOver = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item =\n      target.closest('nano-nav-item') || target.closest('nano-option');\n\n    if (item && !this.ignoreMouseEvents) {\n      this.setActiveFocusItem(item);\n    }\n  };\n\n  // Component Lifecycle\n\n  render() {\n    return (\n      <Host\n        class={{\n          legacy: !CANSHADOW,\n        }}\n      >\n        <div\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseOver={this.handleMouseOver}\n          onFocus={this.handleFocus}\n          aria-label={this.label ? this.label : undefined}\n          role={this.type}\n          ref={(el) => (this.menu = el)}\n          part=\"base\"\n          class={{\n            menu: true,\n            ['menu--' + this.type]: true,\n            'menu--has-focus': this.hasFocus,\n          }}\n          tabIndex={-1}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --padding-top: Defaults to #{$spacing-small};\n   * @prop --padding-bottom: Defaults to #{$spacing-small};\n   * @prop --padding-start: Defaults to #{$spacing-small};\n   * @prop --padding-end: Defaults to #{$spacing-small};\n\n   * @prop --bg: default background. Defaults to none;\n   * @prop --bg-selected: background when selected. Defaults to #{$select-opt-selected};\n   * @prop --bg-focus: background when focused. Defaults to var(--nano-color-base, #{nano-color(primary, tint)});\n   * @prop --bg-disabled: background when disabled. Defaults to none;\n\n   * @prop --color: default text color. Defaults to var(--input-text-color, #{$input-text-color});\n   * @prop --color-selected: text color when selected. Defaults to var(--nano-color-base, #{nano-color(primary, base)});\n   * @prop --color-focus: text color when focused. Defaults to var(--nano-color-base, #{nano-color(primary, contrast)});\n   * @prop --color-disabled: text color when disabled. Defaults to #{$color-palegrey};\n\n    * @prop --opt-icon-size: Sizes all icons within the option. Defaults to 1.4em;\n  */\n\n  --bg: none;\n  --bg-selected: #{$select-opt-selected};\n  --bg-focus: var(--nano-color-base, #{nano-color(primary, tint)});\n  --bg-disabled: none;\n  --color: var(--input-text-color, #{$input-text-color});\n  --color-selected: var(--nano-color-base, #{nano-color(primary, base)});\n  --color-focus: var(--nano-color-contrast, #{nano-color(primary, contrast)});\n  --color-disabled: #{$color-palegrey};\n  --opt-icon-size: 1.6em;\n\n  display: block;\n  color: var(--color);\n  overflow: hidden;\n  font-size: 14px;\n  font-size: #{'clamp(12px, .9em, 16px)'};\n}\n\n:host(:focus) {\n  outline: none;\n}\n\n.option {\n  $self: &;\n\n  position: relative;\n  user-select: none;\n  cursor: pointer;\n  display: flex;\n  align-items: stretch;\n  width: 100%;\n  background: var(--bg);\n\n  @include padding(\n    var(--padding-top),\n    var(--padding-end),\n    var(--padding-bottom),\n    var(--padding-start)\n  );\n\n  // focus\n  :host(:focus) &:not(.option--disabled),\n  :host &.option--selected {\n    outline: none;\n    background: var(--bg-selected);\n    color: var(--color-selected);\n  }\n\n  :host(:focus) &:not(.option--disabled) {\n    background: var(--bg-focus);\n    color: var(--color-focus);\n  }\n\n  // disabled\n  &.option--disabled {\n    outline: none;\n    color: var(--color-disabled);\n    cursor: not-allowed;\n    background: var(--bg-disabled);\n  }\n\n  // no value\n  &.option--novalue {\n    font-style: italic;\n    opacity: 0.7;\n  }\n\n  &__label {\n    flex: 1 1 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  &__start {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n\n    ::slotted(nano-icon) {\n      font-size: var(--opt-icon-size);\n    }\n\n    ::slotted(:last-child) {\n      @include margin(null, 0.5em, null, null);\n    }\n  }\n\n  &__end {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n\n    ::slotted(nano-icon) {\n      font-size: var(--opt-icon-size);\n    }\n\n    ::slotted(:first-child) {\n      @include margin(null, null, null, 0.5em);\n    }\n  }\n\n  &__check {\n    visibility: hidden;\n    display: flex;\n    position: absolute;\n    left: 0.6em;\n    top: calc(50% - 0.6em);\n    align-items: center;\n    font-size: 0.9em;\n\n    #{$self}--selected:not(#{$self}--novalue) & {\n      visibility: visible;\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  h,\n  Host,\n  State,\n  Watch,\n  Element,\n  Listen,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { OptionInterface } from '../../interface';\nimport { debounce, getDirectChildren } from '../../utils';\n\nlet optIds = 0;\n\n/**\n * Select options to be used with [nano-select](/story/nano-components-select) or [nano-datalist](/story/nano-components-select)\n *\n * @slot - main label. Defaults to `label` or `value` prop\n * @slot checked-icon - icon to indicated checked / selected state. Defaults to fontawesome light/check\n * @slot start - suitable for an icon or content displayed at the start of the main label\n * @slot end - suitable for an icon or content displayed at the end of the main label\n */\n@Component({\n  tag: 'nano-option',\n  styleUrl: 'option.scss',\n  shadow: true,\n})\nexport class Option implements OptionInterface {\n  private optId = `nano-option-${optIds++}`;\n  @Element() host: HTMLNanoOptionElement;\n  @State() hasFocus = false;\n\n  constructor() {\n    this.handleClick = debounce(this.handleClick.bind(this), 5);\n  }\n\n  // Public API\n\n  /**\n   * Value of the option\n   */\n  @Prop({ mutable: true, reflect: true }) value: string = '';\n\n  @Watch('value')\n  valueChanged() {\n    if (!this.value || !this.value.length) this.value = this.labelContent;\n  }\n\n  /**\n   * Label of the option\n   */\n  @Prop({ mutable: true, reflect: true }) label: string = '';\n\n  @Watch('label')\n  labelChanged() {\n    if (!this.label || !this.label.length)\n      this.label = this.labelContent.length ? this.labelContent : this.value;\n  }\n\n  /**\n   * Whether this option is selected\n   */\n  @Prop({ reflect: true }) selected: boolean = false;\n\n  /**\n   * Whether this option should be disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** You can add extra meta for this option. When displayed in a list, users\n   * search / filter via extra related terms. Another usecase is 'endonyms'\n   */\n  @Prop() filterMeta: string = '';\n\n  /** Fired when an option is selected */\n  @Event() nanoSelect!: EventEmitter<HTMLNanoOptionElement>;\n\n  // Event handlers\n\n  // stop scrolling on select\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    if (e.key !== ' ' && e.key !== 'Enter') return;\n    e.preventDefault();\n    this.nanoSelect.emit(this.host);\n  }\n\n  private handleClick() {\n    if (this.disabled) return;\n    this.nanoSelect.emit(this.host);\n  }\n\n  // Private logic\n\n  private get labelContent() {\n    return getDirectChildren(this.host, '*:not([slot])', false)\n      .map((el) => el.textContent)\n      .join(' ')\n      .trim();\n  }\n\n  // Component lifecycle\n\n  componentWillLoad() {\n    this.valueChanged();\n    this.labelChanged();\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"option\"\n        aria-selected={this.selected ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n      >\n        <div\n          onMouseDown={this.handleClick}\n          id={this.optId}\n          class={{\n            option: true,\n            'option--selected': this.selected,\n            'option--disabled': this.disabled,\n            'option--novalue': !this.value,\n          }}\n        >\n          <div part=\"check-icon\" class=\"option__check\">\n            <slot name=\"check-icon\">\n              <nano-icon name=\"light/check\" aria-hidden=\"true\" />\n            </slot>\n          </div>\n          <div part=\"start\" class=\"option__start\">\n            <slot name=\"start\"></slot>\n          </div>\n          <div part=\"label\" class=\"option__label\">\n            <slot>{this.label || this.value}</slot>\n          </div>\n          <div part=\"end\" class=\"option__end\">\n            <slot name=\"end\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/datalist/datalist.scss?tag=nano-datalist&encapsulation=shadow","src/components/datalist/datalist.tsx","src/components/menu/menu.scss?tag=nano-menu&encapsulation=shadow","src/components/menu/menu.tsx","src/components/option/option.scss?tag=nano-option&encapsulation=shadow","src/components/option/option.tsx"],"names":["datalistCss","findLabel","formCtrl","foundLabel","id","document","querySelector","closest","listIds","DataList","exports","class_1","hostRef","_this","this","isNanoInput","typeToSelect","listId","isFiltered","shouldFocus","_allOptEles","actvOptEles","canOpen","optionIds","selected","_dropDownConfig","skidding","options","type","open","disableFilter","disabled","optSelected","e","stopPropagation","changeInputValue","detail","raf","inputChange","shouldOpen","handleShow","__awaiter","listBox","setFocus","inputClick","manageDropdownDisplay","inputKeydown","ignoreKeys","includes","key","typeToSelectTimeout","test","clearTimeout","window","setTimeout","setOptStartsWith","optionKeyDown","connectedInput","focus","deleteKeys","exactMatch","debounce","bind","Object","defineProperty","prototype","opts","_a","value","forEach","opt","ddc","assign","allOptEles","openWatcher","writeTask","nanoDropdown","setAttribute","toString","watchInputChange","nanoInput","host","_b","getInputElement","_c","sent","input","HTMLElement","manageSlotChangeListener","length","mo","MutationObserver","processSlottedContent","observe","childList","subtree","disconnect","undefined","flatMap","option","i","label","createElement","ariaPosinset","ariaSetsize","textContent","slot","append","__spreadArray","watchTypeChange","dwConfig","closeOnSelect","autocompleteType","readonly","tetherTo","dropDownConfig","readOnly","manageInputEvents","newInput","oldInput","removeEventListener","inputLabel","removeAttribute","addEventListener","labels","item","watchActvOptChange","c","val","optIds","hidden","isSelected","push","manageCanOpen","hasNoResult","fireActiveOptsEvent","nanoOptionsUpdated","emit","find","nanoSelected","filter","nanoDeselect","nanoSelect","defaultPrevented","event","Event","dispatchEvent","attrFind","toFind","toLowerCase","substring","foundEle","trim","filterMeta","Array","from","querySelectorAll","valStr","activeEles","indexOf","connectedCallback","componentDidLoad","componentDidRender","console","warn","render","h","Host","role","aria-owns","join","aria-label","ref","el","dialogTitle","class","dlist__dropdown","dlist--isfiltered","onNanoAfterShow","onNanoAfterHide","_","dlist__menu","dlist__menu--open","dropwdownOpen","tabIndex","onNanoSelect","onKeyDown","name","aria-live","menuCss","CANSHADOW","head","attachShadow","Menu","class_2","ignoreMouseEvents","_hasFocus","handleFocus","setActiveFocusItem","selectedItem","getItems","nanoFocus","handleClick","target","handleKeyDown","ignoreMouseTimeout","activeItem","click","items","index","preventDefault","scrollIntoView","block","_i","items_1","shadowRoot","getTextContent","handleMouseOver","menu","preventScroll","removeFocus","blur","showActiveElement","resetActiveItem","tagName","map","opened","ctx","getDirectChildren","activeElement","getActiveElement","getAttribute","classList","contains","handleBlur","hasFocus","kev","found","composedPath","nanoBlur","legacy","onClick","onMouseOver","onFocus","part","optionCss","Option","class_3","optId","valueChanged","labelContent","labelChanged","componentWillLoad","aria-selected","aria-disabled","onMouseDown","option--selected","option--disabled","option--novalue","aria-hidden"],"mappings":";;;mZAAA,IAAMA,EAAc,u4BCkBpB,SAASC,EAAUC,GACjB,IAAIC,EAEJ,GAAID,EAASE,GAAI,CACfD,EAAaE,SAASC,cAAc,cAAcJ,EAASE,GAAE,MAE/D,IAAKD,EAAY,CACfA,EAAaD,EAASK,QAAQ,SAEhC,OAAOJ,EAGT,IAAIK,EAAU,MAkBDC,EAAQC,EAAA,gBAAA,WA2CnB,SAAAC,EAAAC,GAAA,IAAAC,EAAAC,wJAxCQA,KAAAC,YAAc,MACdD,KAAAE,aAAe,GAKfF,KAAAG,OAAS,iBAAiBT,IAC1BM,KAAAI,WAAa,MACbJ,KAAAK,YAAc,MAmBdL,KAAAM,YAAuC,GAKtCN,KAAAO,YAAuC,GAKvCP,KAAAQ,QAAmB,KACnBR,KAAAS,UAAsB,GAUNT,KAAAU,SAAqB,GAUtCV,KAAAW,gBAAqC,CAC3CC,UAAW,GAKLZ,KAAAa,QAA8B,GAQ9Bb,KAAAc,KAA0C,QASzBd,KAAAe,KAAgB,MAajCf,KAAAgB,cAAgB,MAGhBhB,KAAAiB,SAAW,MA4PXjB,KAAAkB,YAAc,SAACC,GACrBA,EAAEC,kBACFrB,EAAKsB,iBAAiBF,EAAEG,QACxBC,GAAI,WAAM,OAAAxB,EAAKyB,iBAEf,GAAIzB,EAAKe,OAAS,SAAUf,EAAK0B,WAAa,OAoCxCzB,KAAA0B,WAAa,WAAA,OAAAC,UAAA5B,OAAA,OAAA,GAAA,gDACnB,GAAIC,KAAKc,OAAS,UAAYd,KAAKK,YAAa,CAC9CL,KAAKK,YAAc,MACnBL,KAAK4B,QAAQC,4BAgDT7B,KAAA8B,WAAa,WACnB/B,EAAK0B,WAAa,KAElB1B,EAAKgC,yBAGC/B,KAAAgC,aAAe,SAACb,GACtB,IAAMc,EAAa,CACjB,QACA,aACA,YACA,SACA,QACA,OAEF,GAAIA,EAAWC,SAASf,EAAEgB,KAAM,CAC9B,GAAIhB,EAAEgB,MAAQ,MAAOpC,EAAK0B,WAAa,MACvC,OAIF,GACE1B,EAAKe,OAAS,WACb,CAAC,YAAa,WAAWoB,SAASf,EAAEgB,OACpChB,EAAEgB,MAAQ,KAAOpC,EAAKqC,qBACvB,CACA,GAAIjB,EAAEgB,MAAQ,KAAO,eAAeE,KAAKlB,EAAEgB,KAAM,CAC/CG,aAAavC,EAAKqC,qBAClBrC,EAAKqC,oBAAsBG,OAAOC,YAAW,WAC3CzC,EAAKG,aAAe,GACpBH,EAAKqC,oBAAsB,IAC1B,KACHrC,EAAKG,cAAgBiB,EAAEgB,IACvBpC,EAAK0C,mBAEP,OAGF1C,EAAK0B,WAAa,KAElB1B,EAAKgC,wBACL,GAAI,CAAC,YAAa,WAAWG,SAASf,EAAEgB,KAAMpC,EAAKM,YAAc,MAK3DL,KAAA0C,cAAgB,SACtBvB,GAEA,IAAMc,EAAa,CACjB,QACA,UACA,YACA,SACA,QACA,MACA,QACA,SACA,WACA,OACA,MACA,KAEF,GAAIA,EAAWC,SAASf,EAAEgB,KAAM,CAC9B,GAAIhB,EAAEgB,MAAQ,SAAUpC,EAAK4C,eAAeC,QAC5C,OAGF,IAAMC,EAAa,CAAC,SAAU,aAE9B,GACE9C,EAAKe,OAAS,YACZf,EAAK+C,YAAcD,EAAWX,SAASf,EAAEgB,MAC3C,CACApC,EAAK4C,eAAeC,UA1dtB5C,KAAKwB,YAAcuB,EAAS/C,KAAKwB,YAAYwB,KAAKhD,MAAO,IA9B3DiD,OAAAC,eAAYrD,EAAAsD,UAAA,aAAU,KAAtB,WACE,OAAOnD,KAAKM,iBAEd,SAAuB8C,GAAvB,IAAArD,EAAAC,WAIEA,KAAKM,YAAc8C,EACnB,IAAIC,EAAArD,KAAK2C,kBAAc,MAAAU,SAAA,OAAA,EAAAA,EAAEC,MAAO,OAEhCF,EAAKG,SAAQ,SAACC,GACZ,GAAIA,EAAI9C,WAAaX,EAAKW,SAASwB,SAASsB,EAAIF,OAAQ,CACtDvD,EAAKsB,iBAAiBmC,6CA4B5BP,OAAAC,eACIrD,EAAAsD,UAAA,iBAAc,KADlB,WAEE,OAAOnD,KAAKW,qBAEd,SAAmB8C,GACjBzD,KAAKW,gBAAesC,OAAAS,OAAAT,OAAAS,OAAA,GAAQ1D,KAAKW,iBAAoB8C,yCAmBvDR,OAAAC,eACIrD,EAAAsD,UAAA,gBAAa,KADjB,WAEE,OAAOnD,KAAK2D,iDAOd9D,EAAAsD,UAAAS,YAAA,WAAA,IAAA7D,EAAAC,KACE6D,GAAU,WACR9D,EAAK+D,aAAa/C,KAAOhB,EAAKgB,KAC9BhB,EAAK4C,eAAeoB,aAAa,gBAAiBhE,EAAKgB,KAAKiD,gBAe1DnE,EAAAsD,UAAAc,iBAAN,oIAEOC,EAAYlE,KAAKmE,KAAK1E,QAAQ,eAAnC,MAAA,CAAA,EAAA,GACEO,KAAKC,YAAc,KACnBmE,EAAApE,KAAsB,MAAA,CAAA,EAAMkE,EAAUG,0BAAtCD,EAAKzB,eAAiB2B,EAAAC,0BACjB,GACLvE,KAAKwE,cACExE,KAAKwE,QAAU,WACrBN,EAAY3E,SAASC,cAAcQ,KAAKwE,QACzC,CACAxE,KAAKC,YAAc,MACnBD,KAAK2C,eAAiBuB,OACjB,GAAIlE,KAAKwE,iBAAiBC,YAAa,CAC5CzE,KAAK2C,eAAiB3C,KAAKwE,yCAK/B3E,EAAAsD,UAAAuB,yBAAA,WAAA,IAAA3E,EAAAC,WACE,IAAKA,KAAKmE,KAAM,OAGhB,KAAMnE,KAAKa,UAAYb,KAAKa,QAAQ8D,UAAY3E,KAAK4E,GAAI,CAClC,CACnB,IAAMA,EAAM5E,KAAK4E,GAAK,IAAIC,kBAAiB,WACzC,OAAA9E,EAAK+E,2BAEPF,EAAGG,QAAQ/E,KAAKmE,KAAM,CAAEa,UAAW,KAAMC,QAAS,OAEpDjF,KAAK8E,wBACL,OAIF,IAAIzB,EAAArD,KAAKa,WAAO,MAAAwC,SAAA,OAAA,EAAAA,EAAEsB,OAAQ,CACxB,KAAM3E,KAAK4E,GAAI,CACb5E,KAAK4E,GAAGM,aACRlF,KAAK4E,GAAKO,UAIZtB,GAAU,iBACR9D,EAAK4D,WAAa5D,EAAKc,QAAQuE,SAAQ,SAACC,EAAQC,GAC9C,GAAID,EAAO/B,OAAS+B,EAAOE,MAAO,CAChC,IAAM/B,EAAMP,OAAOS,OAAOnE,SAASiG,cAAc,eAAgB,CAC/DD,MAAOF,EAAOE,MACdjC,MAAO+B,EAAO/B,MACdmC,aAAcH,EACdI,YAAa3F,EAAKc,QAAQ8D,OAC1BjE,SAAU2E,EAAO3E,SACjBpB,GAAIS,EAAKI,OAAS,WAAamF,EAC/BK,YAAaN,EAAOE,MAAQF,EAAOE,MAAQF,EAAO/B,MAClDsC,KAAM,kBAER7F,EAAKoE,KAAK0B,OAAOrC,GACjB,OAAOA,MAIX,KAAIH,EAAAtD,EAAK4C,kBAAc,MAAAU,SAAA,OAAA,EAAAA,EAAEC,MAAMqB,SAAU5E,EAAKe,OAAS,SAAU,CAC/Df,EAAKyB,mBACAzB,EAAKQ,YAAWuF,cAAA,GAAO/F,EAAK4D,iBAQzC9D,EAAAsD,UAAA4C,gBAAA,WACE,IAAK/F,KAAK2C,eAAgB,OAE1B,IAAIqD,EAA8B,CAAEC,cAAe,OACnD,IAAIC,EAAoC,OACxC,IAAIC,EAAW,MAEf,OAAQnG,KAAKc,MACX,IAAK,aAEH,MACF,IAAK,SACHoF,EAAmB,OACnBC,EAAW,KACX,MAGJ,IAAKnG,KAAKC,YAAa,CACrB+F,EAASI,SAAWpG,KAAK2C,eAG3B3C,KAAKqG,eAAcpD,OAAAS,OAAAT,OAAAS,OAAA,GAAQ1D,KAAKqG,gBAAmBL,GACnDhG,KAAK2C,eAAeoB,aAAa,oBAAqBmC,GACtDlG,KAAK2C,eAAe2D,SAAWH,GAIjCtG,EAAAsD,UAAAoD,kBAAA,SAAkBC,EAA6BC,GAA/C,IAAA1G,EAAAC,WACE,KAAMyG,EAAU,CACd,IAAMvC,EAAYuC,EAAShH,QAAQ,cACnC,GAAIyE,EAAW,CACbA,EAAUwC,oBAAoB,aAAc1G,KAAKwB,aAEnDiF,EAASC,oBAAoB,SAAU1G,KAAKwB,aAC5CiF,EAASC,oBAAoB,QAAS1G,KAAK8B,YAC3C2E,EAASC,oBAAoB,UAAW1G,KAAKgC,cAC7CyE,EAASC,oBAAoB,QAAS1G,KAAKwB,aAE3CxB,KAAK2G,WAAa,KAElB9C,GAAU,WACR4C,EAASG,gBAAgB,QACzBH,EAASG,gBAAgB,iBACzBH,EAASG,gBAAgB,iBACzBH,EAASG,gBAAgB,aACzBH,EAASG,gBAAgB,iBACzBH,EAASG,gBAAgB,qBACzBH,EAASG,gBAAgB,mBAG7B,KAAMJ,EAAU,CACd,IAAMtC,EAAYsC,EAAS/G,QAAQ,cACnC,GAAIyE,EAAW,CACbA,EAAU2C,iBAAiB,aAAc7G,KAAKwB,aAEhDgF,EAASK,iBAAiB,SAAU7G,KAAKwB,aACzCgF,EAASK,iBAAiB,QAAS7G,KAAK8B,YACxC0E,EAASK,iBAAiB,UAAW7G,KAAKgC,cAC1CwE,EAASK,iBAAiB,QAAS7G,KAAKwB,aACxCxB,KAAKG,OAASH,KAAKmE,KAAK7E,IAAMU,KAAKG,OAEnCH,KAAK2G,aAAatD,EAAAmD,IAAQ,MAARA,SAAQ,OAAA,EAARA,EAAUM,UAAM,MAAAzD,SAAA,OAAA,EAAAA,EAAE0D,KAAK,KAAM5H,EAAUqH,GAEzD3C,GAAU,WACR9D,EAAKoE,KAAK7E,GAAKS,EAAKI,OACpBqG,EAASzC,aAAa,OAAQ,YAC9ByC,EAASzC,aAAa,gBAAiB,SACvCyC,EAASzC,aAAa,gBAAiBhE,EAAKI,QAC5CqG,EAASzC,aAAa,YAAahE,EAAKI,QACxCqG,EAASzC,aAAa,gBAAiB,WACvCyC,EAASzC,aAAa,eAAgB,YAO5ClE,EAAAsD,UAAA6D,mBAAA,WAAA,IAAAjH,EAAAC,WACE,IAAIiH,EAAI,EACR,IAAMC,IAAM7D,EAAArD,KAAK2C,kBAAc,MAAAU,SAAA,OAAA,EAAAA,EAAEC,QAAS,GAC1C,IAAM6D,EAAS,GAEftD,GAAU,WACR9D,EAAK4D,WAAWJ,SAAQ,SAACC,EAAK8B,GAC5B,GAAIvF,EAAKQ,YAAY2B,SAASsB,GAAM,CAClCyD,IACAzD,EAAIO,aAAa,gBAAiBkD,EAAI,IACtCzD,EAAIO,aAAa,eAAgBhE,EAAKQ,YAAYoE,OAAS,IAC3DnB,EAAI4D,OAAS,MACbrH,EAAKsH,WAAW7D,EAAK0D,OAChB,CACL1D,EAAIoD,gBAAgB,iBACpBpD,EAAIoD,gBAAgB,gBACpBpD,EAAI4D,OAAS,KACb5D,EAAI9C,SAAW,MAEjB8C,EAAIlE,GAAKS,EAAKI,OAAS,WAAamF,EACpC6B,EAAOG,KAAK9D,EAAIlE,OAElBS,EAAKU,UAAY0G,MAMrBtH,EAAAsD,UAAAoE,cAAA,WACE,GAAIvH,KAAKO,YAAYoE,QAAU3E,KAAKwH,YAAaxH,KAAKQ,QAAU,UAC3DR,KAAKQ,QAAU,OAQtBX,EAAAsD,UAAApB,sBAAA,WACE,GAAI/B,KAAKyB,YAAczB,KAAKQ,UAAYR,KAAKiB,SAAUjB,KAAKe,KAAO,KACnE,IAAKf,KAAKyB,aAAezB,KAAKQ,QAASR,KAAKe,KAAO,OAIrDlB,EAAAsD,UAAAsE,oBAAA,WACEzH,KAAK0H,mBAAmBC,KAAK3H,KAAKO,cAgB5BV,EAAAsD,UAAAkE,WAAA,SAAW7D,EAA4B0D,GAC7C,GAAIA,IAAQ1D,EAAIF,OAAStD,KAAKU,SAASwB,SAASsB,EAAIF,OAAQ,CAC1DE,EAAI9C,SAAW,UACV8C,EAAI9C,SAAW,OAGxBuC,OAAAC,eAAYrD,EAAAsD,UAAA,gBAAa,KAAzB,WACE,IAAKnD,KAAK8D,eAAiB9D,KAAKe,KAAM,OAAO,MAC7C,OAAO,2CAGTkC,OAAAC,eAAYrD,EAAAsD,UAAA,aAAU,KAAtB,WAAA,IAAApD,EAAAC,KACE,OAAOA,KAAK2D,WAAWiE,MACrB,SAACpE,GAAQ,OAAAzD,EAAK4C,eAAeW,QAAUE,EAAIF,+CAKvCzD,EAAAsD,UAAA9B,iBAAA,SAAiBmC,SACvB,IAAIqE,EAEJ,GAAI7H,KAAKU,SAASwB,SAASsB,EAAIF,OAAQ,CAErCtD,KAAKU,SAAWV,KAAKU,SAASoH,QAAO,SAACZ,GAAQ,OAAAA,IAAQ1D,EAAIF,SAC1DuE,EAAe7H,KAAK+H,aAAaJ,KAAKnE,OACjC,CAELxD,KAAKU,SAAQoF,cAAA,GAAO9F,KAAKU,UACzBmH,EAAe7H,KAAKgI,WAAWL,KAAKnE,GAGtC,IAAKqE,EAAaI,iBAAkB,CAClC,GAAIjI,KAAK2C,eAAgB3C,KAAK2C,eAAeW,MAAQE,EAAIF,MAEzD,IAAM4E,EAAQ,IAAI3F,OAAO4F,MAAM,WAC/B9E,EAAArD,KAAK2C,kBAAc,MAAAU,SAAA,OAAA,EAAAA,EAAE+E,cAAcF,KAe/BrI,EAAAsD,UAAAV,iBAAA,WAAA,IAAA1C,EAAAC,KACN,IAAMqI,EAAW,SAACC,GAChB,OAAAA,EAAOC,cAAcC,UAAU,EAAGzI,EAAKG,aAAayE,UACpD5E,EAAKG,cAEP,IAAMuI,EAAWzI,KAAK2D,WAAWiE,MAC/B,SAACpE,GACC,OAAAA,EAAIF,MAAMoF,OAAO/D,OAAS,IACzBnB,EAAIvC,WACJoH,EAAS7E,EAAImC,cACZ0C,EAAS7E,EAAIF,QACb+E,EAAS7E,EAAI+B,QACb8C,EAAS7E,EAAImF,gBAEnB,GAAIF,EAAUzI,KAAKqB,iBAAiBoH,IAK9B5I,EAAAsD,UAAA2B,sBAAA,WAAA,IAAA/E,EAAAC,KACNuB,GAAI,iBACFxB,EAAK4D,WAAaiF,MAAMC,KAAK9I,EAAKoE,KAAK2E,iBAAiB,gBACxD/I,EAAKyH,cAAgBzH,EAAKoE,KAAK3E,cAAc,sBAE7C,KAAI6D,EAAAtD,EAAK4C,kBAAc,MAAAU,SAAA,OAAA,EAAAA,EAAEC,MAAMqB,SAAU5E,EAAKe,OAAS,SAAU,CAC/Df,EAAKyB,mBACAzB,EAAKQ,YAAcR,EAAK4D,eAa3B9D,EAAAsD,UAAA3B,YAAA,WAAA,IAAAzB,EAAAC,KACN,GAAIA,KAAKgB,cAAe,CACtBhB,KAAKO,YAAcP,KAAK2D,WACxB,OAGF,IAAMuD,EAAMlH,KAAK2C,eAAeW,MAChC,IAAMyF,EAAS7B,EAAIwB,OAAOH,cAE1B,IAAIzF,EAAa,MACjB,IAAMkG,EAAa,GACnB,IAAMX,EAAW,SAACC,GAChB,OAAAA,EAAOC,cAAcU,QAAQF,IAAW,GAE1C/I,KAAK2D,WAAWJ,SAAQ,SAACC,GACvB,IACG0D,IAAQ1D,EAAIF,OAAS4D,IAAQ1D,EAAI+B,QAClCxF,EAAKe,OAAS,aACd,CACA0C,EAAI9C,SAAW,KACfoC,EAAa,UACR/C,EAAKsH,WAAW7D,EAAK0D,MAG9BlH,KAAK2D,WAAWJ,SAAQ,SAACC,GACvB,IAAKuF,EAAOpE,QAAU7B,EAAY,CAChCkG,EAAW1B,KAAK9D,QACX,GACLA,EAAIF,MAAMoF,OAAO/D,OAAS,IACzBnB,EAAIvC,WACJoH,EAAS7E,EAAImC,cACZ0C,EAAS7E,EAAIF,QACb+E,EAAS7E,EAAI+B,QACb8C,EAAS7E,EAAImF,aACf,CACAK,EAAW1B,KAAK9D,OAIpBxD,KAAKI,WAAa2I,EAAOpE,SAAW7B,EACpC9C,KAAKO,YAAcyI,GAmFrBnJ,EAAAsD,UAAA+F,kBAAA,WACElJ,KAAKiE,oBAGPpE,EAAAsD,UAAAgG,iBAAA,WACEnJ,KAAK0E,2BACL1E,KAAK4D,eAGP/D,EAAAsD,UAAAiG,mBAAA,WAAA,IAAArJ,EAAAC,KACEwC,YAAW,WACT,IAAKzC,EAAK4C,eACR0G,QAAQC,KACN,4GACAvJ,EAAKoE,QAER,MAGLtE,EAAAsD,UAAAoG,OAAA,WAAA,IAAAxJ,EAAAC,KACE,OACEwJ,EAACC,EAAI,CACHC,KAAK,UAASC,YACH3J,KAAKS,UAAUmJ,KAAK,KAAIC,aACxB,sCAEXL,EAAA,gBAAAvG,OAAAS,OAAA,GACM1D,KAAKqG,eAAc,CACvByD,IAAK,SAACC,GAAE,OAAMhK,EAAK+D,aAAeiG,GAClCC,YAAY,qCACZC,MAAO,CACLC,gBAAiB,KACjBC,oBAAqBnK,KAAKI,YAE5BgK,gBAAiBpK,KAAK0B,WACtB2I,gBAAiB,SAACC,GAAC,OAAMvK,EAAKgB,KAAO,SAErCyI,EAAA,YAAA,CACEpC,QAASpH,KAAKO,YAAYoE,OAC1B7D,KAAK,UACLyE,MAAOvF,KAAK2G,WAAa3G,KAAK2G,WAAWhB,YAAcR,UACvD8E,MAAO,CACLM,YAAa,KACbC,oBAAqBxK,KAAKyK,eAE5BC,UAAW,EACXC,aAAc3K,KAAKkB,YACnB0J,UAAW5K,KAAK0C,cAChBoH,IAAK,SAACC,GAAE,OAAMhK,EAAK6B,QAAUmI,IAE7BP,EAAA,OAAA,CAAMqB,KAAK,cACT7K,KAAKa,QAAQ8D,QAAU6E,EAAA,OAAA,QACtBxJ,KAAKa,QAAQ8D,QAAU6E,EAAA,OAAA,CAAMqB,KAAK,kBACrCrB,EAAA,OAAA,CAAMqB,KAAK,iBAEbrB,EAAA,YAAA,CACE1I,KAAK,UACLyE,MAAM,mBACN6B,SAAUpH,KAAKO,YAAYoE,OAC3BsF,MAAO,CACLM,YAAa,KACbC,oBAAqBxK,KAAKyK,gBAG5BjB,EAAA,OAAA,CAAMqB,KAAK,iBAEV7K,KAAKO,aACNiJ,EAAA,MAAA,CAAAsB,YAAe,SAASpB,KAAK,SAASO,MAAM,iBACzCjK,KAAKO,YAAYoE,OAAM,UACvB3E,KAAKO,YAAYoE,OAAS,EAAI,IAAM,GAAE,6lBAjlBhC,cChDrB,IAAMoG,EAAU,y0CCiBhB,IAAMC,IAAczL,SAAS0L,KAAKC,iBAerBC,EAAIvL,EAAA,YAAA,WALjB,SAAAwL,EAAAtL,GAAA,IAAAC,EAAAC,8HAMUA,KAAAqL,kBAAoB,MAGpBrL,KAAAE,aAAe,GAYfF,KAAAsL,UAAY,MAGZtL,KAAAc,KAA2B,OA4H3Bd,KAAAuL,YAAc,WACpBxL,EAAKyL,mBAAmBzL,EAAK0L,cAAgB1L,EAAK2L,SAAS,IAE3D3L,EAAKuL,UAAY,KACjBvL,EAAK4L,UAAUhE,QAGT3H,KAAA4L,YAAc,SAAC1D,GACrB,IAAM2D,EAAS3D,EAAM2D,OACrB,IAAM9E,EAAO8E,EAAOpM,QAAQ,iBAE5B,GAAIsH,IAASA,EAAK9F,SAAU,CAC1BlB,EAAKiI,WAAWL,KAAKZ,KAIjB/G,KAAA8L,cAAgB,SAAC5D,GAIvB5F,aAAavC,EAAKgM,oBAClBhM,EAAKgM,mBAAqBvJ,YACxB,WAAA,OAAOzC,EAAKsL,kBAAoB,QAChC,KAEFtL,EAAKsL,kBAAoB,KAGzB,OAAQnD,EAAM/F,KACZ,IAAK,IACH,GAAIpC,EAAKiM,WAAYjM,EAAKiM,WAAWC,QACrC,MACF,IAAK,YACL,IAAK,UACL,IAAK,WACL,IAAK,SACL,IAAK,OACL,IAAK,MACH,IAAMC,EAAQnM,EAAK2L,SACnB,IAAMD,EAAe1L,EAAKiM,WAC1B,IAAIG,EAAQD,EAAMjD,QAAQwC,GAE1B,GAAIS,EAAMvH,OAAQ,CAChBuD,EAAMkE,iBAEN,GAAIlE,EAAM/F,MAAQ,YAAa,CAC7BgK,SACK,GAAIjE,EAAM/F,MAAQ,UAAW,CAClCgK,SACK,GAAIjE,EAAM/F,MAAQ,QAAU+F,EAAM/F,MAAQ,SAAU,CACzDgK,EAAQ,OACH,GAAIjE,EAAM/F,MAAQ,OAAS+F,EAAM/F,MAAQ,WAAY,CAC1DgK,EAAQD,EAAMvH,OAAS,EAGzB,GAAIwH,EAAQ,EAAGA,EAAQD,EAAMvH,OAAS,EACtC,GAAIwH,EAAQD,EAAMvH,OAAS,EAAGwH,EAAQ,EAEtCpM,EAAKyL,mBAAmBU,EAAMC,IAC9B,GAAID,EAAMC,GAAQD,EAAMC,GAAOE,eAAe,CAAEC,MAAO,YACvD,OAEF,MAIJ,GAAIpE,EAAM/F,MAAQ,KAAO,eAAeE,KAAK6F,EAAM/F,KAAM,CACvDG,aAAavC,EAAKqC,qBAClBrC,EAAKqC,oBAAsBI,YACzB,WAAA,OAAOzC,EAAKG,aAAe,KAC3B,KAEFH,EAAKG,cAAgBgI,EAAM/F,IAE3B,IAAM+J,EAAQnM,EAAK2L,SACnB,IAAmB,IAAAa,EAAA,EAAAC,EAAAN,EAAAK,EAAAC,EAAA7H,OAAA4H,IAAO,CAArB,IAAMxF,EAAIyF,EAAAD,GACb,IAAM3G,EAAOmB,EAAK0F,WAAWjN,cAC3B,oBAEF,IAAM+F,EAAQmH,EAAe9G,GAAM2C,cAAcG,OACjD,GACEnD,EAAMiD,UAAU,EAAGzI,EAAKG,aAAayE,UAAY5E,EAAKG,aACtD,CACAH,EAAKyL,mBAAmBzE,GACxB,UAMA/G,KAAA2M,gBAAkB,SAACzE,GACzB,IAAM2D,EAAS3D,EAAM2D,OACrB,IAAM9E,EACJ8E,EAAOpM,QAAQ,kBAAoBoM,EAAOpM,QAAQ,eAEpD,GAAIsH,IAAShH,EAAKsL,kBAAmB,CACnCtL,EAAKyL,mBAAmBzE,KAnO5B9D,OAAAC,eACIkI,EAAAjI,UAAA,WAAQ,KADZ,WAEE,OAAOnD,KAAKsL,gDA2BRF,EAAAjI,UAAAtB,SAAN,sGACE,IAAIwB,EAAArD,KAAK4M,QAAI,MAAAvJ,SAAA,OAAA,EAAAA,EAAET,MAAO5C,KAAK4M,KAAKhK,MAAM,CAAEiK,cAAe,wBAKnDzB,EAAAjI,UAAA2J,YAAN,sGACE,IAAIzJ,EAAArD,KAAK4M,QAAI,MAAAvJ,SAAA,OAAA,EAAAA,EAAE0J,KAAM/M,KAAK4M,KAAKG,wBAK3B3B,EAAAjI,UAAA6J,kBAAN,gGACE,GAAIhN,KAAKyL,aACPzL,KAAKyL,aAAaY,eAAe,CAAEC,MAAO,6BAKxClB,EAAAjI,UAAA8J,gBAAN,gGACEjN,KAAK0L,SACF5D,QAAO,SAACxC,GAAM,OAAAA,EAAE4H,QAAQ3E,gBAAkB,iBAC1C4E,KAAI,SAAC7H,GAAM,OAAAA,EAAEvB,aAAa,WAAY,0BAK3Cd,OAAAC,eAAIkI,EAAAjI,UAAA,WAAQ,KAAZ,WACE,IAAI+I,EACJ,IAAIkB,EAASpN,KAAK+J,GAAGjB,iBAAiB,gCACtC,GAAIsE,EAAOzI,OAAQ,CACjB,IAAM0I,EAAMD,EAAOA,EAAOzI,OAAS,GACnCuH,EAAQtD,MAAMC,KAAKwE,EAAIvE,iBAAiB,mCACnC,CACLoD,EAAQoB,EACNtN,KAAK+J,GACL,6BACA,QAGJ,OAAOmC,EAAMpE,QAAO,SAACiC,GAAO,OAACA,EAAG9I,WAAa8I,EAAG3C,gDAGlDnE,OAAAC,eAAIkI,EAAAjI,UAAA,aAAU,KAAd,WACE,IAAMoK,EAAgBC,IACtB,OAAOxN,KAAK0L,SAAS9D,MACnB,SAACtC,GACC,OAAAA,EAAEmI,aAAa,cAAgB,KAC/BnI,IAAMiI,GACNjI,EAAEoI,UAAUC,SAAS,sDAI3B1K,OAAAC,eAAIkI,EAAAjI,UAAA,eAAY,KAAhB,WACE,IAAMoK,EAAgBC,IACtB,OAAOxN,KAAK0L,SAAS9D,MAAK,SAACtC,GAAM,OAAAA,EAAE5E,UAAY4E,IAAMiI,2CAGzCnC,EAAAjI,UAAAqI,mBAAN,SAAyBzE,EAAqBnE,GAAA,GAAAA,SAAA,EAAA,CAAAA,EAAA,kGAC9CsJ,EAAQlM,KAAK0L,SACfM,GACDjF,GAAQA,EAAK9F,SAAWiL,EAAMtE,MAAK,SAACtC,GAAM,OAAAA,EAAE5E,aAAawL,EAAM,GAAKnF,EAEvEmF,EACGpE,QAAO,SAACxC,GAAM,OAAAA,EAAE4H,QAAQ3E,gBAAkB,iBAC1C4E,KAAI,SAAC7H,GACJ,OAAAA,EAAEvB,aAAa,WAAYuB,IAAM0G,EAAa,IAAM,SAGxD,IAAKpJ,EAAO,MAAA,CAAA,GAEZ,GAAIoJ,EAAY,CACbA,EAAmBnK,SACfmK,EAAmBnK,WACpBmK,EAAWpJ,aACV5C,KAAK4M,KAAKhK,yBAOnBwI,EAAAjI,UAAAyK,WAAA,SAAWzM,GAAX,IAAApB,EAAAC,KACE,IAAKA,KAAK6N,SAAU,OAEpB,IAAMC,EAAM3M,EACZ,IAAI4M,EAEJ,GAAID,EAAI3L,IAAK,CACX,GAAI2L,EAAI3L,MAAQ,MAAO,OACvB4L,EACEP,KACAA,IAAmB/N,QAAQO,KAAK+J,GAAGmD,QAAQ3E,iBAAmBvI,KAAK+J,QAChEgE,IAAU5M,EAAE6M,eAAepG,MAAK,SAACmC,GAAO,OAAAA,IAAOhK,EAAKgK,MAE3D,IAAKgE,EAAO,CACV/N,KAAKiN,kBACLjN,KAAKsL,UAAY,MACjBtL,KAAKiO,SAAStG,SA0GlByD,EAAAjI,UAAAoG,OAAA,iBAAA,IAAAxJ,EAAAC,KACE,OACEwJ,EAACC,EAAI,CACHQ,MAAO,CACLiE,QAASlD,IAGXxB,EAAA,MAAA,CACE2E,QAASnO,KAAK4L,YACdhB,UAAW5K,KAAK8L,cAChBsC,YAAapO,KAAK2M,gBAClB0B,QAASrO,KAAKuL,YAAW1B,aACb7J,KAAKuF,MAAQvF,KAAKuF,MAAQJ,UACtCuE,KAAM1J,KAAKc,KACXgJ,IAAK,SAACC,GAAE,OAAMhK,EAAK6M,KAAO7C,GAC1BuE,KAAK,OACLrE,OAAK7F,EAAA,CACHwI,KAAM,MACNxI,EAAC,SAAWpE,KAAKc,MAAO,KACxBsD,EAAA,mBAAmBpE,KAAK6N,YAE1BnD,UAAW,GAEXlB,EAAA,OAAA,8HA5QO,cChCjB,IAAM+E,EAAY,8xGCelB,IAAIpH,EAAS,MAeAqH,EAAM5O,EAAA,cAAA,WAKjB,SAAA6O,EAAA3O,oDAJQE,KAAA0O,MAAQ,eAAevH,IAEtBnH,KAAA6N,SAAW,MAWoB7N,KAAAsD,MAAgB,GAUhBtD,KAAAuF,MAAgB,GAW/BvF,KAAAU,SAAoB,MAKpBV,KAAAiB,SAAoB,MAKrCjB,KAAA2I,WAAqB,GAvC3B3I,KAAK4L,YAAc7I,EAAS/C,KAAK4L,YAAY5I,KAAKhD,MAAO,GAW3DyO,EAAAtL,UAAAwL,aAAA,WACE,IAAK3O,KAAKsD,QAAUtD,KAAKsD,MAAMqB,OAAQ3E,KAAKsD,MAAQtD,KAAK4O,cAS3DH,EAAAtL,UAAA0L,aAAA,WACE,IAAK7O,KAAKuF,QAAUvF,KAAKuF,MAAMZ,OAC7B3E,KAAKuF,MAAQvF,KAAK4O,aAAajK,OAAS3E,KAAK4O,aAAe5O,KAAKsD,OAyBrEmL,EAAAtL,UAAA2I,cAAA,SAAc3K,GACZ,GAAIA,EAAEgB,MAAQ,KAAOhB,EAAEgB,MAAQ,QAAS,OACxChB,EAAEiL,iBACFpM,KAAKgI,WAAWL,KAAK3H,KAAKmE,OAGpBsK,EAAAtL,UAAAyI,YAAA,WACN,GAAI5L,KAAKiB,SAAU,OACnBjB,KAAKgI,WAAWL,KAAK3H,KAAKmE,OAK5BlB,OAAAC,eAAYuL,EAAAtL,UAAA,eAAY,KAAxB,WACE,OAAOmK,EAAkBtN,KAAKmE,KAAM,gBAAiB,OAClDgJ,KAAI,SAACpD,GAAO,OAAAA,EAAGpE,eACfiE,KAAK,KACLlB,6CAKL+F,EAAAtL,UAAA2L,kBAAA,WACE9O,KAAK2O,eACL3O,KAAK6O,gBAGPJ,EAAAtL,UAAAoG,OAAA,WACE,OACEC,EAACC,EAAI,CACHC,KAAK,SAAQqF,gBACE/O,KAAKU,SAAW,OAAS,QAAOsO,gBAChChP,KAAKiB,SAAW,OAAS,SAExCuI,EAAA,MAAA,CACEyF,YAAajP,KAAK4L,YAClBtM,GAAIU,KAAK0O,MACTzE,MAAO,CACL5E,OAAQ,KACR6J,mBAAoBlP,KAAKU,SACzByO,mBAAoBnP,KAAKiB,SACzBmO,mBAAoBpP,KAAKsD,QAG3BkG,EAAA,MAAA,CAAK8E,KAAK,aAAarE,MAAM,iBAC3BT,EAAA,OAAA,CAAMqB,KAAK,cACTrB,EAAA,YAAA,CAAWqB,KAAK,cAAawE,cAAa,WAG9C7F,EAAA,MAAA,CAAK8E,KAAK,QAAQrE,MAAM,iBACtBT,EAAA,OAAA,CAAMqB,KAAK,WAEbrB,EAAA,MAAA,CAAK8E,KAAK,QAAQrE,MAAM,iBACtBT,EAAA,OAAA,KAAOxJ,KAAKuF,OAASvF,KAAKsD,QAE5BkG,EAAA,MAAA,CAAK8E,KAAK,MAAMrE,MAAM,eACpBT,EAAA,OAAA,CAAMqB,KAAK,kRA9GJ","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n  * @prop --padding-top: for all nested `nano-option` elements. Defaults to #{$spacing-small};\n  * @prop --padding-bottom: for all nested `nano-option` elements. Defaults to #{$spacing-small};\n  * @prop --padding-start: for all nested `nano-option` elements. Defaults to #{$spacing-xlarge};\n  * @prop --padding-end: for all nested `nano-option` elements. Defaults to #{$spacing-xlarge};\n  * @prop --font-size: for all nested `nano-option` elements. Defaults to .8em;\n  * @prop --color: default text color of content other than `nano-option`. Defaults to #{map.get($colors, palegrey)};\n  */\n\n  --padding-top: #{$spacing-small};\n  --padding-bottom: #{$spacing-small};\n  --padding-start: #{$spacing-xlarge};\n  --padding-end: #{$spacing-xlarge};\n  --font-size: 0.8em;\n  --color: #{map.get($colors, palegrey)};\n\n  color: var(--color);\n}\n\n.dlist {\n  &--isfiltered {\n    ::slotted(*:not(nano-option):not([slot='no-result']):not([slot='list-top']):not([slot='list-bottom'])) {\n      display: none !important;\n    }\n  }\n\n  &__dropdown {\n    --min-width: 100%;\n    --overflow: auto;\n  }\n\n  &__status {\n    @include visually-hide();\n  }\n\n  &__menu {\n    --padding-top: inherit;\n    --padding-bottom: inherit;\n    --padding-start: inherit;\n    --padding-end: inherit;\n    --font-size: inherit;\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  h,\n  Host,\n  Element,\n  State,\n  Watch,\n  Prop,\n  Event,\n  EventEmitter,\n  writeTask,\n  Build,\n} from '@stencil/core';\nimport { debounce, raf } from '../../utils';\nimport type { Dropdown } from '../dropdown/dropdown';\nimport type { OptionInterface } from '../../interface';\n\nfunction findLabel(formCtrl: Element) {\n  let foundLabel: HTMLLabelElement;\n\n  if (formCtrl.id) {\n    foundLabel = document.querySelector(`label[for='${formCtrl.id}']`);\n  }\n  if (!foundLabel) {\n    foundLabel = formCtrl.closest('label');\n  }\n  return foundLabel;\n}\n\nlet listIds = 0;\n\n/**\n * `nano-datalist` a visually consistent and more flexible replacement for a native\n * [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist). Can be nested within a `nano-input`\n * or linked to any input control via the `input` prop. Is used internally within `nano-select`.\n * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using the `options` prop\n *\n * @slot - use `<nano-option>` elements for more complex html. Alternatively use the `options` prop\n * @slot list-top - shows at the top of the list when there are options present\n * @slot list-bottom - shows at the bottom of the list when there are options present\n * @slot no-result - shown when there are no results otherwise nothing will be shown\n */\n@Component({\n  tag: 'nano-datalist',\n  styleUrl: 'datalist.scss',\n  shadow: true,\n})\nexport class DataList implements ComponentInterface {\n  // Private State\n\n  private isNanoInput = false;\n  private typeToSelect = '';\n  private typeToSelectTimeout: number;\n  private nanoDropdown: HTMLNanoDropdownElement;\n  private listBox: HTMLNanoMenuElement;\n  private mo?: MutationObserver;\n  private listId = `nano-datalist-${listIds++}`;\n  private isFiltered = false;\n  private shouldFocus = false;\n  // all potential option eles. Set via slot or `options` prop.\n  // Some may get hidden due to filtering\n  private get allOptEles() {\n    return this._allOptEles;\n  }\n  private set allOptEles(opts) {\n    // when allOptEles are initially set (on slot change / options) -\n    // add options to 'selected' and fire selected event *if*\n    // value isn't set on the input\n    this._allOptEles = opts;\n    if (this.connectedInput?.value) return;\n\n    opts.forEach((opt) => {\n      if (opt.selected && !this.selected.includes(opt.value)) {\n        this.changeInputValue(opt);\n      }\n    });\n  }\n  private _allOptEles: HTMLNanoOptionElement[] = [];\n\n  @Element() host: HTMLNanoDatalistElement;\n\n  // active option eles that are not hidden.\n  @State() actvOptEles: HTMLNanoOptionElement[] = [];\n  @State() connectedInput: HTMLInputElement | HTMLTextAreaElement;\n  @State() inputLabel: HTMLLabelElement;\n  @State() hasNoResult: boolean;\n  @State() shouldOpen: boolean;\n  @State() canOpen: boolean = true;\n  @State() optionIds: string[] = [];\n\n  constructor() {\n    this.inputChange = debounce(this.inputChange.bind(this), 50);\n  }\n\n  // Public API\n\n  /** By default, items in the list will appear 'selected' when the value in the linked input control matches.\n   * However you can add other selected options via the the selected prop. */\n  @Prop({ mutable: true }) selected: string[] = [];\n\n  /** nano-dropdown config options you can pass to the nested dropdown component */\n  @Prop()\n  get dropDownConfig() {\n    return this._dropDownConfig;\n  }\n  set dropDownConfig(ddc: Partial<Dropdown>) {\n    this._dropDownConfig = { ...this._dropDownConfig, ...ddc };\n  }\n  private _dropDownConfig: Partial<Dropdown> = {\n    skidding: -1,\n  };\n\n  /** Provide an option list.\n   * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using this prop */\n  @Prop() options?: OptionInterface[] = [];\n\n  /** A selector to a HTMLInputElement */\n  @Prop() input?: string | HTMLInputElement;\n\n  /** Tweaks the datalist behaviour and linked control semantics and behaviour.\n   * e.g. 'select' will make the linked input control readonly.\n   */\n  @Prop() type: 'select' | 'selctMulti' | 'input' = 'input';\n\n  /** return all the active options currently within the datalist. Can be useful for validation */\n  @Prop()\n  get activeOptions() {\n    return this.allOptEles;\n  }\n\n  /** Force datalist open */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  @Watch('open')\n  openWatcher() {\n    writeTask(() => {\n      this.nanoDropdown.open = this.open;\n      this.connectedInput.setAttribute('aria-expanded', this.open.toString());\n    });\n  }\n\n  /** Use this option to disable to default filtering. This is useful if filtering happens\n   * externally via another method (e.g. via ajax)\n   */\n  @Prop() disableFilter = false;\n\n  /** Activate / deactivate the datalist control */\n  @Prop() disabled = false;\n\n  // State change watchers\n\n  @Watch('input')\n  async watchInputChange() {\n    let nanoInput;\n    if ((nanoInput = this.host.closest('nano-input'))) {\n      this.isNanoInput = true;\n      this.connectedInput = await nanoInput.getInputElement();\n    } else if (\n      this.input &&\n      typeof this.input === 'string' &&\n      (nanoInput = document.querySelector(this.input))\n    ) {\n      this.isNanoInput = false;\n      this.connectedInput = nanoInput;\n    } else if (this.input instanceof HTMLElement) {\n      this.connectedInput = this.input;\n    }\n  }\n\n  @Watch('options')\n  manageSlotChangeListener() {\n    if (!this.host) return;\n\n    // we're not using `options` - setup new MO\n    if ((!this.options || !this.options.length) && !this.mo) {\n      if (Build.isBrowser) {\n        const mo = (this.mo = new MutationObserver(() =>\n          this.processSlottedContent()\n        ));\n        mo.observe(this.host, { childList: true, subtree: true });\n      }\n      this.processSlottedContent();\n      return;\n    }\n\n    // we're using `options` - trash current MO\n    if (this.options?.length) {\n      if (!!this.mo) {\n        this.mo.disconnect();\n        this.mo = undefined;\n      }\n\n      // add imperative `options`\n      writeTask(() => {\n        this.allOptEles = this.options.flatMap((option, i) => {\n          if (option.value || option.label) {\n            const opt = Object.assign(document.createElement('nano-option'), {\n              label: option.label,\n              value: option.value,\n              ariaPosinset: i,\n              ariaSetsize: this.options.length,\n              selected: option.selected,\n              id: this.listId + '-option-' + i,\n              textContent: option.label ? option.label : option.value,\n              slot: 'internal-opts',\n            });\n            this.host.append(opt);\n            return opt;\n          }\n        });\n\n        if (this.connectedInput?.value.length && this.type !== 'select') {\n          this.inputChange();\n        } else this.actvOptEles = [...this.allOptEles];\n      });\n    }\n    // forceUpdate(this.host);\n  }\n\n  @Watch('type')\n  @Watch('connectedInput')\n  watchTypeChange() {\n    if (!this.connectedInput) return;\n\n    let dwConfig: Partial<Dropdown> = { closeOnSelect: false };\n    let autocompleteType: 'list' | 'both' = 'both';\n    let readonly = false;\n\n    switch (this.type) {\n      case 'selctMulti':\n        // dwConfig.closeOnSelect = false;\n        break;\n      case 'select':\n        autocompleteType = 'list';\n        readonly = true;\n        break;\n    }\n\n    if (!this.isNanoInput) {\n      dwConfig.tetherTo = this.connectedInput;\n    }\n\n    this.dropDownConfig = { ...this.dropDownConfig, ...dwConfig };\n    this.connectedInput.setAttribute('aria-autocomplete', autocompleteType);\n    this.connectedInput.readOnly = readonly;\n  }\n\n  @Watch('connectedInput')\n  manageInputEvents(newInput?: HTMLInputElement, oldInput?: HTMLInputElement) {\n    if (!!oldInput) {\n      const nanoInput = oldInput.closest('nano-input');\n      if (nanoInput) {\n        nanoInput.removeEventListener('nanoChange', this.inputChange);\n      }\n      oldInput.removeEventListener('change', this.inputChange);\n      oldInput.removeEventListener('click', this.inputClick);\n      oldInput.removeEventListener('keydown', this.inputKeydown);\n      oldInput.removeEventListener('input', this.inputChange);\n\n      this.inputLabel = null;\n\n      writeTask(() => {\n        oldInput.removeAttribute('role');\n        oldInput.removeAttribute('aria-expanded');\n        oldInput.removeAttribute('aria-controls');\n        oldInput.removeAttribute('aria-owns');\n        oldInput.removeAttribute('aria-haspopup');\n        oldInput.removeAttribute('aria-autocomplete');\n        oldInput.removeAttribute('autocomplete');\n      });\n    }\n    if (!!newInput) {\n      const nanoInput = newInput.closest('nano-input');\n      if (nanoInput) {\n        nanoInput.addEventListener('nanoChange', this.inputChange);\n      }\n      newInput.addEventListener('change', this.inputChange);\n      newInput.addEventListener('click', this.inputClick);\n      newInput.addEventListener('keydown', this.inputKeydown);\n      newInput.addEventListener('input', this.inputChange);\n      this.listId = this.host.id || this.listId;\n\n      this.inputLabel = newInput?.labels?.item(0) || findLabel(newInput);\n\n      writeTask(() => {\n        this.host.id = this.listId;\n        newInput.setAttribute('role', 'combobox');\n        newInput.setAttribute('aria-expanded', 'false');\n        newInput.setAttribute('aria-controls', this.listId);\n        newInput.setAttribute('aria-owns', this.listId);\n        newInput.setAttribute('aria-haspopup', 'listbox');\n        newInput.setAttribute('autocomplete', 'off');\n      });\n    }\n  }\n\n  @Watch('selected')\n  @Watch('actvOptEles')\n  watchActvOptChange() {\n    let c = 0;\n    const val = this.connectedInput?.value || '';\n    const optIds = [];\n\n    writeTask(() => {\n      this.allOptEles.forEach((opt, i) => {\n        if (this.actvOptEles.includes(opt)) {\n          c++;\n          opt.setAttribute('aria-posinset', c + '');\n          opt.setAttribute('aria-setsize', this.actvOptEles.length + '');\n          opt.hidden = false;\n          this.isSelected(opt, val);\n        } else {\n          opt.removeAttribute('aria-posinset');\n          opt.removeAttribute('aria-setsize');\n          opt.hidden = true;\n          opt.selected = false;\n        }\n        opt.id = this.listId + '-option-' + i;\n        optIds.push(opt.id);\n      });\n      this.optionIds = optIds;\n    });\n  }\n\n  @Watch('actvOptEles')\n  @Watch('hasNoResult')\n  manageCanOpen() {\n    if (this.actvOptEles.length || this.hasNoResult) this.canOpen = true;\n    else this.canOpen = false;\n  }\n\n  /**\n   * Opens the dropdown if it can, it should and there are items to display.\n   */\n  @Watch('shouldOpen')\n  @Watch('canOpen')\n  manageDropdownDisplay() {\n    if (this.shouldOpen && this.canOpen && !this.disabled) this.open = true;\n    if (!this.shouldOpen || !this.canOpen) this.open = false;\n  }\n\n  @Watch('actvOptEles')\n  fireActiveOptsEvent() {\n    this.nanoOptionsUpdated.emit(this.actvOptEles);\n  }\n\n  // Events\n\n  /** Fired when an item is selected. */\n  @Event() nanoSelect: EventEmitter<HTMLNanoOptionElement>;\n\n  /** Fired when a currently selected item is reselected. */\n  @Event() nanoDeselect: EventEmitter<HTMLNanoOptionElement>;\n\n  /** Fired when active options change */\n  @Event() nanoOptionsUpdated: EventEmitter<HTMLNanoOptionElement[]>;\n\n  // Private logic\n\n  private isSelected(opt: HTMLNanoOptionElement, val: string) {\n    if (val === opt.value || this.selected.includes(opt.value)) {\n      opt.selected = true;\n    } else opt.selected = false;\n  }\n\n  private get dropwdownOpen() {\n    if (!this.nanoDropdown || !this.open) return false;\n    return true;\n  }\n\n  private get exactMatch() {\n    return this.allOptEles.find(\n      (opt) => this.connectedInput.value === opt.value\n    );\n  }\n\n  /** reflect value back to the connected input unless the event is cancelled */\n  private changeInputValue(opt: HTMLNanoOptionElement) {\n    let nanoSelected;\n\n    if (this.selected.includes(opt.value)) {\n      // deselect option\n      this.selected = this.selected.filter((val) => val !== opt.value);\n      nanoSelected = this.nanoDeselect.emit(opt);\n    } else {\n      // select new option\n      this.selected = [...this.selected];\n      nanoSelected = this.nanoSelect.emit(opt);\n    }\n\n    if (!nanoSelected.defaultPrevented) {\n      if (this.connectedInput) this.connectedInput.value = opt.value;\n\n      const event = new window.Event('change');\n      this.connectedInput?.dispatchEvent(event);\n    }\n  }\n\n  // a new option has been picked\n  private optSelected = (e: CustomEvent<HTMLNanoOptionElement>) => {\n    e.stopPropagation();\n    this.changeInputValue(e.detail);\n    raf(() => this.inputChange());\n\n    if (this.type === 'select') this.shouldOpen = false;\n  };\n\n  // this is for type=\"select\" only.\n  // Filter options that start with text - aggregates letters (as opposed to getting the value from input)\n  private setOptStartsWith() {\n    const attrFind = (toFind: string) =>\n      toFind.toLowerCase().substring(0, this.typeToSelect.length) ===\n      this.typeToSelect;\n\n    const foundEle = this.allOptEles.find(\n      (opt) =>\n        opt.value.trim().length > 0 &&\n        !opt.disabled &&\n        (attrFind(opt.textContent) ||\n          attrFind(opt.value) ||\n          attrFind(opt.label) ||\n          attrFind(opt.filterMeta))\n    );\n    if (foundEle) this.changeInputValue(foundEle);\n  }\n\n  // Event handlers\n\n  private processSlottedContent() {\n    raf(() => {\n      this.allOptEles = Array.from(this.host.querySelectorAll('nano-option'));\n      this.hasNoResult = !!this.host.querySelector('[slot=\"no-result\"]');\n\n      if (this.connectedInput?.value.length && this.type !== 'select') {\n        this.inputChange();\n      } else this.actvOptEles = this.allOptEles;\n    });\n  }\n\n  // sets focus immediately on open when 'select' - mirroring native behaviour\n  private handleShow = async () => {\n    if (this.type === 'select' || this.shouldFocus) {\n      this.shouldFocus = false;\n      this.listBox.setFocus();\n    }\n  };\n\n  // any changes to the connected input value will filter the list of active options\n  private inputChange() {\n    if (this.disableFilter) {\n      this.actvOptEles = this.allOptEles;\n      return;\n    }\n\n    const val = this.connectedInput.value;\n    const valStr = val.trim().toLowerCase();\n\n    let exactMatch = false;\n    const activeEles = [];\n    const attrFind = (toFind: string) =>\n      toFind.toLowerCase().indexOf(valStr) > -1;\n\n    this.allOptEles.forEach((opt) => {\n      if (\n        (val === opt.value || val === opt.label) &&\n        this.type !== 'selctMulti'\n      ) {\n        opt.selected = true;\n        exactMatch = true;\n      } else this.isSelected(opt, val);\n    });\n\n    this.allOptEles.forEach((opt) => {\n      if (!valStr.length || exactMatch) {\n        activeEles.push(opt);\n      } else if (\n        opt.value.trim().length > 0 &&\n        !opt.disabled &&\n        (attrFind(opt.textContent) ||\n          attrFind(opt.value) ||\n          attrFind(opt.label) ||\n          attrFind(opt.filterMeta))\n      ) {\n        activeEles.push(opt);\n      }\n    });\n\n    this.isFiltered = valStr.length && !exactMatch;\n    this.actvOptEles = activeEles;\n  }\n\n  private inputClick = () => {\n    this.shouldOpen = true;\n    // open dropdown if possible\n    this.manageDropdownDisplay();\n  };\n\n  private inputKeydown = (e: KeyboardEvent) => {\n    const ignoreKeys = [\n      'Shift',\n      'ArrowRight',\n      'ArrowLeft',\n      'Escape',\n      'Enter',\n      'Tab',\n    ];\n    if (ignoreKeys.includes(e.key)) {\n      if (e.key === 'Tab') this.shouldOpen = false;\n      return;\n    }\n\n    // When select, mirror native select behaviour. Search on closed list\n    if (\n      this.type === 'select' &&\n      !['ArrowDown', 'ArrowUp'].includes(e.key) &&\n      (e.key !== ' ' || this.typeToSelectTimeout)\n    ) {\n      if (e.key === ' ' || /^[a-z0-9]+$/i.test(e.key)) {\n        clearTimeout(this.typeToSelectTimeout);\n        this.typeToSelectTimeout = window.setTimeout(() => {\n          this.typeToSelect = '';\n          this.typeToSelectTimeout = 0;\n        }, 750);\n        this.typeToSelect += e.key;\n        this.setOptStartsWith();\n      }\n      return;\n    }\n\n    this.shouldOpen = true;\n    // open dropdown if possible\n    this.manageDropdownDisplay();\n    if (['ArrowDown', 'ArrowUp'].includes(e.key)) this.shouldFocus = true;\n  };\n\n  // handles key down on options. Either 'picks'\n  // an option or passes event back to input for search / filter\n  private optionKeyDown = (\n    e: KeyboardEvent & { target: HTMLNanoOptionElement }\n  ) => {\n    const ignoreKeys = [\n      'Shift',\n      'ArrowUp',\n      'ArrowDown',\n      'Escape',\n      'Enter',\n      'Tab',\n      'Space',\n      'PageUp',\n      'PageDown',\n      'Home',\n      'End',\n      ' ',\n    ];\n    if (ignoreKeys.includes(e.key)) {\n      if (e.key === 'Escape') this.connectedInput.focus();\n      return;\n    }\n\n    const deleteKeys = ['Delete', 'Backspace'];\n    // this passes whatever's typed back to our input control\n    if (\n      this.type !== 'select' &&\n      (!this.exactMatch || deleteKeys.includes(e.key))\n    ) {\n      this.connectedInput.focus();\n    }\n  };\n\n  // Component lifecycle\n\n  connectedCallback() {\n    this.watchInputChange();\n  }\n\n  componentDidLoad() {\n    this.manageSlotChangeListener();\n    this.openWatcher();\n  }\n\n  componentDidRender(): void {\n    setTimeout(() => {\n      if (!this.connectedInput)\n        console.warn(\n          'no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop',\n          this.host\n        );\n    }, 500);\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"listbox\"\n        aria-owns={this.optionIds.join(' ')}\n        aria-label=\"Select options from the list below\"\n      >\n        <nano-dropdown\n          {...this.dropDownConfig}\n          ref={(el) => (this.nanoDropdown = el)}\n          dialogTitle=\"Select options from the list below\"\n          class={{\n            dlist__dropdown: true,\n            'dlist--isfiltered': this.isFiltered,\n          }}\n          onNanoAfterShow={this.handleShow}\n          onNanoAfterHide={(_) => (this.open = false)}\n        >\n          <nano-menu\n            hidden={!this.actvOptEles.length}\n            type=\"listbox\"\n            label={this.inputLabel ? this.inputLabel.textContent : undefined}\n            class={{\n              dlist__menu: true,\n              'dlist__menu--open': this.dropwdownOpen,\n            }}\n            tabIndex={-1}\n            onNanoSelect={this.optSelected}\n            onKeyDown={this.optionKeyDown}\n            ref={(el) => (this.listBox = el)}\n          >\n            <slot name=\"list-top\" />\n            {!this.options.length && <slot />}\n            {!!this.options.length && <slot name=\"internal-opts\" />}\n            <slot name=\"list-bottom\" />\n          </nano-menu>\n          <nano-menu\n            type=\"listbox\"\n            label=\"No results found\"\n            hidden={!!this.actvOptEles.length}\n            class={{\n              dlist__menu: true,\n              'dlist__menu--open': this.dropwdownOpen,\n            }}\n          >\n            <slot name=\"no-result\" />\n          </nano-menu>\n          {!!this.actvOptEles && (\n            <div aria-live=\"polite\" role=\"status\" class=\"dlist__status\">\n              {this.actvOptEles.length} result\n              {this.actvOptEles.length > 1 ? 's' : ''} available.\n            </div>\n          )}\n        </nano-dropdown>\n      </Host>\n    );\n  }\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --padding-start: padding at the start of nav-items (left r2l / right l2r). Defaults to '10px'\n   * @prop --padding-end: padding at the end of nav-items (right r2l / left l2r). Defaults to '10px'\n   * @prop --padding-top: padding at the top of nav-items. Defaults to '10px'\n   * @prop --padding-bottom: padding at the bottom of nav-items. Defaults to '10px'\n\n   * @prop --secondary-padding-top: padding at the top of nested nav-items. Defaults to 0\n   * @prop --secondary-padding-bottom: padding at the bottom of nested nav-items. Defaults to 0\n\n   * @prop --bg-color-hover: bg hover color of nav-items. Defaults to #{map.get($colors, blue--faded)};\n   * @prop --bg-color-focus: bg focus color of nav-items. Defaults to #{map.get($colors, blue--faded)};\n   * @prop --bg-color-selected: bg selected color of nav-items. Defaults to #{map.get($colors, blue--faded)};\n\n   * @prop --color-hover: text hover color of nav-items. Defaults to #{map.get($colors, blue)}\n   * @prop --color-selected: text selected color of nav-items. Defaults to #{map.get($colors, blue)}\n   * @prop --color-focus: text focus color of nav-items. Defaults to #{map.get($colors, blue)}\n\n   * @prop --focus-outline: the focus style of nav-items. Defaults to 'none'\n   * @prop --font-size: default font-size for all items. Defaults .9em;\n  */\n\n  --padding-start: #{$spacing-medium};\n  --padding-end: #{$spacing-medium};\n  --padding-top: #{$spacing-small};\n  --padding-bottom: #{$spacing-small};\n  --secondary-padding-top: 0;\n  --secondary-padding-bottom: 0;\n  --bg-color-hover: #{map.get($colors, blue--faded)};\n  --bg-color-focus: #{map.get($colors, blue--faded)};\n  --bg-color-selected: #{map.get($colors, blue--faded)};\n  --color-hover: #{map.get($colors, blue)};\n  --color-selected: #{map.get($colors, blue)};\n  --color-focus: #{map.get($colors, blue)};\n  --focus-outline: none;\n  --font-size: 0.9em;\n\n  display: block;\n}\n\n.menu {\n  font-size: var(--font-size, 0.9em);\n  overscroll-behavior: none;\n  min-width: var(--width);\n  position: relative;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)) {\n  @include padding(\n    var(--padding-top),\n    var(--padding-end),\n    var(--padding-bottom),\n    var(--padding-start)\n  );\n\n  display: block;\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  Method,\n  h,\n  Host,\n  Element,\n  Prop,\n  Listen,\n} from '@stencil/core';\nimport {\n  getTextContent,\n  getDirectChildren,\n  getActiveElement,\n} from '../../utils';\n\nconst CANSHADOW = !!document.head.attachShadow;\n\ntype ValidElement = HTMLNanoNavItemElement | HTMLNanoOptionElement;\ntype NNI = HTMLNanoNavItemElement;\n\n/**\n * Menu element. Commonly wrapped by `nano-dropdown` with `nano-option` and `nano-nav-item` elements nested.\n * Manages focus state / active.\n * @slot - The menu's content; `nano-option`, `nano-nav-item` elements as well as <hr> and more.\n */\n@Component({\n  tag: 'nano-menu',\n  styleUrl: 'menu.scss',\n  shadow: true,\n})\nexport class Menu {\n  private ignoreMouseEvents = false;\n  private ignoreMouseTimeout: any;\n  private menu: HTMLElement;\n  private typeToSelect = '';\n  private typeToSelectTimeout: any;\n\n  @Element() private el: HTMLNanoMenuElement;\n\n  // Public API\n\n  /** get the focus state of the menu @readonly */\n  @Prop()\n  get hasFocus() {\n    return this._hasFocus;\n  }\n  private _hasFocus = false;\n\n  /** changes the role of the underlying control - sometimes required for semantics */\n  @Prop() type: 'menu' | 'listbox' = 'menu';\n\n  /** an accessible label */\n  @Prop() label: string;\n\n  // Events\n\n  /** Emitted when the menu gains focus. */\n  @Event() nanoFocus: EventEmitter;\n\n  /** Emitted when the menu loses focus. */\n  @Event() nanoBlur: EventEmitter;\n\n  /** Emitted when a menu item is selected. */\n  @Event() nanoSelect: EventEmitter<\n    HTMLNanoOptionElement | HTMLNanoNavItemElement\n  >;\n\n  // Public Methods\n\n  /** Sets focus on the menu. */\n  @Method()\n  async setFocus() {\n    if (this.menu?.focus) this.menu.focus({ preventScroll: true });\n  }\n\n  /** Removes focus from the menu. */\n  @Method()\n  async removeFocus() {\n    if (this.menu?.blur) this.menu.blur();\n  }\n\n  /** Sets the current active item */\n  @Method()\n  async showActiveElement() {\n    if (this.selectedItem)\n      this.selectedItem.scrollIntoView({ block: 'nearest' });\n  }\n\n  /** Removes any active item's state */\n  @Method()\n  async resetActiveItem() {\n    this.getItems\n      .filter((i) => i.tagName.toLowerCase() === 'nano-option')\n      .map((i) => i.setAttribute('tabindex', '-1'));\n  }\n\n  // Private methods\n\n  get getItems() {\n    let items: ValidElement[];\n    let opened = this.el.querySelectorAll('nano-nav-item.secondary-open');\n    if (opened.length) {\n      const ctx = opened[opened.length - 1] as HTMLNanoNavItemElement;\n      items = Array.from(ctx.querySelectorAll('nano-nav-item, nano-option'));\n    } else {\n      items = getDirectChildren(\n        this.el,\n        'nano-nav-item, nano-option',\n        'slot'\n      ) as ValidElement[];\n    }\n    return items.filter((el) => !el.disabled && !el.hidden);\n  }\n\n  get activeItem() {\n    const activeElement = getActiveElement();\n    return this.getItems.find(\n      (i) =>\n        i.getAttribute('tabindex') === '0' ||\n        i === activeElement ||\n        i.classList.contains('has-focus')\n    );\n  }\n\n  get selectedItem() {\n    const activeElement = getActiveElement();\n    return this.getItems.find((i) => i.selected || i === activeElement);\n  }\n\n  private async setActiveFocusItem(item?: ValidElement, focus = true) {\n    const items = this.getItems;\n    let activeItem =\n      !item || item.disabled ? items.find((i) => i.selected) || items[0] : item;\n\n    items\n      .filter((i) => i.tagName.toLowerCase() === 'nano-option')\n      .map((i: HTMLNanoOptionElement) =>\n        i.setAttribute('tabindex', i === activeItem ? '0' : '-1')\n      );\n\n    if (!focus) return;\n\n    if (activeItem) {\n      (activeItem as NNI).setFocus\n        ? (activeItem as NNI).setFocus()\n        : activeItem.focus();\n    } else this.menu.focus();\n  }\n\n  // Event Handlers\n\n  @Listen('mousedown', { target: 'body' })\n  @Listen('keydown')\n  handleBlur(e: KeyboardEvent | MouseEvent) {\n    if (!this.hasFocus) return;\n\n    const kev = e as KeyboardEvent;\n    let found: boolean;\n\n    if (kev.key) {\n      if (kev.key !== 'Tab') return;\n      found =\n        getActiveElement() &&\n        getActiveElement().closest(this.el.tagName.toLowerCase()) === this.el;\n    } else found = !!e.composedPath().find((el) => el === this.el);\n\n    if (!found) {\n      this.resetActiveItem();\n      this._hasFocus = false;\n      this.nanoBlur.emit();\n    }\n  }\n\n  private handleFocus = () => {\n    this.setActiveFocusItem(this.selectedItem || this.getItems[0]);\n\n    this._hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item = target.closest('nano-nav-item');\n\n    if (item && !item.disabled) {\n      this.nanoSelect.emit(item);\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // When keying through the menu, if the mouse happens to be hovering over a menu item and the menu scrolls, the\n    // mouseout/mouseover event will fire causing the selection to be different than what the user expects. This gives\n    // us a way to temporarily ignore mouse events while the user is interacting with a keyboard.\n    clearTimeout(this.ignoreMouseTimeout);\n    this.ignoreMouseTimeout = setTimeout(\n      () => (this.ignoreMouseEvents = false),\n      500\n    );\n    this.ignoreMouseEvents = true;\n\n    // Make a selection when pressing enter\n    switch (event.key) {\n      case ' ':\n        if (this.activeItem) this.activeItem.click();\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n      case 'PageDown':\n      case 'PageUp':\n      case 'Home':\n      case 'End':\n        const items = this.getItems;\n        const selectedItem = this.activeItem;\n        let index = items.indexOf(selectedItem);\n\n        if (items.length) {\n          event.preventDefault();\n\n          if (event.key === 'ArrowDown') {\n            index++;\n          } else if (event.key === 'ArrowUp') {\n            index--;\n          } else if (event.key === 'Home' || event.key === 'PageUp') {\n            index = 0;\n          } else if (event.key === 'End' || event.key === 'PageDown') {\n            index = items.length - 1;\n          }\n\n          if (index < 0) index = items.length - 1;\n          if (index > items.length - 1) index = 0;\n\n          this.setActiveFocusItem(items[index]);\n          if (items[index]) items[index].scrollIntoView({ block: 'nearest' });\n          return;\n        }\n        break;\n    }\n\n    // Handle type-to-search behavior when non-control characters are entered\n    if (event.key === ' ' || /^[a-z0-9]+$/i.test(event.key)) {\n      clearTimeout(this.typeToSelectTimeout);\n      this.typeToSelectTimeout = setTimeout(\n        () => (this.typeToSelect = ''),\n        750\n      );\n      this.typeToSelect += event.key;\n\n      const items = this.getItems;\n      for (const item of items) {\n        const slot = item.shadowRoot.querySelector(\n          'slot:not([name])'\n        ) as HTMLSlotElement;\n        const label = getTextContent(slot).toLowerCase().trim();\n        if (\n          label.substring(0, this.typeToSelect.length) === this.typeToSelect\n        ) {\n          this.setActiveFocusItem(item);\n          break;\n        }\n      }\n    }\n  };\n\n  private handleMouseOver = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item =\n      target.closest('nano-nav-item') || target.closest('nano-option');\n\n    if (item && !this.ignoreMouseEvents) {\n      this.setActiveFocusItem(item);\n    }\n  };\n\n  // Component Lifecycle\n\n  render() {\n    return (\n      <Host\n        class={{\n          legacy: !CANSHADOW,\n        }}\n      >\n        <div\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseOver={this.handleMouseOver}\n          onFocus={this.handleFocus}\n          aria-label={this.label ? this.label : undefined}\n          role={this.type}\n          ref={(el) => (this.menu = el)}\n          part=\"base\"\n          class={{\n            menu: true,\n            ['menu--' + this.type]: true,\n            'menu--has-focus': this.hasFocus,\n          }}\n          tabIndex={-1}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --padding-top: Defaults to #{$spacing-small};\n   * @prop --padding-bottom: Defaults to #{$spacing-small};\n   * @prop --padding-start: Defaults to #{$spacing-small};\n   * @prop --padding-end: Defaults to #{$spacing-small};\n\n   * @prop --bg: default background. Defaults to none;\n   * @prop --bg-selected: background when selected. Defaults to #{$select-opt-selected};\n   * @prop --bg-focus: background when focused. Defaults to var(--nano-color-base, #{nano-color(primary, tint)});\n   * @prop --bg-disabled: background when disabled. Defaults to none;\n\n   * @prop --color: default text color. Defaults to var(--input-text-color, #{$input-text-color});\n   * @prop --color-selected: text color when selected. Defaults to var(--nano-color-base, #{nano-color(primary, base)});\n   * @prop --color-focus: text color when focused. Defaults to var(--nano-color-base, #{nano-color(primary, contrast)});\n   * @prop --color-disabled: text color when disabled. Defaults to #{map.get($colors, palegrey)};\n\n    * @prop --opt-icon-size: Sizes all icons within the option. Defaults to 1.4em;\n  */\n\n  --bg: none;\n  --bg-selected: #{$select-opt-selected};\n  --bg-focus: var(--nano-color-base, #{nano-color(primary, tint)});\n  --bg-disabled: none;\n  --color: var(--input-text-color, #{$input-text-color});\n  --color-selected: var(--nano-color-base, #{nano-color(primary, base)});\n  --color-focus: var(--nano-color-contrast, #{nano-color(primary, contrast)});\n  --color-disabled: #{map.get($colors, palegrey)};\n  --opt-icon-size: 1.6em;\n\n  display: block;\n  color: var(--color);\n  overflow: hidden;\n  font-size: 14px;\n  font-size: #{'clamp(12px, .9em, 16px)'};\n}\n\n:host(:focus) {\n  outline: none;\n}\n\n.option {\n  $self: &;\n\n  position: relative;\n  user-select: none;\n  cursor: pointer;\n  display: flex;\n  align-items: stretch;\n  width: 100%;\n  background: var(--bg);\n\n  @include padding(\n    var(--padding-top),\n    var(--padding-end),\n    var(--padding-bottom),\n    var(--padding-start)\n  );\n\n  // focus\n  :host(:focus) &:not(.option--disabled),\n  :host &.option--selected {\n    outline: none;\n    background: var(--bg-selected);\n    color: var(--color-selected);\n  }\n\n  :host(:focus) &:not(.option--disabled) {\n    background: var(--bg-focus);\n    color: var(--color-focus);\n  }\n\n  // disabled\n  &.option--disabled {\n    outline: none;\n    color: var(--color-disabled);\n    cursor: not-allowed;\n    background: var(--bg-disabled);\n  }\n\n  // no value\n  &.option--novalue {\n    font-style: italic;\n    opacity: 0.7;\n  }\n\n  &__label {\n    flex: 1 1 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  &__start {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n\n    ::slotted(nano-icon) {\n      font-size: var(--opt-icon-size);\n    }\n\n    ::slotted(:last-child) {\n      @include margin(null, 0.5em, null, null);\n    }\n  }\n\n  &__end {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n\n    ::slotted(nano-icon) {\n      font-size: var(--opt-icon-size);\n    }\n\n    ::slotted(:first-child) {\n      @include margin(null, null, null, 0.5em);\n    }\n  }\n\n  &__check {\n    visibility: hidden;\n    display: flex;\n    position: absolute;\n    left: 0.6em;\n    top: calc(50% - 0.6em);\n    align-items: center;\n    font-size: 0.9em;\n\n    #{$self}--selected:not(#{$self}--novalue) & {\n      visibility: visible;\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  h,\n  Host,\n  State,\n  Watch,\n  Element,\n  Listen,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { OptionInterface } from '../../interface';\nimport { debounce, getDirectChildren } from '../../utils';\n\nlet optIds = 0;\n\n/**\n * Select options to be used with [nano-select](/story/nano-components-select) or [nano-datalist](/story/nano-components-select)\n *\n * @slot - main label. Defaults to `label` or `value` prop\n * @slot checked-icon - icon to indicated checked / selected state. Defaults to fontawesome light/check\n * @slot start - suitable for an icon or content displayed at the start of the main label\n * @slot end - suitable for an icon or content displayed at the end of the main label\n */\n@Component({\n  tag: 'nano-option',\n  styleUrl: 'option.scss',\n  shadow: true,\n})\nexport class Option implements OptionInterface {\n  private optId = `nano-option-${optIds++}`;\n  @Element() host: HTMLNanoOptionElement;\n  @State() hasFocus = false;\n\n  constructor() {\n    this.handleClick = debounce(this.handleClick.bind(this), 5);\n  }\n\n  // Public API\n\n  /**\n   * Value of the option\n   */\n  @Prop({ mutable: true, reflect: true }) value: string = '';\n\n  @Watch('value')\n  valueChanged() {\n    if (!this.value || !this.value.length) this.value = this.labelContent;\n  }\n\n  /**\n   * Label of the option\n   */\n  @Prop({ mutable: true, reflect: true }) label: string = '';\n\n  @Watch('label')\n  labelChanged() {\n    if (!this.label || !this.label.length)\n      this.label = this.labelContent.length ? this.labelContent : this.value;\n  }\n\n  /**\n   * Whether this option is selected\n   */\n  @Prop({ reflect: true }) selected: boolean = false;\n\n  /**\n   * Whether this option should be disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** You can add extra meta for this option. When displayed in a list, users\n   * search / filter via extra related terms. Another usecase is 'endonyms'\n   */\n  @Prop() filterMeta: string = '';\n\n  /** Fired when an option is selected */\n  @Event() nanoSelect!: EventEmitter<HTMLNanoOptionElement>;\n\n  // Event handlers\n\n  // stop scrolling on select\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    if (e.key !== ' ' && e.key !== 'Enter') return;\n    e.preventDefault();\n    this.nanoSelect.emit(this.host);\n  }\n\n  private handleClick() {\n    if (this.disabled) return;\n    this.nanoSelect.emit(this.host);\n  }\n\n  // Private logic\n\n  private get labelContent() {\n    return getDirectChildren(this.host, '*:not([slot])', false)\n      .map((el) => el.textContent)\n      .join(' ')\n      .trim();\n  }\n\n  // Component lifecycle\n\n  componentWillLoad() {\n    this.valueChanged();\n    this.labelChanged();\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"option\"\n        aria-selected={this.selected ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n      >\n        <div\n          onMouseDown={this.handleClick}\n          id={this.optId}\n          class={{\n            option: true,\n            'option--selected': this.selected,\n            'option--disabled': this.disabled,\n            'option--novalue': !this.value,\n          }}\n        >\n          <div part=\"check-icon\" class=\"option__check\">\n            <slot name=\"check-icon\">\n              <nano-icon name=\"light/check\" aria-hidden=\"true\" />\n            </slot>\n          </div>\n          <div part=\"start\" class=\"option__start\">\n            <slot name=\"start\"></slot>\n          </div>\n          <div part=\"label\" class=\"option__label\">\n            <slot>{this.label || this.value}</slot>\n          </div>\n          <div part=\"end\" class=\"option__end\">\n            <slot name=\"end\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-625d3733.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+var r="top";var t="bottom";var e="right";var n="left";var a="auto";var i=[r,t,e,n];var o="start";var f="end";var v="clippingParents";var u="viewport";var s="popper";var c="reference";var l=i.reduce((function(r,t){return r.concat([t+"-"+o,t+"-"+f])}),[]);var d=[].concat(i,[a]).reduce((function(r,t){return r.concat([t,t+"-"+o,t+"-"+f])}),[]);var p="beforeRead";var h="read";var b="afterRead";var m="beforeMain";var y="main";var w="afterMain";var x="beforeWrite";var O="write";var g="afterWrite";var j=[p,h,b,m,y,w,x,O,g];function k(r){return r?(r.nodeName||"").toLowerCase():null}function A(r){if(r==null){return window}if(r.toString()!=="[object Window]"){var t=r.ownerDocument;return t?t.defaultView||window:window}return r}function M(r){var t=A(r).Element;return r instanceof t||r instanceof Element}function q(r){var t=A(r).HTMLElement;return r instanceof t||r instanceof HTMLElement}function E(r){if(typeof ShadowRoot==="undefined"){return false}var t=A(r).ShadowRoot;return r instanceof t||r instanceof ShadowRoot}function P(r){var t=r.state;Object.keys(t.elements).forEach((function(r){var e=t.styles[r]||{};var n=t.attributes[r]||{};var a=t.elements[r];if(!q(a)||!k(a)){return}Object.assign(a.style,e);Object.keys(n).forEach((function(r){var t=n[r];if(t===false){a.removeAttribute(r)}else{a.setAttribute(r,t===true?"":t)}}))}))}function S(r){var t=r.state;var e={popper:{position:t.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};Object.assign(t.elements.popper.style,e.popper);t.styles=e;if(t.elements.arrow){Object.assign(t.elements.arrow.style,e.arrow)}return function(){Object.keys(t.elements).forEach((function(r){var n=t.elements[r];var a=t.attributes[r]||{};var i=Object.keys(t.styles.hasOwnProperty(r)?t.styles[r]:e[r]);var o=i.reduce((function(r,t){r[t]="";return r}),{});if(!q(n)||!k(n)){return}Object.assign(n.style,o);Object.keys(a).forEach((function(r){n.removeAttribute(r)}))}))}}const W={name:"applyStyles",enabled:true,phase:"write",fn:P,effect:S,requires:["computeStyles"]};function B(r){return r.split("-")[0]}var T=Math.max;var R=Math.min;var H=Math.round;function L(r,t){if(t===void 0){t=false}var e=r.getBoundingClientRect();var n=1;var a=1;if(q(r)&&t){var i=r.offsetHeight;var o=r.offsetWidth;if(o>0){n=H(e.width)/o||1}if(i>0){a=H(e.height)/i||1}}return{width:e.width/n,height:e.height/a,top:e.top/a,right:e.right/n,bottom:e.bottom/a,left:e.left/n,x:e.left/n,y:e.top/a}}function F(r){var t=L(r);var e=r.offsetWidth;var n=r.offsetHeight;if(Math.abs(t.width-e)<=1){e=t.width}if(Math.abs(t.height-n)<=1){n=t.height}return{x:r.offsetLeft,y:r.offsetTop,width:e,height:n}}function I(r,t){var e=t.getRootNode&&t.getRootNode();if(r.contains(t)){return true}else if(e&&E(e)){var n=t;do{if(n&&r.isSameNode(n)){return true}n=n.parentNode||n.host}while(n)}return false}function C(r){return A(r).getComputedStyle(r)}function z(r){return["table","td","th"].indexOf(k(r))>=0}function D(r){return((M(r)?r.ownerDocument:r.document)||window.document).documentElement}function U(r){if(k(r)==="html"){return r}return r.assignedSlot||r.parentNode||(E(r)?r.host:null)||D(r)}function V(r){if(!q(r)||C(r).position==="fixed"){return null}return r.offsetParent}function $(r){var t=navigator.userAgent.toLowerCase().indexOf("firefox")!==-1;var e=navigator.userAgent.indexOf("Trident")!==-1;if(e&&q(r)){var n=C(r);if(n.position==="fixed"){return null}}var a=U(r);if(E(a)){a=a.host}while(q(a)&&["html","body"].indexOf(k(a))<0){var i=C(a);if(i.transform!=="none"||i.perspective!=="none"||i.contain==="paint"||["transform","perspective"].indexOf(i.willChange)!==-1||t&&i.willChange==="filter"||t&&i.filter&&i.filter!=="none"){return a}else{a=a.parentNode}}return null}function _(r){var t=A(r);var e=V(r);while(e&&z(e)&&C(e).position==="static"){e=V(e)}if(e&&(k(e)==="html"||k(e)==="body"&&C(e).position==="static")){return t}return e||$(r)||t}function G(r){return["top","bottom"].indexOf(r)>=0?"x":"y"}function J(r,t,e){return T(r,R(t,e))}function K(r,t,e){var n=J(r,t,e);return n>e?e:n}function N(){return{top:0,right:0,bottom:0,left:0}}function Q(r){return Object.assign({},N(),r)}function X(r,t){return t.reduce((function(t,e){t[e]=r;return t}),{})}var Y=function r(t,e){t=typeof t==="function"?t(Object.assign({},e.rects,{placement:e.placement})):t;return Q(typeof t!=="number"?t:X(t,i))};function Z(a){var i;var o=a.state,f=a.name,v=a.options;var u=o.elements.arrow;var s=o.modifiersData.popperOffsets;var c=B(o.placement);var l=G(c);var d=[n,e].indexOf(c)>=0;var p=d?"height":"width";if(!u||!s){return}var h=Y(v.padding,o);var b=F(u);var m=l==="y"?r:n;var y=l==="y"?t:e;var w=o.rects.reference[p]+o.rects.reference[l]-s[l]-o.rects.popper[p];var x=s[l]-o.rects.reference[l];var O=_(u);var g=O?l==="y"?O.clientHeight||0:O.clientWidth||0:0;var j=w/2-x/2;var k=h[m];var A=g-b[p]-h[y];var M=g/2-b[p]/2+j;var q=J(k,M,A);var E=l;o.modifiersData[f]=(i={},i[E]=q,i.centerOffset=q-M,i)}function rr(r){var t=r.state,e=r.options;var n=e.element,a=n===void 0?"[data-popper-arrow]":n;if(a==null){return}if(typeof a==="string"){a=t.elements.popper.querySelector(a);if(!a){return}}if(!I(t.elements.popper,a)){return}t.elements.arrow=a}const tr={name:"arrow",enabled:true,phase:"main",fn:Z,effect:rr,requires:["popperOffsets"],requiresIfExists:["preventOverflow"]};function er(r){return r.split("-")[1]}var nr={top:"auto",right:"auto",bottom:"auto",left:"auto"};function ar(r){var t=r.x,e=r.y;var n=window;var a=n.devicePixelRatio||1;return{x:H(t*a)/a||0,y:H(e*a)/a||0}}function ir(a){var i;var o=a.popper,v=a.popperRect,u=a.placement,s=a.variation,c=a.offsets,l=a.position,d=a.gpuAcceleration,p=a.adaptive,h=a.roundOffsets,b=a.isFixed;var m=c.x,y=m===void 0?0:m,w=c.y,x=w===void 0?0:w;var O=typeof h==="function"?h({x:y,y:x}):{x:y,y:x};y=O.x;x=O.y;var g=c.hasOwnProperty("x");var j=c.hasOwnProperty("y");var k=n;var M=r;var q=window;if(p){var E=_(o);var P="clientHeight";var S="clientWidth";if(E===A(o)){E=D(o);if(C(E).position!=="static"&&l==="absolute"){P="scrollHeight";S="scrollWidth"}}E=E;if(u===r||(u===n||u===e)&&s===f){M=t;var W=b&&E===q&&q.visualViewport?q.visualViewport.height:E[P];x-=W-v.height;x*=d?1:-1}if(u===n||(u===r||u===t)&&s===f){k=e;var B=b&&E===q&&q.visualViewport?q.visualViewport.width:E[S];y-=B-v.width;y*=d?1:-1}}var T=Object.assign({position:l},p&&nr);var R=h===true?ar({x:y,y:x}):{x:y,y:x};y=R.x;x=R.y;if(d){var H;return Object.assign({},T,(H={},H[M]=j?"0":"",H[k]=g?"0":"",H.transform=(q.devicePixelRatio||1)<=1?"translate("+y+"px, "+x+"px)":"translate3d("+y+"px, "+x+"px, 0)",H))}return Object.assign({},T,(i={},i[M]=j?x+"px":"",i[k]=g?y+"px":"",i.transform="",i))}function or(r){var t=r.state,e=r.options;var n=e.gpuAcceleration,a=n===void 0?true:n,i=e.adaptive,o=i===void 0?true:i,f=e.roundOffsets,v=f===void 0?true:f;var u={placement:B(t.placement),variation:er(t.placement),popper:t.elements.popper,popperRect:t.rects.popper,gpuAcceleration:a,isFixed:t.options.strategy==="fixed"};if(t.modifiersData.popperOffsets!=null){t.styles.popper=Object.assign({},t.styles.popper,ir(Object.assign({},u,{offsets:t.modifiersData.popperOffsets,position:t.options.strategy,adaptive:o,roundOffsets:v})))}if(t.modifiersData.arrow!=null){t.styles.arrow=Object.assign({},t.styles.arrow,ir(Object.assign({},u,{offsets:t.modifiersData.arrow,position:"absolute",adaptive:false,roundOffsets:v})))}t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-placement":t.placement})}const fr={name:"computeStyles",enabled:true,phase:"beforeWrite",fn:or,data:{}};var vr={passive:true};function ur(r){var t=r.state,e=r.instance,n=r.options;var a=n.scroll,i=a===void 0?true:a,o=n.resize,f=o===void 0?true:o;var v=A(t.elements.popper);var u=[].concat(t.scrollParents.reference,t.scrollParents.popper);if(i){u.forEach((function(r){r.addEventListener("scroll",e.update,vr)}))}if(f){v.addEventListener("resize",e.update,vr)}return function(){if(i){u.forEach((function(r){r.removeEventListener("scroll",e.update,vr)}))}if(f){v.removeEventListener("resize",e.update,vr)}}}const sr={name:"eventListeners",enabled:true,phase:"write",fn:function r(){},effect:ur,data:{}};var cr={left:"right",right:"left",bottom:"top",top:"bottom"};function lr(r){return r.replace(/left|right|bottom|top/g,(function(r){return cr[r]}))}var dr={start:"end",end:"start"};function pr(r){return r.replace(/start|end/g,(function(r){return dr[r]}))}function hr(r){var t=A(r);var e=t.pageXOffset;var n=t.pageYOffset;return{scrollLeft:e,scrollTop:n}}function br(r){return L(D(r)).left+hr(r).scrollLeft}function mr(r){var t=A(r);var e=D(r);var n=t.visualViewport;var a=e.clientWidth;var i=e.clientHeight;var o=0;var f=0;if(n){a=n.width;i=n.height;if(!/^((?!chrome|android).)*safari/i.test(navigator.userAgent)){o=n.offsetLeft;f=n.offsetTop}}return{width:a,height:i,x:o+br(r),y:f}}function yr(r){var t;var e=D(r);var n=hr(r);var a=(t=r.ownerDocument)==null?void 0:t.body;var i=T(e.scrollWidth,e.clientWidth,a?a.scrollWidth:0,a?a.clientWidth:0);var o=T(e.scrollHeight,e.clientHeight,a?a.scrollHeight:0,a?a.clientHeight:0);var f=-n.scrollLeft+br(r);var v=-n.scrollTop;if(C(a||e).direction==="rtl"){f+=T(e.clientWidth,a?a.clientWidth:0)-i}return{width:i,height:o,x:f,y:v}}function wr(r){var t=C(r),e=t.overflow,n=t.overflowX,a=t.overflowY;return/auto|scroll|overlay|hidden/.test(e+a+n)}function xr(r){if(["html","body","#document"].indexOf(k(r))>=0){return r.ownerDocument.body}if(q(r)&&wr(r)){return r}return xr(U(r))}function Or(r,t){var e;if(t===void 0){t=[]}var n=xr(r);var a=n===((e=r.ownerDocument)==null?void 0:e.body);var i=A(n);var o=a?[i].concat(i.visualViewport||[],wr(n)?n:[]):n;var f=t.concat(o);return a?f:f.concat(Or(U(o)))}function gr(r){return Object.assign({},r,{left:r.x,top:r.y,right:r.x+r.width,bottom:r.y+r.height})}function jr(r){var t=L(r);t.top=t.top+r.clientTop;t.left=t.left+r.clientLeft;t.bottom=t.top+r.clientHeight;t.right=t.left+r.clientWidth;t.width=r.clientWidth;t.height=r.clientHeight;t.x=t.left;t.y=t.top;return t}function kr(r,t){return t===u?gr(mr(r)):M(t)?jr(t):gr(yr(D(r)))}function Ar(r){var t=Or(U(r));var e=["absolute","fixed"].indexOf(C(r).position)>=0;var n=e&&q(r)?_(r):r;if(!M(n)){return[]}return t.filter((function(r){return M(r)&&I(r,n)&&k(r)!=="body"}))}function Mr(r,t,e){var n=t==="clippingParents"?Ar(r):[].concat(t);var a=[].concat(n,[e]);var i=a[0];var o=a.reduce((function(t,e){var n=kr(r,e);t.top=T(n.top,t.top);t.right=R(n.right,t.right);t.bottom=R(n.bottom,t.bottom);t.left=T(n.left,t.left);return t}),kr(r,i));o.width=o.right-o.left;o.height=o.bottom-o.top;o.x=o.left;o.y=o.top;return o}function qr(a){var i=a.reference,v=a.element,u=a.placement;var s=u?B(u):null;var c=u?er(u):null;var l=i.x+i.width/2-v.width/2;var d=i.y+i.height/2-v.height/2;var p;switch(s){case r:p={x:l,y:i.y-v.height};break;case t:p={x:l,y:i.y+i.height};break;case e:p={x:i.x+i.width,y:d};break;case n:p={x:i.x-v.width,y:d};break;default:p={x:i.x,y:i.y}}var h=s?G(s):null;if(h!=null){var b=h==="y"?"height":"width";switch(c){case o:p[h]=p[h]-(i[b]/2-v[b]/2);break;case f:p[h]=p[h]+(i[b]/2-v[b]/2);break}}return p}function Er(n,a){if(a===void 0){a={}}var o=a,f=o.placement,l=f===void 0?n.placement:f,d=o.boundary,p=d===void 0?v:d,h=o.rootBoundary,b=h===void 0?u:h,m=o.elementContext,y=m===void 0?s:m,w=o.altBoundary,x=w===void 0?false:w,O=o.padding,g=O===void 0?0:O;var j=Q(typeof g!=="number"?g:X(g,i));var k=y===s?c:s;var A=n.rects.popper;var q=n.elements[x?k:y];var E=Mr(M(q)?q:q.contextElement||D(n.elements.popper),p,b);var P=L(n.elements.reference);var S=qr({reference:P,element:A,strategy:"absolute",placement:l});var W=gr(Object.assign({},A,S));var B=y===s?W:P;var T={top:E.top-B.top+j.top,bottom:B.bottom-E.bottom+j.bottom,left:E.left-B.left+j.left,right:B.right-E.right+j.right};var R=n.modifiersData.offset;if(y===s&&R){var H=R[l];Object.keys(T).forEach((function(n){var a=[e,t].indexOf(n)>=0?1:-1;var i=[r,t].indexOf(n)>=0?"y":"x";T[n]+=H[i]*a}))}return T}function Pr(r,t){if(t===void 0){t={}}var e=t,n=e.placement,a=e.boundary,o=e.rootBoundary,f=e.padding,v=e.flipVariations,u=e.allowedAutoPlacements,s=u===void 0?d:u;var c=er(n);var p=c?v?l:l.filter((function(r){return er(r)===c})):i;var h=p.filter((function(r){return s.indexOf(r)>=0}));if(h.length===0){h=p}var b=h.reduce((function(t,e){t[e]=Er(r,{placement:e,boundary:a,rootBoundary:o,padding:f})[B(e)];return t}),{});return Object.keys(b).sort((function(r,t){return b[r]-b[t]}))}function Sr(r){if(B(r)===a){return[]}var t=lr(r);return[pr(r),t,pr(t)]}function Wr(i){var f=i.state,v=i.options,u=i.name;if(f.modifiersData[u]._skip){return}var s=v.mainAxis,c=s===void 0?true:s,l=v.altAxis,d=l===void 0?true:l,p=v.fallbackPlacements,h=v.padding,b=v.boundary,m=v.rootBoundary,y=v.altBoundary,w=v.flipVariations,x=w===void 0?true:w,O=v.allowedAutoPlacements;var g=f.options.placement;var j=B(g);var k=j===g;var A=p||(k||!x?[lr(g)]:Sr(g));var M=[g].concat(A).reduce((function(r,t){return r.concat(B(t)===a?Pr(f,{placement:t,boundary:b,rootBoundary:m,padding:h,flipVariations:x,allowedAutoPlacements:O}):t)}),[]);var q=f.rects.reference;var E=f.rects.popper;var P=new Map;var S=true;var W=M[0];for(var T=0;T<M.length;T++){var R=M[T];var H=B(R);var L=er(R)===o;var F=[r,t].indexOf(H)>=0;var I=F?"width":"height";var C=Er(f,{placement:R,boundary:b,rootBoundary:m,altBoundary:y,padding:h});var z=F?L?e:n:L?t:r;if(q[I]>E[I]){z=lr(z)}var D=lr(z);var U=[];if(c){U.push(C[H]<=0)}if(d){U.push(C[z]<=0,C[D]<=0)}if(U.every((function(r){return r}))){W=R;S=false;break}P.set(R,U)}if(S){var V=x?3:1;var $=function r(t){var e=M.find((function(r){var e=P.get(r);if(e){return e.slice(0,t).every((function(r){return r}))}}));if(e){W=e;return"break"}};for(var _=V;_>0;_--){var G=$(_);if(G==="break")break}}if(f.placement!==W){f.modifiersData[u]._skip=true;f.placement=W;f.reset=true}}const Br={name:"flip",enabled:true,phase:"main",fn:Wr,requiresIfExists:["offset"],data:{_skip:false}};function Tr(r,t,e){if(e===void 0){e={x:0,y:0}}return{top:r.top-t.height-e.y,right:r.right-t.width+e.x,bottom:r.bottom-t.height+e.y,left:r.left-t.width-e.x}}function Rr(a){return[r,e,t,n].some((function(r){return a[r]>=0}))}function Hr(r){var t=r.state,e=r.name;var n=t.rects.reference;var a=t.rects.popper;var i=t.modifiersData.preventOverflow;var o=Er(t,{elementContext:"reference"});var f=Er(t,{altBoundary:true});var v=Tr(o,n);var u=Tr(f,a,i);var s=Rr(v);var c=Rr(u);t.modifiersData[e]={referenceClippingOffsets:v,popperEscapeOffsets:u,isReferenceHidden:s,hasPopperEscaped:c};t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-reference-hidden":s,"data-popper-escaped":c})}const Lr={name:"hide",enabled:true,phase:"main",requiresIfExists:["preventOverflow"],fn:Hr};function Fr(t,a,i){var o=B(t);var f=[n,r].indexOf(o)>=0?-1:1;var v=typeof i==="function"?i(Object.assign({},a,{placement:t})):i,u=v[0],s=v[1];u=u||0;s=(s||0)*f;return[n,e].indexOf(o)>=0?{x:s,y:u}:{x:u,y:s}}function Ir(r){var t=r.state,e=r.options,n=r.name;var a=e.offset,i=a===void 0?[0,0]:a;var o=d.reduce((function(r,e){r[e]=Fr(e,t.rects,i);return r}),{});var f=o[t.placement],v=f.x,u=f.y;if(t.modifiersData.popperOffsets!=null){t.modifiersData.popperOffsets.x+=v;t.modifiersData.popperOffsets.y+=u}t.modifiersData[n]=o}const Cr={name:"offset",enabled:true,phase:"main",requires:["popperOffsets"],fn:Ir};function zr(r){var t=r.state,e=r.name;t.modifiersData[e]=qr({reference:t.rects.reference,element:t.rects.popper,strategy:"absolute",placement:t.placement})}const Dr={name:"popperOffsets",enabled:true,phase:"read",fn:zr,data:{}};function Ur(r){return r==="x"?"y":"x"}function Vr(a){var i=a.state,f=a.options,v=a.name;var u=f.mainAxis,s=u===void 0?true:u,c=f.altAxis,l=c===void 0?false:c,d=f.boundary,p=f.rootBoundary,h=f.altBoundary,b=f.padding,m=f.tether,y=m===void 0?true:m,w=f.tetherOffset,x=w===void 0?0:w;var O=Er(i,{boundary:d,rootBoundary:p,padding:b,altBoundary:h});var g=B(i.placement);var j=er(i.placement);var k=!j;var A=G(g);var M=Ur(A);var q=i.modifiersData.popperOffsets;var E=i.rects.reference;var P=i.rects.popper;var S=typeof x==="function"?x(Object.assign({},i.rects,{placement:i.placement})):x;var W=typeof S==="number"?{mainAxis:S,altAxis:S}:Object.assign({mainAxis:0,altAxis:0},S);var H=i.modifiersData.offset?i.modifiersData.offset[i.placement]:null;var L={x:0,y:0};if(!q){return}if(s){var I;var C=A==="y"?r:n;var z=A==="y"?t:e;var D=A==="y"?"height":"width";var U=q[A];var V=U+O[C];var $=U-O[z];var Q=y?-P[D]/2:0;var X=j===o?E[D]:P[D];var Y=j===o?-P[D]:-E[D];var Z=i.elements.arrow;var rr=y&&Z?F(Z):{width:0,height:0};var tr=i.modifiersData["arrow#persistent"]?i.modifiersData["arrow#persistent"].padding:N();var nr=tr[C];var ar=tr[z];var ir=J(0,E[D],rr[D]);var or=k?E[D]/2-Q-ir-nr-W.mainAxis:X-ir-nr-W.mainAxis;var fr=k?-E[D]/2+Q+ir+ar+W.mainAxis:Y+ir+ar+W.mainAxis;var vr=i.elements.arrow&&_(i.elements.arrow);var ur=vr?A==="y"?vr.clientTop||0:vr.clientLeft||0:0;var sr=(I=H==null?void 0:H[A])!=null?I:0;var cr=U+or-sr-ur;var lr=U+fr-sr;var dr=J(y?R(V,cr):V,U,y?T($,lr):$);q[A]=dr;L[A]=dr-U}if(l){var pr;var hr=A==="x"?r:n;var br=A==="x"?t:e;var mr=q[M];var yr=M==="y"?"height":"width";var wr=mr+O[hr];var xr=mr-O[br];var Or=[r,n].indexOf(g)!==-1;var gr=(pr=H==null?void 0:H[M])!=null?pr:0;var jr=Or?wr:mr-E[yr]-P[yr]-gr+W.altAxis;var kr=Or?mr+E[yr]+P[yr]-gr-W.altAxis:xr;var Ar=y&&Or?K(jr,mr,kr):J(y?jr:wr,mr,y?kr:xr);q[M]=Ar;L[M]=Ar-mr}i.modifiersData[v]=L}const $r={name:"preventOverflow",enabled:true,phase:"main",fn:Vr,requiresIfExists:["offset"]};function _r(r){return{scrollLeft:r.scrollLeft,scrollTop:r.scrollTop}}function Gr(r){if(r===A(r)||!q(r)){return hr(r)}else{return _r(r)}}function Jr(r){var t=r.getBoundingClientRect();var e=H(t.width)/r.offsetWidth||1;var n=H(t.height)/r.offsetHeight||1;return e!==1||n!==1}function Kr(r,t,e){if(e===void 0){e=false}var n=q(t);var a=q(t)&&Jr(t);var i=D(t);var o=L(r,a);var f={scrollLeft:0,scrollTop:0};var v={x:0,y:0};if(n||!n&&!e){if(k(t)!=="body"||wr(i)){f=Gr(t)}if(q(t)){v=L(t,true);v.x+=t.clientLeft;v.y+=t.clientTop}else if(i){v.x=br(i)}}return{x:o.left+f.scrollLeft-v.x,y:o.top+f.scrollTop-v.y,width:o.width,height:o.height}}function Nr(r){var t=new Map;var e=new Set;var n=[];r.forEach((function(r){t.set(r.name,r)}));function a(r){e.add(r.name);var i=[].concat(r.requires||[],r.requiresIfExists||[]);i.forEach((function(r){if(!e.has(r)){var n=t.get(r);if(n){a(n)}}}));n.push(r)}r.forEach((function(r){if(!e.has(r.name)){a(r)}}));return n}function Qr(r){var t=Nr(r);return j.reduce((function(r,e){return r.concat(t.filter((function(r){return r.phase===e})))}),[])}function Xr(r){var t;return function(){if(!t){t=new Promise((function(e){Promise.resolve().then((function(){t=undefined;e(r())}))}))}return t}}function Yr(r){var t=r.reduce((function(r,t){var e=r[t.name];r[t.name]=e?Object.assign({},e,t,{options:Object.assign({},e.options,t.options),data:Object.assign({},e.data,t.data)}):t;return r}),{});return Object.keys(t).map((function(r){return t[r]}))}var Zr={placement:"bottom",modifiers:[],strategy:"absolute"};function rt(){for(var r=arguments.length,t=new Array(r),e=0;e<r;e++){t[e]=arguments[e]}return!t.some((function(r){return!(r&&typeof r.getBoundingClientRect==="function")}))}function tt(r){if(r===void 0){r={}}var t=r,e=t.defaultModifiers,n=e===void 0?[]:e,a=t.defaultOptions,i=a===void 0?Zr:a;return function r(t,e,a){if(a===void 0){a=i}var o={placement:"bottom",orderedModifiers:[],options:Object.assign({},Zr,i),modifiersData:{},elements:{reference:t,popper:e},attributes:{},styles:{}};var f=[];var v=false;var u={state:o,setOptions:function r(a){var f=typeof a==="function"?a(o.options):a;c();o.options=Object.assign({},i,o.options,f);o.scrollParents={reference:M(t)?Or(t):t.contextElement?Or(t.contextElement):[],popper:Or(e)};var v=Qr(Yr([].concat(n,o.options.modifiers)));o.orderedModifiers=v.filter((function(r){return r.enabled}));s();return u.update()},forceUpdate:function r(){if(v){return}var t=o.elements,e=t.reference,n=t.popper;if(!rt(e,n)){return}o.rects={reference:Kr(e,_(n),o.options.strategy==="fixed"),popper:F(n)};o.reset=false;o.placement=o.options.placement;o.orderedModifiers.forEach((function(r){return o.modifiersData[r.name]=Object.assign({},r.data)}));for(var a=0;a<o.orderedModifiers.length;a++){if(o.reset===true){o.reset=false;a=-1;continue}var i=o.orderedModifiers[a],f=i.fn,s=i.options,c=s===void 0?{}:s,l=i.name;if(typeof f==="function"){o=f({state:o,options:c,name:l,instance:u})||o}}},update:Xr((function(){return new Promise((function(r){u.forceUpdate();r(o)}))})),destroy:function r(){c();v=true}};if(!rt(t,e)){return u}u.setOptions(a).then((function(r){if(!v&&a.onFirstUpdate){a.onFirstUpdate(r)}}));function s(){o.orderedModifiers.forEach((function(r){var t=r.name,e=r.options,n=e===void 0?{}:e,a=r.effect;if(typeof a==="function"){var i=a({state:o,name:t,instance:u,options:n});var v=function r(){};f.push(i||v)}}))}function c(){f.forEach((function(r){return r()}));f=[]}return u}}var et=[sr,Dr,fr,W,Cr,Br,$r,tr,Lr];var nt=tt({defaultModifiers:et});class at{constructor(r,t,e){this.handleTransitionEnd=this.handleTransitionEnd.bind(this);this.anchor=r;this.popover=t;this.options=Object.assign({skidding:0,distance:0,placement:"bottom-start",strategy:"absolute",transitionElement:this.popover,visibleClass:"popover-visible",onAfterShow:()=>{},onAfterHide:()=>{},onTransitionEnd:()=>{}},e);this.popover.hidden=true;this.popover.classList.remove(this.options.visibleClass);this.popover.addEventListener("transitionend",this.handleTransitionEnd)}handleTransitionEnd(r){const t=r.target;if(t===this.options.transitionElement){this.options.onTransitionEnd.call(this,r);if(this.isVisible===false&&!this.popover.hidden){this.popover.hidden=true;this.popover.classList.remove(this.options.visibleClass);this.options.onAfterHide.call(this)}}}destroy(){this.popover.removeEventListener("transitionend",this.handleTransitionEnd);if(this.popper){this.popper.destroy();this.popper=null}}show(){this.isVisible=true;this.popover.hidden=false;requestAnimationFrame((()=>this.popover.classList.add(this.options.visibleClass)));if(this.popper){this.popper.destroy()}this.popper=nt(this.anchor,this.popover,{placement:this.options.placement,strategy:this.options.strategy,modifiers:[{name:"sameWidth",enabled:true,fn:({state:r})=>{r.styles.popper.minWidth=`${r.rects.reference.width}px`},phase:"beforeWrite",requires:["computeStyles"]},{name:"flip",options:{boundary:"viewport"}},{name:"offset",options:{padding:5,offset:[this.options.skidding,this.options.distance]}}]});this.popover.addEventListener("transitionend",(()=>this.options.onAfterShow.call(this)),{once:true});requestAnimationFrame((()=>this.popper.update()))}hide(){this.isVisible=false;this.popover.classList.remove(this.options.visibleClass)}setOptions(r){this.options=Object.assign(this.options,r);this.isVisible?this.popover.classList.add(this.options.visibleClass):this.popover.classList.remove(this.options.visibleClass);if(this.popper){this.popper.setOptions({placement:this.options.placement,strategy:this.options.strategy});requestAnimationFrame((()=>this.popper.update()))}}}export{at as P};
+//# sourceMappingURL=p-625d3733.js.map