@nanoporetech-digital/components 1.15.6 → 2.1.0

package/dist/esm-es5/nano-nav-item_2.entry.js.map

@@ -1 +1 @@
-{"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","class_1","hostRef","_this","this","hasSecondarySlot","hasAnchorEle","didBlur","animating","didOpen","isInGlobalNav","isInMenuDrawer","isInMenu","isLegacy","document","head","attachShadow","hasFocus","href","target","disabled","open","selected","secondaryActiveWidth","secondaryFallback","closeOnBlur","closeSecondary","__awaiter","nanoClosing","emit","secondaryMenu","secondaryDiv","displayTransition","status","_b","sent","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","__generator","handleMouseLeave","handleClick","_a","querySelector","blur","relatedTarget","foundThisNavEle","focus","preventScroll","removeEventListener","prototype","setFocus","openChange","didOpenChange","nanoClose","panelio_1","IntersectionObserver","data","boundingClientRect","top","scrollIntoView","behavior","disconnect","threshold","observe","addEventListener","tabIndex","nanoOpen","found","parentElement","componentWillLoad","secondaryEle","link","getDirectChildren","connectedCallback","render","h","Host","class","has-secondary","secondary-open","has-focus","nano-global-nav","nano-menu-drawer","nano-menu","legacy","onBlur","dir","ownerDocument","onMouseEnter","onMouseLeave","onClick","nav-item","ref","a","onFocus","name","div","tabindex","selectCss","Select","class_2","listItems","valueItems","selectId","selectIds","rtl","currLiIndex","inputSearchVal","watchValue","onInit","currInsertIndex","availOpts","showErrorMsg","errorMessage","listOpen","hasLabelSlot","hasHelperSlot","hasIconSlot","invalid","autofocus","validateOn","showInlineError","hideLabel","floatLabel","multiple","readonly","required","allowCustomValues","value","options","clearSelect","mask","debounce","native","customValidate","nativeSelect","setCustomValidity","getNativeValue","isValidValues","max","min","showInlineValidation","validity","valid","validationMessage","nanoValidate","isValid","originalEvent","handleInvalid","preventDefault","_","onChange","stopPropagation","handleDocumentKeyDown","handleDocumentMouseDown","openList","clearSelectValue","querySelectorAll","forEach","n","remove","setAvailOpts","onMultiInputBlur","onDragStart","ele","dragVal","dataset","onDragEnd","onDragLeave","spanVal","includes","to","indexOf","from","tmpArr","tmpVal","__spreadArray","onMultiInput","nanoSearchChange","onOptFocus","activeEle","getActiveOpt","add","onHostClick","closestElement","tagName","toLowerCase","rm","key","multiInput","previousElementSibling","removeValue","nextElementSibling","previousSibling","nextSibling","activeElement","selectedItem","testIndex","foundIndex_1","addValue","debounceChanged","debounceEvent","shouldValidate","valueChanged","split","setNativeValue","nanoChange","optionsChanged","multiChange","switchValue","setupMulti","popover","destroy","Popover","selectWrap","multiList","placement","skidding","distance","onTransitionEnd","scrollTop","listOpenChange","show","hide","reportValidity","validateFirst","getSelectElement","Promise","resolve","showError","message","filter","opt","toFind","strFilter","nsl","selectedIndex","hasAttribute","Array","map","find","val","values","reduce","accumulator","currentValue","slice","Math","isSelected","getLabel","foundVal","slotChangeObserver","mo","MutationObserver","mrs","processSlottedContent","childList","subtree","mutations","existingselect","attributes","attr","specified","nodeName","nodeValue","existingLabel","label","innerHTML","legacyOpts","options_1","option","push","innerText","children","parentNode","removeChild","addedNodes","node","nanoOpts","options_2","dispatchEvent","CustomEvent","detail","disconnectedCallback","componentDidLoad","renderLabel","labelId","position","classes","placeholder-as-label","visually-hide","htmlFor","id","moreId","listId","placeholder","unshift","optionMenu","valueMarkup","input_1","input","autoFocus","autocomplete","onInput","onTouchStart","onMouseDown","role","aria-labelledby","aria-controls","aria-expanded","aria-required","aria-autocomplete","i","toReturn","draggable","data-value","span","type","onTouchEnd","onMouseUp","aria-disabled","Object","assign","createColorClasses","color","has-value","is-invalid","has-label","has-float-label","has-multiple","multi-list-open","has-clr-btn","masked","native-select-wrap","native-select-wrap--multiple","ul","aria-multiselectable","aria-hidden","hidden","multi-select-box","multi-select-box--open","li","optval","aria-selected","select","form","onInvalid","size"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n:host {\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      >\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 '../input/input.vars';\n\n:host {\n  @include inputVars;\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\nlabel,\n.more,\n.error,\n.helper {\n  display: block;\n  width: 100%;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n\n  &.visually-hide {\n    @include visually-hide;\n  }\n}\n\n.placeholder-as-label {\n  @include padding(0, 0, 0, var(--padding-start));\n\n  color: var(--input-text-color);\n  position: absolute;\n  font-size: 1.4em;\n  transform: translateY(-50%);\n  transform-origin: top left;\n  top: 50%;\n  transition: 0.125s ease-in;\n  opacity: 0.7;\n  pointer-events: none;\n\n  :host(.is-invalid) & {\n    color: var(--invalid-msg-color);\n  }\n\n  :host(.has-value) & {\n    transform: translateY(-110%);\n    font-size: 0.9em;\n  }\n\n  :host(.has-focus.has-multiple) &,\n  :host(.has-value.has-multiple) & {\n    transform: translateY(-75%);\n    font-size: 0.9em;\n  }\n\n  :host(.has-multiple) & {\n    top: 1.5em;\n  }\n\n  & ~ .native-select-wrap {\n    font-size: 1.1em;\n  }\n}\n\n.label {\n  @include padding(0, 0, var(--padding-bottom));\n\n  color: var(--label-color);\n  font-size: var(--label-font-size);\n  line-height: 1;\n\n  .placeholder {\n    opacity: 0;\n    appearance: none;\n    transition: 0.3s ease opacity;\n    font-size: 0.9em;\n  }\n\n  :host(.has-value) & {\n    .placeholder {\n      opacity: 0.5;\n    }\n  }\n\n  :host(.has-focus) & {\n    color: var(--label-color--focus);\n  }\n\n  :host(.is-invalid) & {\n    color: var(--label-color--invalid);\n  }\n}\n\n.more {\n  @include margin(4px, 0, var(--padding-bottom), 3px);\n\n  height: 1em;\n  position: relative;\n}\n\n.helper,\n.error {\n  top: 0;\n  left: 0;\n  position: absolute;\n  font-size: var(--invalid-msg-font-size);\n  line-height: 1.2;\n  transition: 0.3s ease-out opacity;\n}\n\n.helper {\n  color: var(--help-msg-color);\n  font-style: italic;\n\n  :host([show-inline-error]:not([show-inline-error='false']).is-invalid) & {\n    opacity: 0;\n  }\n}\n\n.error {\n  opacity: 0;\n  color: var(--invalid-msg-color);\n  font-stretch: condensed;\n\n  :host(.is-invalid) & {\n    opacity: 1;\n  }\n}\n\n.select {\n  @include text-inherit();\n  @include border-radius(var(--input-border-radius));\n\n  width: 100%;\n  padding: 0 !important;\n  position: relative;\n  background: var(--input-bg-color);\n  border: var(--input-border-style);\n  border-width: var(--input-border-width);\n  font-size: var(--input-font-size);\n\n  :host(.has-focus) & {\n    z-index: 10;\n    background: var(--input-bg-color--focus);\n    border: var(--input-border-style--focus);\n    border-width: var(--input-border-width);\n  }\n\n  :host(.is-invalid) & {\n    background: var(--input-bg-color--invalid);\n    border: var(--input-border-style--invalid);\n    border-width: var(--input-border-width);\n  }\n\n  :host(.is-invalid.has-focus) & {\n    background: var(--input-bg-color--invalid);\n    border: var(--input-border-style--invalid-focus);\n    border-width: var(--input-border-width);\n  }\n}\n\n// Native Select\n// --------------------------------------------------\n\n.native-select-wrap {\n  display: flex;\n  align-items: center;\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.native-select {\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  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  box-sizing: border-box;\n  transition: 0.3s ease opacity;\n  appearance: none;\n  // line-height: 1.3;\n  margin: 0;\n  line-height: 2.5em;\n  min-height: 2.5em;\n\n  :host(.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  :host(.has-float-label) & {\n    opacity: 0;\n    padding-top: 1.8em;\n  }\n\n  :host(.has-value.has-float-label) & {\n    opacity: 1;\n  }\n\n  &:-webkit-autofill {\n    background-color: transparent;\n  }\n\n  &:invalid {\n    box-shadow: none;\n  }\n\n  &::-ms-clear {\n    display: none;\n  }\n\n  &::-ms-expand {\n    display: none;\n  }\n\n  &[disabled] {\n    opacity: 0.4;\n  }\n\n  :host(.has-multiple) & {\n    display: none;\n  }\n\n  option {\n    color: black;\n  }\n}\n\n// multi stuff\n\n.multi {\n  &-wrap {\n    @include padding(\n      0,\n      calc(1.9em + var(--padding-end)),\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-clr-btn) & {\n      @include padding(\n        0,\n        calc(2.6em + (var(--padding-end) * 2) + (var(--padding-end) * 2)),\n        calc(var(--padding-bottom) / 2),\n        0\n      );\n    }\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    // line-height: calc(2.8em - var(--padding-top));\n    min-height: calc(2.8em - 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  &-select-box {\n    position: absolute;\n    background: #{$layer-bg-color};\n    min-width: calc(100% + (var(--input-border-width) * 2));\n    z-index: #{$layer-index-dropdown};\n    margin: 0;\n    font-size: 1.15em;\n    line-height: 1.4;\n    max-height: 50vh;\n    overflow-y: auto;\n    overscroll-behavior: none;\n    transition: opacity 0.2s ease;\n    opacity: 0;\n    box-sizing: border-box;\n    border-radius: #{$layer-border-radius};\n    box-shadow: #{$layer-shadow-large};\n    padding: var(--padding-top) 0 var(--padding-bottom);\n    border: #{$layer-border-style};\n\n    &--open {\n      opacity: 1;\n    }\n\n    li {\n      @include padding(\n        var(--padding-top),\n        var(--padding-end),\n        var(--padding-bottom),\n        var(--padding-start)\n      );\n\n      font-size: var(--input-font-size);\n      cursor: pointer;\n      list-style: none;\n      color: var(--input-text-color);\n\n      :host(.nano-color) & {\n        color: black;\n      }\n\n      &:hover,\n      &:focus {\n        color: var(--color--focus-contrast);\n        outline: none;\n        background: rgba(var(--multi-input-value-bg), 0.2);\n\n        :host(.nano-color) & {\n          background: current-color(base, 0.2);\n        }\n      }\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: 2px 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// Clear Input Icon\n// --------------------------------------------------\n\n.select-down-icon {\n  @include margin(0);\n  @include background-position(center);\n  @include padding(\n    var(--padding-top),\n    var(--padding-end),\n    var(--padding-bottom),\n    var(--padding-start)\n  );\n\n  color: var(--input-text-color);\n  font-size: 1.4em;\n  right: 0;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n\n  :host(.is-invalid) & {\n    color: var(--clear-btn-color--invalid);\n  }\n\n  :host(.rtl) & {\n    right: unset;\n    left: 0;\n  }\n\n  :host(.has-multiple) & {\n    pointer-events: all;\n  }\n\n  :host(.masked) & {\n    position: relative;\n  }\n}\n\n.select-clear-icon {\n  @include margin(0);\n  @include background-position(center);\n  @include padding(\n    var(--padding-top),\n    var(--padding-end),\n    var(--padding-bottom),\n    var(--padding-start)\n  );\n\n  font-size: 1.4em;\n  color: var(--clear-btn-color);\n  border: 0;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  visibility: hidden;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  position: absolute;\n  top: 0;\n  height: 100%;\n  right: calc(1.4em + var(--padding-end));\n\n  &:hover {\n    color: var(--clear-btn-color--hover);\n  }\n\n  :host(.rtl) & {\n    right: unset;\n    left: calc(1.4em + var(--padding-end));\n  }\n\n  :host(.is-invalid) & {\n    color: var(--clear-btn-color--invalid);\n  }\n\n  :host(.has-value) & {\n    visibility: visible;\n  }\n\n  nano-icon {\n    --color: inherit;\n  }\n}\n\n// Input Has focus\n// --------------------------------------------------\n// When the select has focus, then the select cover should be hidden\n\n// :host(.has-focus) {\n//   pointer-events: none;\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} from '@stencil/core';\n\nimport {\n  Color,\n  SelectChangeEventDetail,\n  InputChangeEventDetail,\n  CssClassMap,\n  ControlValidityEventDetail,\n  ControlValidity,\n} from '../../interface';\nimport {\n  testLegacyStyle,\n  debounceEvent,\n  closestElement,\n  createColorClasses,\n} from '../../utils';\nimport Popover from '../../utils/popover';\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 label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot legacy - you can use this slot to wrap any old select / labels / options. This will set appropriate defaults for the nano-select\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 multiInput?: HTMLInputElement;\n  private multiList?: HTMLUListElement;\n  private selectWrap?: HTMLDivElement;\n  private listItems: Array<HTMLLIElement> = [];\n  private valueItems: Array<HTMLSpanElement> = [];\n  private dragVal: string;\n  private mo?: MutationObserver;\n  private popover: Popover;\n\n  private selectId = `nano-select-${selectIds++}`;\n  private rtl: boolean = false;\n  private currLiIndex: number = -1;\n  private inputSearchVal: string = '';\n  private watchValue: boolean = true;\n  private onInit: boolean = true;\n\n  @State() currInsertIndex: number = 0;\n  @State() availOpts = [];\n  @State() showErrorMsg = false;\n  @State() errorMessage: string = '';\n  @State() hasFocus = false;\n  @State() listOpen = false;\n  @State() isLegacy: boolean = 'registerElement' in document;\n  @State() hasLabelSlot: boolean = false;\n  @State() hasHelperSlot: boolean = false;\n  @State() hasIconSlot: boolean = false;\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({ mutable: true, reflect: true }) 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.\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() 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({ mutable: true }) value?: string | Array<string | null> = this.multiple\n    ? []\n    : '';\n\n  /**\n   * You can set options via js. domElement.options = ['option 1', 'option 2'] or [{label: 'option 1', value: 'opt-1'}]\n   */\n  @Prop({ mutable: true }) options: Array<\n    string | { label: string; value?: string }\n  > = [];\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  /**\n   * Whether to use native <select> elements. Setting to false will use a similar UI as multiple=\"true\"\n   */\n  @Prop() native = true;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.nanoSearchChange = debounceEvent(this.nanoSearchChange, this.debounce);\n  }\n\n  // @Watch('options')\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  @Watch('value')\n  protected valueChanged() {\n    if (!this.watchValue) return;\n\n    if (this.multiple) {\n      if (typeof this.value === 'string' && !!this.value.length)\n        this.value = this.value.split(',');\n      if (\n        this.value === null ||\n        (typeof this.value === 'string' && !this.value.length)\n      )\n        this.value = [];\n\n      if (this.currInsertIndex > this.value.length - 1)\n        this.currInsertIndex = this.value.length - 1;\n    } else if (typeof this.value !== 'string' && this.value && this.value[0])\n      this.value = this.value[0];\n\n    this.setNativeValue();\n    this.setAvailOpts();\n    setTimeout((_) => this.shouldValidate(), 20);\n    this.nanoChange.emit({ value: this.value });\n\n    if (this.onInit) return;\n  }\n\n  @Watch('options')\n  protected optionsChanged() {\n    this.setAvailOpts();\n    if (this.hasFocus) this.openList();\n  }\n\n  /**\n   * Setup or rip down custom combobox when select is switched from mutliple\n   */\n  @Watch('multiple')\n  protected multiChange() {\n    this.switchValue();\n\n    if (this.multiple) this.setupMulti();\n    else if (this.popover) this.popover.destroy();\n  }\n\n  private setupMulti() {\n    setTimeout(() => {\n      this.setAvailOpts();\n      this.popover = new Popover(this.selectWrap, this.multiList, {\n        placement: 'bottom-start',\n        skidding: 0,\n        distance: 0,\n        onTransitionEnd: () => {\n          if (!this.listOpen) {\n            this.multiList.scrollTop = 0;\n          }\n        },\n      });\n    }, 20);\n  }\n\n  @Watch('listOpen')\n  listOpenChange() {\n    if (this.listOpen) this.popover.show();\n    else this.popover.hide();\n  }\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  /**\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    if (this.nativeSelect && !this.multiple) this.nativeSelect.focus();\n    else if (this.multiInput) this.multiInput.focus();\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.nativeSelect.reportValidity();\n    }\n  }\n\n  /* Logic */\n\n  // sets the available options of a multi select.\n  // Removes ones already selected\n  // Filters one if user starts to search\n  private setAvailOpts() {\n    if (!this.multiple) return;\n\n    this.availOpts = this.options.filter((opt) => {\n      let toFind = typeof opt === 'string' ? opt : opt['value'];\n      let strFilter =\n        typeof opt === 'string' ? opt : opt['label'] || opt['value'];\n\n      if (!toFind) return false;\n      return (\n        !(this.value as Array<string>).includes(toFind) &&\n        (!this.multiInput ||\n          strFilter.toLowerCase().indexOf(this.inputSearchVal.toLowerCase()) >\n            -1)\n      );\n    });\n  }\n\n  private getNativeValue(): string | Array<string> {\n    const nsl = this.nativeSelect;\n    if (!nsl) return '';\n\n    if (!this.multiple)\n      return nsl.options[nsl.selectedIndex] &&\n        nsl.options[nsl.selectedIndex].hasAttribute('value')\n        ? nsl.options[nsl.selectedIndex].value\n        : '';\n    else {\n      return Array.from(nsl.options).map((opt) => {\n        if (opt.selected && opt.hasAttribute('value')) return opt.value;\n      });\n    }\n  }\n\n  private setNativeValue() {\n    const nsl = this.nativeSelect;\n    if (!nsl) return null;\n    if (!this.multiple) nsl.value = this.value as string;\n    else {\n      Array.from(this.nativeSelect.options)\n        .filter((opt) => {\n          if (typeof this.value === 'string') return opt.value === this.value;\n          else\n            return this.value.find((val) => {\n              if (typeof val === 'string') return val === this.value;\n              else if (val['value']) return val === val['value'];\n            });\n        })\n        .map((opt) => {\n          opt.selected = true;\n        });\n    }\n  }\n\n  private isValidValues() {\n    const nsl = this.nativeSelect;\n    if (!nsl) return null;\n\n    const selected = this.nativeSelect.querySelectorAll('option:checked');\n    const values = Array.from(selected).map(\n      (el: HTMLOptionElement) => el.value || null\n    );\n\n    if (this.multiple) {\n      return values.reduce((accumulator, currentValue) => {\n        if (!accumulator) return false;\n        return !!this.options.find((opt) =>\n          opt['value'] ? opt['value'] === currentValue : opt === currentValue\n        );\n      }, true);\n    } else {\n      return this.options.find((opt) =>\n        opt['value'] ? opt['value'] === values[0] : opt === values[0]\n      );\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.getNativeValue().length) {\n      this.nativeSelect.setCustomValidity('Please fill in this field.');\n      return true;\n    }\n    if (\n      this.getNativeValue().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.getNativeValue().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.getNativeValue().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 openList() {\n    if (!this.multiple) return;\n    if (\n      (this.availOpts.length ||\n        (!!this.inputSearchVal.length && this.allowCustomValues)) &&\n      (!this.max || (this.max && this.value.length < this.max))\n    )\n      this.listOpen = true;\n    else this.listOpen = false;\n  }\n\n  private addValue(value) {\n    if (!this.multiple) return;\n    if (this.value && this.value.length && this.value.includes(value)) 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      value,\n      ...this.value.slice(this.currInsertIndex),\n    ];\n\n    this.inputSearchVal = '';\n\n    this.setAvailOpts();\n\n    this.selectWrap.clientWidth; // force reflow\n    this.setFocus();\n    this.openList();\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    if (this.currInsertIndex > this.value.length - 1)\n      this.currInsertIndex = this.value.length - 1;\n\n    this.selectWrap.clientWidth; // force reflow\n    this.setFocus();\n    this.openList();\n  }\n\n  private switchValue() {\n    this.watchValue = false;\n    if (this.multiple) {\n      if (typeof this.value === 'string' && !!this.value.length)\n        this.value = this.value.split(',');\n      else this.value = [];\n\n      this.currInsertIndex = Math.max(this.value.length - 1, 0);\n    } else if (typeof this.value !== 'string' && this.value && this.value[0])\n      this.value = this.value[0];\n    this.watchValue = true;\n  }\n\n  private isSelected(value: string) {\n    if (this.multiple)\n      return (this.value as Array<string>).find((val) => val === value);\n    else value === this.value;\n  }\n\n  private getLabel(val: string) {\n    let foundVal = this.options.find((opt) => {\n      return opt['value'] ? opt['value'] === val : opt === val;\n    });\n    if (!foundVal) return null;\n    return foundVal['label'] ? foundVal['label'] : foundVal;\n  }\n\n  private slotChangeObserver() {\n    const mo = (this.mo = new MutationObserver((mrs: MutationRecord[]) =>\n      this.processSlottedContent(mrs)\n    ));\n    mo.observe(this.el, { childList: true, subtree: true });\n  }\n\n  private processSlottedContent(mutations?: MutationRecord[]) {\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    this.hasIconSlot = !!this.el.querySelector('[slot=\"icon\"]');\n\n    if (!mutations) {\n      // find legacy select. Take attrs and apply to our element\n      let existingselect = this.el.querySelector(\n        'select:not([class*=\"sc-nano-select\"])'\n      );\n      if (existingselect) {\n        Array.from(existingselect.attributes)\n          .filter((attr) => attr.specified && attr.nodeName in this)\n          .map((attr) => (this[attr.nodeName] = attr.nodeValue));\n      }\n\n      // find legacy label. Apply to our element\n      let existingLabel = this.el.querySelector(\n        'label:not([class*=\"sc-nano-select\"])'\n      );\n      if (existingLabel) this.label = this.label || existingLabel.innerHTML;\n\n      // find legacy slotted options. Apply them and add any relevant values\n      let legacyOpts = this.el.querySelectorAll(\n        'option:not([class*=\"sc-nano-select\"])'\n      );\n\n      this.watchValue = false;\n      if (legacyOpts && legacyOpts.length) {\n        let options = [];\n        legacyOpts.forEach((option: HTMLOptionElement) => {\n          options.push({\n            label: option.label || option.innerText,\n            value: option.value,\n          });\n          if (!option.selected || !option.value) return;\n\n          if (this.multiple) (this.value as Array<string>).push(option.value);\n          else this.value = option.value;\n        });\n        this.options = options;\n      }\n\n      if (legacyOpts.length || existingLabel || existingselect) {\n        // empty all legacy slotted stuff\n        let children = this.el.querySelectorAll('[slot=\"legacy\"]');\n        if (children) children.forEach((n) => n.parentNode.removeChild(n));\n      }\n\n      this.watchValue = true;\n    }\n\n    if (\n      mutations &&\n      !Array.from(mutations[0].addedNodes).find(\n        (node) => node.nodeName.toLowerCase() === 'nano-select-option'\n      )\n    )\n      return;\n\n    // find nano-select-options\n    let nanoOpts = this.el.querySelectorAll('nano-select-option');\n\n    if (nanoOpts && nanoOpts.length) {\n      let options = [];\n      nanoOpts.forEach((option: HTMLNanoSelectOptionElement) => {\n        options.push({\n          label: option.label || option.innerText,\n          value: option.value,\n        });\n        if (!option.selected || !option.value) return;\n\n        if (this.multiple) (this.value as Array<string>).push(option.value);\n        else this.value = option.value;\n      });\n      this.options = options;\n    }\n\n    this.setAvailOpts();\n  }\n\n  /* Event handling */\n\n  private onChange = (ev?: Event) => {\n    if (!this.readonly && !this.disabled && ev) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    }\n    this.value = this.getNativeValue();\n  };\n\n  private onBlur = () => {\n    if (this.multiple) {\n      this.currLiIndex = -1;\n      document.removeEventListener('keydown', this.handleDocumentKeyDown);\n      document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n    }\n    this.hasFocus = false;\n\n    setTimeout(() => {\n      if (this.validateOn === 'dirty' && !this.listOpen && !this.hasFocus)\n        this.showInlineValidation();\n    }, 20);\n    this.nanoBlur.emit();\n  };\n\n  private onFocus = () => {\n    if (this.multiple) {\n      this.currLiIndex = -1;\n      document.addEventListener('keydown', this.handleDocumentKeyDown);\n      document.addEventListener('mousedown', this.handleDocumentMouseDown);\n      this.openList();\n    }\n\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      let options = this.nativeSelect.querySelectorAll('option');\n      if (options.length) options.forEach((n) => n.remove());\n      this.currInsertIndex = -1;\n      this.setAvailOpts();\n    } else this.value = '';\n\n    this.onChange();\n  };\n\n  private onClick = () => {\n    this.setFocus();\n    this.openList();\n  };\n\n  /* Multi event handlers */\n\n  private onMultiInputBlur = () => {\n    if (this.allowCustomValues) return;\n    this.inputSearchVal = '';\n    this.setAvailOpts();\n  };\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;\n    this.setAvailOpts();\n    this.openList();\n    this.nanoSearchChange.emit({ value: ev.target.value });\n  };\n\n  private getActiveOpt() {\n    return this.multiList.querySelector('.has-focus') as HTMLLIElement;\n  }\n\n  private onOptFocus = (ev: FocusEvent) => {\n    let activeEle = this.getActiveOpt();\n    if (activeEle) activeEle.classList.remove('has-focus');\n    (ev.target as HTMLElement).classList.add('has-focus');\n  };\n\n  private onHostClick = () => {\n    setTimeout((_) => {\n      if (!this.multiple || this.hasFocus) return;\n      this.setFocus();\n    }, 20);\n  };\n\n  private handleDocumentMouseDown = (ev: MouseEvent) => {\n    const target = ev.target as HTMLElement;\n    if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {\n      this.listOpen = false;\n      this.onBlur();\n    }\n  };\n\n  private handleDocumentKeyDown = (ev: KeyboardEvent) => {\n    if (!this.multiple) return;\n\n    if (!this.inputSearchVal) {\n      let rm: HTMLSpanElement;\n\n      switch (ev.key) {\n        case 'Backspace':\n          if (this.multiInput.previousElementSibling)\n            rm = this.multiInput.previousElementSibling as HTMLSpanElement;\n          else break;\n\n          this.removeValue(rm.dataset.value || null);\n          break;\n\n        case 'Delete':\n          if (this.multiInput.nextElementSibling)\n            rm = this.multiInput.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.multiInput.previousSibling)\n            this.currInsertIndex--;\n          if (ev.key === 'ArrowRight' && this.multiInput.nextSibling)\n            this.currInsertIndex++;\n\n          setTimeout(() => {\n            this.multiInput.focus();\n          }, 20);\n          ev.preventDefault();\n          break;\n      }\n    }\n\n    // navigated to component via keyboard. Open with down.\n    if (this.hasFocus && !this.listOpen && ev.key === 'ArrowDown') {\n      this.openList();\n      this.currLiIndex = -1;\n    }\n\n    // Close when tabbing outside of element\n    if (this.hasFocus && ev.key === 'Tab') {\n      setTimeout(() => {\n        if (\n          document.activeElement &&\n          closestElement(\n            this.el.tagName.toLowerCase(),\n            document.activeElement\n          ) !== this.el\n        ) {\n          this.listOpen = false;\n          this.onBlur();\n          return;\n        }\n      });\n    }\n\n    // list open, navigate items with arrows\n    if (this.listOpen) {\n      const selectedItem = this.getActiveOpt();\n      let testIndex = this.listItems.indexOf(selectedItem) || this.currLiIndex;\n\n      switch (ev.key) {\n        case 'ArrowDown':\n        case 'ArrowUp':\n          ev.preventDefault();\n\n          if (ev.key === 'ArrowDown') testIndex++;\n          else if (ev.key === 'ArrowUp') testIndex--;\n\n          if (testIndex < 0) {\n            this.currLiIndex = 0;\n            this.multiInput.focus();\n            return;\n          }\n\n          let foundIndex = this.listItems[testIndex]\n            ? testIndex\n            : this.currLiIndex;\n          setTimeout(() => {\n            this.listItems[foundIndex].focus();\n            this.currLiIndex = foundIndex;\n          }, 20);\n          return;\n        case 'Enter':\n        case ' ':\n          if (this.listItems[this.currLiIndex]) {\n            this.addValue(this.listItems[this.currLiIndex].dataset.value);\n            ev.preventDefault();\n          }\n          return;\n        case 'Escape':\n          this.listOpen = false;\n          return;\n      }\n    }\n\n    if (this.currLiIndex > -1) ev.preventDefault();\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    testLegacyStyle(this.el);\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    if (this.popover) this.popover.destroy();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n    if (this.multiple) this.setupMulti();\n    this.customValidate();\n  }\n\n  componentWillLoad() {\n    this.switchValue();\n    this.processSlottedContent();\n    this.onInit = false;\n  }\n\n  private renderLabel(labelId: string, position?: 'float') {\n    let classes: CssClassMap = {};\n    if (position === 'float') {\n      classes = { 'placeholder-as-label': true };\n    } else {\n      classes = { label: true, 'visually-hide': this.hideLabel };\n    }\n    if (!this.label && !this.hasLabelSlot) return;\n\n    return (\n      <label class={classes} htmlFor={this.selectId} id={labelId}>\n        {this.label && this.label}\n        {!this.label && !!this.hasLabelSlot && <slot name=\"label\" />}\n      </label>\n    );\n  }\n\n  render() {\n    const labelId = this.selectId + '-lbl';\n    const moreId =\n      this.showInlineError || this.hasHelperSlot\n        ? this.selectId + '-moreId'\n        : '';\n    const listId = this.selectId + '-list';\n\n    this.rtl = (this.el.ownerDocument as Document).dir === 'rtl';\n    this.listItems = [];\n    this.valueItems = [];\n\n    if (\n      this.placeholder &&\n      (!this.options[0] || this.options[0]['label'] !== this.placeholder)\n    ) {\n      this.options.unshift({ label: this.placeholder, value: '' });\n    }\n\n    let optionMenu = this.listOpen;\n\n    let valueMarkup;\n    if (this.multiple) {\n      let input = (\n        <input\n          class=\"multi-input\"\n          id={this.selectId}\n          ref={(input) => (this.multiInput = input)}\n          disabled={this.disabled}\n          autoFocus={this.autofocus}\n          autocomplete=\"off\"\n          onInput={this.onMultiInput}\n          value={this.inputSearchVal}\n          onTouchStart={this.onClick}\n          onMouseDown={this.onClick}\n          onFocus={this.onFocus}\n          onBlur={this.onMultiInputBlur}\n          placeholder={\n            this.placeholder && !this.floatLabel && !this.value.length\n              ? this.placeholder\n              : ''\n          }\n          role={this.multiple ? 'combobox' : ''}\n          aria-labelledby={labelId + ' ' + moreId}\n          aria-controls={listId}\n          aria-expanded={optionMenu ? 'true' : 'false'}\n          aria-required={this.required ? 'true' : 'false'}\n          aria-autocomplete=\"list\"\n        />\n      );\n\n      if (!!this.value.length) {\n        valueMarkup = (this.value as Array<string>).map((val, i) => {\n          let label = this.options.find((opt) => {\n            return opt['value'] ? opt['value'] === val : opt === val;\n          });\n          label = label && label['label'] ? label['label'] : val;\n\n          let toReturn = (\n            <span\n              onDragStart={this.onDragStart}\n              onDragLeave={this.onDragLeave}\n              onDragEnd={this.onDragEnd}\n              draggable\n              data-value={val}\n              ref={(span) => this.valueItems.push(span)}\n              class=\"multi-value\"\n            >\n              <span>{label}</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\n          if (i === 0 && this.currInsertIndex < 0) toReturn = [input, toReturn];\n          else if (i === this.currInsertIndex) toReturn = [toReturn, input];\n          return toReturn;\n        });\n      } else valueMarkup = input;\n    }\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          'multi-list-open': this.listOpen,\n          'has-clr-btn': this.clearSelect,\n          masked: this.mask,\n          legacy: this.isLegacy,\n        }}\n        onClick={this.onHostClick}\n      >\n        {!this.floatLabel && this.renderLabel(labelId)}\n        <div class=\"select\" ref={(div) => (this.selectWrap = div)}>\n          {this.floatLabel && this.renderLabel(labelId, 'float')}\n          <div\n            class={{\n              'native-select-wrap': true,\n              'native-select-wrap--multiple': this.multiple,\n            }}\n          >\n            {!this.multiple && this.mask && (\n              <div class=\"select-mask\">\n                {this.getLabel(this.value as string)}\n              </div>\n            )}\n            {this.multiple && [\n              <div class=\"multi-wrap\">{valueMarkup}</div>,\n              <ul\n                role=\"listbox\"\n                ref={(ul) => (this.multiList = ul)}\n                aria-multiselectable=\"true\"\n                aria-required={this.required}\n                aria-expanded={optionMenu ? 'true' : 'false'}\n                aria-hidden={!optionMenu}\n                hidden={!optionMenu}\n                id={listId}\n                class={{\n                  'multi-select-box': true,\n                  'multi-select-box--open': optionMenu,\n                }}\n              >\n                {this.allowCustomValues && this.inputSearchVal.length > 0 && (\n                  <li\n                    data-value={this.inputSearchVal}\n                    role=\"option\"\n                    tabindex=\"-1\"\n                    ref={(li) => this.listItems.push(li)}\n                    onMouseDown={() => {\n                      this.addValue(this.inputSearchVal);\n                    }}\n                    onFocus={this.onOptFocus}\n                  >\n                    Add {this.inputSearchVal}\n                  </li>\n                )}\n                {this.availOpts.map((option) => {\n                  let optval, label;\n                  if (option['value']) {\n                    optval = option['value'];\n                    label = option['label'] || option['value'];\n                  } else if (typeof option === 'string') {\n                    optval = option;\n                    label = optval;\n                  }\n                  if (!optval) return;\n                  return (\n                    <li\n                      role=\"option\"\n                      key={optval}\n                      data-value={optval}\n                      ref={(li) => this.listItems.push(li)}\n                      tabindex=\"-1\"\n                      aria-selected={this.isSelected(optval) ? 'true' : 'false'}\n                      onMouseDown={() => {\n                        this.addValue(optval);\n                      }}\n                      onFocus={this.onOptFocus}\n                    >\n                      {label}\n                    </li>\n                  );\n                })}\n              </ul>,\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.value as Array<string>).map((val) => {\n                  return (\n                    <option value={val} selected>\n                      {val}\n                    </option>\n                  );\n                })}\n              </select>,\n            ]}\n            {!this.multiple && (\n              <select\n                id={this.selectId}\n                class=\"native-select\"\n                ref={(select) => (this.nativeSelect = select)}\n                aria-labelledby={labelId + ' ' + moreId}\n                disabled={this.disabled}\n                form={this.form}\n                autoFocus={this.autofocus}\n                multiple={this.multiple}\n                name={this.name}\n                required={this.required}\n                size={this.size}\n                onBlur={this.onBlur}\n                onFocus={this.onFocus}\n                onInvalid={this.handleInvalid}\n                onChange={this.onChange}\n              >\n                {this.options.map((option, i) => {\n                  if (option['value'] || option['label'])\n                    return (\n                      <option\n                        key={option['label'] + i}\n                        label={option['label']}\n                        value={option['value']}\n                        selected={\n                          option['value'] === this.value ||\n                          (!this.value && !option['value'])\n                        }\n                        disabled={!option['value'] && this.required}\n                      >\n                        {option['label'] ? option['label'] : option['value']}\n                      </option>\n                    );\n                  else\n                    return (\n                      <option\n                        key={(option as string) + i}\n                        value={option as string}\n                        selected={option === this.value}\n                      >\n                        {option}\n                      </option>\n                    );\n                })}\n                <slot name=\"legacy\" />\n              </select>\n            )}\n            {this.clearSelect && !this.readonly && !this.disabled && (\n              <button\n                type=\"button\"\n                class=\"select-clear-icon\"\n                tabindex=\"-1\"\n                onTouchEnd={this.clearSelectValue}\n                onMouseUp={this.clearSelectValue}\n              >\n                <nano-icon name=\"light/times\"></nano-icon>\n              </button>\n            )}\n            <div\n              onTouchEnd={this.onClick}\n              onMouseUp={this.onClick}\n              class=\"select-down-icon\"\n            >\n              {this.hasIconSlot ? (\n                <slot name=\"icon\" />\n              ) : (\n                <nano-icon name=\"regular/chevron-down\"></nano-icon>\n              )}\n            </div>\n          </div>\n        </div>\n        {(this.showInlineError || this.hasHelperSlot) && (\n          <div class=\"more\" id={moreId}>\n            {!!this.showInlineError ? (\n              <div class=\"error\">{this.errorMessage}</div>\n            ) : (\n              ''\n            )}\n            <div class=\"helper\">\n              <slot name=\"helper\" />\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n\nlet selectIds = 0;\n"]}
+{"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","class_1","hostRef","_this","this","hasSecondarySlot","hasAnchorEle","didBlur","animating","didOpen","isInGlobalNav","isInMenuDrawer","isInMenu","isLegacy","document","head","attachShadow","hasFocus","href","target","disabled","open","selected","secondaryActiveWidth","secondaryFallback","closeOnBlur","closeSecondary","__awaiter","nanoClosing","emit","secondaryMenu","secondaryDiv","displayTransition","status","_b","sent","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","__generator","handleMouseLeave","handleClick","_a","querySelector","blur","relatedTarget","foundThisNavEle","focus","preventScroll","removeEventListener","prototype","setFocus","openChange","didOpenChange","nanoClose","panelio_1","IntersectionObserver","data","boundingClientRect","top","scrollIntoView","behavior","disconnect","threshold","observe","addEventListener","tabIndex","nanoOpen","found","parentElement","componentWillLoad","secondaryEle","link","getDirectChildren","connectedCallback","render","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","class_2","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","__spreadArray","slice","removeValue","toFind","filter","val","setOptions","datalist","activeOptions","map","ao","label","filterMeta","handleDocumentKeyDown","rm","key","previousElementSibling","dataset","nextElementSibling","previousSibling","nextSibling","event","Event","dispatchEvent","clearSelectValue","stopPropagation","onDragStart","ele","dragVal","onDragEnd","onDragLeave","spanVal","to","indexOf","from","tmpArr","tmpVal","onMultiInput","trim","nanoSearchChange","Object","defineProperty","_selectWrap","setDataListOpts","_datalist","split","Array","isArray","opts","opt","debounceChanged","debounceEvent","shouldValidate","valueChanged","nanoChange","selectWrap","currDWConfig","assign","tetherTo","input","reportValidity","validateFirst","getSelectElement","Promise","resolve","showError","message","find","options","slotChangeObserver","mo","MutationObserver","processSlottedContent","childList","subtree","querySelectorAll","console","warn","getLabel","handleBlur","kev","raf","getActiveElement","closestElement","tagName","toLowerCase","CustomEvent","disconnectedCallback","componentDidLoad","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","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) {\n      this.inputSearchVal = '';\n      const event = new window.Event('change');\n      this.inputCtrl.dispatchEvent(event);\n    }\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/esm-es5/nano-range.entry.js

@@ -1,5 +1,5 @@
 var __awaiter=this&&this.__awaiter||function(r,e,n,a){function t(r){return r instanceof n?r:new n((function(e){e(r)}))}return new(n||(n=Promise))((function(n,o){function i(r){try{c(a.next(r))}catch(e){o(e)}}function s(r){try{c(a["throw"](r))}catch(e){o(e)}}function c(r){r.done?n(r.value):t(r.value).then(i,s)}c((a=a.apply(r,e||[])).next())}))};var __generator=this&&this.__generator||function(r,e){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},a,t,o,i;return i={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function s(r){return function(e){return c([r,e])}}function c(i){if(a)throw new TypeError("Generator is already executing.");while(n)try{if(a=1,t&&(o=i[0]&2?t["return"]:i[0]?t["throw"]||((o=t["return"])&&o.call(t),0):t.next)&&!(o=o.call(t,i[1])).done)return o;if(t=0,o)i=[i[0]&2,o.value];switch(i[0]){case 0:case 1:o=i;break;case 4:n.label++;return{value:i[1],done:false};case 5:n.label++;t=i[1];i=[0];continue;case 7:i=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(i[0]===6||i[0]===2)){n=0;continue}if(i[0]===3&&(!o||i[1]>o[0]&&i[1]<o[3])){n.label=i[1];break}if(i[0]===6&&n.label<o[1]){n.label=o[1];o=i;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(i);break}if(o[2])n.ops.pop();n.trys.pop();continue}i=e.call(r,n)}catch(s){i=[6,s];t=0}finally{a=o=0}if(i[0]&5)throw i[1];return{value:i[0]?i[1]:void 0,done:true}}};
 /*!
  * Web Components for Nanopore digital Web Apps
- */import{r as registerInstance,c as createEvent,h,e as Host,g as getElement}from"./index-5f8d16e7.js";import{c as clamp,a as renderHiddenInput}from"./index-f41ae118.js";import{c as createColorClasses}from"./theme-1d4c8719.js";import{a as debounceEvent}from"./throttle-d3d933cd.js";var rangeCss='.sc-nano-range-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-range,*.sc-nano-range::before,*.sc-nano-range::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-nano-range-h{--knob-handle-size:(var(--knob-size) * 2);--rgb-inactive:165, 165, 165;--knob-border-radius:50%;--knob-background:var(--nano-color-primary, #007495);--knob-box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.3);--knob-size:30px;--bar-height:8px;--bar-background:#e2e1e0;--bar-background-active:#a5a5a5;--bar-border-radius:4px;--height:42px;--pin-background:var(--nano-color-primary, #007495);--pin-color:var(--nano-color-primary-contrast, #fff);--focus-style:0 0 0 5px var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))}.range-wrap.sc-nano-range{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-flex:3;-ms-flex:3;flex:3;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.range-wrap.sc-nano-range-s>ion-icon[slot],.range-wrap .sc-nano-range-s>ion-icon[slot]{font-size:1.5em}.range-wrap.sc-nano-range-s>[slot=start],.range-wrap .sc-nano-range-s>[slot=start]{margin-left:0;margin-right:14px;margin-top:0;margin-bottom:0;font-size:0.9em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.range-wrap.sc-nano-range-s>[slot=start],.range-wrap .sc-nano-range-s>[slot=start]{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:14px;margin-inline-end:14px}}.range-wrap.sc-nano-range-s>[slot=end],.range-wrap .sc-nano-range-s>[slot=end]{margin-left:14px;margin-right:0;margin-top:0;margin-bottom:0;font-size:0.9em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.range-wrap.sc-nano-range-s>[slot=end],.range-wrap .sc-nano-range-s>[slot=end]{margin-left:unset;margin-right:unset;-webkit-margin-start:14px;margin-inline-start:14px;-webkit-margin-end:0;margin-inline-end:0}}.range-slider.sc-nano-range{position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:-webkit-grab;cursor:grab;-ms-touch-action:pan-y;touch-action:pan-y}.range-pressed.sc-nano-range-h .range-slider.sc-nano-range{cursor:-webkit-grabbing;cursor:grabbing}.range-bar.sc-nano-range{border-radius:var(--bar-border-radius);left:0;top:calc((var(--height) - var(--bar-height)) / 2);position:absolute;width:100%;height:var(--bar-height);background:var(--bar-background);pointer-events:none}.range-bar[dir=rtl].sc-nano-range{left:unset;right:unset;right:0}.range-snaps.sc-nano-range-h .range-bar.sc-nano-range{border-top-left-radius:var(--bar-border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--bar-border-radius)}.range-snaps.sc-nano-range-h .range-bar[dir=rtl].sc-nano-range{border-top-left-radius:0;border-top-right-radius:var(--bar-border-radius);border-bottom-right-radius:var(--bar-border-radius);border-bottom-left-radius:0}.range-bar[dir=rtl].sc-nano-range{left:unset}.range-bar-active.sc-nano-range{bottom:0;width:auto;background:var(--bar-background-active)}.range-bar-active .range-pressed.sc-nano-range-h{will-change:left, right}.range-knob.sc-nano-range{border-radius:var(--knob-border-radius);left:calc(50% - var(--knob-size) / 2);top:calc(50% - var(--knob-size) / 2);position:absolute;width:var(--knob-size);height:var(--knob-size);background:var(--knob-background);-webkit-box-shadow:var(--knob-box-shadow);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none;-webkit-transform:scale(0.67);transform:scale(0.67);-webkit-transition-duration:120ms;transition-duration:120ms;-webkit-transition-property:background-color, border, -webkit-transform;transition-property:background-color, border, -webkit-transform;transition-property:transform, background-color, border;transition-property:transform, background-color, border, -webkit-transform;-webkit-transition-timing-function:ease;transition-timing-function:ease}.range-knob[dir=rtl].sc-nano-range{left:unset;right:unset;right:calc(50% - var(--knob-size) / 2)}.range-knob[dir=rtl].sc-nano-range{left:unset}.sc-nano-range-h:not(.range-has-pin) .range-knob-pressed.sc-nano-range .range-knob.sc-nano-range{-webkit-transform:scale(1);transform:scale(1)}.range-knob-handle.sc-nano-range{left:0;top:calc((var(--height) - var(--knob-handle-size)) / 2);margin-left:calc(0px - var(--knob-handle-size) / 2);position:absolute;width:calc(var(--knob-handle-size));height:calc(var(--knob-handle-size));text-align:center}.range-knob-handle[dir=rtl].sc-nano-range{left:unset;right:unset;right:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.range-knob-handle.sc-nano-range{margin-left:unset;-webkit-margin-start:calc(0px - var(--knob-handle-size) / 2);margin-inline-start:calc(0px - var(--knob-handle-size) / 2)}}.range-knob-handle[dir=rtl].sc-nano-range{left:unset}.range-knob-handle.sc-nano-range:active,.range-knob-handle.sc-nano-range:focus{outline:none}.range-knob-handle.sc-nano-range:active .range-knob.sc-nano-range,.range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{-webkit-box-shadow:var(--knob-box-shadow), var(--focus-style);box-shadow:var(--knob-box-shadow), var(--focus-style)}.range-tick.sc-nano-range{position:absolute;top:calc((var(--height) - var(--bar-height)) / 2);width:var(--bar-height);height:var(--bar-height);background:var(--bar-background-active);z-index:1;pointer-events:none}.range-tick.sc-nano-range:first-of-type{border-top-left-radius:var(--bar-border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--bar-border-radius)}.range-tick.sc-nano-range:first-of-type[dir=rtl]{border-top-left-radius:0;border-top-right-radius:var(--bar-border-radius);border-bottom-right-radius:var(--bar-border-radius);border-bottom-left-radius:0}.range-tick.sc-nano-range:last-of-type{border-top-left-radius:0;border-top-right-radius:var(--bar-border-radius);border-bottom-right-radius:var(--bar-border-radius);border-bottom-left-radius:0}.range-tick.sc-nano-range:last-of-type[dir=rtl]{border-top-left-radius:var(--bar-border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--bar-border-radius)}.range-tick-active.sc-nano-range{background:transparent}.range-pin.sc-nano-range{-webkit-transform:translate3d(0, 0, 0) scale(0.01);transform:translate3d(0, 0, 0) scale(0.01);-webkit-transform-origin:center top;transform-origin:center top;padding:0.66em 0;border-radius:50%;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;position:relative;min-width:2.33em;height:2.33em;-webkit-transition:background 120ms ease, -webkit-transform 120ms ease;transition:background 120ms ease, -webkit-transform 120ms ease;transition:transform 120ms ease, background 120ms ease;transition:transform 120ms ease, background 120ms ease, -webkit-transform 120ms ease;background:var(--pin-background);color:var(--pin-color);font-size:0.75em}.range-pin.sc-nano-range::before{left:50%;top:0.25em;margin-left:-1.08em;border-radius:50% 50% 50% 0;position:absolute;width:2.16em;height:2.16em;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition:background 120ms ease;transition:background 120ms ease;background:var(--pin-background);content:"";z-index:-1}.range-pin.sc-nano-range::before[dir=rtl]{left:unset;right:unset;right:50%}.range-pin.sc-nano-range::before[dir=rtl]{left:unset}.range-knob-pressed.sc-nano-range .range-pin.sc-nano-range{-webkit-transform:translate3d(0, -50%, 0) scale(1);transform:translate3d(0, -50%, 0) scale(1);-webkit-transform:translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1);transform:translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1)}.range-disabled.sc-nano-range-h{pointer-events:none}.range-disabled.sc-nano-range-h .range-bar-active.sc-nano-range,.range-disabled.sc-nano-range-h .range-bar.sc-nano-range,.range-disabled.sc-nano-range-h .range-tick.sc-nano-range{background-color:rgba(var(--rgb-inactive), 0.5)}.range-disabled.sc-nano-range-h .range-knob.sc-nano-range{-webkit-transform:scale(0.55);transform:scale(0.55);outline:5px solid #fff;background-color:rgba(var(--rgb-inactive), 0.5)}.nano-color.sc-nano-range-h .range-bar-active.sc-nano-range,.nano-color.sc-nano-range-h .range-knob.sc-nano-range,.nano-color.sc-nano-range-h .range-pin.sc-nano-range,.nano-color.sc-nano-range-h .range-pin.sc-nano-range::before,.nano-color.sc-nano-range-h .range-tick.sc-nano-range{background:var(--nano-color-base);color:var(--nano-color-contrast)}.nano-color.sc-nano-range-h .range-bar.sc-nano-range{background:rgba(var(--nano-color-base-rgb), 0.26)}.nano-color.sc-nano-range-h .range-knob-handle.sc-nano-range:active .range-knob.sc-nano-range,.nano-color.sc-nano-range-h .range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{-webkit-box-shadow:var(--knob-box-shadow), 0 0 0 5px rgba(var(--nano-color-tint-rgb), 0.56);box-shadow:var(--knob-box-shadow), 0 0 0 5px rgba(var(--nano-color-tint-rgb), 0.56)}';var Range=function(){function r(r){var e=this;registerInstance(this,r);this.nanoChange=createEvent(this,"nanoChange",7);this.nanoStyle=createEvent(this,"nanoStyle",7);this.nanoFocus=createEvent(this,"nanoFocus",7);this.nanoBlur=createEvent(this,"nanoBlur",7);this.noUpdate=false;this.hasFocus=false;this.ratioA=0;this.ratioB=0;this.debounce=0;this.name="";this.dualKnobs=false;this.min=0;this.max=100;this.pin=false;this.snaps=false;this.step=1;this.ticks=false;this.disabled=false;this.value=0;this.clampBounds=function(r){return clamp(e.min,r,e.max)};this.ensureValueInBounds=function(r){if(e.dualKnobs){return{lower:e.clampBounds(r.lower),upper:e.clampBounds(r.upper)}}else{return e.clampBounds(r)}};this.handleKeyboard=function(r,n){var a=e.step;a=a>0?a:1;a=a/(e.max-e.min);if(!n){a*=-1}if(r==="A"){e.ratioA=clamp(0,e.ratioA+a,1)}else{e.ratioB=clamp(0,e.ratioB+a,1)}e.updateValue()};this.onBlur=function(){if(e.hasFocus){e.hasFocus=false;e.nanoBlur.emit();e.emitStyle()}};this.onFocus=function(){if(!e.hasFocus){e.hasFocus=true;e.nanoFocus.emit();e.emitStyle()}}}r.prototype.debounceChanged=function(){this.nanoChange=debounceEvent(this.nanoChange,this.debounce)};r.prototype.minChanged=function(){if(!this.noUpdate){this.updateRatio()}};r.prototype.maxChanged=function(){if(!this.noUpdate){this.updateRatio()}};r.prototype.disabledChanged=function(){if(this.gesture){this.gesture.enable(!this.disabled)}this.emitStyle()};r.prototype.valueChanged=function(r){if(!this.noUpdate){this.updateRatio()}r=this.ensureValueInBounds(r);this.nanoChange.emit({value:r})};r.prototype.connectedCallback=function(){this.updateRatio();this.debounceChanged();this.disabledChanged()};r.prototype.disconnectedCallback=function(){if(this.gesture){this.gesture.destroy();this.gesture=undefined}};r.prototype.componentDidLoad=function(){return __awaiter(this,void 0,void 0,(function(){var r,e;var n=this;return __generator(this,(function(a){switch(a.label){case 0:r=this.rangeSlider;if(!r)return[3,2];e=this;return[4,import("./index-612f2729.js")];case 1:e.gesture=a.sent().createGesture({el:r,gestureName:"range",gesturePriority:100,threshold:0,onStart:function(r){return n.onStart(r)},onMove:function(r){return n.onMove(r)},onEnd:function(r){return n.onEnd(r)}});this.gesture.enable(!this.disabled);a.label=2;case 2:return[2]}}))}))};r.prototype.getValue=function(){var r=this.value||0;if(this.dualKnobs){if(typeof r==="object"){return r}return{lower:0,upper:r}}else{if(typeof r==="object"){return r.upper}return r}};r.prototype.emitStyle=function(){this.nanoStyle.emit({interactive:true,"interactive-disabled":this.disabled})};r.prototype.onStart=function(r){var e=this.rect=this.rangeSlider.getBoundingClientRect();var n=r.currentX;var a=clamp(0,(n-e.left)/e.width,1);if(document.dir==="rtl"){a=1-a}this.pressedKnob=!this.dualKnobs||Math.abs(this.ratioA-a)<Math.abs(this.ratioB-a)?"A":"B";this.setFocus(this.pressedKnob);this.update(n)};r.prototype.onMove=function(r){this.update(r.currentX)};r.prototype.onEnd=function(r){this.update(r.currentX);this.pressedKnob=undefined};r.prototype.update=function(r){var e=this.rect;var n=clamp(0,(r-e.left)/e.width,1);if(document.dir==="rtl"){n=1-n}if(this.snaps){n=valueToRatio(ratioToValue(n,this.min,this.max,this.step),this.min,this.max)}if(this.pressedKnob==="A"){this.ratioA=n}else{this.ratioB=n}this.updateValue()};Object.defineProperty(r.prototype,"valA",{get:function(){return ratioToValue(this.ratioA,this.min,this.max,this.step)},enumerable:false,configurable:true});Object.defineProperty(r.prototype,"valB",{get:function(){return ratioToValue(this.ratioB,this.min,this.max,this.step)},enumerable:false,configurable:true});Object.defineProperty(r.prototype,"ratioLower",{get:function(){if(this.dualKnobs){return Math.min(this.ratioA,this.ratioB)}return 0},enumerable:false,configurable:true});Object.defineProperty(r.prototype,"ratioUpper",{get:function(){if(this.dualKnobs){return Math.max(this.ratioA,this.ratioB)}return this.ratioA},enumerable:false,configurable:true});r.prototype.updateRatio=function(){var r=this.getValue();var e=this,n=e.min,a=e.max;if(this.dualKnobs){this.ratioA=valueToRatio(r.lower,n,a);this.ratioB=valueToRatio(r.upper,n,a)}else{this.ratioA=valueToRatio(r,n,a)}};r.prototype.updateValue=function(){this.noUpdate=true;var r=this,e=r.valA,n=r.valB;this.value=!this.dualKnobs?e:{lower:Math.min(e,n),upper:Math.max(e,n)};this.noUpdate=false};r.prototype.setFocus=function(r){if(this.el.shadowRoot){var e=this.el.shadowRoot.querySelector(r==="A"?".range-knob-a":".range-knob-b");if(e){e.focus()}}};r.prototype.render=function(){var r;var e=this;var n=this,a=n.min,t=n.max,o=n.step,i=n.el,s=n.handleKeyboard,c=n.pressedKnob,l=n.disabled,b=n.pin,d=n.ratioLower,g=n.ratioUpper;var u=d*100+"%";var p=100-g*100+"%";var f=document;var m=f.dir==="rtl";var v=m?"right":"left";var k=m?"left":"right";var w=function(r){var e;return e={},e[v]=r[v],e};var x=(r={},r[v]=u,r[k]=p,r);var y=[];if(this.snaps&&this.ticks){for(var z=a;z<=t;z+=o){var B=valueToRatio(z,a,t);var A={ratio:B,active:B>=d&&B<=g};A[v]=B*100+"%";y.push(A)}}renderHiddenInput(true,i,this.name,JSON.stringify(this.getValue()),l);return h(Host,{onFocusin:this.onFocus,onFocusout:this.onBlur,class:createColorClasses(this.color,{"range-disabled":l,"range-pressed":c!==undefined,"range-has-pin":b,"range-snaps":this.snaps})},h("div",{class:"range-wrap"},h("slot",{name:"start"}),h("div",{class:"range-slider",ref:function(r){return e.rangeSlider=r}},y.map((function(r){return h("span",{style:w(r),role:"presentation",class:{"range-tick":true,"range-tick-active":r.active},part:r.active?"tick-active":"tick"})})),h("div",{class:"range-bar",role:"presentation",part:"bar"}),h("div",{class:"range-bar range-bar-active",role:"presentation",style:x,part:"bar-active"}),renderKnob(m,{knob:"A",pressed:c==="A",value:this.valA,ratio:this.ratioA,pin:b,disabled:l,handleKeyboard:s,min:a,max:t}),this.dualKnobs&&renderKnob(m,{knob:"B",pressed:c==="B",value:this.valB,ratio:this.ratioB,pin:b,disabled:l,handleKeyboard:s,min:a,max:t})),h("slot",{name:"end"})))};Object.defineProperty(r.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(r,"watchers",{get:function(){return{debounce:["debounceChanged"],min:["minChanged"],max:["maxChanged"],disabled:["disabledChanged"],value:["valueChanged"]}},enumerable:false,configurable:true});return r}();var renderKnob=function(r,e){var n=e.knob,a=e.value,t=e.ratio,o=e.min,i=e.max,s=e.disabled,c=e.pressed,l=e.pin,b=e.handleKeyboard;var d=r?"right":"left";var g=function(){var r={};r[d]=t*100+"%";return r};return h("div",{onKeyDown:function(r){var e=r.key;if(e==="ArrowLeft"||e==="ArrowDown"){b(n,false);r.preventDefault();r.stopPropagation()}else if(e==="ArrowRight"||e==="ArrowUp"){b(n,true);r.preventDefault();r.stopPropagation()}},class:{"range-knob-handle":true,"range-knob-a":n==="A","range-knob-b":n==="B","range-knob-pressed":c,"range-knob-min":a===o,"range-knob-max":a===i},style:g(),role:"slider",tabindex:s?-1:0,"aria-valuemin":o,"aria-valuemax":i,"aria-disabled":s?"true":null,"aria-valuenow":a},l&&h("div",{class:"range-pin",role:"presentation",part:"pin"},Math.round(a)),h("div",{class:"range-knob",role:"presentation",part:"knob"}))};var ratioToValue=function(r,e,n,a){var t=(n-e)*r;if(a>0){t=Math.round(t/a)*a+e}return clamp(e,t,n)};var valueToRatio=function(r,e,n){return clamp(0,(r-e)/(n-e),1)};Range.style=rangeCss;export{Range as nano_range};
+ */import{r as registerInstance,c as createEvent,h,e as Host,g as getElement}from"./index-5f8d16e7.js";import{c as clamp,a as renderHiddenInput}from"./index-bf53664b.js";import{c as createColorClasses}from"./theme-1d4c8719.js";import{a as debounceEvent}from"./throttle-d3d933cd.js";var rangeCss='.sc-nano-range-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-range,*.sc-nano-range::before,*.sc-nano-range::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-range{display:none !important}.sc-nano-range-h{--knob-handle-size:(var(--knob-size) * 2);--rgb-inactive:165, 165, 165;--knob-border-radius:50%;--knob-background:var(--nano-color-primary, #007495);--knob-box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.3);--knob-size:30px;--bar-height:8px;--bar-background:#e2e1e0;--bar-background-active:#a5a5a5;--bar-border-radius:4px;--height:42px;--pin-background:var(--nano-color-primary, #007495);--pin-color:var(--nano-color-primary-contrast, #fff);--focus-style:0 0 0 5px var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))}.range-wrap.sc-nano-range{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-flex:3;-ms-flex:3;flex:3;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.range-wrap.sc-nano-range-s>ion-icon[slot],.range-wrap .sc-nano-range-s>ion-icon[slot]{font-size:1.5em}.range-wrap.sc-nano-range-s>[slot=start],.range-wrap .sc-nano-range-s>[slot=start]{margin-left:0;margin-right:14px;margin-top:0;margin-bottom:0;font-size:0.9em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.range-wrap.sc-nano-range-s>[slot=start],.range-wrap .sc-nano-range-s>[slot=start]{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:14px;margin-inline-end:14px}}.range-wrap.sc-nano-range-s>[slot=end],.range-wrap .sc-nano-range-s>[slot=end]{margin-left:14px;margin-right:0;margin-top:0;margin-bottom:0;font-size:0.9em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.range-wrap.sc-nano-range-s>[slot=end],.range-wrap .sc-nano-range-s>[slot=end]{margin-left:unset;margin-right:unset;-webkit-margin-start:14px;margin-inline-start:14px;-webkit-margin-end:0;margin-inline-end:0}}.range-slider.sc-nano-range{position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:-webkit-grab;cursor:grab;-ms-touch-action:pan-y;touch-action:pan-y}.range-pressed.sc-nano-range-h .range-slider.sc-nano-range{cursor:-webkit-grabbing;cursor:grabbing}.range-bar.sc-nano-range{border-radius:var(--bar-border-radius);left:0;top:calc((var(--height) - var(--bar-height)) / 2);position:absolute;width:100%;height:var(--bar-height);background:var(--bar-background);pointer-events:none}.range-bar[dir=rtl].sc-nano-range{left:unset;right:unset;right:0}.range-snaps.sc-nano-range-h .range-bar.sc-nano-range{border-top-left-radius:var(--bar-border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--bar-border-radius)}.range-snaps.sc-nano-range-h .range-bar[dir=rtl].sc-nano-range{border-top-left-radius:0;border-top-right-radius:var(--bar-border-radius);border-bottom-right-radius:var(--bar-border-radius);border-bottom-left-radius:0}.range-bar[dir=rtl].sc-nano-range{left:unset}.range-bar-active.sc-nano-range{bottom:0;width:auto;background:var(--bar-background-active)}.range-bar-active .range-pressed.sc-nano-range-h{will-change:left, right}.range-knob.sc-nano-range{border-radius:var(--knob-border-radius);left:calc(50% - var(--knob-size) / 2);top:calc(50% - var(--knob-size) / 2);position:absolute;width:var(--knob-size);height:var(--knob-size);background:var(--knob-background);-webkit-box-shadow:var(--knob-box-shadow);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none;-webkit-transform:scale(0.67);transform:scale(0.67);-webkit-transition-duration:120ms;transition-duration:120ms;-webkit-transition-property:background-color, border, -webkit-transform;transition-property:background-color, border, -webkit-transform;transition-property:transform, background-color, border;transition-property:transform, background-color, border, -webkit-transform;-webkit-transition-timing-function:ease;transition-timing-function:ease}.range-knob[dir=rtl].sc-nano-range{left:unset;right:unset;right:calc(50% - var(--knob-size) / 2)}.range-knob[dir=rtl].sc-nano-range{left:unset}.sc-nano-range-h:not(.range-has-pin) .range-knob-pressed.sc-nano-range .range-knob.sc-nano-range{-webkit-transform:scale(1);transform:scale(1)}.range-knob-handle.sc-nano-range{left:0;top:calc((var(--height) - var(--knob-handle-size)) / 2);margin-left:calc(0px - var(--knob-handle-size) / 2);position:absolute;width:calc(var(--knob-handle-size));height:calc(var(--knob-handle-size));text-align:center}.range-knob-handle[dir=rtl].sc-nano-range{left:unset;right:unset;right:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.range-knob-handle.sc-nano-range{margin-left:unset;-webkit-margin-start:calc(0px - var(--knob-handle-size) / 2);margin-inline-start:calc(0px - var(--knob-handle-size) / 2)}}.range-knob-handle[dir=rtl].sc-nano-range{left:unset}.range-knob-handle.sc-nano-range:active,.range-knob-handle.sc-nano-range:focus{outline:none}.range-knob-handle.sc-nano-range:active .range-knob.sc-nano-range,.range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{-webkit-box-shadow:var(--knob-box-shadow), var(--focus-style);box-shadow:var(--knob-box-shadow), var(--focus-style)}.range-tick.sc-nano-range{position:absolute;top:calc((var(--height) - var(--bar-height)) / 2);width:var(--bar-height);height:var(--bar-height);background:var(--bar-background-active);z-index:1;pointer-events:none}.range-tick.sc-nano-range:first-of-type{border-top-left-radius:var(--bar-border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--bar-border-radius)}.range-tick.sc-nano-range:first-of-type[dir=rtl]{border-top-left-radius:0;border-top-right-radius:var(--bar-border-radius);border-bottom-right-radius:var(--bar-border-radius);border-bottom-left-radius:0}.range-tick.sc-nano-range:last-of-type{border-top-left-radius:0;border-top-right-radius:var(--bar-border-radius);border-bottom-right-radius:var(--bar-border-radius);border-bottom-left-radius:0}.range-tick.sc-nano-range:last-of-type[dir=rtl]{border-top-left-radius:var(--bar-border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--bar-border-radius)}.range-tick-active.sc-nano-range{background:transparent}.range-pin.sc-nano-range{-webkit-transform:translate3d(0, 0, 0) scale(0.01);transform:translate3d(0, 0, 0) scale(0.01);-webkit-transform-origin:center top;transform-origin:center top;padding:0.66em 0;border-radius:50%;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;position:relative;min-width:2.33em;height:2.33em;-webkit-transition:background 120ms ease, -webkit-transform 120ms ease;transition:background 120ms ease, -webkit-transform 120ms ease;transition:transform 120ms ease, background 120ms ease;transition:transform 120ms ease, background 120ms ease, -webkit-transform 120ms ease;background:var(--pin-background);color:var(--pin-color);font-size:0.75em}.range-pin.sc-nano-range::before{left:50%;top:0.25em;margin-left:-1.08em;border-radius:50% 50% 50% 0;position:absolute;width:2.16em;height:2.16em;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition:background 120ms ease;transition:background 120ms ease;background:var(--pin-background);content:"";z-index:-1}.range-pin.sc-nano-range::before[dir=rtl]{left:unset;right:unset;right:50%}.range-pin.sc-nano-range::before[dir=rtl]{left:unset}.range-knob-pressed.sc-nano-range .range-pin.sc-nano-range{-webkit-transform:translate3d(0, -50%, 0) scale(1);transform:translate3d(0, -50%, 0) scale(1);-webkit-transform:translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1);transform:translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1)}.range-disabled.sc-nano-range-h{pointer-events:none}.range-disabled.sc-nano-range-h .range-bar-active.sc-nano-range,.range-disabled.sc-nano-range-h .range-bar.sc-nano-range,.range-disabled.sc-nano-range-h .range-tick.sc-nano-range{background-color:rgba(var(--rgb-inactive), 0.5)}.range-disabled.sc-nano-range-h .range-knob.sc-nano-range{-webkit-transform:scale(0.55);transform:scale(0.55);outline:5px solid #fff;background-color:rgba(var(--rgb-inactive), 0.5)}.nano-color.sc-nano-range-h .range-bar-active.sc-nano-range,.nano-color.sc-nano-range-h .range-knob.sc-nano-range,.nano-color.sc-nano-range-h .range-pin.sc-nano-range,.nano-color.sc-nano-range-h .range-pin.sc-nano-range::before,.nano-color.sc-nano-range-h .range-tick.sc-nano-range{background:var(--nano-color-base);color:var(--nano-color-contrast)}.nano-color.sc-nano-range-h .range-bar.sc-nano-range{background:rgba(var(--nano-color-base-rgb), 0.26)}.nano-color.sc-nano-range-h .range-knob-handle.sc-nano-range:active .range-knob.sc-nano-range,.nano-color.sc-nano-range-h .range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{-webkit-box-shadow:var(--knob-box-shadow), 0 0 0 5px rgba(var(--nano-color-tint-rgb), 0.56);box-shadow:var(--knob-box-shadow), 0 0 0 5px rgba(var(--nano-color-tint-rgb), 0.56)}';var Range=function(){function r(r){var e=this;registerInstance(this,r);this.nanoChange=createEvent(this,"nanoChange",7);this.nanoStyle=createEvent(this,"nanoStyle",7);this.nanoFocus=createEvent(this,"nanoFocus",7);this.nanoBlur=createEvent(this,"nanoBlur",7);this.noUpdate=false;this.hasFocus=false;this.ratioA=0;this.ratioB=0;this.debounce=0;this.name="";this.dualKnobs=false;this.min=0;this.max=100;this.pin=false;this.snaps=false;this.step=1;this.ticks=false;this.disabled=false;this.value=0;this.clampBounds=function(r){return clamp(e.min,r,e.max)};this.ensureValueInBounds=function(r){if(e.dualKnobs){return{lower:e.clampBounds(r.lower),upper:e.clampBounds(r.upper)}}else{return e.clampBounds(r)}};this.handleKeyboard=function(r,n){var a=e.step;a=a>0?a:1;a=a/(e.max-e.min);if(!n){a*=-1}if(r==="A"){e.ratioA=clamp(0,e.ratioA+a,1)}else{e.ratioB=clamp(0,e.ratioB+a,1)}e.updateValue()};this.onBlur=function(){if(e.hasFocus){e.hasFocus=false;e.nanoBlur.emit();e.emitStyle()}};this.onFocus=function(){if(!e.hasFocus){e.hasFocus=true;e.nanoFocus.emit();e.emitStyle()}}}r.prototype.debounceChanged=function(){this.nanoChange=debounceEvent(this.nanoChange,this.debounce)};r.prototype.minChanged=function(){if(!this.noUpdate){this.updateRatio()}};r.prototype.maxChanged=function(){if(!this.noUpdate){this.updateRatio()}};r.prototype.disabledChanged=function(){if(this.gesture){this.gesture.enable(!this.disabled)}this.emitStyle()};r.prototype.valueChanged=function(r){if(!this.noUpdate){this.updateRatio()}r=this.ensureValueInBounds(r);this.nanoChange.emit({value:r})};r.prototype.connectedCallback=function(){this.updateRatio();this.debounceChanged();this.disabledChanged()};r.prototype.disconnectedCallback=function(){if(this.gesture){this.gesture.destroy();this.gesture=undefined}};r.prototype.componentDidLoad=function(){return __awaiter(this,void 0,void 0,(function(){var r,e;var n=this;return __generator(this,(function(a){switch(a.label){case 0:r=this.rangeSlider;if(!r)return[3,2];e=this;return[4,import("./index-612f2729.js")];case 1:e.gesture=a.sent().createGesture({el:r,gestureName:"range",gesturePriority:100,threshold:0,onStart:function(r){return n.onStart(r)},onMove:function(r){return n.onMove(r)},onEnd:function(r){return n.onEnd(r)}});this.gesture.enable(!this.disabled);a.label=2;case 2:return[2]}}))}))};r.prototype.getValue=function(){var r=this.value||0;if(this.dualKnobs){if(typeof r==="object"){return r}return{lower:0,upper:r}}else{if(typeof r==="object"){return r.upper}return r}};r.prototype.emitStyle=function(){this.nanoStyle.emit({interactive:true,"interactive-disabled":this.disabled})};r.prototype.onStart=function(r){var e=this.rect=this.rangeSlider.getBoundingClientRect();var n=r.currentX;var a=clamp(0,(n-e.left)/e.width,1);if(document.dir==="rtl"){a=1-a}this.pressedKnob=!this.dualKnobs||Math.abs(this.ratioA-a)<Math.abs(this.ratioB-a)?"A":"B";this.setFocus(this.pressedKnob);this.update(n)};r.prototype.onMove=function(r){this.update(r.currentX)};r.prototype.onEnd=function(r){this.update(r.currentX);this.pressedKnob=undefined};r.prototype.update=function(r){var e=this.rect;var n=clamp(0,(r-e.left)/e.width,1);if(document.dir==="rtl"){n=1-n}if(this.snaps){n=valueToRatio(ratioToValue(n,this.min,this.max,this.step),this.min,this.max)}if(this.pressedKnob==="A"){this.ratioA=n}else{this.ratioB=n}this.updateValue()};Object.defineProperty(r.prototype,"valA",{get:function(){return ratioToValue(this.ratioA,this.min,this.max,this.step)},enumerable:false,configurable:true});Object.defineProperty(r.prototype,"valB",{get:function(){return ratioToValue(this.ratioB,this.min,this.max,this.step)},enumerable:false,configurable:true});Object.defineProperty(r.prototype,"ratioLower",{get:function(){if(this.dualKnobs){return Math.min(this.ratioA,this.ratioB)}return 0},enumerable:false,configurable:true});Object.defineProperty(r.prototype,"ratioUpper",{get:function(){if(this.dualKnobs){return Math.max(this.ratioA,this.ratioB)}return this.ratioA},enumerable:false,configurable:true});r.prototype.updateRatio=function(){var r=this.getValue();var e=this,n=e.min,a=e.max;if(this.dualKnobs){this.ratioA=valueToRatio(r.lower,n,a);this.ratioB=valueToRatio(r.upper,n,a)}else{this.ratioA=valueToRatio(r,n,a)}};r.prototype.updateValue=function(){this.noUpdate=true;var r=this,e=r.valA,n=r.valB;this.value=!this.dualKnobs?e:{lower:Math.min(e,n),upper:Math.max(e,n)};this.noUpdate=false};r.prototype.setFocus=function(r){if(this.el.shadowRoot){var e=this.el.shadowRoot.querySelector(r==="A"?".range-knob-a":".range-knob-b");if(e){e.focus()}}};r.prototype.render=function(){var r;var e=this;var n=this,a=n.min,t=n.max,o=n.step,i=n.el,s=n.handleKeyboard,c=n.pressedKnob,l=n.disabled,b=n.pin,d=n.ratioLower,g=n.ratioUpper;var u=d*100+"%";var p=100-g*100+"%";var f=document;var m=f.dir==="rtl";var v=m?"right":"left";var k=m?"left":"right";var w=function(r){var e;return e={},e[v]=r[v],e};var x=(r={},r[v]=u,r[k]=p,r);var y=[];if(this.snaps&&this.ticks){for(var z=a;z<=t;z+=o){var B=valueToRatio(z,a,t);var A={ratio:B,active:B>=d&&B<=g};A[v]=B*100+"%";y.push(A)}}renderHiddenInput(true,i,this.name,JSON.stringify(this.getValue()),l);return h(Host,{onFocusin:this.onFocus,onFocusout:this.onBlur,class:createColorClasses(this.color,{"range-disabled":l,"range-pressed":c!==undefined,"range-has-pin":b,"range-snaps":this.snaps})},h("div",{class:"range-wrap"},h("slot",{name:"start"}),h("div",{class:"range-slider",ref:function(r){return e.rangeSlider=r}},y.map((function(r){return h("span",{style:w(r),role:"presentation",class:{"range-tick":true,"range-tick-active":r.active},part:r.active?"tick-active":"tick"})})),h("div",{class:"range-bar",role:"presentation",part:"bar"}),h("div",{class:"range-bar range-bar-active",role:"presentation",style:x,part:"bar-active"}),renderKnob(m,{knob:"A",pressed:c==="A",value:this.valA,ratio:this.ratioA,pin:b,disabled:l,handleKeyboard:s,min:a,max:t}),this.dualKnobs&&renderKnob(m,{knob:"B",pressed:c==="B",value:this.valB,ratio:this.ratioB,pin:b,disabled:l,handleKeyboard:s,min:a,max:t})),h("slot",{name:"end"})))};Object.defineProperty(r.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(r,"watchers",{get:function(){return{debounce:["debounceChanged"],min:["minChanged"],max:["maxChanged"],disabled:["disabledChanged"],value:["valueChanged"]}},enumerable:false,configurable:true});return r}();var renderKnob=function(r,e){var n=e.knob,a=e.value,t=e.ratio,o=e.min,i=e.max,s=e.disabled,c=e.pressed,l=e.pin,b=e.handleKeyboard;var d=r?"right":"left";var g=function(){var r={};r[d]=t*100+"%";return r};return h("div",{onKeyDown:function(r){var e=r.key;if(e==="ArrowLeft"||e==="ArrowDown"){b(n,false);r.preventDefault();r.stopPropagation()}else if(e==="ArrowRight"||e==="ArrowUp"){b(n,true);r.preventDefault();r.stopPropagation()}},class:{"range-knob-handle":true,"range-knob-a":n==="A","range-knob-b":n==="B","range-knob-pressed":c,"range-knob-min":a===o,"range-knob-max":a===i},style:g(),role:"slider",tabindex:s?-1:0,"aria-valuemin":o,"aria-valuemax":i,"aria-disabled":s?"true":null,"aria-valuenow":a},l&&h("div",{class:"range-pin",role:"presentation",part:"pin"},Math.round(a)),h("div",{class:"range-knob",role:"presentation",part:"knob"}))};var ratioToValue=function(r,e,n,a){var t=(n-e)*r;if(a>0){t=Math.round(t/a)*a+e}return clamp(e,t,n)};var valueToRatio=function(r,e,n){return clamp(0,(r-e)/(n-e),1)};Range.style=rangeCss;export{Range as nano_range};
 //# sourceMappingURL=nano-range.entry.js.map