@nanoporetech-digital/components 2.0.0 → 2.0.1

package/dist/nano-components/p-d857f3ed.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/nav-item/nav-item.scss?tag=nano-nav-item&encapsulation=shadow","src/components/nav-item/nav-item.tsx","src/components/select/select.scss?tag=nano-select&encapsulation=scoped","src/components/select/select.tsx"],"names":["navItemCss","NavItem","[object Object]","hostRef","this","hasSecondarySlot","hasAnchorEle","didBlur","animating","didOpen","isInGlobalNav","isInMenuDrawer","isInMenu","isLegacy","document","head","attachShadow","hasFocus","href","target","disabled","open","selected","secondaryActiveWidth","secondaryFallback","closeOnBlur","closeSecondary","async","nanoClosing","emit","secondaryMenu","secondaryDiv","status","displayTransition","openSecondary","window","innerWidth","call","nanoOpening","toggleSecondary","handleFocus","nanoFocus","handleHostBlur","el","removeAttribute","nanoBlur","handleHostClick","ev","foundlink","closest","btn","click","handleMouseEnter","globalNavEle","classList","contains","timeToWait","getSiblings","length","clearTimeout","waitHide","fromHover","waitShow","setTimeout","handleMouseLeave","handleClick","_a","querySelector","blur","relatedTarget","foundThisNavEle","focus","preventScroll","removeEventListener","nanoClose","panelio","IntersectionObserver","data","boundingClientRect","top","scrollIntoView","behavior","disconnect","threshold","observe","addEventListener","tabIndex","nanoOpen","found","parentElement","secondaryEle","link","getDirectChildren","h","Host","class","has-secondary","secondary-open","has-focus","nano-global-nav","nano-menu-drawer","nano-menu","legacy","onBlur","dir","ownerDocument","onMouseEnter","onMouseLeave","onClick","role","nav-item","ref","a","onFocus","name","div","tabindex","selectCss","selectIds","Select","valueItems","selectId","rtl","onInit","currInsertIndex","showErrorMsg","errorMessage","hasLabelSlot","hasHelperSlot","inputSearchVal","_invalid","autofocus","validateOn","showInlineError","hideLabel","floatLabel","multiple","readonly","required","allowCustomValues","_value","_options","_eOptions","clearSelect","mask","debounce","dropDownConfig","customValidate","nativeSelect","setCustomValidity","valArray","isValidValues","max","min","showInlineValidation","validity","valid","validationMessage","nanoValidate","isValid","invalid","originalEvent","handleInvalid","preventDefault","_","setValue","e","value","detail","inputCtrl","includes","slice","removeValue","toFind","filter","val","setFocus","setOptions","datalist","activeOptions","map","ao","label","filterMeta","handleDocumentKeyDown","rm","key","previousElementSibling","dataset","nextElementSibling","previousSibling","nextSibling","clearSelectValue","stopPropagation","event","Event","dispatchEvent","onDragStart","ele","dragVal","onDragEnd","onDragLeave","spanVal","to","indexOf","from","tmpArr","tmpVal","onMultiInput","trim","nanoSearchChange","selectWrap","_selectWrap","setDataListOpts","_datalist","split","Array","isArray","options","opts","opt","debounceEvent","shouldValidate","nanoChange","currDWConfig","Object","assign","tetherTo","input","validateFirst","Promise","resolve","message","find","mo","MutationObserver","processSlottedContent","childList","subtree","querySelectorAll","console","warn","kev","raf","getActiveElement","closestElement","tagName","toLowerCase","debounceChanged","CustomEvent","slotChangeObserver","labelId","moreId","compWrapOptions","placeholder","wrapOptions","hasValue","controlId","controlOptions","clearControl","type","aria-disabled","createColorClasses","color","has-value","is-invalid","has-label","has-float-label","has-multiple","has-clr-btn","masked","FormControlWrap","FormControl","onClearText","control","endValueSlot","slot","multipleValues","getLabel","id","aria-labelledby","form","readOnly","onNanoOptionsUpdated","onNanoSelect","onNanoDeselect","undefined","select","onInvalid","autoFocus","autocomplete","onKeyDown","onInput","onTouchStart","onMouseDown","i","toReturn","onDragOver","draggable","data-value","span","push","onTouchEnd","onMouseUp"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  // These can be overwritten, but are autatically set from context components\n\n  // --padding-top: inherit;\n  // --padding-bottom: inherit;\n  // --padding-start: inherit;\n  // --padding-end: inherit;\n  // --margin: inherit;\n\n  // --secondary-padding-top: inherit;\n  // --secondary-padding-bottom: inherit;\n  // --secondary-padding-start: inherit;\n  // --secondary-padding-end: inherit;\n\n  // --border-bottom: inherit;\n  // --icon-size: inherit;\n\n  // --color: inherit;\n  // --color-hover: inherit;\n  // --color-focus: inherit;\n  // --color-selected: inherit;\n  // --color-open: inherit;\n\n  // --bg-color: inherit;\n  // --bg-color-hover: inherit;\n  // --bg-color-selected: inherit;\n  // --bg-color-open: inherit;\n  // --bg-color-focus: inherit;\n\n  // --secondary-bg-color: inherit;\n  // --secondary-color: inherit;\n\n  opacity: inherit;\n  display: block;\n  color: var(--color) !important;\n  margin: var(--margin);\n\n  ::slotted(*),\n  * {\n    box-sizing: border-box;\n  }\n\n  ::slotted(button),\n  button {\n    background: none;\n    border: none;\n  }\n\n  ::slotted(button),\n  ::slotted(a),\n  ::slotted(a:visited),\n  button,\n  a,\n  a:visited {\n    @include text-inherit();\n    @include padding(\n      var(--padding-top),\n      var(--padding-end),\n      var(--padding-bottom),\n      var(--padding-start)\n    );\n\n    display: var(--display, block);\n    white-space: nowrap;\n    color: var(--color) !important;\n    background-color: var(--bg-color);\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    @include padding(null, var(--padding-end), null, null);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include padding(null, null, null, var(--padding-start));\n  }\n\n  .link {\n    &::slotted(nano-icon[slot='icon-start']),\n    ::slotted(nano-icon[slot='icon-start']) {\n      @include padding(null, 0, null, var(--padding-start));\n    }\n\n    &::slotted(nano-icon[slot='icon-end']),\n    ::slotted(nano-icon[slot='icon-end']) {\n      @include padding(null, var(--padding-end), null, 0);\n    }\n  }\n\n  .link,\n  button,\n  a {\n    border-bottom: var(--border-bottom);\n    display: flex;\n    align-items: center;\n  }\n\n  .secondary-menu {\n    display: none;\n  }\n\n  ::slotted(a:hover),\n  ::slotted(button:hover),\n  .link:hover,\n  button:hover,\n  a:hover {\n    text-decoration: inherit !important;\n  }\n\n  button:focus,\n  a:focus {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    outline: var(--focus-outline, none);\n  }\n\n  ::slotted(a:focus),\n  ::slotted(button:focus) {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    outline: none;\n  }\n}\n\n.nav-item {\n  &.selected {\n    .link,\n    button,\n    a {\n      color: var(--color-selected, var(--color-open, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-selected,\n          var(--bg-color-open, var(--bg-color))\n        );\n    }\n  }\n\n  &.secondary-open {\n    button,\n    a {\n      color: var(--color-open, var(--color-selected, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-open,\n          var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color)))\n        );\n    }\n  }\n\n  &.disabled {\n    opacity: 0.6;\n\n    button,\n    a {\n      color: var(--color-disabled, var(--color)) !important;\n    }\n  }\n\n  &:not(.nano-menu) {\n    ::slotted(a:hover),\n    ::slotted(button:hover),\n    .link:hover,\n    button:hover,\n    a:hover {\n      color: var(--color-hover, var(--color-hover, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-hover,\n          var(--bg-color-focus, var(--bg-color))\n        );\n    }\n  }\n}\n\n:host(.has-focus) {\n  .link {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    outline: var(--focus-outline, 5px auto -webkit-focus-ring-color);\n  }\n}\n\n:host(.nano-global-nav-menu),\n:host(.nano-menu) {\n  a,\n  a:visited,\n  button,\n  .link {\n    display: flex;\n    justify-content: flex-start;\n    flex-direction: row;\n    align-items: center;\n    color: 'currentColor';\n    text-decoration: inherit;\n    white-space: normal;\n    cursor: pointer;\n    line-height: 1.2;\n    width: 100%;\n  }\n\n  .text {\n    @include padding(null, var(--padding-end), null, 0);\n\n    flex: 1;\n  }\n\n  ::slotted(a),\n  ::slotted(button) {\n    flex: 1;\n  }\n\n  ::slotted(a:focus),\n  ::slotted(button:focus) {\n    box-shadow: none;\n  }\n\n  .secondary-menu {\n    display: none;\n    position: absolute;\n    color: var(--secondary-color, 'currentColor');\n    min-height: 100%;\n    top: 0;\n    left: 0;\n    width: 100%;\n    z-index: 1;\n    opacity: 0;\n    transition: opacity 0.2s ease, transform 0.3s ease;\n    background-color: var(--secondary-bg-color, white);\n    transform: translateX(100%);\n\n    &:focus {\n      outline: none;\n    }\n\n    &.open {\n      opacity: 1;\n      transform: translateX(0);\n      transition: opacity 0.3s ease, transform 0.2s ease;\n    }\n  }\n}\n\n:host(.nano-global-nav-menu) {\n  ::slotted(nano-icon[slot='icon-start']) {\n    @include padding(0, var(--padding-end), 0, 0);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include padding(0, var(--padding-end), 0, 0);\n\n    font-size: 10px;\n    flex: 0 0 10px;\n    pointer-events: none;\n  }\n\n  button,\n  a {\n    ::slotted(nano-icon[slot='icon-end']) {\n      padding: 0;\n    }\n  }\n}\n\n:host(.nano-global-nav-menu[dir='rtl']),\n:host(.nano-menu[dir='rtl']) {\n  .secondary-menu {\n    left: auto;\n    right: 0;\n    transform: translateX(-100%);\n\n    &.open {\n      transform: translateX(0);\n    }\n  }\n}\n\n:host(.nano-menu) {\n  .secondary-menu-content {\n    @include padding(\n      var(--secondary-padding-top),\n      var(--secondary-padding-end),\n      var(--secondary-padding-bottom),\n      var(--secondary-padding-start)\n    );\n  }\n}\n\n// I'm sorry. Horrible IE fixes for collapsing stuff :/\n:host(.nano-global-nav-bar.legacy) {\n  margin: 0 11px;\n\n  ::slotted(a) {\n    @include padding(7px, 6px, 7px, 6px);\n  }\n}\n\n:host(.nano-global-nav-menu.legacy) {\n  ::slotted(a) {\n    @include padding(8px, 12px, 8px, 12px);\n  }\n}\n\n:host(.nano-global-nav-bar) {\n  .link,\n  a,\n  button {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n\n  .text {\n    flex: 1 0 auto;\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include margin(0, 0, 0, var(--padding-end));\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    @include margin(0, var(--padding-start), 0, 0);\n  }\n}\n\n:host(.nano-global-nav-bar.has-secondary) {\n  button {\n    position: relative;\n\n    &::before {\n      content: '';\n      background: rgb(134, 190, 226);\n      height: 3px;\n      left: 5px;\n      bottom: -14px;\n      right: 5px;\n      position: absolute;\n      transform: translateZ(0) scaleX(0);\n      transform-origin: 0;\n      transition: 0.2s ease transform;\n    }\n  }\n\n  .selected button::before,\n  .secondary-open button::before {\n    transform: translateZ(0) scaleX(1);\n  }\n\n  .secondary-open button::before {\n    opacity: 0.5;\n  }\n\n  .secondary-menu {\n    display: none;\n    transition: transform 0.3s ease;\n    transform: translateY(-100%) translateZ(0);\n    background-color: var(--secondary-bg-color, #196c82);\n    color: var(--secondary-color);\n    position: absolute;\n    box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.15);\n    left: 0;\n    right: 0;\n    z-index: -2;\n    outline: none;\n\n    &.open {\n      transform: translateY(12px) translateZ(0);\n    }\n  }\n}\n\n:host(.nano-menu-drawer) {\n  .link,\n  a,\n  button {\n    @include padding(\n      calc(var(--padding-top) / 2),\n      0,\n      calc(var(--padding-bottom) / 2),\n      var(--padding-start)\n    );\n\n    display: flex;\n    justify-content: flex-start;\n    flex-direction: row;\n    align-items: center;\n    color: currentColor;\n    text-decoration: inherit;\n    white-space: normal;\n    border: none;\n    cursor: pointer;\n    line-height: 1.2;\n    width: 100%;\n  }\n\n  .text {\n    @include padding(null, var(--padding-end), null, 0);\n\n    text-align: left;\n    flex: 0 1 auto;\n    min-width: 130px;\n    width: 130px;\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    @include padding(0, var(--padding-end), 0, 0);\n\n    font-size: var(--icon-size);\n    width: var(--icon-size);\n    flex: 0 0 var(--icon-size);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include padding(0, var(--padding-end), 0, 0);\n\n    font-size: 10px;\n    flex: 0 0 20px;\n    min-width: 20px;\n  }\n\n  .secondary-menu {\n    display: none;\n    position: absolute;\n    background-color: var(--secondary-bg-color);\n    color: var(--secondary-color);\n    height: 100vh;\n    top: 0;\n    right: 0;\n    left: auto;\n    bottom: 0;\n    transform: translateX(0);\n    z-index: -1;\n    transition: transform 0.3s ease, opacity 0.2s ease;\n    overflow-y: auto;\n    width: var(--secondary-width, 400px);\n    max-width: 62vw;\n    opacity: 1;\n\n    @include padding(\n      var(--secondary-padding-top, var(--padding-top)),\n      var(--secondary-padding-end, var(--padding-end)),\n      var(--secondary-padding-bottom, var(--padding-bottom)),\n      var(--secondary-padding-start, var(--padding-start))\n    );\n\n    &:focus {\n      outline: none;\n    }\n\n    &.open {\n      transform: translateX(100%);\n      // opacity: 1;\n    }\n  }\n}\n\n:host(.nano-menu-drawer.legacy) {\n  .link,\n  a,\n  button {\n    width: auto;\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include padding(0, calc(var(--padding-end) * 2), 0, 0);\n\n    font-size: 10px;\n    flex: 0 0 20px;\n    min-width: 20px;\n  }\n}\n\n:host(.nano-menu-drawer[dir='rtl']) {\n  .text {\n    text-align: right;\n  }\n\n  .secondary-menu {\n    right: auto;\n    left: 0;\n    transform: translateX(0%);\n\n    &.open {\n      transform: translateX(-100%);\n      opacity: 1;\n    }\n  }\n}\n","import {\n  Component,\n  h,\n  Host,\n  Element,\n  Prop,\n  Watch,\n  EventEmitter,\n  Event,\n  State,\n  Method,\n  ComponentInterface,\n} from '@stencil/core';\nimport { displayTransition, getDirectChildren, getSiblings } from '../../utils';\nimport { NavItemEventDetail } from '../../interface';\n\n/**\n * Nav items to be used with the various nav items.\n * [Globla-Nav](/story/compounds-global-nav)\n * [Menu-Drawer](/story/components-menu-drawer)\n * [Dropdown](/story/components-dropdown)\n */\n@Component({\n  tag: 'nano-nav-item',\n  styleUrl: 'nav-item.scss',\n  shadow: true,\n})\nexport class NavItem implements ComponentInterface {\n  private hasSecondarySlot: boolean = false;\n  private hasAnchorEle: boolean = false;\n  private secondaryDiv: HTMLDivElement;\n  private btn: HTMLButtonElement | HTMLAnchorElement;\n  private didBlur: boolean = false;\n  private fromHover: boolean;\n  private animating: boolean = false;\n  private waitHide: number;\n  private waitShow: number;\n  private globalNavEle?: HTMLNanoGlobalNavElement;\n\n  @State() didOpen: boolean = false;\n  @State() isInGlobalNav: boolean = false;\n  @State() isInMenuDrawer: boolean = false;\n  @State() isInMenu: boolean = false;\n  @State() isLegacy: boolean = !document.head.attachShadow;\n  @State() hasFocus: boolean = false;\n  @Element() private el: HTMLNanoNavItemElement;\n\n  /**\n   * Href to link to\n   */\n  @Prop({ mutable: true }) href: string = null;\n\n  /**\n   * Target to use for links\n   */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /**\n   * Disable the nav item\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether a secondary menu should be or is currently open\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Whether this menu item is currently 'selected'\n   */\n  @Prop({ reflect: true }) selected: boolean = false;\n\n  /**\n   * Screen pixel width to activate the secondary menu\n   */\n  @Prop() secondaryActiveWidth: number = 0;\n\n  /**\n   * Secondary fallback function for when the secondary menu is no longer active.\n   */\n  @Prop() secondaryFallback = () => {};\n\n  /**\n   * Whether secondary menus should close on blur\n   */\n  @Prop() closeOnBlur: boolean = true;\n\n  /**\n   * Emitted when the nav item closes it's secondary navigation.\n   */\n  @Event() nanoClose!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item opens it's secondary navigation.\n   */\n  @Event() nanoOpen!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item is about to open it's secondary navigation.\n   */\n  @Event() nanoOpening!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item is about to close it's secondary navigation.\n   */\n  @Event() nanoClosing!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the nav item has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the first button or anchor present. Use this method instead of the global\n   * `element.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (!this.btn) return;\n    this.btn.focus();\n  }\n\n  /**\n   * Public open watcher\n   */\n  @Watch('open')\n  openChange() {\n    this.open ? this.openSecondary() : this.closeSecondary();\n  }\n\n  /**\n   * Internal open watcher\n   */\n  @Watch('didOpen')\n  didOpenChange() {\n    if (!this.hasSecondarySlot) return;\n\n    if (!this.didOpen) {\n      /* the secondadry panel is not closing via hover,\n      remove blur events, add focus back to originating button */\n      if (!this.fromHover) {\n        this.btn.removeEventListener('focusout', this.blur);\n        this.secondaryDiv.removeEventListener('focusout', this.blur);\n      }\n      setTimeout(() => {\n        if (!this.fromHover && !this.didBlur)\n          this.btn.focus({ preventScroll: true });\n        this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });\n      }, 50);\n    } else {\n      this.didBlur = false;\n\n      /* the secondadry panel is not opening via hover,\n      scroll content into view, focus on it and add blur events */\n      if (!this.fromHover) {\n        const panelio = new (window as any).IntersectionObserver(\n          (data: IntersectionObserverEntry[]) => {\n            if (data[0].boundingClientRect.top < 0) {\n              this.secondaryDiv.scrollIntoView({\n                behavior: 'smooth',\n              });\n            }\n            panelio.disconnect();\n          },\n          { threshold: 1 }\n        );\n        panelio.observe(this.secondaryDiv);\n        this.secondaryDiv.focus({ preventScroll: true });\n\n        this.btn.addEventListener('focusout', this.blur);\n        this.secondaryDiv.addEventListener('focusout', this.blur);\n        window.addEventListener('blur', this.blur);\n\n        this.el.tabIndex = -1;\n        this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });\n      }\n    }\n  }\n\n  private closeSecondary = async () => {\n    this.open = false;\n    if (!this.hasSecondarySlot || !this.didOpen) return;\n\n    this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });\n    let status = await displayTransition(this.secondaryDiv, 'open', false);\n    this.didOpen = status !== 'hidden';\n  };\n\n  private openSecondary = async () => {\n    if (window.innerWidth < this.secondaryActiveWidth) {\n      this.secondaryFallback.call(this);\n      return;\n    }\n    this.open = true;\n    if (!this.hasSecondarySlot || this.didOpen) return;\n\n    this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });\n    let status = await displayTransition(this.secondaryDiv, 'open', true);\n    this.didOpen = status === 'shown';\n  };\n\n  private toggleSecondary = () => {\n    if (!this.hasSecondarySlot) return;\n    if (this.didOpen) this.closeSecondary();\n    else this.openSecondary();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    // opens secondary panel when activated via hover\n    if (this.href && !this.animating && this.hasSecondarySlot)\n      this.openSecondary();\n    this.nanoFocus.emit();\n  };\n\n  private handleHostBlur = () => {\n    if (this.animating) return;\n\n    // tab index is added to host when secondary panel opens\n    // to return focus after secondary panel closes. Remove now if it was added\n    this.el.removeAttribute('tabindex');\n    this.hasFocus = false;\n    this.nanoBlur.emit();\n  };\n\n  // direct host clicks to internal button\n  private handleHostClick = (ev: MouseEvent) => {\n    if (!this.hasAnchorEle) return;\n    let foundlink = (ev.target as HTMLElement).closest('a, button');\n    if (!foundlink) this.btn.click();\n  };\n\n  // handles secondary menu hover behaviour.\n  private handleMouseEnter = async () => {\n    if (\n      !this.href ||\n      this.animating ||\n      !this.hasSecondarySlot ||\n      (this.globalNavEle && !this.globalNavEle.classList.contains('ready'))\n    )\n      return;\n\n    // if there are sibling secondary panels currently open,\n    // we need to wait before opening otherwise we get unwanted overlapping\n    let timeToWait = 0;\n    if (getSiblings(this.el, '.secondary-open.has-secondary').length)\n      timeToWait = 300;\n\n    clearTimeout(this.waitHide);\n    this.fromHover = true;\n    this.animating = true;\n    this.waitShow = window.setTimeout(\n      async () => await this.openSecondary(),\n      timeToWait\n    );\n    this.animating = false;\n  };\n\n  // handles secondary menu hover-out behaviour.\n  private handleMouseLeave = () => {\n    if (!this.href) return;\n    clearTimeout(this.waitShow);\n    this.fromHover = true;\n    this.animating = true;\n\n    // prevent closing immediately - makes navigating to items within more forgiving\n    this.waitHide = window.setTimeout(\n      async () => await this.closeSecondary(),\n      300\n    );\n    this.animating = false;\n  };\n\n  private handleClick = () => {\n    this.fromHover = false;\n    if (this.hasSecondarySlot) this.toggleSecondary();\n    else this.el.querySelector<HTMLElement>('*')?.click();\n  };\n\n  // utility to traverse up, to see if element is nested within current nav-item\n  private foundThisNavEle(el: HTMLElement): boolean {\n    let found = el.closest('nano-nav-item');\n    found = found === el ? el.parentElement.closest('nano-nav-item') : found;\n\n    if (!found) return false;\n    if (found === this.el) return true;\n    return this.foundThisNavEle(found);\n  }\n\n  private blur = (ev: FocusEvent) => {\n    if (!this.didOpen || this.animating) return;\n    if (!this.closeOnBlur) return;\n\n    // if event is associated with this element don't close\n    if (ev && ev.relatedTarget) {\n      if (\n        ev.relatedTarget === this.el ||\n        ev.relatedTarget === this.btn ||\n        this.foundThisNavEle(ev.relatedTarget as HTMLElement)\n      ) {\n        this.secondaryDiv.focus({ preventScroll: true });\n        return;\n      }\n    }\n\n    this.btn.removeEventListener('focusout', this.blur);\n    this.secondaryDiv.removeEventListener('focusout', this.blur);\n    window.removeEventListener('blur', this.blur);\n\n    this.didBlur = true;\n\n    this.open = false;\n    if (!ev.relatedTarget)\n      setTimeout(() => {\n        this.el.focus({ preventScroll: true });\n      }, 50);\n  };\n\n  componentWillLoad() {\n    let secondaryEle = this.el.querySelector('[slot=\"secondary\"]');\n    this.hasSecondarySlot = !!secondaryEle;\n\n    let link = getDirectChildren(this.el, 'a, button')[0] as\n      | HTMLAnchorElement\n      | HTMLButtonElement;\n    this.hasAnchorEle = !!link;\n\n    if (link) {\n      this.href = (link as HTMLAnchorElement).href\n        ? (link as HTMLAnchorElement).href\n        : null;\n      this.btn = link;\n      if (this.hasSecondarySlot)\n        this.btn.addEventListener('click', this.toggleSecondary);\n\n      this.btn.addEventListener('focus', this.handleFocus);\n      this.btn.addEventListener('blur', this.handleHostBlur);\n    }\n  }\n\n  connectedCallback() {\n    this.isInGlobalNav = false;\n    this.isInMenuDrawer = false;\n    this.globalNavEle = this.el.closest('nano-global-nav');\n\n    this.isInMenuDrawer = !!this.el.closest('nano-menu-drawer');\n    this.isInMenu = !!this.el.closest('nano-menu');\n    this.isInGlobalNav =\n      this.el.parentElement === this.globalNavEle ||\n      !!this.el.closest('.global-nav');\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'has-secondary': this.hasSecondarySlot,\n          'secondary-open': this.open,\n          selected: this.selected,\n          'has-focus': this.hasFocus,\n          disabled: this.disabled,\n          'nano-global-nav': this.isInGlobalNav,\n          'nano-menu-drawer': this.isInMenuDrawer,\n          'nano-menu': this.isInMenu,\n          legacy: this.isLegacy,\n        }}\n        onBlur={this.handleHostBlur}\n        dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n        onClick={this.handleHostClick}\n        role=\"menuitem\"\n      >\n        <div\n          class={{\n            'nav-item': true,\n            'secondary-open': this.open,\n            selected: this.selected,\n          }}\n        >\n          {this.href && !this.hasAnchorEle && !this.disabled && (\n            <a\n              target={this.target}\n              ref={(a) => (this.btn = a)}\n              href={this.href}\n              onFocus={this.handleFocus}\n            >\n              <slot name=\"icon-start\" />\n              <span class=\"text\">\n                <slot />\n              </span>\n              <slot name=\"icon-end\" />\n            </a>\n          )}\n          {((!this.hasAnchorEle && !this.href) || this.disabled) && (\n            <button\n              ref={(btn) => (this.btn = btn)}\n              onClick={this.handleClick}\n              onFocus={this.handleFocus}\n              disabled={this.disabled}\n            >\n              <slot name=\"icon-start\" />\n              <span class=\"text\">\n                <slot />\n              </span>\n              <slot name=\"icon-end\" />\n            </button>\n          )}\n          {this.hasAnchorEle && !this.disabled && (\n            <div class=\"link\">\n              <slot name=\"icon-start\" />\n              <slot />\n              <slot name=\"icon-end\" />\n            </div>\n          )}\n          {this.hasSecondarySlot && !this.disabled && (\n            <div\n              class=\"secondary-menu\"\n              ref={(div) => (this.secondaryDiv = div)}\n              tabindex=\"-1\"\n            >\n              <div class=\"secondary-menu-content\">\n                <slot name=\"secondary\" />\n              </div>\n              <div\n                class=\"secondary-menu-mask\"\n                onClick={this.closeSecondary}\n              ></div>\n            </div>\n          )}\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/layers';\n@import '../form-control/form-control';\n@import '../form-control/form-control-vars';\n\n:host {\n  @include formControlVars;\n\n  position: relative;\n  width: 100%;\n  padding: 0 !important;\n  font-family: $font-family-base;\n  display: inline-block;\n}\n\n:host(.nano-color) {\n  --input-border-style--focus: #{$input-border-style} var(--nano-color-tint, #{nano-color(primary, tint)});\n  --multi-input-value-bg: var(--nano-color-tint-rgb);\n  --multi-input-value-border: var(--nano-color-shade);\n  --multi-input-value-text-color: var(--nano-color-contrast);\n\n  color: current-color(base);\n}\n\n:host-context(nano-item:not(.item-label)) {\n  --padding-start: 0;\n}\n\n:host([disabled]:not([disabled='false'])) {\n  opacity: 0.7;\n\n  * {\n    pointer-events: none !important;\n  }\n}\n\nselect {\n  display: none;\n}\n\n.native-input {\n  @include border-radius(var(--input-border-radius));\n  @include padding(0, var(--padding-end), 0, var(--padding-start));\n  @include text-inherit();\n\n  text-overflow: ellipsis;\n  color: var(--input-text-color);\n  display: inline-block;\n  flex: 1;\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\n  appearance: none;\n  line-height: 2.5em;\n  min-height: 2.5em;\n  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n  cursor: default;\n\n  &::selection {\n    background: transparent;\n  }\n\n  &::-moz-selection {\n    background: transparent;\n  }\n\n  &[disabled] {\n    opacity: 0.4;\n  }\n\n  &::placeholder {\n    color: var(--placeholder-color);\n    font-family: inherit;\n    font-style: var(--placeholder-font-style);\n    font-weight: var(--placeholder-font-weight);\n    opacity: var(--placeholder-opacity);\n    line-height: 2.5em;\n    min-height: 2.5em;\n    // text-overflow: ellipsis;\n  }\n\n  &::-moz-placeholder {\n    line-height: 2.8em;\n    text-overflow: ellipsis;\n  }\n\n  &:-webkit-autofill {\n    background-color: transparent;\n  }\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    appearance: none;\n  }\n\n  &:invalid {\n    box-shadow: none;\n  }\n\n  &::-ms-clear,\n  &::-ms-reveal {\n    display: none;\n  }\n\n  &.resizable {\n    resize: vertical;\n    overflow: auto;\n  }\n\n  .textarea & {\n    line-height: 1.5em;\n    padding-top: var(--padding-top);\n    padding-bottom: var(--padding-bottom);\n    white-space: pre-wrap;\n\n    &::placeholder {\n      line-height: 1.5em;\n    }\n  }\n\n  .has-float-label & {\n    padding-top: 1.4em;\n  }\n\n  .has-float-label.textarea & {\n    padding-top: 1.8em;\n  }\n\n  .legacy & {\n    box-sizing: content-box;\n  }\n\n  :host(.masked) & {\n    opacity: 0;\n    position: absolute;\n    left: 0;\n    top: 0;\n  }\n}\n\n.select-mask {\n  @include border-radius(var(--input-border-radius));\n  @include padding(0, var(--padding-end), 0, var(--padding-start));\n  @include text-inherit();\n\n  pointer-events: none;\n  line-height: 2.5em;\n  min-height: 2.5em;\n}\n\n// multi stuff\n\n.multi {\n  &-wrap {\n    @include padding(\n      0,\n      0,\n      calc(var(--padding-bottom) / 2),\n      0\n    );\n\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    max-width: 100%;\n\n    :host(.has-float-label) & {\n      padding-top: 1.3em;\n    }\n  }\n\n  &-input {\n    @include text-inherit();\n    @include padding(\n      calc(var(--padding-top) / 2),\n      var(--padding-end),\n      0,\n      var(--padding-start)\n    );\n\n    min-width: 50px;\n    max-width: 100%;\n    max-height: 100%;\n    appearance: none;\n    border: 0;\n    outline: none;\n    display: inline-block;\n    background: transparent;\n    flex: 0;\n    position: relative;\n    min-height: calc(2.78em - var(--padding-top));\n    box-sizing: border-box;\n\n    :host(.legacy) & {\n      box-sizing: content-box;\n    }\n\n    &:last-child {\n      flex: 1;\n    }\n  }\n\n  &-value {\n    @include margin(4px, 0, 0, 4px);\n\n    background: rgba(var(--multi-input-value-bg), 0.8);\n    color: var(--multi-input-value-text-color);\n    border: 1px solid;\n    border-color: var(--multi-input-value-border);\n    padding: 0.3em 0.5em;\n    border-radius: 3px;\n    line-height: 1;\n    max-width: 100%;\n    display: flex;\n    align-items: center;\n    font-size: var(--input-font-size);\n    font-weight: 600;\n    letter-spacing: 1px;\n\n    span {\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      max-width: 100%;\n      overflow: hidden;\n      line-height: 1.4;\n    }\n  }\n\n  &-value-remove {\n    @include margin(0);\n    @include background-position(center);\n    @include padding(0, 0, 0, 0.5em);\n\n    color: inherit;\n    border: 0;\n    outline: none;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    appearance: none;\n    display: flex;\n    align-items: center;\n    top: 0;\n    font-size: 1em;\n\n    nano-icon {\n      --color: var(--multi-input-value-text-color);\n    }\n  }\n}\n\n.placeholder-as-label {\n  :host(.has-focus.has-multiple) & {\n    transform: translateY(-120%);\n    font-size: 0.9em;\n  }\n}\n\n:host(.has-focus) select,\n:host(.has-focus) a,\n:host(.has-focus) button {\n  pointer-events: auto;\n}\n","import {\n  Build,\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  VNode,\n  Listen,\n} from '@stencil/core';\n\nimport {\n  Color,\n  SelectChangeEventDetail,\n  InputChangeEventDetail,\n  ControlValidityEventDetail,\n  ControlValidity,\n} from '../../interface';\nimport {\n  debounceEvent,\n  createColorClasses,\n  closestElement,\n  raf,\n  getActiveElement,\n} from '../../utils';\nimport type { Dropdown } from '../dropdown/dropdown';\nimport { FormControl, FormControlWrap } from '../form-control/form-control';\nimport { OptionInterface } from '../option/option-interface';\n\nlet selectIds = 0;\n\n/**\n * The select component is a wrapper to the HTML select element with custom styling and additional functionality.\n * It accepts most of the same properties as the HTML [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).\n * It's multi selection functionality is vastly improved from the native solution. It allows for the control of\n * value order through drag and drop or changing the insertion point with arrow keys. It also can allow for user defined values.\n *\n * @slot start - suitable for inline action buttons or icons that may add extra contextual information\n * @slot end - suitable for inline action buttons or icons that may add extra contextual information\n * @slot value-start - similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist\n * @slot value-end - similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist\n * @slot label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot helper - helper text to accompany the form field underneath.\n * @slot down-arrow - use this to replace the default down arrow\n * @slot - default slot; nest `nano-option` elements\n */\n@Component({\n  tag: 'nano-select',\n  styleUrl: 'select.scss',\n  scoped: true,\n})\nexport class Select implements ComponentInterface {\n  private nativeSelect?: HTMLSelectElement;\n  private inputCtrl?: HTMLInputElement;\n  private valueItems: Array<HTMLSpanElement> = [];\n  private dragVal: string;\n  private mo?: MutationObserver;\n  private selectId = `nano-select-${selectIds++}`;\n  private rtl: boolean = false;\n  private onInit: boolean = true;\n  private isLegacy: boolean = 'registerElement' in document;\n\n  // we don't want these rendered eles decorated with @State\n  // because that will cause re-renders. User get/set to set datalist options\n  private _selectWrap: HTMLElement;\n  private get selectWrap() {\n    return this._selectWrap;\n  }\n  private set selectWrap(ele: HTMLElement) {\n    if (this._selectWrap === ele) return;\n    this._selectWrap = ele;\n    this.setDataListOpts();\n  }\n\n  private _datalist: HTMLNanoDatalistElement;\n  private get datalist() {\n    return this._datalist;\n  }\n  private set datalist(ele: HTMLNanoDatalistElement) {\n    if (this._datalist === ele) return;\n    this._datalist = ele;\n    this.setDataListOpts();\n  }\n\n  @State() currInsertIndex: number = -1;\n  @State() showErrorMsg = false;\n  @State() errorMessage: string = '';\n  @State() hasFocus = false;\n  @State() hasLabelSlot: boolean = false;\n  @State() hasHelperSlot: boolean = false;\n  @State() inputSearchVal: string = '';\n\n  @Element() el!: HTMLNanoSelectElement;\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set.\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n  private _invalid = false;\n\n  /**\n   * The color to use from your application's color palette.\n   * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have select focus when the page loads.\n   */\n  @Prop() autofocus = false;\n\n  /**\n   * If `true`, the user cannot interact with the select.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * When should the field perform validation\n   */\n  @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submit';\n\n  /**\n   * Whether to show validation errors underneath input\n   */\n  @Prop({ reflect: true }) showInlineError = true;\n\n  /**\n   * String to place within a label element. Alternatively use the 'label' slot\n   */\n  @Prop() label!: string;\n\n  /**\n   * Visually hide the label - but make it accessible.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  /**\n   * Enable floating label behaviour. Will disable placeholder if set.\n   */\n  @Prop() floatLabel: boolean = false;\n\n  /**\n   * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"` or `\"file\"`, otherwise it is ignored.\n   */\n  @Prop() multiple?: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.selectId + '-name';\n\n  /**\n   * Instructional text that shows before the select has a value. Text set here will be placed inside the label when a value is set. If you don't want this behaviour just set the first option to have no value.\n   */\n  @Prop() placeholder?: string | null;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop({ reflect: true }) readonly = false;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required = false;\n\n  /**\n   * The initial size of the control.\n   */\n  @Prop() size?: number;\n\n  /**\n   * Maximum number of options that can be selected when multiple is true\n   */\n  @Prop() max?: number;\n\n  /**\n   * Minimum number of options that can be selected when multiple is true\n   */\n  @Prop() min?: number;\n\n  /**\n   * The form element to associate the select with (its form owner). Must be the id of a form.\n   */\n  @Prop() form?: string | null;\n\n  /**\n   * in multiple mode, allow users to enter their own values\n   */\n  @Prop() allowCustomValues: boolean = false;\n\n  /**\n   * The value of the select.\n   */\n  @Prop()\n  get value() {\n    return this._value;\n  }\n  set value(val: string | string[]) {\n    if (typeof val === 'string') {\n      if (this.multiple) this._value = val.split(',');\n      else this._value = val;\n    } else if (Array.isArray(val)) {\n      if (this.multiple) this._value = val;\n      else this._value = val[0];\n    }\n  }\n  private _value: Array<string> | string = this.multiple ? [] : '';\n\n  /**\n   * You can set options via js as an array of strings: `domElement.options = ['option 1', 'option 2']` or\n   * objects `domElement.options = [{label: 'option 1', value: 'opt-1'}]`. See `nano-option` docs for all available properties.\n   * Alternatively, you can nest `<nano-option>` elements within a `<nano-select>`\n   * Regardless - reading `options` will return the current component options - slotted or otherwise\n   */\n  @Prop()\n  get options(): Array<OptionInterface | string> {\n    if (this._options.length) return this._options;\n\n    if (!this.datalist || !this.datalist.activeOptions) return [];\n\n    return this._eOptions.map((ao) => {\n      const { value, selected, label, filterMeta } = ao;\n      return { value, selected, label, filterMeta };\n    });\n  }\n  set options(opts: Array<OptionInterface | string>) {\n    this._options = opts.map((opt) => {\n      if (typeof opt === 'string') return { value: opt, label: opt };\n      else return opt;\n    });\n  }\n  private _options: OptionInterface[] = [];\n  @State() _eOptions: OptionInterface[] = [];\n\n  /**\n   * If `true`, a clear icon will appear in the select when there is a value. Clicking it clears the select.\n   */\n  @Prop() clearSelect = false;\n\n  /**\n   * Hide the native select element and cover with a value 'mask'.\n   * Enables a fluid nano-select width upon value change (if required). Doesn't work with multiple=\"true\".\n   */\n  @Prop() mask = false;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait to trigger the `nanoSearchChange` event after each keystroke.\n   */\n  @Prop() debounce = 0;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.nanoSearchChange = debounceEvent(this.nanoSearchChange, this.debounce);\n  }\n\n  @Watch('required')\n  @Watch('disabled')\n  @Watch('min')\n  @Watch('max')\n  @Watch('validateOn')\n  @Watch('readonly')\n  protected shouldValidate() {\n    if (this.onInit) return;\n    if (this.invalid) this.showErrorMsg = this._invalid = false;\n\n    this.customValidate();\n    if (this.validateOn !== 'dirty') return;\n    this.showInlineValidation();\n  }\n\n  /**\n   * Update the native select element when the value changes\n   */\n  // eslint-disable-next-line @stencil/no-unused-watch\n  @Watch('value')\n  valueChanged() {\n    if (this.onInit) {\n      if (this.multiple) this.currInsertIndex = this.value.length - 1;\n      return;\n    }\n    setTimeout((_) => this.shouldValidate(), 20);\n    this.nanoChange.emit({ value: this.value });\n  }\n\n  /** nano-dropdown config options you can pass to the nested dropdown component */\n  @Prop({ mutable: true }) dropDownConfig?: Partial<Dropdown> = {};\n\n  @Watch('dropDownConfig')\n  setDataListOpts() {\n    if (!this.datalist || !this.selectWrap) return;\n    const currDWConfig = this.datalist.dropDownConfig || {};\n    this.datalist.dropDownConfig = {\n      ...currDWConfig,\n      ...this.dropDownConfig,\n      tetherTo: this.selectWrap,\n    };\n    this.datalist.input = this.inputCtrl;\n  }\n\n  // Custom Events\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() nanoChange!: EventEmitter<SelectChangeEventDetail>;\n\n  /**\n   * Emitted when the select loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has been created.\n   * @internal\n   */\n  @Event() nanoDidLoad!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has been removed.\n   * @internal\n   */\n  @Event() nanoDidUnload!: EventEmitter<void>;\n\n  /**\n   * Emitted when a keyboard input occurred on a multiple=\"true\" input\n   */\n  @Event() nanoSearchChange!: EventEmitter<InputChangeEventDetail>;\n\n  /**\n   * Called when validation is performed (which depends on `validateOn`).\n   * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n   */\n  @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n  // Public Methods\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `{ isValid: boolean, errorMessage: string }`\n   */\n  @Method()\n  async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n    if (validateFirst) this.showInlineValidation();\n    return {\n      isValid: !this.invalid,\n      errorMessage: this.errorMessage,\n    };\n  }\n\n  /**\n   * Sets focus on the specified `nano-select`. Use this method instead of the global\n   * `select.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    this.inputCtrl.focus();\n    setTimeout(() => this.inputCtrl.click(), 50);\n  }\n\n  /**\n   * Returns the native `<select>` element used under the hood.\n   */\n  @Method()\n  getSelectElement(): Promise<HTMLSelectElement> {\n    return Promise.resolve(this.nativeSelect!);\n  }\n\n  /**\n   * Invalidate the field and show a custom error message.\n   * To clear the error you will need to re-call this method with an empty string.\n   */\n  @Method()\n  async showError(message: string) {\n    if (this.nativeSelect) {\n      this.nativeSelect.setCustomValidity(message);\n      this.showInlineValidation();\n    }\n  }\n\n  /* Logic */\n\n  private get valArray() {\n    return typeof this.value === 'string'\n      ? this.value.length\n        ? [this.value]\n        : []\n      : this.value;\n  }\n\n  private isValidValues() {\n    return this.valArray.find((val) =>\n      (this.options as OptionInterface[]).find((opt) => opt.value === val)\n    );\n  }\n\n  private customValidate = () => {\n    this.nativeSelect.setCustomValidity('');\n\n    // add custom validations 'cos html5 validations are a bit rubbish on selects\n    if (this.required && !this.valArray.length) {\n      this.nativeSelect.setCustomValidity('Please fill in this field.');\n      return true;\n    }\n    if (\n      this.valArray.length &&\n      !this.allowCustomValues &&\n      !this.isValidValues()\n    ) {\n      this.nativeSelect.setCustomValidity(\n        'Please choose an item from this field.'\n      );\n      return true;\n    }\n    if (this.max && this.valArray.length > this.max) {\n      this.nativeSelect.setCustomValidity(\n        `Only up to ${this.max} values are allowed.`\n      );\n      return true;\n    }\n    if (this.min && this.valArray.length < this.min) {\n      this.nativeSelect.setCustomValidity(\n        `You must select a minimum of ${this.min} values.`\n      );\n      return true;\n    }\n    return false;\n  };\n\n  private showInlineValidation = (ev?: Event) => {\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n    this._invalid = false;\n    this.showErrorMsg = false;\n    this.errorMessage = '';\n\n    if (!this.nativeSelect.validity.valid) {\n      this.errorMessage = this.nativeSelect.validationMessage;\n      this._invalid = true;\n      this.showErrorMsg = true;\n    }\n    this.nanoValidate.emit({\n      isValid: !this.invalid,\n      errorMessage: this.errorMessage,\n      originalEvent: ev,\n    });\n  };\n\n  private handleInvalid = (ev: Event) => {\n    this._invalid = true;\n\n    if (this.validateOn === 'submit')\n      this._invalid = this.showErrorMsg = this.customValidate();\n    if (this.showInlineError) ev.preventDefault();\n\n    setTimeout((_) => this.showInlineValidation(ev), 20);\n  };\n\n  private setValue = (e: CustomEvent<HTMLNanoOptionElement>) => {\n    e.preventDefault();\n\n    if (!this.multiple) {\n      this.value = e.detail.value;\n      this.selectWrap.clientWidth; // force reflow\n      this.inputCtrl.focus();\n      return;\n    }\n    if (this.value && this.value.length && this.value.includes(e.detail.value))\n      return;\n    if (this.max && this.value.length === this.max) return;\n\n    this.currInsertIndex++;\n    this.value = [\n      ...this.value.slice(0, this.currInsertIndex),\n      e.detail.value,\n      ...this.value.slice(this.currInsertIndex),\n    ];\n    this.inputSearchVal = '';\n    // this.selectWrap.clientWidth; // force reflow\n  };\n\n  private removeValue = (toFind?: string) => {\n    if (!this.multiple || !this.value.length) return;\n\n    if (!toFind) toFind = this.value[this.value.length - 1];\n    this.value = (this.value as Array<string>).filter((val) => val !== toFind);\n\n    this.currInsertIndex--;\n    // this.selectWrap.clientWidth; // force reflow\n    this.setFocus();\n  };\n\n  private slotChangeObserver() {\n    const mo = (this.mo = new MutationObserver(() =>\n      this.processSlottedContent()\n    ));\n    mo.observe(this.el, { childList: true, subtree: true });\n  }\n\n  private processSlottedContent() {\n    // see if we have label / helper content\n    this.hasLabelSlot = !!this.el.querySelectorAll('[slot=\"label\"]').length;\n    this.hasHelperSlot = !!this.el.querySelector('[slot=\"helper\"]');\n\n    // breaking change introduced in v2. Rm in v3\n    if (\n      !!this.el.querySelector('select:not([class*=\"sc-nano-select\"]) option')\n    ) {\n      console.warn(\n        'nesting `<option>` elements was removed in v2. Please update your code to use `<nano-option>` elements instead.',\n        this.el\n      );\n    }\n\n    // breaking change introduced in v2. Rm in v3\n    if (!!this.el.querySelector('[slot=\"legacy\"]')) {\n      console.warn(\n        'The `legacy` slot has been removed. Please update your code',\n        this.el\n      );\n    }\n  }\n\n  private getLabel(toFind: string) {\n    let label = (this.options as OptionInterface[]).find((opt) => {\n      return !opt.disabled && opt.value?.length && opt.value === toFind;\n    });\n    return label && label.label ? label.label : toFind;\n  }\n\n  /* Event handling */\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 target: Element;\n\n    raf(() => {\n      if (kev.key) {\n        if (kev.key !== 'Tab') return;\n        target = getActiveElement();\n      } else target = e.target as Element;\n\n      if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {\n        this.onBlur();\n      }\n    });\n  }\n\n  private setOptions = () => {\n    if (\n      !this.datalist ||\n      !this.datalist.activeOptions ||\n      !this.datalist.activeOptions.length\n    )\n      return;\n\n    this._eOptions = this.datalist.activeOptions.map((ao) => {\n      const { value, selected, label, filterMeta } = ao;\n      return { value, selected, label, filterMeta };\n    });\n  };\n\n  private handleDocumentKeyDown = (ev: KeyboardEvent) => {\n    if (!this.multiple || !this.hasFocus) return;\n\n    if (!this.inputSearchVal) {\n      let rm: HTMLSpanElement;\n\n      switch (ev.key) {\n        case 'Backspace':\n          if (this.inputCtrl.previousElementSibling)\n            rm = this.inputCtrl.previousElementSibling as HTMLSpanElement;\n          else break;\n\n          this.removeValue(rm.dataset.value || null);\n          break;\n\n        case 'Delete':\n          if (this.inputCtrl.nextElementSibling)\n            rm = this.inputCtrl.nextElementSibling as HTMLSpanElement;\n          else break;\n\n          this.removeValue(rm.dataset.value || null);\n          break;\n\n        case 'ArrowLeft':\n        case 'ArrowRight':\n          if (!this.value.length) break;\n\n          if (ev.key === 'ArrowLeft' && this.inputCtrl.previousSibling)\n            this.currInsertIndex--;\n          if (ev.key === 'ArrowRight' && this.inputCtrl.nextSibling)\n            this.currInsertIndex++;\n\n          setTimeout(() => {\n            this.inputCtrl.focus();\n          }, 20);\n          ev.preventDefault();\n          break;\n      }\n    }\n  };\n\n  private onBlur = () => {\n    this.hasFocus = false;\n\n    setTimeout(() => {\n      if (this.validateOn === 'dirty' && !this.hasFocus)\n        this.showInlineValidation();\n    }, 20);\n    this.nanoBlur.emit();\n\n    if (!this.allowCustomValues && this.multiple) this.inputSearchVal = '';\n  };\n\n  private onFocus = () => {\n    this.hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private clearSelectValue = (ev?: Event) => {\n    if (this.clearSelect && !this.readonly && !this.disabled && ev) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    }\n\n    if (this.multiple) {\n      this.value = [];\n      this.currInsertIndex = -1;\n    } else this.value = '';\n\n    this.inputCtrl.value = '';\n    const event = new window.Event('change');\n    this.inputCtrl.dispatchEvent(event);\n  };\n\n  private onClick = () => {\n    this.setFocus();\n  };\n\n  /* Multi event handlers */\n\n  private onDragStart = (ev: MouseEvent) => {\n    let ele = ev.target as HTMLSpanElement;\n    this.dragVal = ele.dataset.value;\n  };\n\n  private onDragEnd = (ev) => {\n    this.dragVal = null;\n    ev.preventDefault();\n  };\n\n  private onDragLeave = (ev: MouseEvent) => {\n    let ele = ev.target as HTMLSpanElement;\n    let spanVal: string =\n      ele.dataset && ele.dataset.value ? ele.dataset.value : null;\n\n    if (\n      !spanVal ||\n      this.dragVal === spanVal ||\n      !this.value.includes(this.dragVal)\n    ) {\n      ev.preventDefault();\n      return;\n    }\n\n    let to = this.value.indexOf(spanVal);\n    let from = this.value.indexOf(this.dragVal);\n    let tmpArr = this.value as Array<string>;\n    let tmpVal = tmpArr[to];\n\n    tmpArr[to] = tmpArr[from];\n    tmpArr[from] = tmpVal;\n    this.value = [...tmpArr];\n  };\n\n  private onMultiInput = (ev) => {\n    this.inputSearchVal = ev.target.value.trim();\n    this.nanoSearchChange.emit({ value: ev.target.value.trim() });\n  };\n\n  /* Stencil Component lifecycle hooks */\n\n  connectedCallback() {\n    this.debounceChanged();\n\n    if (!Build.isBrowser) return;\n\n    this.el.dispatchEvent(\n      new CustomEvent('nanoDidLoad', {\n        detail: this.el,\n      })\n    );\n  }\n\n  disconnectedCallback() {\n    document.dispatchEvent(\n      new CustomEvent('nanoDidUnload', {\n        detail: this.el,\n      })\n    );\n\n    if (!Build.isBrowser) return;\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n    this.customValidate();\n    this.setDataListOpts();\n    raf(() => (this.onInit = false));\n  }\n\n  componentWillLoad() {\n    this.processSlottedContent();\n  }\n\n  render() {\n    const labelId = this.selectId + '-lbl';\n    const moreId =\n      this.showInlineError || this.hasHelperSlot\n        ? this.selectId + '-moreId'\n        : '';\n\n    this.rtl = (this.el.ownerDocument as Document).dir === 'rtl';\n    this.valueItems = [];\n\n    const compWrapOptions = (({\n      el,\n      floatLabel,\n      label,\n      errorMessage,\n      showInlineError,\n      hasHelperSlot,\n      hasLabelSlot,\n      hideLabel,\n      placeholder,\n      rtl,\n    }) => ({\n      el,\n      floatLabel,\n      label,\n      errorMessage,\n      showInlineError,\n      hasHelperSlot,\n      hasLabelSlot,\n      hideLabel,\n      placeholder,\n      rtl,\n    }))(this);\n    const wrapOptions = {\n      ...compWrapOptions,\n      labelId,\n      moreId,\n      hasValue: !!this.value.length || !!this.inputSearchVal.length,\n      controlId: this.selectId,\n    };\n\n    const controlOptions = (({ readonly, disabled }) => ({\n      readonly,\n      disabled,\n      clearControl: this.clearSelect,\n    }))(this);\n\n    return (\n      <Host\n        type={this.multiple ? 'select-multiple' : 'select-one'}\n        aria-disabled={this.disabled ? 'true' : null}\n        class={{\n          ...createColorClasses(this.color),\n          'has-value': !!this.value.length || !!this.inputSearchVal.length,\n          'has-focus': this.hasFocus,\n          'is-invalid': this.invalid,\n          'has-label': this.label !== null && !this.floatLabel,\n          'has-float-label': this.label !== null && this.floatLabel,\n          rtl: this.rtl,\n          'has-multiple': this.multiple,\n          'has-clr-btn': this.clearSelect,\n          masked: this.mask,\n          legacy: this.isLegacy,\n        }}\n      >\n        <FormControlWrap {...wrapOptions}>\n          <FormControl\n            {...controlOptions}\n            onClearText={this.clearSelectValue}\n            control={this.el}\n            ref={(el) => (this.selectWrap = el)}\n            endValueSlot={\n              <slot name=\"down-arrow\">\n                <nano-icon slot=\"value-end\" name=\"light/chevron-down\" />\n              </slot>\n            }\n          >\n            {this.multiple && (\n              <div class=\"multi-wrap\">\n                {this.multipleValues(labelId, moreId)}\n              </div>\n            )}\n            {!this.multiple && [\n              this.mask && (\n                <div class=\"select-mask\">\n                  {this.getLabel(this.value as string)}\n                </div>\n              ),\n              <input\n                id={this.selectId}\n                class=\"native-input\"\n                ref={(input) => (this.inputCtrl = input)}\n                aria-labelledby={labelId + ' ' + moreId}\n                disabled={this.disabled}\n                form={this.form}\n                placeholder={\n                  !this.floatLabel && this.placeholder ? this.placeholder : ''\n                }\n                readOnly={true}\n                required={this.required}\n                value={this.getLabel(this.value as string)}\n                onFocus={this.onFocus}\n              />,\n            ]}\n          </FormControl>\n        </FormControlWrap>\n        {!this.readonly && !this.disabled && (\n          <nano-datalist\n            onNanoOptionsUpdated={this.setOptions}\n            ref={(el) => (this.datalist = el)}\n            selected={this.valArray}\n            type={this.multiple ? 'selctMulti' : 'select'}\n            onNanoSelect={this.setValue}\n            onNanoDeselect={(e) => {\n              e.preventDefault();\n              this.removeValue(e.detail.value);\n            }}\n            options={this._options.length ? this._options : undefined}\n          >\n            {this.allowCustomValues && this.multiple && !!this.inputSearchVal && (\n              <nano-option\n                slot=\"list-top\"\n                value={this.inputSearchVal}\n                selected={false}\n                label={this.inputSearchVal}\n                onNanoSelect={() => this.inputCtrl.focus()}\n              >\n                <span slot=\"check-icon\"></span>\n                Add '{this.inputSearchVal}'\n              </nano-option>\n            )}\n            <slot />\n          </nano-datalist>\n        )}\n\n        <select\n          id={this.selectId + '-hidden'}\n          class=\"native-select\"\n          ref={(select) => (this.nativeSelect = select)}\n          aria-labelledby={labelId + ' ' + moreId}\n          disabled={this.disabled}\n          form={this.form}\n          multiple={this.multiple}\n          name={this.name}\n          required={this.required}\n          onInvalid={this.handleInvalid}\n        >\n          {this.allowCustomValues &&\n            this.valArray.map((val) => {\n              return (\n                <option value={val} selected={true}>\n                  {val}\n                </option>\n              );\n            })}\n          {!this.allowCustomValues &&\n            this.options.map((opt: OptionInterface) => {\n              return (\n                <option\n                  value={opt.value}\n                  selected={this.valArray.includes(opt.value)}\n                  disabled={opt.disabled}\n                  label={opt.label}\n                >\n                  {this.valArray.includes(opt.value)}\n                </option>\n              );\n            })}\n        </select>\n      </Host>\n    );\n  }\n\n  private multipleValues(\n    labelId: string,\n    moreId: string\n  ): VNode | (VNode | VNode[])[] {\n    let input: VNode = (\n      <input\n        class=\"multi-input\"\n        id={this.selectId}\n        ref={(input) => (this.inputCtrl = input)}\n        readOnly={this.readonly}\n        disabled={this.disabled}\n        autoFocus={this.autofocus}\n        autocomplete=\"off\"\n        onKeyDown={this.handleDocumentKeyDown}\n        onInput={this.onMultiInput}\n        value={this.inputSearchVal}\n        onTouchStart={this.onClick}\n        onMouseDown={this.onClick}\n        onFocus={this.onFocus}\n        placeholder={\n          this.placeholder && !this.floatLabel && !this.value.length\n            ? this.placeholder\n            : ''\n        }\n        aria-labelledby={labelId + ' ' + moreId}\n      />\n    );\n    if (!this.value.length) return input;\n\n    return (this.value as Array<string>).map((val, i) => {\n      let toReturn: VNode | VNode[] = (\n        <span\n          onDragStart={this.onDragStart}\n          onDragLeave={this.onDragLeave}\n          onDragEnd={this.onDragEnd}\n          onDragOver={(e) => e.preventDefault()}\n          draggable\n          data-value={val}\n          ref={(span) => this.valueItems.push(span)}\n          class=\"multi-value\"\n        >\n          <span>{this.getLabel(val)}</span>\n          <button\n            class=\"multi-value-remove\"\n            type=\"button\"\n            tabindex=\"-1\"\n            onTouchEnd={() => {\n              this.removeValue(val);\n            }}\n            onMouseUp={() => {\n              this.removeValue(val);\n            }}\n          >\n            <nano-icon name=\"light/times\"></nano-icon>\n          </button>\n        </span>\n      );\n      if (i === 0 && this.currInsertIndex < 0)\n        toReturn = [input, toReturn as VNode];\n      else if (i === this.currInsertIndex)\n        toReturn = [toReturn as VNode, input];\n      return toReturn;\n    });\n  }\n}\n"]}

