@nanoporetech-digital/components 2.7.0 → 2.8.0

package/dist/nano-components/{p-894d6967.entry.js.map → p-f79c3ea0.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","[object Object]","hostRef","this","hasSecondarySlot","hasAnchorEle","didBlur","animating","didOpen","isInGlobalNav","isInMenuDrawer","isInMenu","isLegacy","document","head","attachShadow","hasFocus","href","target","disabled","open","selected","secondaryActiveWidth","secondaryFallback","closeOnBlur","notification","closeSecondary","async","nanoClosing","emit","secondaryMenu","secondaryDiv","status","displayTransition","openSecondary","window","innerWidth","call","nanoOpening","toggleSecondary","handleFocus","nanoFocus","handleHostBlur","el","removeAttribute","nanoBlur","handleHostClick","ev","foundlink","closest","btn","click","handleMouseEnter","globalNavEle","classList","contains","timeToWait","getSiblings","length","clearTimeout","waitHide","fromHover","waitShow","setTimeout","handleMouseLeave","handleClick","_a","querySelector","blur","relatedTarget","foundThisNavEle","focus","preventScroll","removeEventListener","nanoClose","panelio","IntersectionObserver","data","boundingClientRect","top","scrollIntoView","behavior","disconnect","threshold","observe","addEventListener","tabIndex","nanoOpen","found","parentElement","secondaryEle","link","getDirectChildren","h","Host","class","has-secondary","secondary-open","has-focus","nano-global-nav","nano-menu-drawer","nano-menu","legacy","onBlur","dir","ownerDocument","onMouseEnter","onMouseLeave","onClick","role","nav-item","ref","a","onFocus","name","div","tabindex","selectCss","selectIds","Select","valueItems","selectId","rtl","onInit","currInsertIndex","showErrorMsg","errorMessage","hasLabelSlot","hasHelperSlot","inputSearchVal","_invalid","autofocus","validateOn","showInlineError","hideLabel","floatLabel","multiple","readonly","required","allowCustomValues","_value","_options","_eOptions","clearSelect","mask","debounce","dropDownConfig","customValidate","nativeSelect","setCustomValidity","valArray","isValidValues","max","min","showInlineValidation","validity","valid","validationMessage","nanoValidate","isValid","invalid","originalEvent","handleInvalid","preventDefault","_","setValue","e","value","detail","inputCtrl","includes","slice","removeValue","toFind","filter","val","setFocus","setOptions","datalist","activeOptions","map","ao","label","filterMeta","handleDocumentKeyDown","rm","key","previousElementSibling","dataset","nextElementSibling","previousSibling","nextSibling","event","Event","dispatchEvent","clearSelectValue","stopPropagation","onDragStart","ele","dragVal","onDragEnd","onDragLeave","spanVal","to","indexOf","from","tmpArr","tmpVal","onMultiInput","trim","nanoSearchChange","selectWrap","_selectWrap","setDataListOpts","_datalist","split","Array","isArray","options","opts","opt","debounceEvent","shouldValidate","nanoChange","currDWConfig","Object","assign","tetherTo","input","validateFirst","Promise","resolve","message","find","mo","MutationObserver","processSlottedContent","childList","subtree","querySelectorAll","console","warn","kev","raf","getActiveElement","closestElement","tagName","toLowerCase","debounceChanged","CustomEvent","slotChangeObserver","labelId","moreId","compWrapOptions","placeholder","wrapOptions","hasValue","controlId","controlOptions","clearControl","type","aria-disabled","createColorClasses","color","has-value","is-invalid","has-label","has-float-label","has-multiple","has-clr-btn","masked","FormControlWrap","FormControl","onClearText","control","endValueSlot","slot","multipleValues","getLabel","id","aria-labelledby","form","readOnly","onNanoOptionsUpdated","onNanoSelect","onNanoDeselect","undefined","select","onInvalid","autoFocus","autocomplete","onKeyDown","onInput","onTouchStart","onMouseDown","i","toReturn","onDragOver","draggable","data-value","span","push","onTouchEnd","onMouseUp"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  // These can be overwritten, but are autatically set from context components\n\n  // --padding-top: inherit;\n  // --padding-bottom: inherit;\n  // --padding-start: inherit;\n  // --padding-end: inherit;\n  // --margin: inherit;\n\n  // --secondary-padding-top: inherit;\n  // --secondary-padding-bottom: inherit;\n  // --secondary-padding-start: inherit;\n  // --secondary-padding-end: inherit;\n\n  // --border-bottom: inherit;\n  // --icon-size: inherit;\n\n  // --color: inherit;\n  // --color-hover: inherit;\n  // --color-focus: inherit;\n  // --color-selected: inherit;\n  // --color-open: inherit;\n\n  // --bg-color: inherit;\n  // --bg-color-hover: inherit;\n  // --bg-color-selected: inherit;\n  // --bg-color-open: inherit;\n  // --bg-color-focus: inherit;\n\n  // --secondary-bg-color: inherit;\n  // --secondary-color: inherit;\n\n  opacity: inherit;\n  display: block;\n  color: var(--color) !important;\n  margin: var(--margin);\n\n  ::slotted(*),\n  * {\n    box-sizing: border-box;\n  }\n\n  ::slotted(button),\n  button {\n    background: none;\n    border: none;\n    margin: 0;\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    font-stretch: expanded;\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    font-stretch: expanded;\n\n    &::before {\n      content: '';\n      background: rgb(134, 190, 226);\n      height: 3px;\n      left: 0;\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  .notification {\n    position: relative;\n\n    &::after {\n      content: '';\n      display: block;\n      position: absolute;\n      width: 6px;\n      height: 6px;\n      background-color: #ef4135;\n      inset-inline-start: 10px;\n      top: 7px;\n      border-radius: 50%;\n\n      @media (min-width: 52em) {\n        width: 7px;\n        height: 7px;\n        inset-inline-start: 8px;\n        top: 5px;\n      }\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   * Will show an indicator badge - only when placed in a nano-menu-draw\n   */\n  @Prop() notification: boolean = false;\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              class={{\n                notification: this.notification,\n              }}\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              class={{\n                notification: this.notification,\n              }}\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  * {\n    pointer-events: none !important;\n  }\n}\n\nselect {\n  display: none;\n}\n\n.select__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  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n  cursor: default;\n  line-height: 2.5em;\n  min-height: 2.5em;\n\n  .has-float-label & {\n    line-height: 2.1em;\n    min-height: 2.1em;\n    padding-top: 1.4em;\n  }\n\n  &::selection {\n    background: transparent;\n  }\n\n  &::-moz-selection {\n    background: transparent;\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: inherit;\n    min-height: inherit;\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  .form-ctrl__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.textarea & {\n    padding-top: 1.8em;\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.1em;\n  min-height: 2.1em;\n}\n\n// multi stuff\n\n.select__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.6em - 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    margin-top: 5px;\n    margin-inline-start: var(--padding-start);\n    margin-inline-end: -3px;\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.2em 0.5em;\n    line-height: 1;\n    max-width: 100%;\n    display: flex;\n    align-items: center;\n    font-size: var(--input-font-size);\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.2;\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.form-ctrl__float-label {\n  :host(.has-focus.has-multiple) & {\n    transform: translateY(-110%);\n    font-size: 0.8em;\n  }\n\n  :host(.has-value.has-multiple) & {\n    transform: translateY(38%);\n    top: 0;\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\n  // we don't want these rendered eles decorated with @State\n  // because that will cause re-renders. Use 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        }}\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=\"select__multi-wrap select\">\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=\"select__native-input\"\n                ref={(input) => (this.inputCtrl = input)}\n                aria-labelledby={labelId + ' ' + moreId}\n                disabled={this.disabled}\n                form={this.form}\n                placeholder={this.placeholder}\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=\"select__native-ctrl\"\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=\"select__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.value.length ? this.placeholder : ''\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=\"select__multi-value\"\n        >\n          <span>{this.getLabel(val)}</span>\n          <button\n            class=\"select__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"]}
+{"version":3,"sources":["src/components/nav-item/nav-item.scss?tag=nano-nav-item&encapsulation=shadow","src/components/nav-item/nav-item.tsx","src/components/select/select.scss?tag=nano-select&encapsulation=scoped","src/components/select/select.tsx"],"names":["navItemCss","NavItem","[object Object]","hostRef","this","hasSecondarySlot","hasAnchorEle","didBlur","animating","didOpen","isInGlobalNav","isInMenuDrawer","isInMenu","isLegacy","document","head","attachShadow","hasFocus","href","target","disabled","open","selected","secondaryActiveWidth","secondaryFallback","closeOnBlur","notification","closeSecondary","async","nanoClosing","emit","secondaryMenu","secondaryDiv","status","displayTransition","openSecondary","window","innerWidth","call","nanoOpening","toggleSecondary","handleFocus","nanoFocus","handleHostBlur","el","removeAttribute","nanoBlur","handleHostClick","ev","foundlink","closest","btn","click","handleMouseEnter","globalNavEle","classList","contains","timeToWait","getSiblings","length","clearTimeout","waitHide","fromHover","waitShow","setTimeout","handleMouseLeave","handleClick","_a","querySelector","blur","relatedTarget","foundThisNavEle","focus","preventScroll","removeEventListener","nanoClose","panelio","IntersectionObserver","data","boundingClientRect","top","scrollIntoView","behavior","disconnect","threshold","observe","addEventListener","tabIndex","nanoOpen","found","parentElement","secondaryEle","link","getDirectChildren","h","Host","class","has-secondary","secondary-open","has-focus","nano-global-nav","nano-menu-drawer","nano-menu","legacy","onBlur","dir","ownerDocument","onMouseEnter","onMouseLeave","onClick","role","nav-item","ref","a","onFocus","name","div","tabindex","selectCss","selectIds","Select","valueItems","selectId","rtl","onInit","currInsertIndex","showErrorMsg","errorMessage","hasLabelSlot","hasHelperSlot","inputSearchVal","_invalid","autofocus","validateOn","showInlineError","hideLabel","floatLabel","multiple","readonly","required","allowCustomValues","_value","_options","_eOptions","clearSelect","mask","debounce","dropDownConfig","customValidate","nativeSelect","setCustomValidity","valArray","isValidValues","max","min","showInlineValidation","validity","valid","validationMessage","nanoValidate","isValid","invalid","originalEvent","handleInvalid","preventDefault","_","setValue","e","value","detail","inputCtrl","includes","slice","removeValue","toFind","filter","val","setFocus","setOptions","datalist","activeOptions","map","ao","label","filterMeta","handleDocumentKeyDown","rm","key","previousElementSibling","dataset","nextElementSibling","previousSibling","nextSibling","event","Event","dispatchEvent","clearSelectValue","stopPropagation","onDragStart","ele","dragVal","onDragEnd","onDragLeave","spanVal","to","indexOf","from","tmpArr","tmpVal","onMultiInput","trim","nanoSearchChange","selectWrap","_selectWrap","setDataListOpts","_datalist","split","Array","isArray","options","opts","opt","debounceEvent","shouldValidate","nanoChange","currDWConfig","Object","assign","tetherTo","input","validateFirst","Promise","resolve","message","find","mo","MutationObserver","processSlottedContent","childList","subtree","querySelectorAll","console","warn","kev","raf","getActiveElement","closestElement","tagName","toLowerCase","debounceChanged","CustomEvent","slotChangeObserver","labelId","moreId","compWrapOptions","placeholder","wrapOptions","hasValue","controlId","controlOptions","clearControl","type","aria-disabled","createColorClasses","color","has-value","is-invalid","has-label","has-float-label","has-multiple","has-clr-btn","masked","FormControlWrap","FormControl","onClearText","control","endValueSlot","slot","multipleValues","getLabel","id","aria-labelledby","form","readOnly","onNanoOptionsUpdated","onNanoSelect","onNanoDeselect","undefined","select","onInvalid","autoFocus","autocomplete","onKeyDown","onInput","onTouchStart","onMouseDown","i","toReturn","onDragOver","draggable","data-value","span","push","onTouchEnd","onMouseUp"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  // These can be overwritten, but are autatically set from context components\n\n  // --padding-top: inherit;\n  // --padding-bottom: inherit;\n  // --padding-start: inherit;\n  // --padding-end: inherit;\n  // --margin: inherit;\n\n  // --secondary-padding-top: inherit;\n  // --secondary-padding-bottom: inherit;\n  // --secondary-padding-start: inherit;\n  // --secondary-padding-end: inherit;\n\n  // --border-bottom: inherit;\n  // --icon-size: inherit;\n\n  // --color: inherit;\n  // --color-hover: inherit;\n  // --color-focus: inherit;\n  // --color-selected: inherit;\n  // --color-open: inherit;\n\n  // --bg-color: inherit;\n  // --bg-color-hover: inherit;\n  // --bg-color-selected: inherit;\n  // --bg-color-open: inherit;\n  // --bg-color-focus: inherit;\n\n  // --secondary-bg-color: inherit;\n  // --secondary-color: inherit;\n\n  opacity: inherit;\n  display: block;\n  color: var(--color) !important;\n  margin: var(--margin);\n\n  ::slotted(*),\n  * {\n    box-sizing: border-box;\n  }\n\n  ::slotted(button),\n  button {\n    background: none;\n    border: none;\n    margin: 0;\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    font-stretch: expanded;\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    font-stretch: expanded;\n\n    &::before {\n      content: '';\n      background: rgb(134, 190, 226);\n      height: 3px;\n      left: 0;\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  .notification {\n    position: relative;\n\n    &::after {\n      content: '';\n      display: block;\n      position: absolute;\n      width: 6px;\n      height: 6px;\n      background-color: #ef4135;\n      inset-inline-start: 10px;\n      top: 7px;\n      border-radius: 50%;\n\n      @media (min-width: 52em) {\n        width: 7px;\n        height: 7px;\n        inset-inline-start: 8px;\n        top: 5px;\n      }\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   * Will show an indicator badge - only when placed in a nano-menu-draw\n   */\n  @Prop() notification: boolean = false;\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              class={{\n                notification: this.notification,\n              }}\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              class={{\n                notification: this.notification,\n              }}\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  * {\n    pointer-events: none !important;\n  }\n}\n\nselect {\n  display: none;\n}\n\n.select__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  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n  cursor: default;\n  line-height: 2.5em;\n  min-height: 2.5em;\n\n  .has-float-label & {\n    line-height: 2.1em;\n    min-height: 2.1em;\n    padding-top: 1.4em;\n  }\n\n  &::selection {\n    background: transparent;\n  }\n\n  &::-moz-selection {\n    background: transparent;\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: inherit;\n    min-height: inherit;\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  .form-ctrl__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.textarea & {\n    padding-top: 1.8em;\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.select__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.6em - 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    margin-top: 5px;\n    margin-inline-start: var(--padding-start);\n    margin-inline-end: -3px;\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.2em 0.5em;\n    line-height: 1;\n    max-width: 100%;\n    display: flex;\n    align-items: center;\n    font-size: var(--input-font-size);\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.2;\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.form-ctrl__float-label {\n  :host(.has-focus.has-multiple) & {\n    transform: translateY(-110%);\n    font-size: 0.8em;\n  }\n\n  :host(.has-value.has-multiple) & {\n    transform: translateY(38%);\n    top: 0;\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\n  // we don't want these rendered eles decorated with @State\n  // because that will cause re-renders. Use 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        }}\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=\"select__multi-wrap select\">\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=\"select__native-input\"\n                ref={(input) => (this.inputCtrl = input)}\n                aria-labelledby={labelId + ' ' + moreId}\n                disabled={this.disabled}\n                form={this.form}\n                placeholder={this.placeholder}\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=\"select__native-ctrl\"\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=\"select__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.value.length ? this.placeholder : ''\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=\"select__multi-value\"\n        >\n          <span>{this.getLabel(val)}</span>\n          <button\n            class=\"select__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/types/components/global-nav/global-nav.d.ts

@@ -75,9 +75,16 @@ export declare class GlobalNav implements ComponentInterface {
   private el;
   /**
    * Connect to local, dev, test or prod MyAccount
-   * environments to retrieve global nav / sso data
+   * environments to retrieve global nav / sso data.
+   * Alternatively, you can use the `ssoDataUrl` prop.
    */
-  env: 'local' | 'dev' | 'test' | 'prod';
+  env?: 'local' | 'dev' | 'test' | 'prod';
+  /**
+   * A base url to retrieve global nav / sso data.
+   * `nav_bar_data.json` will be appended to this url.
+   * An alternative to the pre-defined `env` urls
+   */
+  ssoDataUrl?: string;
   /**
    * Where to take user after SSO login
    */
@@ -171,6 +178,7 @@ export declare class GlobalNav implements ComponentInterface {
    * Submit the search form (a search value must be present)
    */
   submitSearch(): Promise<void>;
+  getMyAccData(): Promise<void>;
   currentSelectedIndex(): SearchIndex;
   changeInternalSearchVal(): void;
   initAlgoliaClient(): void;
@@ -248,7 +256,6 @@ export declare class GlobalNav implements ComponentInterface {
   render(): any;
   private domainFor;
   private processSearchResults;
-  private getMyAccData;
   private processMyAccData;
   private processMyAccLinks;
 }

package/dist/types/components.d.ts

@@ -808,9 +808,9 @@ export namespace Components {
          */
         "cartUrl": string;
         /**
-          * Connect to local, dev, test or prod MyAccount environments to retrieve global nav / sso data
+          * Connect to local, dev, test or prod MyAccount environments to retrieve global nav / sso data. Alternatively, you can use the `ssoDataUrl` prop.
          */
-        "env": 'local' | 'dev' | 'test' | 'prod';
+        "env"?: 'local' | 'dev' | 'test' | 'prod';
         /**
           * Whether to attempt to get global nav / sso data from MyAccount
          */
@@ -868,6 +868,10 @@ export namespace Components {
           * Whether to show search functionality
          */
         "showSearch": boolean;
+        /**
+          * A base url to retrieve global nav / sso data. `nav_bar_data.json` will be appended to this url. An alternative to the pre-defined `env` urls
+         */
+        "ssoDataUrl"?: string;
         /**
           * Where to take user after SSO login
          */
@@ -3069,7 +3073,7 @@ declare namespace LocalJSX {
          */
         "cartUrl"?: string;
         /**
-          * Connect to local, dev, test or prod MyAccount environments to retrieve global nav / sso data
+          * Connect to local, dev, test or prod MyAccount environments to retrieve global nav / sso data. Alternatively, you can use the `ssoDataUrl` prop.
          */
         "env"?: 'local' | 'dev' | 'test' | 'prod';
         /**
@@ -3145,6 +3149,10 @@ declare namespace LocalJSX {
           * Whether to show search functionality
          */
         "showSearch"?: boolean;
+        /**
+          * A base url to retrieve global nav / sso data. `nav_bar_data.json` will be appended to this url. An alternative to the pre-defined `env` urls
+         */
+        "ssoDataUrl"?: string;
         /**
           * Where to take user after SSO login
          */

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2022-06-06T15:41:19",
+  "timestamp": "2022-06-07T11:55:03",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.12.2",
@@ -5898,7 +5898,7 @@
           "mutable": false,
           "attr": "env",
           "reflectToAttr": false,
-          "docs": "Connect to local, dev, test or prod MyAccount\nenvironments to retrieve global nav / sso data",
+          "docs": "Connect to local, dev, test or prod MyAccount\nenvironments to retrieve global nav / sso data.\nAlternatively, you can use the `ssoDataUrl` prop.",
           "docsTags": [],
           "default": "'prod'",
           "values": [
@@ -5919,7 +5919,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false,
           "getter": false,
           "setter": false
@@ -6148,6 +6148,24 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "ssoDataUrl",
+          "type": "string",
+          "mutable": false,
+          "attr": "sso-data-url",
+          "reflectToAttr": false,
+          "docs": "A base url to retrieve global nav / sso data.\n`nav_bar_data.json` will be appended to this url.\nAn alternative to the pre-defined `env` urls",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "ssoRedirect",
           "type": "string",

package/docs-vscode.json

@@ -1148,7 +1148,7 @@
         },
         {
           "name": "env",
-          "description": "Connect to local, dev, test or prod MyAccount\nenvironments to retrieve global nav / sso data",
+          "description": "Connect to local, dev, test or prod MyAccount\nenvironments to retrieve global nav / sso data.\nAlternatively, you can use the `ssoDataUrl` prop.",
           "values": [
             {
               "name": "dev"
@@ -1204,6 +1204,10 @@
           "name": "show-search",
           "description": "Whether to show search functionality"
         },
+        {
+          "name": "sso-data-url",
+          "description": "A base url to retrieve global nav / sso data.\n`nav_bar_data.json` will be appended to this url.\nAn alternative to the pre-defined `env` urls"
+        },
         {
           "name": "sso-redirect",
           "description": "Where to take user after SSO login"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "repository": {
     "type": "git",
     "url": "https://git.oxfordnanolabs.local/Digital/nano-components"
@@ -127,5 +127,5 @@
   "peerDependencies": {
     "@stencil/core": "^2.5.0"
   },
-  "gitHead": "219299cbd1bd259889c341a94bf42d9998786f94"
+  "gitHead": "988c32f7f274729b1fde3b5f0530b72396ca2436"
 }