package/dist/nano-components/p-f84998c9.system.entry.js

@@ -1,5 +0,0 @@
-var __awaiter=this&&this.__awaiter||function(t,e,n,i){function o(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,s){function a(t){try{l(i.next(t))}catch(e){s(e)}}function r(t){try{l(i["throw"](t))}catch(e){s(e)}}function l(t){t.done?n(t.value):o(t.value).then(a,r)}l((i=i.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(s[0]&1)throw s[1];return s[1]},trys:[],ops:[]},i,o,s,a;return a={next:r(0),throw:r(1),return:r(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function r(t){return function(e){return l([t,e])}}function l(a){if(i)throw new TypeError("Generator is already executing.");while(n)try{if(i=1,o&&(s=a[0]&2?o["return"]:a[0]?o["throw"]||((s=o["return"])&&s.call(o),0):o.next)&&!(s=s.call(o,a[1])).done)return s;if(o=0,s)a=[a[0]&2,s.value];switch(a[0]){case 0:case 1:s=a;break;case 4:n.label++;return{value:a[1],done:false};case 5:n.label++;o=a[1];a=[0];continue;case 7:a=n.ops.pop();n.trys.pop();continue;default:if(!(s=n.trys,s=s.length>0&&s[s.length-1])&&(a[0]===6||a[0]===2)){n=0;continue}if(a[0]===3&&(!s||a[1]>s[0]&&a[1]<s[3])){n.label=a[1];break}if(a[0]===6&&n.label<s[1]){n.label=s[1];s=a;break}if(s&&n.label<s[2]){n.label=s[2];n.ops.push(a);break}if(s[2])n.ops.pop();n.trys.pop();continue}a=e.call(t,n)}catch(r){a=[6,r];o=0}finally{i=s=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};var __spreadArray=this&&this.__spreadArray||function(t,e){for(var n=0,i=e.length,o=t.length;n<i;n++,o++)t[o]=e[n];return t};
-/*!
- * Web Components for Nanopore digital Web Apps
- */System.register(["./p-59b3d24b.system.js","./p-1c216ca4.system.js","./p-ef053a2f.system.js","./p-1d13dbdf.system.js","./p-1f2b5241.system.js","./p-09d2d944.system.js"],(function(t){"use strict";var e,n,i,o,s,a,r,l,u,c,p,d;return{setters:[function(t){e=t.r;n=t.c;i=t.f;o=t.j;s=t.h;a=t.e;r=t.g},function(t){l=t.r},function(t){u=t.d},function(t){c=t.g},function(t){p=t.g},function(t){d=t.g}],execute:function(){var h=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--padding-start:var(--nano-spacing-xlarge, 24px);--padding-end:var(--nano-spacing-xlarge, 24px);--font-size:0.8em;--color:#b5aea7;color:var(--color)}.dlist--isfiltered ::slotted(*:not(nano-option):not([slot=no-result]):not([slot=list-top]):not([slot=list-bottom])){display:none !important}.dlist__dropdown{--min-width:100%;--overflow:auto}.dlist__status{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.dlist__menu{--padding-top:inherit;--padding-bottom:inherit;--padding-start:inherit;--padding-end:inherit;--font-size:inherit}";function f(t){var e;if(t.id){e=document.querySelector("label[for='"+t.id+"']")}if(!e){e=t.closest("label")}return e}var b=0;var v=t("nano_datalist",function(){function t(t){var i=this;e(this,t);this.nanoSelect=n(this,"nanoSelect",7);this.nanoDeselect=n(this,"nanoDeselect",7);this.nanoOptionsUpdated=n(this,"nanoOptionsUpdated",7);this.isNanoInput=false;this.typeToSelect="";this.optionEles=[];this.listId="nano-datalist-"+b++;this.isFiltered=false;this._allOptEles=[];this.actvOptEles=[];this.canOpen=true;this.optionIds=[];this.selected=[];this._dropDownConfig={skidding:-1};this.options=[];this.type="input";this.open=false;this.disableFilter=false;this.disabled=false;this.optSelected=function(t){t.stopPropagation();i.changeInputValue(t.detail);l((function(){return i.inputChange()}));if(i.type==="select")i.shouldOpen=false};this.handleShow=function(){return __awaiter(i,void 0,void 0,(function(){return __generator(this,(function(t){if(this.type==="select")this.listBox.setFocus();return[2]}))}))};this.inputClick=function(){i.shouldOpen=true;i.manageDropdownDisplay()};this.inputKeydown=function(t){var e=["Shift","ArrowRight","ArrowLeft","Escape","Enter","Tab"];if(e.includes(t.key)){if(t.key==="Tab")i.shouldOpen=false;return}if(i.type==="select"&&!["ArrowDown","ArrowUp"].includes(t.key)&&(t.key!==" "||i.typeToSelectTimeout)){if(t.key===" "||/^[a-z0-9]+$/i.test(t.key)){clearTimeout(i.typeToSelectTimeout);i.typeToSelectTimeout=window.setTimeout((function(){i.typeToSelect="";i.typeToSelectTimeout=0}),750);i.typeToSelect+=t.key;i.setOptStartsWith()}return}i.shouldOpen=true;i.manageDropdownDisplay()};this.optionKeyDown=function(t){var e=["Shift","ArrowUp","ArrowDown","Escape","Enter","Tab","Space"," "];if(e.includes(t.key)){if(t.key==="Escape")i.connectedInput.focus();return}var n=["Delete","Backspace"];if(i.type!=="select"&&(!i.exactMatch||n.includes(t.key))){i.connectedInput.focus()}};this.inputChange=u(this.inputChange.bind(this),50)}Object.defineProperty(t.prototype,"allOptEles",{get:function(){return this._allOptEles},set:function(t){var e=this;var n;this._allOptEles=t;if((n=this.connectedInput)===null||n===void 0?void 0:n.value)return;t.forEach((function(t){if(t.selected&&!e.selected.includes(t.value)){e.changeInputValue(t)}}))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"dropDownConfig",{get:function(){return this._dropDownConfig},set:function(t){this._dropDownConfig=Object.assign(Object.assign({},this._dropDownConfig),t)},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"activeOptions",{get:function(){return this.allOptEles},enumerable:false,configurable:true});t.prototype.openWatcher=function(){var t=this;i((function(){t.nanoDropdown.open=t.open;t.connectedInput.setAttribute("aria-expanded",t.open.toString())}))};t.prototype.watchInputChange=function(){return __awaiter(this,void 0,void 0,(function(){var t,e;return __generator(this,(function(n){switch(n.label){case 0:if(!(t=this.host.closest("nano-input")))return[3,2];this.isNanoInput=true;e=this;return[4,t.getInputElement()];case 1:e.connectedInput=n.sent();return[3,3];case 2:if(this.input&&typeof this.input==="string"&&(t=document.querySelector(this.input))){this.isNanoInput=false;this.connectedInput=t}else if(this.input instanceof HTMLElement){this.connectedInput=this.input}n.label=3;case 3:return[2]}}))}))};t.prototype.manageSlotChangeListener=function(){var t=this;var e;if(!this.host)return;if((!this.options||!this.options.length)&&!this.mo){{var n=this.mo=new MutationObserver((function(){return t.processSlottedContent()}));n.observe(this.host,{childList:true,subtree:true})}this.processSlottedContent();return}if((e=this.options)===null||e===void 0?void 0:e.length){if(!!this.mo){this.mo.disconnect();this.mo=undefined}setTimeout((function(){var e;if(((e=t.connectedInput)===null||e===void 0?void 0:e.value.length)&&t.type!=="select"){t.inputChange()}else t.actvOptEles=__spreadArray([],t.allOptEles)}),50)}o(this.host)};t.prototype.watchTypeChange=function(){if(!this.connectedInput)return;var t={closeOnSelect:false};var e="both";var n=false;switch(this.type){case"selctMulti":break;case"select":e="list";n=true;break}if(!this.isNanoInput){t.tetherTo=this.connectedInput}this.dropDownConfig=Object.assign(Object.assign({},this.dropDownConfig),t);this.connectedInput.setAttribute("aria-autocomplete",e);this.connectedInput.readOnly=n};t.prototype.manageInputEvents=function(t,e){var n=this;var o;if(!!e){var s=e.closest("nano-input");if(s){s.removeEventListener("nanoChange",this.inputChange)}e.removeEventListener("change",this.inputChange);e.removeEventListener("click",this.inputClick);e.removeEventListener("keydown",this.inputKeydown);e.removeEventListener("input",this.inputChange);this.inputLabel=null;i((function(){e.removeAttribute("role");e.removeAttribute("aria-expanded");e.removeAttribute("aria-controls");e.removeAttribute("aria-owns");e.removeAttribute("aria-haspopup");e.removeAttribute("aria-autocomplete");e.removeAttribute("autocomplete")}))}if(!!t){var s=t.closest("nano-input");if(s){s.addEventListener("nanoChange",this.inputChange)}t.addEventListener("change",this.inputChange);t.addEventListener("click",this.inputClick);t.addEventListener("keydown",this.inputKeydown);t.addEventListener("input",this.inputChange);this.listId=this.host.id||this.listId;this.inputLabel=((o=t===null||t===void 0?void 0:t.labels)===null||o===void 0?void 0:o.item(0))||f(t);i((function(){n.host.id=n.listId;t.setAttribute("role","combobox");t.setAttribute("aria-expanded","false");t.setAttribute("aria-controls",n.listId);t.setAttribute("aria-owns",n.listId);t.setAttribute("aria-haspopup","listbox");t.setAttribute("autocomplete","off")}))}};t.prototype.watchActvOptChange=function(){var t=this;var e;var n=0;var o=((e=this.connectedInput)===null||e===void 0?void 0:e.value)||"";var s=[];i((function(){t.allOptEles.forEach((function(e,i){if(t.actvOptEles.includes(e)){n++;e.setAttribute("aria-posinset",n+"");e.setAttribute("aria-setsize",t.actvOptEles.length+"");e.hidden=false;t.isSelected(e,o)}else{e.removeAttribute("aria-posinset");e.removeAttribute("aria-setsize");e.hidden=true;e.selected=false}e.id=t.listId+"-option-"+i;s.push(e.id)}));t.optionIds=s}))};t.prototype.manageCanOpen=function(){if(this.actvOptEles.length||this.hasNoResult)this.canOpen=true;else this.canOpen=false};t.prototype.manageDropdownDisplay=function(){if(this.shouldOpen&&this.canOpen&&!this.disabled)this.open=true;if(!this.shouldOpen||!this.canOpen)this.open=false};t.prototype.fireActiveOptsEvent=function(){this.nanoOptionsUpdated.emit(this.actvOptEles)};t.prototype.isSelected=function(t,e){if(e===t.value||this.selected.includes(t.value)){t.selected=true}else t.selected=false};Object.defineProperty(t.prototype,"dropwdownOpen",{get:function(){if(!this.nanoDropdown||!this.open)return false;return true},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"exactMatch",{get:function(){var t=this;return this.allOptEles.find((function(e){return t.connectedInput.value===e.value}))},enumerable:false,configurable:true});t.prototype.changeInputValue=function(t){var e;var n;if(this.selected.includes(t.value)){this.selected=this.selected.filter((function(e){return e!==t.value}));n=this.nanoDeselect.emit(t)}else{this.selected=__spreadArray([],this.selected);n=this.nanoSelect.emit(t)}if(!n.defaultPrevented){if(this.connectedInput)this.connectedInput.value=t.value;var i=new window.Event("change");(e=this.connectedInput)===null||e===void 0?void 0:e.dispatchEvent(i)}};t.prototype.setOptStartsWith=function(){var t=this;var e=function(e){return e.toLowerCase().substring(0,t.typeToSelect.length)===t.typeToSelect};var n=this.allOptEles.find((function(t){return t.value.trim().length>0&&!t.disabled&&(e(t.textContent)||e(t.value)||e(t.label)||e(t.filterMeta))}));if(n)this.changeInputValue(n)};t.prototype.processSlottedContent=function(){var t=this;l((function(){var e;t.allOptEles=Array.from(t.host.querySelectorAll("nano-option"));t.hasNoResult=!!t.host.querySelector('[slot="no-result"]');if(((e=t.connectedInput)===null||e===void 0?void 0:e.value.length)&&t.type!=="select"){t.inputChange()}else t.actvOptEles=t.allOptEles}))};t.prototype.inputChange=function(){var t=this;if(this.disableFilter){this.actvOptEles=this.allOptEles;return}var e=this.connectedInput.value;var n=e.trim().toLowerCase();var i=false;var o=[];var s=function(t){return t.toLowerCase().indexOf(n)>-1};this.allOptEles.forEach((function(n){if((e===n.value||e===n.label)&&t.type!=="selctMulti"){n.selected=true;i=true}else t.isSelected(n,e)}));this.allOptEles.forEach((function(t){if(!n.length||i){o.push(t)}else if(t.value.trim().length>0&&!t.disabled&&(s(t.textContent)||s(t.value)||s(t.label)||s(t.filterMeta))){o.push(t)}}));this.isFiltered=n.length&&!i;this.actvOptEles=o};t.prototype.connectedCallback=function(){this.watchInputChange()};t.prototype.componentDidLoad=function(){this.manageSlotChangeListener();this.openWatcher()};t.prototype.componentDidRender=function(){var t=this;var e;setTimeout((function(){if(!t.connectedInput)console.warn("no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop",t.host)}),500);if((e=this.options)===null||e===void 0?void 0:e.length)this.allOptEles=this.optionEles};t.prototype.render=function(){var t=this;this.optionEles=[];return s(a,{role:"listbox","aria-owns":this.optionIds.join(" "),"aria-label":"Select options from the list below"},s("nano-dropdown",Object.assign({},this.dropDownConfig,{ref:function(e){return t.nanoDropdown=e},dialogTitle:"Select options from the list below",class:{dlist__dropdown:true,"dlist--isfiltered":this.isFiltered},onNanoAfterShow:this.handleShow,onNanoAfterHide:function(e){return t.open=false}}),s("nano-menu",{hidden:!this.actvOptEles.length,type:"listbox",label:this.inputLabel?this.inputLabel.textContent:undefined,class:{dlist__menu:true,"dlist__menu--open":this.dropwdownOpen},tabIndex:-1,onNanoSelect:this.optSelected,onKeyDown:this.optionKeyDown,ref:function(e){return t.listBox=e}},s("slot",{name:"list-top"}),!this.options.length&&s("slot",null),!!this.options.length&&s("slot",null,this.options.map((function(e,n){if(e.value||e.label){return s("nano-option",{ref:function(e){return t.optionEles.push(e)},key:e.label+n,label:e.label,value:e.value,"aria-posinset":n,"aria-setsize":t.options.length,selected:e.selected,id:t.listId+"-option-"+n},e.label?e.label:e.value)}}))),s("slot",{name:"list-bottom"})),s("nano-menu",{type:"listbox",label:"No results found",hidden:!!this.actvOptEles.length,class:{dlist__menu:true,"dlist__menu--open":this.dropwdownOpen}},s("slot",{name:"no-result"})),!!this.actvOptEles&&s("div",{"aria-live":"polite",role:"status",class:"dlist__status"},this.actvOptEles.length," result",this.actvOptEles.length>1?"s":""," available.")))};Object.defineProperty(t.prototype,"host",{get:function(){return r(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{open:["openWatcher"],input:["watchInputChange"],options:["manageSlotChangeListener"],type:["watchTypeChange"],connectedInput:["watchTypeChange","manageInputEvents"],selected:["watchActvOptChange"],actvOptEles:["watchActvOptChange","manageCanOpen","fireActiveOptsEvent"],hasNoResult:["manageCanOpen"],shouldOpen:["manageDropdownDisplay"],canOpen:["manageDropdownDisplay"]}},enumerable:false,configurable:true});return t}());v.style=h;var g=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--padding-start:var(--nano-spacing-medium, 16px);--padding-end:var(--nano-spacing-medium, 16px);--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--secondary-padding-top:0;--secondary-padding-bottom:0;--bg-color-hover:#f2f7f9;--bg-color-focus:#f2f7f9;--bg-color-selected:#f2f7f9;--color-hover:#007495;--color-selected:#007495;--color-focus:#007495;--focus-outline:none;--font-size:0.9em;display:block}.menu{font-size:var(--font-size, 0.9em);-ms-scroll-chaining:none;overscroll-behavior:none;min-width:var(--width);position:relative}.menu:focus{outline:none}::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)){padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:block}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)){padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}";var m=!!document.head.attachShadow;var y=t("nano_menu",function(){function t(t){var i=this;e(this,t);this.nanoFocus=n(this,"nanoFocus",7);this.nanoBlur=n(this,"nanoBlur",7);this.nanoSelect=n(this,"nanoSelect",7);this.ignoreMouseEvents=false;this.typeToSelect="";this._hasFocus=false;this.type="menu";this.handleFocus=function(){i.setActiveFocusItem(i.selectedItem||i.getItems[0]);i._hasFocus=true;i.nanoFocus.emit()};this.handleClick=function(t){var e=t.target;var n=e.closest("nano-nav-item");if(n&&!n.disabled){i.nanoSelect.emit(n)}};this.handleKeyDown=function(t){clearTimeout(i.ignoreMouseTimeout);i.ignoreMouseTimeout=setTimeout((function(){return i.ignoreMouseEvents=false}),500);i.ignoreMouseEvents=true;switch(t.key){case" ":if(i.activeItem)i.activeItem.click();break;case"ArrowDown":case"ArrowUp":case"PageDown":case"PageUp":case"Home":case"End":var e=i.getItems;var n=i.activeItem;var o=e.indexOf(n);if(e.length){t.preventDefault();if(t.key==="ArrowDown"){o++}else if(t.key==="ArrowUp"){o--}else if(t.key==="Home"||t.key==="PageUp"){o=0}else if(t.key==="End"||t.key==="PageDown"){o=e.length-1}if(o<0)o=e.length-1;if(o>e.length-1)o=0;i.setActiveFocusItem(e[o]);if(e[o])e[o].scrollIntoView({block:"nearest"});return}break}if(t.key===" "||/^[a-z0-9]+$/i.test(t.key)){clearTimeout(i.typeToSelectTimeout);i.typeToSelectTimeout=setTimeout((function(){return i.typeToSelect=""}),750);i.typeToSelect+=t.key;var e=i.getItems;for(var s=0,a=e;s<a.length;s++){var r=a[s];var l=r.shadowRoot.querySelector("slot:not([name])");var u=p(l).toLowerCase().trim();if(u.substring(0,i.typeToSelect.length)===i.typeToSelect){i.setActiveFocusItem(r);break}}}};this.handleMouseOver=function(t){var e=t.target;var n=e.closest("nano-nav-item")||e.closest("nano-option");if(n&&!i.ignoreMouseEvents){i.setActiveFocusItem(n)}}}Object.defineProperty(t.prototype,"hasFocus",{get:function(){return this._hasFocus},enumerable:false,configurable:true});t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){if((t=this.menu)===null||t===void 0?void 0:t.focus)this.menu.focus({preventScroll:true});return[2]}))}))};t.prototype.removeFocus=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){if((t=this.menu)===null||t===void 0?void 0:t.blur)this.menu.blur();return[2]}))}))};t.prototype.showActiveElement=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(this.selectedItem)this.selectedItem.scrollIntoView({block:"nearest"});return[2]}))}))};t.prototype.resetActiveItem=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.getItems.filter((function(t){return t.tagName.toLowerCase()==="nano-option"})).map((function(t){return t.setAttribute("tabindex","-1")}));return[2]}))}))};Object.defineProperty(t.prototype,"getItems",{get:function(){var t;var e=this.el.querySelectorAll("nano-nav-item.secondary-open");if(e.length){var n=e[e.length-1];t=Array.from(n.querySelectorAll("nano-nav-item, nano-option"))}else{t=c(this.el,"nano-nav-item, nano-option","slot")}return t.filter((function(t){return!t.disabled&&!t.hidden}))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"activeItem",{get:function(){var t=d();return this.getItems.find((function(e){return e.getAttribute("tabindex")==="0"||e===t||e.classList.contains("has-focus")}))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"selectedItem",{get:function(){var t=d();return this.getItems.find((function(e){return e.selected||e===t}))},enumerable:false,configurable:true});t.prototype.setActiveFocusItem=function(t,e){if(e===void 0){e=true}return __awaiter(this,void 0,void 0,(function(){var n,i;return __generator(this,(function(o){n=this.getItems;i=!t||t.disabled?n.find((function(t){return t.selected}))||n[0]:t;n.filter((function(t){return t.tagName.toLowerCase()==="nano-option"})).map((function(t){return t.setAttribute("tabindex",t===i?"0":"-1")}));if(!e)return[2];if(i){i.setFocus?i.setFocus():i.focus()}else this.menu.focus();return[2]}))}))};t.prototype.handleBlur=function(t){var e=this;if(!this.hasFocus)return;var n=t;var i;if(n.key){if(n.key!=="Tab")return;i=d()&&d().closest(this.el.tagName.toLowerCase())===this.el}else i=!!t.composedPath().find((function(t){return t===e.el}));if(!i){this.resetActiveItem();this._hasFocus=false;this.nanoBlur.emit()}};t.prototype.render=function(){var t;var e=this;return s(a,{class:{legacy:!m}},s("div",{onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onFocus:this.handleFocus,"aria-label":this.label?this.label:undefined,role:this.type,ref:function(t){return e.menu=t},part:"base",class:(t={menu:true},t["menu--"+this.type]=true,t["menu--has-focus"]=this.hasFocus,t),tabIndex:-1},s("slot",null)))};Object.defineProperty(t.prototype,"el",{get:function(){return r(this)},enumerable:false,configurable:true});return t}());y.style=g;var w=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--bg:none;--bg-selected:var(--nano-select-opt-bg, #f2f7f9);--bg-focus:var(--nano-color-base, var(--nano-color-primary-tint, #2689a5));--bg-disabled:none;--color:var(--input-text-color, var(--nano-input-text-color, #4a4a4a));--color-selected:var(--nano-color-base, var(--nano-color-primary, #007495));--color-focus:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--color-disabled:#b5aea7;--opt-icon-size:1.6em;display:block;color:var(--color);overflow:hidden;font-size:14px;font-size:clamp(12px, .9em, 16px)}:host(:focus){outline:none}.option{position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:100%;background:var(--bg);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.option{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(:focus) .option:not(.option--disabled),:host .option.option--selected{outline:none;background:var(--bg-selected);color:var(--color-selected)}:host(:focus) .option:not(.option--disabled){background:var(--bg-focus);color:var(--color-focus)}.option.option--disabled{outline:none;color:var(--color-disabled);cursor:not-allowed;background:var(--bg-disabled)}.option.option--novalue{font-style:italic;opacity:0.7}.option__label{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.option__start{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.option__start ::slotted(nano-icon){font-size:var(--opt-icon-size)}.option__start ::slotted(:last-child){margin-right:0.5em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.option__start ::slotted(:last-child){margin-right:unset;-webkit-margin-end:0.5em;margin-inline-end:0.5em}}.option__end{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.option__end ::slotted(nano-icon){font-size:var(--opt-icon-size)}.option__end ::slotted(:first-child){margin-left:0.5em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.option__end ::slotted(:first-child){margin-left:unset;-webkit-margin-start:0.5em;margin-inline-start:0.5em;}}.option__check{visibility:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;left:0.6em;top:calc(50% - 0.6em);-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:0.9em}.option--selected:not(.option--novalue) .option__check{visibility:visible}";var x=0;var _=t("nano_option",function(){function t(t){e(this,t);this.nanoSelect=n(this,"nanoSelect",7);this.optId="nano-option-"+x++;this.hasFocus=false;this.value="";this.label="";this.selected=false;this.disabled=false;this.filterMeta="";this.handleClick=u(this.handleClick.bind(this),5)}t.prototype.valueChanged=function(){if(!this.value||!this.value.length)this.value=this.labelContent};t.prototype.labelChanged=function(){if(!this.label||!this.label.length)this.label=this.labelContent.length?this.labelContent:this.value};t.prototype.handleKeyDown=function(t){if(t.key!==" "&&t.key!=="Enter")return;t.preventDefault();this.nanoSelect.emit(this.host)};t.prototype.handleClick=function(){if(this.disabled)return;this.nanoSelect.emit(this.host)};Object.defineProperty(t.prototype,"labelContent",{get:function(){return c(this.host,"*:not([slot])",false).map((function(t){return t.textContent})).join(" ").trim()},enumerable:false,configurable:true});t.prototype.componentWillLoad=function(){this.valueChanged();this.labelChanged()};t.prototype.render=function(){return s(a,{role:"option","aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":"false"},s("div",{onMouseDown:this.handleClick,id:this.optId,class:{option:true,"option--selected":this.selected,"option--disabled":this.disabled,"option--novalue":!this.value}},s("div",{part:"check-icon",class:"option__check"},s("slot",{name:"check-icon"},s("nano-icon",{name:"light/check","aria-hidden":"true"}))),s("div",{part:"start",class:"option__start"},s("slot",{name:"start"})),s("div",{part:"label",class:"option__label"},s("slot",null,this.label||this.value)),s("div",{part:"end",class:"option__end"},s("slot",{name:"end"}))))};Object.defineProperty(t.prototype,"host",{get:function(){return r(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{value:["valueChanged"],label:["labelChanged"]}},enumerable:false,configurable:true});return t}());_.style=w}}}));
-//# sourceMappingURL=p-f84998c9.system.entry.js.map

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

@@ -1 +0,0 @@
-{"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","optionEles","listId","isFiltered","_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","__spreadArray","forceUpdate","watchTypeChange","dwConfig","closeOnSelect","autocompleteType","readonly","tetherTo","dropDownConfig","readOnly","manageInputEvents","newInput","oldInput","removeEventListener","inputLabel","removeAttribute","addEventListener","labels","item","watchActvOptChange","c","val","optIds","i","hidden","isSelected","push","manageCanOpen","hasNoResult","fireActiveOptsEvent","nanoOptionsUpdated","emit","find","nanoSelected","filter","nanoDeselect","nanoSelect","defaultPrevented","event","Event","dispatchEvent","attrFind","toFind","toLowerCase","substring","foundEle","trim","textContent","label","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","map","option","aria-posinset","aria-setsize","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","slot","shadowRoot","getTextContent","handleMouseOver","menu","preventScroll","removeFocus","blur","showActiveElement","resetActiveItem","tagName","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":";;;2ZAAA,IAAMA,EAAc,u4BCmBpB,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,WA4CnB,SAAAC,EAAAC,GAAA,IAAAC,EAAAC,wJAzCQA,KAAAC,YAAc,MACdD,KAAAE,aAAe,GAGfF,KAAAG,WAAsC,GAItCH,KAAAI,OAAS,iBAAiBV,IAC1BM,KAAAK,WAAa,MAmBbL,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,MA0OXjB,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,SAAUd,KAAK4B,QAAQC,4BA+CnC7B,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,OAEF1C,EAAK0B,WAAa,KAElB1B,EAAKgC,yBAKC/B,KAAA0C,cAAgB,SACtBvB,GAEA,IAAMc,EAAa,CACjB,QACA,UACA,YACA,SACA,QACA,MACA,QACA,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,UA/btB5C,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,UAEZ3C,YAAW,iBACT,KAAIa,EAAAtD,EAAK4C,kBAAc,MAAAU,SAAA,OAAA,EAAAA,EAAEC,MAAMqB,SAAU5E,EAAKe,OAAS,SAAU,CAC/Df,EAAKyB,mBACAzB,EAAKQ,YAAW6E,cAAA,GAAOrF,EAAK4D,cAClC,IAGL0B,EAAYrF,KAAKmE,OAKnBtE,EAAAsD,UAAAmC,gBAAA,WACE,IAAKtF,KAAK2C,eAAgB,OAE1B,IAAI4C,EAA8B,CAAEC,cAAe,OACnD,IAAIC,EAAoC,OACxC,IAAIC,EAAW,MAEf,OAAQ1F,KAAKc,MACX,IAAK,aAEH,MACF,IAAK,SACH2E,EAAmB,OACnBC,EAAW,KACX,MAGJ,IAAK1F,KAAKC,YAAa,CACrBsF,EAASI,SAAW3F,KAAK2C,eAG3B3C,KAAK4F,eAAc3C,OAAAS,OAAAT,OAAAS,OAAA,GAAQ1D,KAAK4F,gBAAmBL,GACnDvF,KAAK2C,eAAeoB,aAAa,oBAAqB0B,GACtDzF,KAAK2C,eAAekD,SAAWH,GAIjC7F,EAAAsD,UAAA2C,kBAAA,SAAkBC,EAA6BC,GAA/C,IAAAjG,EAAAC,WACE,KAAMgG,EAAU,CACd,IAAM9B,EAAY8B,EAASvG,QAAQ,cACnC,GAAIyE,EAAW,CACbA,EAAU+B,oBAAoB,aAAcjG,KAAKwB,aAEnDwE,EAASC,oBAAoB,SAAUjG,KAAKwB,aAC5CwE,EAASC,oBAAoB,QAASjG,KAAK8B,YAC3CkE,EAASC,oBAAoB,UAAWjG,KAAKgC,cAC7CgE,EAASC,oBAAoB,QAASjG,KAAKwB,aAE3CxB,KAAKkG,WAAa,KAElBrC,GAAU,WACRmC,EAASG,gBAAgB,QACzBH,EAASG,gBAAgB,iBACzBH,EAASG,gBAAgB,iBACzBH,EAASG,gBAAgB,aACzBH,EAASG,gBAAgB,iBACzBH,EAASG,gBAAgB,qBACzBH,EAASG,gBAAgB,mBAG7B,KAAMJ,EAAU,CACd,IAAM7B,EAAY6B,EAAStG,QAAQ,cACnC,GAAIyE,EAAW,CACbA,EAAUkC,iBAAiB,aAAcpG,KAAKwB,aAEhDuE,EAASK,iBAAiB,SAAUpG,KAAKwB,aACzCuE,EAASK,iBAAiB,QAASpG,KAAK8B,YACxCiE,EAASK,iBAAiB,UAAWpG,KAAKgC,cAC1C+D,EAASK,iBAAiB,QAASpG,KAAKwB,aACxCxB,KAAKI,OAASJ,KAAKmE,KAAK7E,IAAMU,KAAKI,OAEnCJ,KAAKkG,aAAa7C,EAAA0C,IAAQ,MAARA,SAAQ,OAAA,EAARA,EAAUM,UAAM,MAAAhD,SAAA,OAAA,EAAAA,EAAEiD,KAAK,KAAMnH,EAAU4G,GAEzDlC,GAAU,WACR9D,EAAKoE,KAAK7E,GAAKS,EAAKK,OACpB2F,EAAShC,aAAa,OAAQ,YAC9BgC,EAAShC,aAAa,gBAAiB,SACvCgC,EAAShC,aAAa,gBAAiBhE,EAAKK,QAC5C2F,EAAShC,aAAa,YAAahE,EAAKK,QACxC2F,EAAShC,aAAa,gBAAiB,WACvCgC,EAAShC,aAAa,eAAgB,YAO5ClE,EAAAsD,UAAAoD,mBAAA,WAAA,IAAAxG,EAAAC,WACE,IAAIwG,EAAI,EACR,IAAMC,IAAMpD,EAAArD,KAAK2C,kBAAc,MAAAU,SAAA,OAAA,EAAAA,EAAEC,QAAS,GAC1C,IAAMoD,EAAS,GAEf7C,GAAU,WACR9D,EAAK4D,WAAWJ,SAAQ,SAACC,EAAKmD,GAC5B,GAAI5G,EAAKQ,YAAY2B,SAASsB,GAAM,CAClCgD,IACAhD,EAAIO,aAAa,gBAAiByC,EAAI,IACtChD,EAAIO,aAAa,eAAgBhE,EAAKQ,YAAYoE,OAAS,IAC3DnB,EAAIoD,OAAS,MACb7G,EAAK8G,WAAWrD,EAAKiD,OAChB,CACLjD,EAAI2C,gBAAgB,iBACpB3C,EAAI2C,gBAAgB,gBACpB3C,EAAIoD,OAAS,KACbpD,EAAI9C,SAAW,MAEjB8C,EAAIlE,GAAKS,EAAKK,OAAS,WAAauG,EACpCD,EAAOI,KAAKtD,EAAIlE,OAElBS,EAAKU,UAAYiG,MAMrB7G,EAAAsD,UAAA4D,cAAA,WACE,GAAI/G,KAAKO,YAAYoE,QAAU3E,KAAKgH,YAAahH,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,UAAA8D,oBAAA,WACEjH,KAAKkH,mBAAmBC,KAAKnH,KAAKO,cAgB5BV,EAAAsD,UAAA0D,WAAA,SAAWrD,EAA4BiD,GAC7C,GAAIA,IAAQjD,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,WAAWyD,MACrB,SAAC5D,GAAQ,OAAAzD,EAAK4C,eAAeW,QAAUE,EAAIF,+CAKvCzD,EAAAsD,UAAA9B,iBAAA,SAAiBmC,SACvB,IAAI6D,EAEJ,GAAIrH,KAAKU,SAASwB,SAASsB,EAAIF,OAAQ,CAErCtD,KAAKU,SAAWV,KAAKU,SAAS4G,QAAO,SAACb,GAAQ,OAAAA,IAAQjD,EAAIF,SAC1D+D,EAAerH,KAAKuH,aAAaJ,KAAK3D,OACjC,CAELxD,KAAKU,SAAQ0E,cAAA,GAAOpF,KAAKU,UACzB2G,EAAerH,KAAKwH,WAAWL,KAAK3D,GAGtC,IAAK6D,EAAaI,iBAAkB,CAClC,GAAIzH,KAAK2C,eAAgB3C,KAAK2C,eAAeW,MAAQE,EAAIF,MAEzD,IAAMoE,EAAQ,IAAInF,OAAOoF,MAAM,WAC/BtE,EAAArD,KAAK2C,kBAAc,MAAAU,SAAA,OAAA,EAAAA,EAAEuE,cAAcF,KAe/B7H,EAAAsD,UAAAV,iBAAA,WAAA,IAAA1C,EAAAC,KACN,IAAM6H,EAAW,SAACC,GAChB,OAAAA,EAAOC,cAAcC,UAAU,EAAGjI,EAAKG,aAAayE,UACpD5E,EAAKG,cAEP,IAAM+H,EAAWjI,KAAK2D,WAAWyD,MAC/B,SAAC5D,GACC,OAAAA,EAAIF,MAAM4E,OAAOvD,OAAS,IACzBnB,EAAIvC,WACJ4G,EAASrE,EAAI2E,cACZN,EAASrE,EAAIF,QACbuE,EAASrE,EAAI4E,QACbP,EAASrE,EAAI6E,gBAEnB,GAAIJ,EAAUjI,KAAKqB,iBAAiB4G,IAK9BpI,EAAAsD,UAAA2B,sBAAA,WAAA,IAAA/E,EAAAC,KACNuB,GAAI,iBACFxB,EAAK4D,WAAa2E,MAAMC,KAAKxI,EAAKoE,KAAKqE,iBAAiB,gBACxDzI,EAAKiH,cAAgBjH,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,eAU3B9D,EAAAsD,UAAA3B,YAAA,WAAA,IAAAzB,EAAAC,KACN,GAAIA,KAAKgB,cAAe,CACtBhB,KAAKO,YAAcP,KAAK2D,WACxB,OAGF,IAAM8C,EAAMzG,KAAK2C,eAAeW,MAChC,IAAMmF,EAAShC,EAAIyB,OAAOH,cAE1B,IAAIjF,EAAa,MACjB,IAAM4F,EAAa,GACnB,IAAMb,EAAW,SAACC,GAChB,OAAAA,EAAOC,cAAcY,QAAQF,IAAW,GAE1CzI,KAAK2D,WAAWJ,SAAQ,SAACC,GACvB,IACGiD,IAAQjD,EAAIF,OAASmD,IAAQjD,EAAI4E,QAClCrI,EAAKe,OAAS,aACd,CACA0C,EAAI9C,SAAW,KACfoC,EAAa,UACR/C,EAAK8G,WAAWrD,EAAKiD,MAG9BzG,KAAK2D,WAAWJ,SAAQ,SAACC,GACvB,IAAKiF,EAAO9D,QAAU7B,EAAY,CAChC4F,EAAW5B,KAAKtD,QACX,GACLA,EAAIF,MAAM4E,OAAOvD,OAAS,IACzBnB,EAAIvC,WACJ4G,EAASrE,EAAI2E,cACZN,EAASrE,EAAIF,QACbuE,EAASrE,EAAI4E,QACbP,EAASrE,EAAI6E,aACf,CACAK,EAAW5B,KAAKtD,OAIpBxD,KAAKK,WAAaoI,EAAO9D,SAAW7B,EACpC9C,KAAKO,YAAcmI,GA6ErB7I,EAAAsD,UAAAyF,kBAAA,WACE5I,KAAKiE,oBAGPpE,EAAAsD,UAAA0F,iBAAA,WACE7I,KAAK0E,2BACL1E,KAAK4D,eAGP/D,EAAAsD,UAAA2F,mBAAA,WAAA,IAAA/I,EAAAC,WACEwC,YAAW,WACT,IAAKzC,EAAK4C,eACRoG,QAAQC,KACN,4GACAjJ,EAAKoE,QAER,KAIH,IAAId,EAAArD,KAAKa,WAAO,MAAAwC,SAAA,OAAA,EAAAA,EAAEsB,OAAQ3E,KAAK2D,WAAa3D,KAAKG,YAGnDN,EAAAsD,UAAA8F,OAAA,WAAA,IAAAlJ,EAAAC,KACEA,KAAKG,WAAa,GAClB,OACE+I,EAACC,EAAI,CACHC,KAAK,UAASC,YACHrJ,KAAKS,UAAU6I,KAAK,KAAIC,aACxB,sCAEXL,EAAA,gBAAAjG,OAAAS,OAAA,GACM1D,KAAK4F,eAAc,CACvB4D,IAAK,SAACC,GAAE,OAAM1J,EAAK+D,aAAe2F,GAClCC,YAAY,qCACZC,MAAO,CACLC,gBAAiB,KACjBC,oBAAqB7J,KAAKK,YAE5ByJ,gBAAiB9J,KAAK0B,WACtBqI,gBAAiB,SAACC,GAAC,OAAMjK,EAAKgB,KAAO,SAErCmI,EAAA,YAAA,CACEtC,QAAS5G,KAAKO,YAAYoE,OAC1B7D,KAAK,UACLsH,MAAOpI,KAAKkG,WAAalG,KAAKkG,WAAWiC,YAAchD,UACvDwE,MAAO,CACLM,YAAa,KACbC,oBAAqBlK,KAAKmK,eAE5BC,UAAW,EACXC,aAAcrK,KAAKkB,YACnBoJ,UAAWtK,KAAK0C,cAChB8G,IAAK,SAACC,GAAE,OAAM1J,EAAK6B,QAAU6H,IAE7BP,EAAA,OAAA,CAAMqB,KAAK,cACTvK,KAAKa,QAAQ8D,QAAUuE,EAAA,OAAA,QACtBlJ,KAAKa,QAAQ8D,QACduE,EAAA,OAAA,KACGlJ,KAAKa,QAAQ2J,KAAI,SAACC,EAAQ9D,GACzB,GAAI8D,EAAOnH,OAASmH,EAAOrC,MAAO,CAChC,OACEc,EAAA,cAAA,CACEM,IAAK,SAACC,GAAO,OAAA1J,EAAKI,WAAW2G,KAAK2C,IAClCtH,IAAKsI,EAAOrC,MAAQzB,EACpByB,MAAOqC,EAAOrC,MACd9E,MAAOmH,EAAOnH,MAAKoH,gBACJ/D,EAACgE,eACF5K,EAAKc,QAAQ8D,OAC3BjE,SAAU+J,EAAO/J,SACjBpB,GAAIS,EAAKK,OAAS,WAAauG,GAE9B8D,EAAOrC,MAAQqC,EAAOrC,MAAQqC,EAAOnH,YAOlD4F,EAAA,OAAA,CAAMqB,KAAK,iBAEbrB,EAAA,YAAA,CACEpI,KAAK,UACLsH,MAAM,mBACNxB,SAAU5G,KAAKO,YAAYoE,OAC3BgF,MAAO,CACLM,YAAa,KACbC,oBAAqBlK,KAAKmK,gBAG5BjB,EAAA,OAAA,CAAMqB,KAAK,iBAEVvK,KAAKO,aACN2I,EAAA,MAAA,CAAA0B,YAAe,SAASxB,KAAK,SAASO,MAAM,iBACzC3J,KAAKO,YAAYoE,OAAM,UACvB3E,KAAKO,YAAYoE,OAAS,EAAI,IAAM,GAAE,6lBAjlBhC,cCjDrB,IAAMkG,EAAU,y0CCiBhB,IAAMC,IAAcvL,SAASwL,KAAKC,iBAerBC,EAAIrL,EAAA,YAAA,WALjB,SAAAsL,EAAApL,GAAA,IAAAC,EAAAC,8HAMUA,KAAAmL,kBAAoB,MAGpBnL,KAAAE,aAAe,GAYfF,KAAAoL,UAAY,MAGZpL,KAAAc,KAA2B,OA4H3Bd,KAAAqL,YAAc,WACpBtL,EAAKuL,mBAAmBvL,EAAKwL,cAAgBxL,EAAKyL,SAAS,IAE3DzL,EAAKqL,UAAY,KACjBrL,EAAK0L,UAAUtE,QAGTnH,KAAA0L,YAAc,SAAChE,GACrB,IAAMiE,EAASjE,EAAMiE,OACrB,IAAMrF,EAAOqF,EAAOlM,QAAQ,iBAE5B,GAAI6G,IAASA,EAAKrF,SAAU,CAC1BlB,EAAKyH,WAAWL,KAAKb,KAIjBtG,KAAA4L,cAAgB,SAAClE,GAIvBpF,aAAavC,EAAK8L,oBAClB9L,EAAK8L,mBAAqBrJ,YACxB,WAAA,OAAOzC,EAAKoL,kBAAoB,QAChC,KAEFpL,EAAKoL,kBAAoB,KAGzB,OAAQzD,EAAMvF,KACZ,IAAK,IACH,GAAIpC,EAAK+L,WAAY/L,EAAK+L,WAAWC,QACrC,MACF,IAAK,YACL,IAAK,UACL,IAAK,WACL,IAAK,SACL,IAAK,OACL,IAAK,MACH,IAAMC,EAAQjM,EAAKyL,SACnB,IAAMD,EAAexL,EAAK+L,WAC1B,IAAIG,EAAQD,EAAMrD,QAAQ4C,GAE1B,GAAIS,EAAMrH,OAAQ,CAChB+C,EAAMwE,iBAEN,GAAIxE,EAAMvF,MAAQ,YAAa,CAC7B8J,SACK,GAAIvE,EAAMvF,MAAQ,UAAW,CAClC8J,SACK,GAAIvE,EAAMvF,MAAQ,QAAUuF,EAAMvF,MAAQ,SAAU,CACzD8J,EAAQ,OACH,GAAIvE,EAAMvF,MAAQ,OAASuF,EAAMvF,MAAQ,WAAY,CAC1D8J,EAAQD,EAAMrH,OAAS,EAGzB,GAAIsH,EAAQ,EAAGA,EAAQD,EAAMrH,OAAS,EACtC,GAAIsH,EAAQD,EAAMrH,OAAS,EAAGsH,EAAQ,EAEtClM,EAAKuL,mBAAmBU,EAAMC,IAC9B,GAAID,EAAMC,GAAQD,EAAMC,GAAOE,eAAe,CAAEC,MAAO,YACvD,OAEF,MAIJ,GAAI1E,EAAMvF,MAAQ,KAAO,eAAeE,KAAKqF,EAAMvF,KAAM,CACvDG,aAAavC,EAAKqC,qBAClBrC,EAAKqC,oBAAsBI,YACzB,WAAA,OAAOzC,EAAKG,aAAe,KAC3B,KAEFH,EAAKG,cAAgBwH,EAAMvF,IAE3B,IAAM6J,EAAQjM,EAAKyL,SACnB,IAAmB,IAAAa,EAAA,EAAAC,EAAAN,EAAAK,EAAAC,EAAA3H,OAAA0H,IAAO,CAArB,IAAM/F,EAAIgG,EAAAD,GACb,IAAME,EAAOjG,EAAKkG,WAAWhN,cAC3B,oBAEF,IAAM4I,EAAQqE,EAAeF,GAAMxE,cAAcG,OACjD,GACEE,EAAMJ,UAAU,EAAGjI,EAAKG,aAAayE,UAAY5E,EAAKG,aACtD,CACAH,EAAKuL,mBAAmBhF,GACxB,UAMAtG,KAAA0M,gBAAkB,SAAChF,GACzB,IAAMiE,EAASjE,EAAMiE,OACrB,IAAMrF,EACJqF,EAAOlM,QAAQ,kBAAoBkM,EAAOlM,QAAQ,eAEpD,GAAI6G,IAASvG,EAAKoL,kBAAmB,CACnCpL,EAAKuL,mBAAmBhF,KAnO5BrD,OAAAC,eACIgI,EAAA/H,UAAA,WAAQ,KADZ,WAEE,OAAOnD,KAAKoL,gDA2BRF,EAAA/H,UAAAtB,SAAN,sGACE,IAAIwB,EAAArD,KAAK2M,QAAI,MAAAtJ,SAAA,OAAA,EAAAA,EAAET,MAAO5C,KAAK2M,KAAK/J,MAAM,CAAEgK,cAAe,wBAKnD1B,EAAA/H,UAAA0J,YAAN,sGACE,IAAIxJ,EAAArD,KAAK2M,QAAI,MAAAtJ,SAAA,OAAA,EAAAA,EAAEyJ,KAAM9M,KAAK2M,KAAKG,wBAK3B5B,EAAA/H,UAAA4J,kBAAN,gGACE,GAAI/M,KAAKuL,aACPvL,KAAKuL,aAAaY,eAAe,CAAEC,MAAO,6BAKxClB,EAAA/H,UAAA6J,gBAAN,gGACEhN,KAAKwL,SACFlE,QAAO,SAACX,GAAM,OAAAA,EAAEsG,QAAQlF,gBAAkB,iBAC1CyC,KAAI,SAAC7D,GAAM,OAAAA,EAAE5C,aAAa,WAAY,0BAK3Cd,OAAAC,eAAIgI,EAAA/H,UAAA,WAAQ,KAAZ,WACE,IAAI6I,EACJ,IAAIkB,EAASlN,KAAKyJ,GAAGjB,iBAAiB,gCACtC,GAAI0E,EAAOvI,OAAQ,CACjB,IAAMwI,EAAMD,EAAOA,EAAOvI,OAAS,GACnCqH,EAAQ1D,MAAMC,KAAK4E,EAAI3E,iBAAiB,mCACnC,CACLwD,EAAQoB,EACNpN,KAAKyJ,GACL,6BACA,QAGJ,OAAOuC,EAAM1E,QAAO,SAACmC,GAAO,OAACA,EAAGxI,WAAawI,EAAG7C,gDAGlD3D,OAAAC,eAAIgI,EAAA/H,UAAA,aAAU,KAAd,WACE,IAAMkK,EAAgBC,IACtB,OAAOtN,KAAKwL,SAASpE,MACnB,SAACT,GACC,OAAAA,EAAE4G,aAAa,cAAgB,KAC/B5G,IAAM0G,GACN1G,EAAE6G,UAAUC,SAAS,sDAI3BxK,OAAAC,eAAIgI,EAAA/H,UAAA,eAAY,KAAhB,WACE,IAAMkK,EAAgBC,IACtB,OAAOtN,KAAKwL,SAASpE,MAAK,SAACT,GAAM,OAAAA,EAAEjG,UAAYiG,IAAM0G,2CAGzCnC,EAAA/H,UAAAmI,mBAAN,SAAyBhF,EAAqB1D,GAAA,GAAAA,SAAA,EAAA,CAAAA,EAAA,kGAC9CoJ,EAAQhM,KAAKwL,SACfM,GACDxF,GAAQA,EAAKrF,SAAW+K,EAAM5E,MAAK,SAACT,GAAM,OAAAA,EAAEjG,aAAasL,EAAM,GAAK1F,EAEvE0F,EACG1E,QAAO,SAACX,GAAM,OAAAA,EAAEsG,QAAQlF,gBAAkB,iBAC1CyC,KAAI,SAAC7D,GACJ,OAAAA,EAAE5C,aAAa,WAAY4C,IAAMmF,EAAa,IAAM,SAGxD,IAAKlJ,EAAO,MAAA,CAAA,GAEZ,GAAIkJ,EAAY,CACbA,EAAmBjK,SACfiK,EAAmBjK,WACpBiK,EAAWlJ,aACV5C,KAAK2M,KAAK/J,yBAOnBsI,EAAA/H,UAAAuK,WAAA,SAAWvM,GAAX,IAAApB,EAAAC,KACE,IAAKA,KAAK2N,SAAU,OAEpB,IAAMC,EAAMzM,EACZ,IAAI0M,EAEJ,GAAID,EAAIzL,IAAK,CACX,GAAIyL,EAAIzL,MAAQ,MAAO,OACvB0L,EACEP,KACAA,IAAmB7N,QAAQO,KAAKyJ,GAAGwD,QAAQlF,iBAAmB/H,KAAKyJ,QAChEoE,IAAU1M,EAAE2M,eAAe1G,MAAK,SAACqC,GAAO,OAAAA,IAAO1J,EAAK0J,MAE3D,IAAKoE,EAAO,CACV7N,KAAKgN,kBACLhN,KAAKoL,UAAY,MACjBpL,KAAK+N,SAAS5G,SA0GlB+D,EAAA/H,UAAA8F,OAAA,iBAAA,IAAAlJ,EAAAC,KACE,OACEkJ,EAACC,EAAI,CACHQ,MAAO,CACLqE,QAASlD,IAGX5B,EAAA,MAAA,CACE+E,QAASjO,KAAK0L,YACdpB,UAAWtK,KAAK4L,cAChBsC,YAAalO,KAAK0M,gBAClByB,QAASnO,KAAKqL,YAAW9B,aACbvJ,KAAKoI,MAAQpI,KAAKoI,MAAQjD,UACtCiE,KAAMpJ,KAAKc,KACX0I,IAAK,SAACC,GAAE,OAAM1J,EAAK4M,KAAOlD,GAC1B2E,KAAK,OACLzE,OAAKvF,EAAA,CACHuI,KAAM,MACNvI,EAAC,SAAWpE,KAAKc,MAAO,KACxBsD,EAAA,mBAAmBpE,KAAK2N,YAE1BvD,UAAW,GAEXlB,EAAA,OAAA,8HA5QO,cChCjB,IAAMmF,EAAY,8xGCelB,IAAI3H,EAAS,MAeA4H,EAAM1O,EAAA,cAAA,WAKjB,SAAA2O,EAAAzO,oDAJQE,KAAAwO,MAAQ,eAAe9H,IAEtB1G,KAAA2N,SAAW,MAWoB3N,KAAAsD,MAAgB,GAUhBtD,KAAAoI,MAAgB,GAW/BpI,KAAAU,SAAoB,MAKpBV,KAAAiB,SAAoB,MAKrCjB,KAAAqI,WAAqB,GAvC3BrI,KAAK0L,YAAc3I,EAAS/C,KAAK0L,YAAY1I,KAAKhD,MAAO,GAW3DuO,EAAApL,UAAAsL,aAAA,WACE,IAAKzO,KAAKsD,QAAUtD,KAAKsD,MAAMqB,OAAQ3E,KAAKsD,MAAQtD,KAAK0O,cAS3DH,EAAApL,UAAAwL,aAAA,WACE,IAAK3O,KAAKoI,QAAUpI,KAAKoI,MAAMzD,OAC7B3E,KAAKoI,MAAQpI,KAAK0O,aAAa/J,OAAS3E,KAAK0O,aAAe1O,KAAKsD,OAyBrEiL,EAAApL,UAAAyI,cAAA,SAAczK,GACZ,GAAIA,EAAEgB,MAAQ,KAAOhB,EAAEgB,MAAQ,QAAS,OACxChB,EAAE+K,iBACFlM,KAAKwH,WAAWL,KAAKnH,KAAKmE,OAGpBoK,EAAApL,UAAAuI,YAAA,WACN,GAAI1L,KAAKiB,SAAU,OACnBjB,KAAKwH,WAAWL,KAAKnH,KAAKmE,OAK5BlB,OAAAC,eAAYqL,EAAApL,UAAA,eAAY,KAAxB,WACE,OAAOiK,EAAkBpN,KAAKmE,KAAM,gBAAiB,OAClDqG,KAAI,SAACf,GAAO,OAAAA,EAAGtB,eACfmB,KAAK,KACLpB,6CAKLqG,EAAApL,UAAAyL,kBAAA,WACE5O,KAAKyO,eACLzO,KAAK2O,gBAGPJ,EAAApL,UAAA8F,OAAA,WACE,OACEC,EAACC,EAAI,CACHC,KAAK,SAAQyF,gBACE7O,KAAKU,SAAW,OAAS,QAAOoO,gBAChC9O,KAAKiB,SAAW,OAAS,SAExCiI,EAAA,MAAA,CACE6F,YAAa/O,KAAK0L,YAClBpM,GAAIU,KAAKwO,MACT7E,MAAO,CACLc,OAAQ,KACRuE,mBAAoBhP,KAAKU,SACzBuO,mBAAoBjP,KAAKiB,SACzBiO,mBAAoBlP,KAAKsD,QAG3B4F,EAAA,MAAA,CAAKkF,KAAK,aAAazE,MAAM,iBAC3BT,EAAA,OAAA,CAAMqB,KAAK,cACTrB,EAAA,YAAA,CAAWqB,KAAK,cAAa4E,cAAa,WAG9CjG,EAAA,MAAA,CAAKkF,KAAK,QAAQzE,MAAM,iBACtBT,EAAA,OAAA,CAAMqB,KAAK,WAEbrB,EAAA,MAAA,CAAKkF,KAAK,QAAQzE,MAAM,iBACtBT,EAAA,OAAA,KAAOlJ,KAAKoI,OAASpI,KAAKsD,QAE5B4F,EAAA,MAAA,CAAKkF,KAAK,MAAMzE,MAAM,eACpBT,EAAA,OAAA,CAAMqB,KAAK,kRA9GJ","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  forceUpdate,\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  // options set via `options` prop\n  private optionEles: HTMLNanoOptionElement[] = [];\n  private nanoDropdown: HTMLNanoDropdownElement;\n  private listBox: HTMLNanoMenuElement;\n  private mo?: MutationObserver;\n  private listId = `nano-datalist-${listIds++}`;\n  private isFiltered = 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      setTimeout(() => {\n        if (this.connectedInput?.value.length && this.type !== 'select') {\n          this.inputChange();\n        } else this.actvOptEles = [...this.allOptEles];\n      }, 50);\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.listBox.setFocus();\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    this.shouldOpen = true;\n    // open dropdown if possible\n    this.manageDropdownDisplay();\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      ' ',\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    // if user is using 'options' prop (as oppsed to slot)\n    // add those options now - a single source of truth for options and <slot>\n    if (this.options?.length) this.allOptEles = this.optionEles;\n  }\n\n  render() {\n    this.optionEles = [];\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 && (\n              <slot>\n                {this.options.map((option, i) => {\n                  if (option.value || option.label) {\n                    return (\n                      <nano-option\n                        ref={(el) => this.optionEles.push(el)}\n                        key={option.label + i}\n                        label={option.label}\n                        value={option.value}\n                        aria-posinset={i}\n                        aria-setsize={this.options.length}\n                        selected={option.selected}\n                        id={this.listId + '-option-' + i}\n                      >\n                        {option.label ? option.label : option.value}\n                      </nano-option>\n                    );\n                  }\n                })}\n              </slot>\n            )}\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"]}