@nanoporetech-digital/components 1.13.21 → 1.15.0

package/dist/nano-components/p-1ce90ea4.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/nav-item/nav-item.tsx","src/components/nav-item/nav-item.scss?tag=nano-nav-item&encapsulation=shadow","src/components/select/select.tsx","src/components/select/select.scss?tag=nano-select&encapsulation=scoped"],"names":["NavItem","[object Object]","hostRef","this","hasSecondarySlot","hasAnchorEle","didBlur","animating","didOpen","isInGlobalNav","isInMenuDrawer","isInMenu","isLegacy","document","head","attachShadow","hasFocus","href","target","disabled","open","selected","secondaryActiveWidth","secondaryFallback","closeOnBlur","closeSecondary","async","nanoClosing","emit","secondaryMenu","secondaryDiv","status","displayTransition","openSecondary","window","innerWidth","call","nanoOpening","toggleSecondary","handleFocus","nanoFocus","handleHostBlur","el","removeAttribute","nanoBlur","handleHostClick","ev","closest","btn","click","handleMouseEnter","globalNavEle","classList","contains","timeToWait","getSiblings","length","clearTimeout","waitHide","fromHover","waitShow","setTimeout","handleMouseLeave","handleClick","querySelector","blur","relatedTarget","foundThisNavEle","focus","preventScroll","removeEventListener","panelio","IntersectionObserver","data","boundingClientRect","top","scrollIntoView","behavior","disconnect","threshold","observe","addEventListener","tabIndex","nanoOpen","nanoClose","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","nav-item","ref","a","onFocus","name","div","tabindex","Select","listItems","valueItems","selectId","selectIds","rtl","currLiIndex","inputSearchVal","watchValue","onInit","currInsertIndex","availOpts","showErrorMsg","errorMessage","listOpen","hasLabelSlot","hasHelperSlot","hasIconSlot","invalid","autofocus","validateOn","showInlineError","hideLabel","floatLabel","multiple","readonly","required","allowCustomValues","value","options","clearSelect","mask","debounce","native","customValidate","nativeSelect","setCustomValidity","getNativeValue","isValidValues","max","min","showInlineValidation","validity","valid","validationMessage","nanoValidate","isValid","originalEvent","handleInvalid","preventDefault","onChange","stopPropagation","handleDocumentKeyDown","handleDocumentMouseDown","openList","clearSelectValue","querySelectorAll","forEach","n","remove","setAvailOpts","setFocus","onMultiInputBlur","onDragStart","dragVal","dataset","onDragEnd","onDragLeave","ele","spanVal","includes","to","indexOf","from","tmpArr","tmpVal","onMultiInput","nanoSearchChange","onOptFocus","activeEle","getActiveOpt","add","onHostClick","closestElement","tagName","toLowerCase","rm","key","multiInput","previousElementSibling","removeValue","nextElementSibling","previousSibling","nextSibling","activeElement","selectedItem","testIndex","foundIndex","addValue","debounceEvent","split","setNativeValue","shouldValidate","nanoChange","switchValue","setupMulti","popover","destroy","Popover","selectWrap","multiList","placement","skidding","distance","onTransitionEnd","scrollTop","show","hide","validateFirst","Promise","resolve","message","reportValidity","filter","opt","toFind","strFilter","nsl","Array","map","hasAttribute","selectedIndex","find","val","values","reduce","accumulator","currentValue","slice","Math","foundVal","mo","MutationObserver","mrs","processSlottedContent","childList","subtree","mutations","existingselect","attributes","attr","specified","nodeName","nodeValue","existingLabel","label","innerHTML","legacyOpts","option","push","innerText","children","parentNode","removeChild","addedNodes","node","nanoOpts","debounceChanged","dispatchEvent","CustomEvent","detail","slotChangeObserver","labelId","position","classes","placeholder-as-label","visually-hide","htmlFor","id","moreId","listId","placeholder","unshift","valueMarkup","optionMenu","input","autoFocus","autocomplete","onInput","onTouchStart","onMouseDown","role","aria-labelledby","aria-controls","aria-expanded","aria-required","aria-autocomplete","i","toReturn","draggable","data-value","span","type","onTouchEnd","onMouseUp","aria-disabled","Object","assign","createColorClasses","color","has-value","is-invalid","has-label","has-float-label","has-multiple","multi-list-open","has-clr-btn","masked","renderLabel","native-select-wrap","native-select-wrap--multiple","getLabel","ul","aria-multiselectable","aria-hidden","hidden","multi-select-box","multi-select-box--open","li","optval","aria-selected","isSelected","select","form","onInvalid","size"],"mappings":"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","sourcesContent":["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 {\n  displayTransition,\n  getDirectChildren,\n  getSiblings,\n} from '../../utils/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() href: string = null;\n\n  /**\n   * Target to use for links\n   */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /**\n   * Disable the nav item\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether a secondary menu should be or is currently open\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Whether this menu item is currently 'selected'\n   */\n  @Prop({ reflect: true }) selected: boolean = false;\n\n  /**\n   * Screen pixel width to activate the secondary menu\n   */\n  @Prop() secondaryActiveWidth: number = 0;\n\n  /**\n   * Secondary fallback function for when the secondary menu is no longer active.\n   */\n  @Prop() secondaryFallback = () => {};\n\n  /**\n   * Whether secondary menus should close on blur\n   */\n  @Prop() closeOnBlur: boolean = true;\n\n  /**\n   * Emitted when the nav item closes it's secondary navigation.\n   */\n  @Event() nanoClose!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item opens it's secondary navigation.\n   */\n  @Event() nanoOpen!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item is about to open it's secondary navigation.\n   */\n  @Event() nanoOpening!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item is about to close it's secondary navigation.\n   */\n  @Event() nanoClosing!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the nav item has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the first button or anchor present. Use this method instead of the global\n   * `element.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (!this.btn) return;\n    this.btn.focus();\n  }\n\n  /**\n   * Public open watcher\n   */\n  @Watch('open')\n  openChange() {\n    this.open ? this.openSecondary() : this.closeSecondary();\n  }\n\n  /**\n   * Internal open watcher\n   */\n  @Watch('didOpen')\n  didOpenChange() {\n    if (!this.hasSecondarySlot) return;\n\n    if (!this.didOpen) {\n      /* the secondadry panel is not closing via hover,\n      remove blur events, add focus back to originating button */\n      if (!this.fromHover) {\n        this.btn.removeEventListener('focusout', this.blur);\n        this.secondaryDiv.removeEventListener('focusout', this.blur);\n      }\n      setTimeout(() => {\n        if (!this.fromHover && !this.didBlur)\n          this.btn.focus({ preventScroll: true });\n        this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });\n      }, 50);\n    } else {\n      this.didBlur = false;\n\n      /* the secondadry panel is not opening via hover,\n      scroll content into view, focus on it and add blur events */\n      if (!this.fromHover) {\n        const panelio = new (window as any).IntersectionObserver(\n          (data: IntersectionObserverEntry[]) => {\n            if (data[0].boundingClientRect.top < 0) {\n              this.secondaryDiv.scrollIntoView({\n                behavior: 'smooth',\n              });\n            }\n            panelio.disconnect();\n          },\n          { threshold: 1 }\n        );\n        panelio.observe(this.secondaryDiv);\n        this.secondaryDiv.focus({ preventScroll: true });\n\n        this.btn.addEventListener('focusout', this.blur);\n        this.secondaryDiv.addEventListener('focusout', this.blur);\n        window.addEventListener('blur', this.blur);\n\n        this.el.tabIndex = -1;\n        this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });\n      }\n    }\n  }\n\n  private closeSecondary = async () => {\n    this.open = false;\n    if (!this.hasSecondarySlot || !this.didOpen) return;\n\n    this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });\n    let status = await displayTransition(this.secondaryDiv, 'open', false);\n    this.didOpen = status !== 'hidden';\n  };\n\n  private openSecondary = async () => {\n    if (window.innerWidth < this.secondaryActiveWidth) {\n      this.secondaryFallback.call(this);\n      return;\n    }\n    this.open = true;\n    if (!this.hasSecondarySlot || this.didOpen) return;\n\n    this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });\n    let status = await displayTransition(this.secondaryDiv, 'open', true);\n    this.didOpen = status === 'shown';\n  };\n\n  private toggleSecondary = () => {\n    if (!this.hasSecondarySlot) return;\n    if (this.didOpen) this.closeSecondary();\n    else this.openSecondary();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    // opens secondary panel when activated via hover\n    if (this.href && !this.animating && this.hasSecondarySlot)\n      this.openSecondary();\n    this.nanoFocus.emit();\n  };\n\n  private handleHostBlur = () => {\n    if (this.animating) return;\n\n    // tab index is added to host when secondary panel opens\n    // to return focus after secondary panel closes. Remove now if it was added\n    this.el.removeAttribute('tabindex');\n    this.hasFocus = false;\n    this.nanoBlur.emit();\n  };\n\n  // direct host clicks to internal button\n  private handleHostClick = (ev: MouseEvent) => {\n    if (!this.hasAnchorEle) return;\n    let foundlink = (ev.target as HTMLElement).closest('a, button');\n    if (!foundlink) this.btn.click();\n  };\n\n  // handles secondary menu hover behaviour.\n  private handleMouseEnter = async () => {\n    if (\n      !this.href ||\n      this.animating ||\n      !this.hasSecondarySlot ||\n      (this.globalNavEle && !this.globalNavEle.classList.contains('ready'))\n    )\n      return;\n\n    // if there are sibling secondary panels currently open,\n    // we need to wait before opening otherwise we get unwanted overlapping\n    let timeToWait = 0;\n    if (getSiblings(this.el, '.secondary-open.has-secondary').length)\n      timeToWait = 300;\n\n    clearTimeout(this.waitHide);\n    this.fromHover = true;\n    this.animating = true;\n    this.waitShow = window.setTimeout(\n      async () => await this.openSecondary(),\n      timeToWait\n    );\n    this.animating = false;\n  };\n\n  // handles secondary menu hover-out behaviour.\n  private handleMouseLeave = () => {\n    if (!this.href) return;\n    clearTimeout(this.waitShow);\n    this.fromHover = true;\n    this.animating = true;\n\n    // prevent closing immediately - makes navigating to items within more forgiving\n    this.waitHide = window.setTimeout(\n      async () => await this.closeSecondary(),\n      300\n    );\n    this.animating = false;\n  };\n\n  private handleClick = () => {\n    this.fromHover = false;\n    if (this.hasSecondarySlot) this.toggleSecondary();\n    else this.el.querySelector<HTMLElement>('*').click();\n  };\n\n  // utility to traverse up, to see if element is nested within current nav-item\n  private foundThisNavEle(el: HTMLElement): boolean {\n    let found = el.closest('nano-nav-item');\n    found = found === el ? el.parentElement.closest('nano-nav-item') : found;\n\n    if (!found) return false;\n    if (found === this.el) return true;\n    return this.foundThisNavEle(found);\n  }\n\n  private blur = (ev: FocusEvent) => {\n    if (!this.didOpen || this.animating) return;\n    if (!this.closeOnBlur) return;\n\n    // if event is associated with this element don't close\n    if (ev && ev.relatedTarget) {\n      if (\n        ev.relatedTarget === this.el ||\n        ev.relatedTarget === this.btn ||\n        this.foundThisNavEle(ev.relatedTarget as HTMLElement)\n      ) {\n        this.secondaryDiv.focus({ preventScroll: true });\n        return;\n      }\n    }\n\n    this.btn.removeEventListener('focusout', this.blur);\n    this.secondaryDiv.removeEventListener('focusout', this.blur);\n    window.removeEventListener('blur', this.blur);\n\n    this.didBlur = true;\n\n    this.open = false;\n    if (!ev.relatedTarget)\n      setTimeout(() => {\n        this.el.focus({ preventScroll: true });\n      }, 50);\n  };\n\n  componentWillLoad() {\n    let secondaryEle = this.el.querySelector('[slot=\"secondary\"]');\n    this.hasSecondarySlot = !!secondaryEle;\n\n    let link = getDirectChildren(this.el, 'a, button')[0] as\n      | HTMLAnchorElement\n      | HTMLButtonElement;\n    this.hasAnchorEle = !!link;\n\n    if (link) {\n      this.href = (link as HTMLAnchorElement).href\n        ? (link as HTMLAnchorElement).href\n        : null;\n      this.btn = link;\n      if (this.hasSecondarySlot)\n        this.btn.addEventListener('click', this.toggleSecondary);\n\n      this.btn.addEventListener('focus', this.handleFocus);\n      this.btn.addEventListener('blur', this.handleHostBlur);\n    }\n  }\n\n  connectedCallback() {\n    this.isInGlobalNav = false;\n    this.isInMenuDrawer = false;\n    this.globalNavEle = this.el.closest('nano-global-nav');\n\n    this.isInMenuDrawer = !!this.el.closest('nano-menu-drawer');\n    this.isInMenu = !!this.el.closest('nano-menu');\n    this.isInGlobalNav =\n      this.el.parentElement === this.globalNavEle ||\n      !!this.el.closest('.global-nav');\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'has-secondary': this.hasSecondarySlot,\n          'secondary-open': this.open,\n          selected: this.selected,\n          'has-focus': this.hasFocus,\n          disabled: this.disabled,\n          'nano-global-nav': this.isInGlobalNav,\n          'nano-menu-drawer': this.isInMenuDrawer,\n          'nano-menu': this.isInMenu,\n          legacy: this.isLegacy,\n        }}\n        onBlur={this.handleHostBlur}\n        dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n        onClick={this.handleHostClick}\n      >\n        <div\n          class={{\n            'nav-item': true,\n            'secondary-open': this.open,\n            selected: this.selected,\n          }}\n        >\n          {this.href && !this.hasAnchorEle && !this.disabled && (\n            <a\n              target={this.target}\n              ref={(a) => (this.btn = a)}\n              href={this.href}\n              onFocus={this.handleFocus}\n            >\n              <slot name=\"icon-start\" />\n              <span class=\"text\">\n                <slot />\n              </span>\n              <slot name=\"icon-end\" />\n            </a>\n          )}\n          {((!this.hasAnchorEle && !this.href) || this.disabled) && (\n            <button\n              ref={(btn) => (this.btn = btn)}\n              onClick={this.handleClick}\n              onFocus={this.handleFocus}\n              disabled={this.disabled}\n            >\n              <slot name=\"icon-start\" />\n              <span class=\"text\">\n                <slot />\n              </span>\n              <slot name=\"icon-end\" />\n            </button>\n          )}\n          {this.hasAnchorEle && !this.disabled && (\n            <div class=\"link\">\n              <slot name=\"icon-start\" />\n              <slot />\n              <slot name=\"icon-end\" />\n            </div>\n          )}\n          {this.hasSecondarySlot && !this.disabled && (\n            <div\n              class=\"secondary-menu\"\n              ref={(div) => (this.secondaryDiv = div)}\n              tabindex=\"-1\"\n            >\n              <div class=\"secondary-menu-content\">\n                <slot name=\"secondary\" />\n              </div>\n              <div\n                class=\"secondary-menu-mask\"\n                onClick={this.closeSecondary}\n              ></div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  // --padding-top: inherit;\n  // --padding-bottom: inherit;\n  // --padding-start: inherit;\n  // --padding-end: inherit;\n  // --margin: inherit;\n\n  // --secondary-padding-top: inherit;\n  // --secondary-padding-bottom: inherit;\n  // --secondary-padding-start: inherit;\n  // --secondary-padding-end: inherit;\n\n  // --border-bottom: inherit;\n  // --icon-size: inherit;\n\n  // --color: inherit;\n  // --color-hover: inherit;\n  // --color-focus: inherit;\n  // --color-selected: inherit;\n  // --color-open: inherit;\n\n  // --bg-color: inherit;\n  // --bg-color-hover: inherit;\n  // --bg-color-selected: inherit;\n  // --bg-color-open: inherit;\n  // --bg-color-focus: inherit;\n\n  // --secondary-bg-color: inherit;\n  // --secondary-color: inherit;\n\n  opacity: inherit;\n  display: block;\n  color: var(--color) !important;\n  margin: var(--margin);\n\n  ::slotted(*),\n  * {\n    box-sizing: border-box;\n  }\n\n  ::slotted(button),\n  button {\n    background: none;\n    border: none;\n  }\n\n  ::slotted(button),\n  ::slotted(a),\n  ::slotted(a:visited),\n  button,\n  a,\n  a:visited {\n    @include text-inherit();\n    @include padding(\n      var(--padding-top),\n      var(--padding-end),\n      var(--padding-bottom),\n      var(--padding-start)\n    );\n\n    display: var(--display, block);\n    white-space: nowrap;\n    color: var(--color) !important;\n    background-color: var(--bg-color);\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    @include padding(null, var(--padding-end), null, null);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include padding(null, null, null, var(--padding-start));\n  }\n\n  .link {\n    &::slotted(nano-icon[slot='icon-start']),\n    ::slotted(nano-icon[slot='icon-start']) {\n      @include padding(null, 0, null, var(--padding-start));\n    }\n\n    &::slotted(nano-icon[slot='icon-end']),\n    ::slotted(nano-icon[slot='icon-end']) {\n      @include padding(null, var(--padding-end), null, 0);\n    }\n  }\n\n  .link,\n  button,\n  a {\n    border-bottom: var(--border-bottom);\n    display: flex;\n    align-items: center;\n  }\n\n  .secondary-menu {\n    display: none;\n  }\n\n  ::slotted(a:hover),\n  ::slotted(button:hover),\n  .link:hover,\n  button:hover,\n  a:hover {\n    text-decoration: inherit !important;\n  }\n\n  button:focus,\n  a:focus {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    outline: var(--focus-outline, none);\n  }\n\n  ::slotted(a:focus),\n  ::slotted(button:focus) {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    outline: none;\n  }\n}\n\n.nav-item {\n  &.selected {\n    .link,\n    button,\n    a {\n      color: var(--color-selected, var(--color-open, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-selected,\n          var(--bg-color-open, var(--bg-color))\n        );\n    }\n  }\n\n  &.secondary-open {\n    button,\n    a {\n      color: var(--color-open, var(--color-selected, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-open,\n          var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color)))\n        );\n    }\n  }\n\n  &.disabled {\n    opacity: 0.6;\n\n    button,\n    a {\n      color: var(--color-disabled, var(--color)) !important;\n    }\n  }\n\n  &:not(.nano-menu) {\n    ::slotted(a:hover),\n    ::slotted(button:hover),\n    .link:hover,\n    button:hover,\n    a:hover {\n      color: var(--color-hover, var(--color-hover, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-hover,\n          var(--bg-color-focus, var(--bg-color))\n        );\n    }\n  }\n}\n\n:host(.has-focus) {\n  .link {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    outline: var(--focus-outline, 5px auto -webkit-focus-ring-color);\n  }\n}\n\n:host(.nano-global-nav-menu),\n:host(.nano-menu) {\n  a,\n  a:visited,\n  button,\n  .link {\n    display: flex;\n    justify-content: flex-start;\n    flex-direction: row;\n    align-items: center;\n    color: 'currentColor';\n    text-decoration: inherit;\n    white-space: normal;\n    cursor: pointer;\n    line-height: 1.2;\n    width: 100%;\n  }\n\n  .text {\n    @include padding(null, var(--padding-end), null, 0);\n\n    flex: 1;\n  }\n\n  ::slotted(a),\n  ::slotted(button) {\n    flex: 1;\n  }\n\n  ::slotted(a:focus),\n  ::slotted(button:focus) {\n    box-shadow: none;\n  }\n\n  .secondary-menu {\n    display: none;\n    position: absolute;\n    color: var(--secondary-color, 'currentColor');\n    min-height: 100%;\n    top: 0;\n    left: 0;\n    width: 100%;\n    z-index: 1;\n    opacity: 0;\n    transition: opacity 0.2s ease, transform 0.3s ease;\n    background-color: var(--secondary-bg-color, white);\n    transform: translateX(100%);\n\n    &:focus {\n      outline: none;\n    }\n\n    &.open {\n      opacity: 1;\n      transform: translateX(0);\n      transition: opacity 0.3s ease, transform 0.2s ease;\n    }\n  }\n}\n\n:host(.nano-global-nav-menu) {\n  ::slotted(nano-icon[slot='icon-start']) {\n    @include padding(0, var(--padding-end), 0, 0);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include padding(0, var(--padding-end), 0, 0);\n\n    font-size: 10px;\n    flex: 0 0 10px;\n    pointer-events: none;\n  }\n\n  button,\n  a {\n    ::slotted(nano-icon[slot='icon-end']) {\n      padding: 0;\n    }\n  }\n}\n\n:host(.nano-global-nav-menu[dir='rtl']),\n:host(.nano-menu[dir='rtl']) {\n  .secondary-menu {\n    left: auto;\n    right: 0;\n    transform: translateX(-100%);\n\n    &.open {\n      transform: translateX(0);\n    }\n  }\n}\n\n:host(.nano-menu) {\n  .secondary-menu-content {\n    @include padding(\n      var(--secondary-padding-top),\n      var(--secondary-padding-end),\n      var(--secondary-padding-bottom),\n      var(--secondary-padding-start)\n    );\n  }\n}\n\n// I'm sorry. Horrible IE fixes for collapsing stuff :/\n:host(.nano-global-nav-bar.legacy) {\n  margin: 0 11px;\n\n  ::slotted(a) {\n    @include padding(7px, 6px, 7px, 6px);\n  }\n}\n\n:host(.nano-global-nav-menu.legacy) {\n  ::slotted(a) {\n    @include padding(8px, 12px, 8px, 12px);\n  }\n}\n\n:host(.nano-global-nav-bar) {\n  .link,\n  a,\n  button {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n\n  .text {\n    flex: 1 0 auto;\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include margin(0, 0, 0, var(--padding-end));\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    @include margin(0, var(--padding-start), 0, 0);\n  }\n}\n\n:host(.nano-global-nav-bar.has-secondary) {\n  button {\n    position: relative;\n\n    &::before {\n      content: '';\n      background: rgb(134, 190, 226);\n      height: 3px;\n      left: 5px;\n      bottom: -14px;\n      right: 5px;\n      position: absolute;\n      transform: translateZ(0) scaleX(0);\n      transform-origin: 0;\n      transition: 0.2s ease transform;\n    }\n  }\n\n  .selected button::before,\n  .secondary-open button::before {\n    transform: translateZ(0) scaleX(1);\n  }\n\n  .secondary-open button::before {\n    opacity: 0.5;\n  }\n\n  .secondary-menu {\n    display: none;\n    transition: transform 0.3s ease;\n    transform: translateY(-100%) translateZ(0);\n    background-color: var(--secondary-bg-color, #196c82);\n    color: var(--secondary-color);\n    position: absolute;\n    box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.15);\n    left: 0;\n    right: 0;\n    z-index: -2;\n\n    &.open {\n      transform: translateY(12px) translateZ(0);\n    }\n\n    &:focus {\n      outline: none;\n    }\n  }\n}\n\n:host(.nano-menu-drawer) {\n  .link,\n  a,\n  button {\n    @include padding(\n      calc(var(--padding-top) / 2),\n      0,\n      calc(var(--padding-bottom) / 2),\n      var(--padding-start)\n    );\n\n    display: flex;\n    justify-content: flex-start;\n    flex-direction: row;\n    align-items: center;\n    color: currentColor;\n    text-decoration: inherit;\n    white-space: normal;\n    border: none;\n    cursor: pointer;\n    line-height: 1.2;\n    width: 100%;\n  }\n\n  .text {\n    @include padding(null, var(--padding-end), null, 0);\n\n    text-align: left;\n    flex: 0 1 auto;\n    min-width: 130px;\n    width: 130px;\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    @include padding(0, var(--padding-end), 0, 0);\n\n    font-size: var(--icon-size);\n    width: var(--icon-size);\n    flex: 0 0 var(--icon-size);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include padding(0, var(--padding-end), 0, 0);\n\n    font-size: 10px;\n    flex: 0 0 20px;\n    min-width: 20px;\n  }\n\n  .secondary-menu {\n    display: none;\n    position: absolute;\n    background-color: var(--secondary-bg-color);\n    color: var(--secondary-color);\n    height: 100vh;\n    top: 0;\n    right: 0;\n    left: auto;\n    bottom: 0;\n    transform: translateX(0);\n    z-index: -1;\n    transition: transform 0.3s ease, opacity 0.2s ease;\n    overflow-y: auto;\n    width: var(--secondary-width, 400px);\n    max-width: 62vw;\n    opacity: 1;\n\n    @include padding(\n      var(--secondary-padding-top, var(--padding-top)),\n      var(--secondary-padding-end, var(--padding-end)),\n      var(--secondary-padding-bottom, var(--padding-bottom)),\n      var(--secondary-padding-start, var(--padding-start))\n    );\n\n    &:focus {\n      outline: none;\n    }\n\n    &.open {\n      transform: translateX(100%);\n      // opacity: 1;\n    }\n  }\n}\n\n:host(.nano-menu-drawer.legacy) {\n  .link,\n  a,\n  button {\n    width: auto;\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include padding(0, calc(var(--padding-end) * 2), 0, 0);\n\n    font-size: 10px;\n    flex: 0 0 20px;\n    min-width: 20px;\n  }\n}\n\n:host(.nano-menu-drawer[dir='rtl']) {\n  .text {\n    text-align: right;\n  }\n\n  .secondary-menu {\n    right: auto;\n    left: 0;\n    transform: translateX(0%);\n\n    &.open {\n      transform: translateX(-100%);\n      opacity: 1;\n    }\n  }\n}\n","import {\n  Build,\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n} from '@stencil/core';\n\nimport {\n  Color,\n  SelectChangeEventDetail,\n  InputChangeEventDetail,\n  CssClassMap,\n  ControlValidityEventDetail,\n  ControlValidity,\n} from '../../interface';\nimport {\n  testLegacyStyle,\n  debounceEvent,\n  closestElement,\n  createColorClasses,\n} from '../../utils/utils';\nimport Popover from '../../utils/popover';\n\n/**\n * The select component is a wrapper to the HTML select element with custom styling and additional functionality.\n * It accepts most of the same properties as the HTML [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).\n * It's multi selection functionality is vastly improved from the native solution. It allows for the control of\n * value order through drag and drop or changing the insertion point with arrow keys. It also can allow for user defined values.\n *\n * @slot label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot legacy - you can use this slot to wrap any old select / labels / options. This will set appropriate defaults for the nano-select\n */\n@Component({\n  tag: 'nano-select',\n  styleUrl: 'select.scss',\n  scoped: true,\n})\nexport class Select implements ComponentInterface {\n  private nativeSelect?: HTMLSelectElement;\n  private multiInput?: HTMLInputElement;\n  private multiList?: HTMLUListElement;\n  private selectWrap?: HTMLDivElement;\n  private listItems: Array<HTMLLIElement> = [];\n  private valueItems: Array<HTMLSpanElement> = [];\n  private dragVal: string;\n  private mo?: MutationObserver;\n  private popover: Popover;\n\n  private selectId = `nano-select-${selectIds++}`;\n  private rtl: boolean = false;\n  private currLiIndex: number = -1;\n  private inputSearchVal: string = '';\n  private watchValue: boolean = true;\n  private onInit: boolean = true;\n\n  @State() currInsertIndex: number = 0;\n  @State() availOpts = [];\n  @State() showErrorMsg = false;\n  @State() errorMessage: string = '';\n  @State() hasFocus = false;\n  @State() listOpen = false;\n  @State() isLegacy: boolean = 'registerElement' in document;\n  @State() hasLabelSlot: boolean = false;\n  @State() hasHelperSlot: boolean = false;\n  @State() hasIconSlot: boolean = false;\n\n  @Element() el!: HTMLNanoSelectElement;\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set.\n   */\n  @Prop({ mutable: true, reflect: true }) invalid = false;\n\n  /**\n   * The color to use from your application's color palette.\n   * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have select focus when the page loads.\n   */\n  @Prop() autofocus = false;\n\n  /**\n   * If `true`, the user cannot interact with the select.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * When should the field perform validation\n   */\n  @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submit';\n\n  /**\n   * Whether to show validation errors underneath input\n   */\n  @Prop({ reflect: true }) showInlineError = true;\n\n  /**\n   * String to place within a label element.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Visually hide the label - but make it accessible.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  /**\n   * Enable floating label behaviour. Will disable placeholder if set.\n   */\n  @Prop() floatLabel: boolean = false;\n\n  /**\n   * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"` or `\"file\"`, otherwise it is ignored.\n   */\n  @Prop() multiple?: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.selectId + '-name';\n\n  /**\n   * Instructional text that shows before the select has a value. Text set here will be placed inside the label when a value is set. If you don't want this behaviour just set the first option to have no value.\n   */\n  @Prop() placeholder?: string | null;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required = false;\n\n  /**\n   * The initial size of the control.\n   */\n  @Prop() size?: number;\n\n  /**\n   * Maximum number of options that can be selected when multiple is true\n   */\n  @Prop() max?: number;\n\n  /**\n   * Minimum number of options that can be selected when multiple is true\n   */\n  @Prop() min?: number;\n\n  /**\n   * The form element to associate the select with (its form owner). Must be the id of a form.\n   */\n  @Prop() form?: string | null;\n\n  /**\n   * in multiple mode, allow users to enter their own values\n   */\n  @Prop() allowCustomValues: boolean = false;\n\n  /**\n   * The value of the select.\n   */\n  @Prop({ mutable: true }) value?: string | Array<string | null> = this.multiple\n    ? []\n    : '';\n\n  /**\n   * You can set options via js. domElement.options = ['option 1', 'option 2'] or [{label: 'option 1', value: 'opt-1'}]\n   */\n  @Prop({ mutable: true }) options: Array<\n    string | { label: string; value?: string }\n  > = [];\n\n  /**\n   * If `true`, a clear icon will appear in the select when there is a value. Clicking it clears the select.\n   */\n  @Prop() clearSelect = false;\n\n  /**\n   * Hide the native select element and cover with a value 'mask'.\n   * Enables a fluid nano-select width upon value change (if required). Doesn't work with multiple=\"true\".\n   */\n  @Prop() mask = false;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait to trigger the `nanoSearchChange` event after each keystroke.\n   */\n  @Prop() debounce = 0;\n\n  /**\n   * Whether to use native <select> elements. Setting to false will use a similar UI as multiple=\"true\"\n   */\n  @Prop() native = true;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.nanoSearchChange = debounceEvent(this.nanoSearchChange, this.debounce);\n  }\n\n  // @Watch('options')\n  @Watch('required')\n  @Watch('disabled')\n  @Watch('min')\n  @Watch('max')\n  @Watch('validateOn')\n  @Watch('readonly')\n  protected shouldValidate() {\n    if (this.onInit) return;\n    if (this.invalid) this.showErrorMsg = this.invalid = false;\n\n    this.customValidate();\n    if (this.validateOn !== 'dirty') return;\n    this.showInlineValidation();\n  }\n\n  /**\n   * Update the native select element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    if (!this.watchValue) return;\n\n    if (this.multiple) {\n      if (typeof this.value === 'string' && !!this.value.length)\n        this.value = this.value.split(',');\n      if (\n        this.value === null ||\n        (typeof this.value === 'string' && !this.value.length)\n      )\n        this.value = [];\n\n      if (this.currInsertIndex > this.value.length - 1)\n        this.currInsertIndex = this.value.length - 1;\n    } else if (typeof this.value !== 'string' && this.value && this.value[0])\n      this.value = this.value[0];\n\n    this.setNativeValue();\n    this.setAvailOpts();\n    setTimeout((_) => this.shouldValidate(), 20);\n    this.nanoChange.emit({ value: this.value });\n\n    if (this.onInit) return;\n  }\n\n  @Watch('options')\n  protected optionsChanged() {\n    this.setAvailOpts();\n    if (this.hasFocus) this.openList();\n  }\n\n  /**\n   * Setup or rip down custom combobox when select is switched from mutliple\n   */\n  @Watch('multiple')\n  protected multiChange() {\n    this.switchValue();\n\n    if (this.multiple) this.setupMulti();\n    else if (this.popover) this.popover.destroy();\n  }\n\n  private setupMulti() {\n    setTimeout(() => {\n      this.setAvailOpts();\n      this.popover = new Popover(this.selectWrap, this.multiList, {\n        placement: 'bottom-start',\n        skidding: 0,\n        distance: 0,\n        onTransitionEnd: () => {\n          if (!this.listOpen) {\n            this.multiList.scrollTop = 0;\n          }\n        },\n      });\n    }, 20);\n  }\n\n  @Watch('listOpen')\n  listOpenChange() {\n    if (this.listOpen) this.popover.show();\n    else this.popover.hide();\n  }\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() nanoChange!: EventEmitter<SelectChangeEventDetail>;\n\n  /**\n   * Emitted when the select loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has been created.\n   * @internal\n   */\n  @Event() nanoDidLoad!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has been removed.\n   * @internal\n   */\n  @Event() nanoDidUnload!: EventEmitter<void>;\n\n  /**\n   * Emitted when a keyboard input occurred on a multiple=\"true\" input\n   */\n  @Event() nanoSearchChange!: EventEmitter<InputChangeEventDetail>;\n\n  /**\n   * Called when validation is performed (which depends on `validateOn`).\n   * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n   */\n  @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `{ isValid: boolean, errorMessage: string }`\n   */\n  @Method()\n  async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n    if (validateFirst) this.showInlineValidation();\n    return {\n      isValid: !this.invalid,\n      errorMessage: this.errorMessage,\n    };\n  }\n\n  /**\n   * Sets focus on the specified `nano-select`. Use this method instead of the global\n   * `select.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (this.nativeSelect && !this.multiple) this.nativeSelect.focus();\n    else if (this.multiInput) this.multiInput.focus();\n  }\n\n  /**\n   * Returns the native `<select>` element used under the hood.\n   */\n  @Method()\n  getSelectElement(): Promise<HTMLSelectElement> {\n    return Promise.resolve(this.nativeSelect!);\n  }\n\n  /**\n   * Invalidate the field and show a custom error message.\n   * To clear the error you will need to re-call this method with an empty string.\n   */\n  @Method()\n  async showError(message: string) {\n    if (this.nativeSelect) {\n      this.nativeSelect.setCustomValidity(message);\n      this.nativeSelect.reportValidity();\n    }\n  }\n\n  /* Logic */\n\n  // sets the available options of a multi select.\n  // Removes ones already selected\n  // Filters one if user starts to search\n  private setAvailOpts() {\n    if (!this.multiple) return;\n\n    this.availOpts = this.options.filter((opt) => {\n      let toFind = typeof opt === 'string' ? opt : opt['value'];\n      let strFilter =\n        typeof opt === 'string' ? opt : opt['label'] || opt['value'];\n\n      if (!toFind) return false;\n      return (\n        !(this.value as Array<string>).includes(toFind) &&\n        (!this.multiInput ||\n          strFilter.toLowerCase().indexOf(this.inputSearchVal.toLowerCase()) >\n            -1)\n      );\n    });\n  }\n\n  private getNativeValue(): string | Array<string> {\n    const nsl = this.nativeSelect;\n    if (!nsl) return '';\n\n    if (!this.multiple)\n      return nsl.options[nsl.selectedIndex] &&\n        nsl.options[nsl.selectedIndex].hasAttribute('value')\n        ? nsl.options[nsl.selectedIndex].value\n        : '';\n    else {\n      return Array.from(nsl.options).map((opt) => {\n        if (opt.selected && opt.hasAttribute('value')) return opt.value;\n      });\n    }\n  }\n\n  private setNativeValue() {\n    const nsl = this.nativeSelect;\n    if (!nsl) return null;\n    if (!this.multiple) nsl.value = this.value as string;\n    else {\n      Array.from(this.nativeSelect.options)\n        .filter((opt) => {\n          if (typeof this.value === 'string') return opt.value === this.value;\n          else\n            return this.value.find((val) => {\n              if (typeof val === 'string') return val === this.value;\n              else if (val['value']) return val === val['value'];\n            });\n        })\n        .map((opt) => {\n          opt.selected = true;\n        });\n    }\n  }\n\n  private isValidValues() {\n    const nsl = this.nativeSelect;\n    if (!nsl) return null;\n\n    const selected = this.nativeSelect.querySelectorAll('option:checked');\n    const values = Array.from(selected).map(\n      (el: HTMLOptionElement) => el.value || null\n    );\n\n    if (this.multiple) {\n      return values.reduce((accumulator, currentValue) => {\n        if (!accumulator) return false;\n        return !!this.options.find((opt) =>\n          opt['value'] ? opt['value'] === currentValue : opt === currentValue\n        );\n      }, true);\n    } else {\n      return this.options.find((opt) =>\n        opt['value'] ? opt['value'] === values[0] : opt === values[0]\n      );\n    }\n  }\n\n  private customValidate = () => {\n    this.nativeSelect.setCustomValidity('');\n\n    // add custom validations 'cos html5 validations are a bit rubbish on selects\n    if (this.required && !this.getNativeValue().length) {\n      this.nativeSelect.setCustomValidity('Please fill in this field.');\n      return true;\n    }\n    if (\n      this.getNativeValue().length &&\n      !this.allowCustomValues &&\n      !this.isValidValues()\n    ) {\n      this.nativeSelect.setCustomValidity(\n        'Please choose an item from this field.'\n      );\n      return true;\n    }\n    if (this.max && this.getNativeValue().length > this.max) {\n      this.nativeSelect.setCustomValidity(\n        `Only up to ${this.max} values are allowed.`\n      );\n      return true;\n    }\n    if (this.min && this.getNativeValue().length < this.min) {\n      this.nativeSelect.setCustomValidity(\n        `You must select a minimum of ${this.min} values.`\n      );\n      return true;\n    }\n    return false;\n  };\n\n  private showInlineValidation = (ev?: Event) => {\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n    this.invalid = false;\n    this.showErrorMsg = false;\n    this.errorMessage = '';\n\n    if (!this.nativeSelect.validity.valid) {\n      this.errorMessage = this.nativeSelect.validationMessage;\n      this.invalid = true;\n      this.showErrorMsg = true;\n    }\n    this.nanoValidate.emit({\n      isValid: !this.invalid,\n      errorMessage: this.errorMessage,\n      originalEvent: ev,\n    });\n  };\n\n  private handleInvalid = (ev: Event) => {\n    this.invalid = true;\n\n    if (this.validateOn === 'submit')\n      this.invalid = this.showErrorMsg = this.customValidate();\n    if (this.showInlineError) ev.preventDefault();\n\n    setTimeout((_) => this.showInlineValidation(ev), 20);\n  };\n\n  private openList() {\n    if (!this.multiple) return;\n    if (\n      (this.availOpts.length ||\n        (!!this.inputSearchVal.length && this.allowCustomValues)) &&\n      (!this.max || (this.max && this.value.length < this.max))\n    )\n      this.listOpen = true;\n    else this.listOpen = false;\n  }\n\n  private addValue(value) {\n    if (!this.multiple) return;\n    if (this.value && this.value.length && this.value.includes(value)) return;\n    if (this.max && this.value.length === this.max) return;\n\n    this.currInsertIndex++;\n    this.value = [\n      ...this.value.slice(0, this.currInsertIndex),\n      value,\n      ...this.value.slice(this.currInsertIndex),\n    ];\n\n    this.inputSearchVal = '';\n\n    this.setAvailOpts();\n\n    this.selectWrap.clientWidth; // force reflow\n    this.setFocus();\n    this.openList();\n  }\n\n  private removeValue(toFind?: string) {\n    if (!this.multiple || !this.value.length) return;\n\n    if (!toFind) toFind = this.value[this.value.length - 1];\n    this.value = (this.value as Array<string>).filter((val) => val !== toFind);\n\n    if (this.currInsertIndex > this.value.length - 1)\n      this.currInsertIndex = this.value.length - 1;\n\n    this.selectWrap.clientWidth; // force reflow\n    this.setFocus();\n    this.openList();\n  }\n\n  private switchValue() {\n    this.watchValue = false;\n    if (this.multiple) {\n      if (typeof this.value === 'string' && !!this.value.length)\n        this.value = this.value.split(',');\n      else this.value = [];\n\n      this.currInsertIndex = Math.max(this.value.length - 1, 0);\n    } else if (typeof this.value !== 'string' && this.value && this.value[0])\n      this.value = this.value[0];\n    this.watchValue = true;\n  }\n\n  private isSelected(value: string) {\n    if (this.multiple)\n      return (this.value as Array<string>).find((val) => val === value);\n    else value === this.value;\n  }\n\n  private getLabel(val: string) {\n    let foundVal = this.options.find((opt) => {\n      return opt['value'] ? opt['value'] === val : opt === val;\n    });\n    if (!foundVal) return null;\n    return foundVal['label'] ? foundVal['label'] : foundVal;\n  }\n\n  private slotChangeObserver() {\n    const mo = (this.mo = new MutationObserver((mrs: MutationRecord[]) =>\n      this.processSlottedContent(mrs)\n    ));\n    mo.observe(this.el, { childList: true, subtree: true });\n  }\n\n  private processSlottedContent(mutations?: MutationRecord[]) {\n    // see if we have label / helper content\n    this.hasLabelSlot = !!this.el.querySelectorAll('[slot=\"label\"]').length;\n    this.hasHelperSlot = !!this.el.querySelector('[slot=\"helper\"]');\n    this.hasIconSlot = !!this.el.querySelector('[slot=\"icon\"]');\n\n    if (!mutations) {\n      // find legacy select. Take attrs and apply to our element\n      let existingselect = this.el.querySelector(\n        'select:not([class*=\"sc-nano-select\"])'\n      );\n      if (existingselect) {\n        Array.from(existingselect.attributes)\n          .filter((attr) => attr.specified && attr.nodeName in this)\n          .map((attr) => (this[attr.nodeName] = attr.nodeValue));\n      }\n\n      // find legacy label. Apply to our element\n      let existingLabel = this.el.querySelector(\n        'label:not([class*=\"sc-nano-select\"])'\n      );\n      if (existingLabel) this.label = this.label || existingLabel.innerHTML;\n\n      // find legacy slotted options. Apply them and add any relevant values\n      let legacyOpts = this.el.querySelectorAll(\n        'option:not([class*=\"sc-nano-select\"])'\n      );\n\n      this.watchValue = false;\n      if (legacyOpts && legacyOpts.length) {\n        let options = [];\n        legacyOpts.forEach((option: HTMLOptionElement) => {\n          options.push({\n            label: option.label || option.innerText,\n            value: option.value,\n          });\n          if (!option.selected || !option.value) return;\n\n          if (this.multiple) (this.value as Array<string>).push(option.value);\n          else this.value = option.value;\n        });\n        this.options = options;\n      }\n\n      if (legacyOpts.length || existingLabel || existingselect) {\n        // empty all legacy slotted stuff\n        let children = this.el.querySelectorAll('[slot=\"legacy\"]');\n        if (children) children.forEach((n) => n.parentNode.removeChild(n));\n      }\n\n      this.watchValue = true;\n    }\n\n    if (\n      mutations &&\n      !Array.from(mutations[0].addedNodes).find(\n        (node) => node.nodeName.toLowerCase() === 'nano-select-option'\n      )\n    )\n      return;\n\n    // find nano-select-options\n    let nanoOpts = this.el.querySelectorAll('nano-select-option');\n\n    if (nanoOpts && nanoOpts.length) {\n      let options = [];\n      nanoOpts.forEach((option: HTMLNanoSelectOptionElement) => {\n        options.push({\n          label: option.label || option.innerText,\n          value: option.value,\n        });\n        if (!option.selected || !option.value) return;\n\n        if (this.multiple) (this.value as Array<string>).push(option.value);\n        else this.value = option.value;\n      });\n      this.options = options;\n    }\n\n    this.setAvailOpts();\n  }\n\n  /* Event handling */\n\n  private onChange = (ev?: Event) => {\n    if (!this.readonly && !this.disabled && ev) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    }\n    this.value = this.getNativeValue();\n  };\n\n  private onBlur = () => {\n    if (this.multiple) {\n      this.currLiIndex = -1;\n      document.removeEventListener('keydown', this.handleDocumentKeyDown);\n      document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n    }\n    this.hasFocus = false;\n\n    setTimeout(() => {\n      if (this.validateOn === 'dirty' && !this.listOpen && !this.hasFocus)\n        this.showInlineValidation();\n    }, 20);\n    this.nanoBlur.emit();\n  };\n\n  private onFocus = () => {\n    if (this.multiple) {\n      this.currLiIndex = -1;\n      document.addEventListener('keydown', this.handleDocumentKeyDown);\n      document.addEventListener('mousedown', this.handleDocumentMouseDown);\n      this.openList();\n    }\n\n    this.hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private clearSelectValue = (ev?: Event) => {\n    if (this.clearSelect && !this.readonly && !this.disabled && ev) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    }\n\n    if (this.multiple) {\n      this.value = [];\n      let options = this.nativeSelect.querySelectorAll('option');\n      if (options.length) options.forEach((n) => n.remove());\n      this.currInsertIndex = -1;\n      this.setAvailOpts();\n    } else this.value = '';\n\n    this.onChange();\n  };\n\n  private onClick = () => {\n    this.setFocus();\n    this.openList();\n  };\n\n  /* Multi event handlers */\n\n  private onMultiInputBlur = () => {\n    if (this.allowCustomValues) return;\n    this.inputSearchVal = '';\n    this.setAvailOpts();\n  };\n\n  private onDragStart = (ev: MouseEvent) => {\n    let ele = ev.target as HTMLSpanElement;\n    this.dragVal = ele.dataset.value;\n  };\n\n  private onDragEnd = (ev) => {\n    this.dragVal = null;\n    ev.preventDefault();\n  };\n\n  private onDragLeave = (ev: MouseEvent) => {\n    let ele = ev.target as HTMLSpanElement;\n    let spanVal: string =\n      ele.dataset && ele.dataset.value ? ele.dataset.value : null;\n\n    if (\n      !spanVal ||\n      this.dragVal === spanVal ||\n      !this.value.includes(this.dragVal)\n    ) {\n      ev.preventDefault();\n      return;\n    }\n\n    let to = this.value.indexOf(spanVal);\n    let from = this.value.indexOf(this.dragVal);\n    let tmpArr = this.value as Array<string>;\n    let tmpVal = tmpArr[to];\n\n    tmpArr[to] = tmpArr[from];\n    tmpArr[from] = tmpVal;\n    this.value = [...tmpArr];\n  };\n\n  private onMultiInput = (ev) => {\n    this.inputSearchVal = ev.target.value;\n    this.setAvailOpts();\n    this.openList();\n    this.nanoSearchChange.emit({ value: ev.target.value });\n  };\n\n  private getActiveOpt() {\n    return this.multiList.querySelector('.has-focus') as HTMLLIElement;\n  }\n\n  private onOptFocus = (ev: FocusEvent) => {\n    let activeEle = this.getActiveOpt();\n    if (activeEle) activeEle.classList.remove('has-focus');\n    (ev.target as HTMLElement).classList.add('has-focus');\n  };\n\n  private onHostClick = () => {\n    setTimeout((_) => {\n      if (!this.multiple || this.hasFocus) return;\n      this.setFocus();\n    }, 20);\n  };\n\n  private handleDocumentMouseDown = (ev: MouseEvent) => {\n    const target = ev.target as HTMLElement;\n    if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {\n      this.listOpen = false;\n      this.onBlur();\n    }\n  };\n\n  private handleDocumentKeyDown = (ev: KeyboardEvent) => {\n    if (!this.multiple) return;\n\n    if (!this.inputSearchVal) {\n      let rm: HTMLSpanElement;\n\n      switch (ev.key) {\n        case 'Backspace':\n          if (this.multiInput.previousElementSibling)\n            rm = this.multiInput.previousElementSibling as HTMLSpanElement;\n          else break;\n\n          this.removeValue(rm.dataset.value || null);\n          break;\n\n        case 'Delete':\n          if (this.multiInput.nextElementSibling)\n            rm = this.multiInput.nextElementSibling as HTMLSpanElement;\n          else break;\n\n          this.removeValue(rm.dataset.value || null);\n          break;\n\n        case 'ArrowLeft':\n        case 'ArrowRight':\n          if (!this.value.length) break;\n\n          if (ev.key === 'ArrowLeft' && this.multiInput.previousSibling)\n            this.currInsertIndex--;\n          if (ev.key === 'ArrowRight' && this.multiInput.nextSibling)\n            this.currInsertIndex++;\n\n          setTimeout(() => {\n            this.multiInput.focus();\n          }, 20);\n          ev.preventDefault();\n          break;\n      }\n    }\n\n    // navigated to component via keyboard. Open with down.\n    if (this.hasFocus && !this.listOpen && ev.key === 'ArrowDown') {\n      this.openList();\n      this.currLiIndex = -1;\n    }\n\n    // Close when tabbing outside of element\n    if (this.hasFocus && ev.key === 'Tab') {\n      setTimeout(() => {\n        if (\n          document.activeElement &&\n          closestElement(\n            this.el.tagName.toLowerCase(),\n            document.activeElement\n          ) !== this.el\n        ) {\n          this.listOpen = false;\n          this.onBlur();\n          return;\n        }\n      });\n    }\n\n    // list open, navigate items with arrows\n    if (this.listOpen) {\n      const selectedItem = this.getActiveOpt();\n      let testIndex = this.listItems.indexOf(selectedItem) || this.currLiIndex;\n\n      switch (ev.key) {\n        case 'ArrowDown':\n        case 'ArrowUp':\n          ev.preventDefault();\n\n          if (ev.key === 'ArrowDown') testIndex++;\n          else if (ev.key === 'ArrowUp') testIndex--;\n\n          if (testIndex < 0) {\n            this.currLiIndex = 0;\n            this.multiInput.focus();\n            return;\n          }\n\n          let foundIndex = this.listItems[testIndex]\n            ? testIndex\n            : this.currLiIndex;\n          setTimeout(() => {\n            this.listItems[foundIndex].focus();\n            this.currLiIndex = foundIndex;\n          }, 20);\n          return;\n        case 'Enter':\n        case ' ':\n          if (this.listItems[this.currLiIndex]) {\n            this.addValue(this.listItems[this.currLiIndex].dataset.value);\n            ev.preventDefault();\n          }\n          return;\n        case 'Escape':\n          this.listOpen = false;\n          return;\n      }\n    }\n\n    if (this.currLiIndex > -1) ev.preventDefault();\n  };\n\n  /* Stencil Component lifecycle hooks */\n\n  connectedCallback() {\n    this.debounceChanged();\n\n    if (!Build.isBrowser) return;\n\n    this.el.dispatchEvent(\n      new CustomEvent('nanoDidLoad', {\n        detail: this.el,\n      })\n    );\n    testLegacyStyle(this.el);\n  }\n\n  disconnectedCallback() {\n    document.dispatchEvent(\n      new CustomEvent('nanoDidUnload', {\n        detail: this.el,\n      })\n    );\n\n    if (!Build.isBrowser) return;\n    if (this.mo) this.mo.disconnect();\n    if (this.popover) this.popover.destroy();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n    if (this.multiple) this.setupMulti();\n    this.customValidate();\n  }\n\n  componentWillLoad() {\n    this.switchValue();\n    this.processSlottedContent();\n    this.onInit = false;\n  }\n\n  private renderLabel(labelId: string, position?: 'float') {\n    let classes: CssClassMap = {};\n    if (position === 'float') {\n      classes = { 'placeholder-as-label': true };\n    } else {\n      classes = { label: true, 'visually-hide': this.hideLabel };\n    }\n    if (!this.label && !this.hasLabelSlot) return;\n\n    return (\n      <label class={classes} htmlFor={this.selectId} id={labelId}>\n        {this.label && this.label}\n        {!this.label && !!this.hasLabelSlot && <slot name=\"label\" />}\n      </label>\n    );\n  }\n\n  render() {\n    const labelId = this.selectId + '-lbl';\n    const moreId =\n      this.showInlineError || this.hasHelperSlot\n        ? this.selectId + '-moreId'\n        : '';\n    const listId = this.selectId + '-list';\n\n    this.rtl = (this.el.ownerDocument as Document).dir === 'rtl';\n    this.listItems = [];\n    this.valueItems = [];\n\n    if (\n      this.placeholder &&\n      (!this.options[0] || this.options[0]['label'] !== this.placeholder)\n    ) {\n      this.options.unshift({ label: this.placeholder, value: '' });\n    }\n\n    let optionMenu = this.listOpen;\n\n    let valueMarkup;\n    if (this.multiple) {\n      let input = (\n        <input\n          class=\"multi-input\"\n          id={this.selectId}\n          ref={(input) => (this.multiInput = input)}\n          disabled={this.disabled}\n          autoFocus={this.autofocus}\n          autocomplete=\"off\"\n          onInput={this.onMultiInput}\n          value={this.inputSearchVal}\n          onTouchStart={this.onClick}\n          onMouseDown={this.onClick}\n          onFocus={this.onFocus}\n          onBlur={this.onMultiInputBlur}\n          placeholder={\n            this.placeholder && !this.floatLabel && !this.value.length\n              ? this.placeholder\n              : ''\n          }\n          role={this.multiple ? 'combobox' : ''}\n          aria-labelledby={labelId + ' ' + moreId}\n          aria-controls={listId}\n          aria-expanded={optionMenu ? 'true' : 'false'}\n          aria-required={this.required ? 'true' : 'false'}\n          aria-autocomplete=\"list\"\n        />\n      );\n\n      if (!!this.value.length) {\n        valueMarkup = (this.value as Array<string>).map((val, i) => {\n          let label = this.options.find((opt) => {\n            return opt['value'] ? opt['value'] === val : opt === val;\n          });\n          label = label && label['label'] ? label['label'] : val;\n\n          let toReturn = (\n            <span\n              onDragStart={this.onDragStart}\n              onDragLeave={this.onDragLeave}\n              onDragEnd={this.onDragEnd}\n              draggable\n              data-value={val}\n              ref={(span) => this.valueItems.push(span)}\n              class=\"multi-value\"\n            >\n              <span>{label}</span>\n              <button\n                class=\"multi-value-remove\"\n                type=\"button\"\n                tabindex=\"-1\"\n                onTouchEnd={() => {\n                  this.removeValue(val);\n                }}\n                onMouseUp={() => {\n                  this.removeValue(val);\n                }}\n              >\n                <nano-icon name=\"light/times\"></nano-icon>\n              </button>\n            </span>\n          );\n\n          if (i === 0 && this.currInsertIndex < 0) toReturn = [input, toReturn];\n          else if (i === this.currInsertIndex) toReturn = [toReturn, input];\n          return toReturn;\n        });\n      } else valueMarkup = input;\n    }\n\n    return (\n      <Host\n        type={this.multiple ? 'select-multiple' : 'select-one'}\n        aria-disabled={this.disabled ? 'true' : null}\n        class={{\n          ...createColorClasses(this.color),\n          'has-value': !!this.value.length || !!this.inputSearchVal.length,\n          'has-focus': this.hasFocus,\n          'is-invalid': this.invalid,\n          'has-label': this.label !== null && !this.floatLabel,\n          'has-float-label': this.label !== null && this.floatLabel,\n          rtl: this.rtl,\n          'has-multiple': this.multiple,\n          'multi-list-open': this.listOpen,\n          'has-clr-btn': this.clearSelect,\n          masked: this.mask,\n          legacy: this.isLegacy,\n        }}\n        onClick={this.onHostClick}\n      >\n        {!this.floatLabel && this.renderLabel(labelId)}\n        <div class=\"select\" ref={(div) => (this.selectWrap = div)}>\n          {this.floatLabel && this.renderLabel(labelId, 'float')}\n          <div\n            class={{\n              'native-select-wrap': true,\n              'native-select-wrap--multiple': this.multiple,\n            }}\n          >\n            {!this.multiple && this.mask && (\n              <div class=\"select-mask\">\n                {this.getLabel(this.value as string)}\n              </div>\n            )}\n            {this.multiple && [\n              <div class=\"multi-wrap\">{valueMarkup}</div>,\n              <ul\n                role=\"listbox\"\n                ref={(ul) => (this.multiList = ul)}\n                aria-multiselectable=\"true\"\n                aria-required={this.required}\n                aria-expanded={optionMenu ? 'true' : 'false'}\n                aria-hidden={!optionMenu}\n                hidden={!optionMenu}\n                id={listId}\n                class={{\n                  'multi-select-box': true,\n                  'multi-select-box--open': optionMenu,\n                }}\n              >\n                {this.allowCustomValues && this.inputSearchVal.length > 0 && (\n                  <li\n                    data-value={this.inputSearchVal}\n                    role=\"option\"\n                    tabindex=\"-1\"\n                    ref={(li) => this.listItems.push(li)}\n                    onMouseDown={() => {\n                      this.addValue(this.inputSearchVal);\n                    }}\n                    onFocus={this.onOptFocus}\n                  >\n                    Add {this.inputSearchVal}\n                  </li>\n                )}\n                {this.availOpts.map((option) => {\n                  let optval, label;\n                  if (option['value']) {\n                    optval = option['value'];\n                    label = option['label'] || option['value'];\n                  } else if (typeof option === 'string') {\n                    optval = option;\n                    label = optval;\n                  }\n                  if (!optval) return;\n                  return (\n                    <li\n                      role=\"option\"\n                      key={optval}\n                      data-value={optval}\n                      ref={(li) => this.listItems.push(li)}\n                      tabindex=\"-1\"\n                      aria-selected={this.isSelected(optval) ? 'true' : 'false'}\n                      onMouseDown={() => {\n                        this.addValue(optval);\n                      }}\n                      onFocus={this.onOptFocus}\n                    >\n                      {label}\n                    </li>\n                  );\n                })}\n              </ul>,\n              <select\n                id={this.selectId + '-hidden'}\n                class=\"native-select\"\n                ref={(select) => (this.nativeSelect = select)}\n                aria-labelledby={labelId + ' ' + moreId}\n                disabled={this.disabled}\n                form={this.form}\n                multiple={this.multiple}\n                name={this.name}\n                required={this.required}\n                onInvalid={this.handleInvalid}\n              >\n                {(this.value as Array<string>).map((val) => {\n                  return (\n                    <option value={val} selected>\n                      {val}\n                    </option>\n                  );\n                })}\n              </select>,\n            ]}\n            {!this.multiple && (\n              <select\n                id={this.selectId}\n                class=\"native-select\"\n                ref={(select) => (this.nativeSelect = select)}\n                aria-labelledby={labelId + ' ' + moreId}\n                disabled={this.disabled}\n                form={this.form}\n                autoFocus={this.autofocus}\n                multiple={this.multiple}\n                name={this.name}\n                required={this.required}\n                size={this.size}\n                onBlur={this.onBlur}\n                onFocus={this.onFocus}\n                onInvalid={this.handleInvalid}\n                onChange={this.onChange}\n              >\n                {this.options.map((option, i) => {\n                  if (option['value'] || option['label'])\n                    return (\n                      <option\n                        key={option['label'] + i}\n                        label={option['label']}\n                        value={option['value']}\n                        selected={\n                          option['value'] === this.value ||\n                          (!this.value && !option['value'])\n                        }\n                        disabled={!option['value'] && this.required}\n                      >\n                        {option['label'] ? option['label'] : option['value']}\n                      </option>\n                    );\n                  else\n                    return (\n                      <option\n                        key={(option as string) + i}\n                        value={option as string}\n                        selected={option === this.value}\n                      >\n                        {option}\n                      </option>\n                    );\n                })}\n                <slot name=\"legacy\" />\n              </select>\n            )}\n            {this.clearSelect && !this.readonly && !this.disabled && (\n              <button\n                type=\"button\"\n                class=\"select-clear-icon\"\n                tabindex=\"-1\"\n                onTouchEnd={this.clearSelectValue}\n                onMouseUp={this.clearSelectValue}\n              >\n                <nano-icon name=\"light/times\"></nano-icon>\n              </button>\n            )}\n            <div\n              onTouchEnd={this.onClick}\n              onMouseUp={this.onClick}\n              class=\"select-down-icon\"\n            >\n              {this.hasIconSlot ? (\n                <slot name=\"icon\" />\n              ) : (\n                <nano-icon name=\"regular/chevron-down\"></nano-icon>\n              )}\n            </div>\n          </div>\n        </div>\n        {(this.showInlineError || this.hasHelperSlot) && (\n          <div class=\"more\" id={moreId}>\n            {!!this.showInlineError ? (\n              <div class=\"error\">{this.errorMessage}</div>\n            ) : (\n              ''\n            )}\n            <div class=\"helper\">\n              <slot name=\"helper\" />\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n\nlet selectIds = 0;\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/layers';\n@import '../input/input.vars';\n\n:host {\n  @include inputVars;\n\n  position: relative;\n  width: 100%;\n  padding: 0 !important;\n  font-family: $font-family-base;\n  display: inline-block;\n}\n\n:host(.nano-color) {\n  --input-border-style--focus: #{$input-border-style} var(--nano-color-tint, #{nano-color(primary, tint)});\n  --multi-input-value-bg: var(--nano-color-tint-rgb);\n  --multi-input-value-border: var(--nano-color-shade);\n  --multi-input-value-text-color: var(--nano-color-contrast);\n\n  color: current-color(base);\n}\n\n:host-context(nano-item:not(.item-label)) {\n  --padding-start: 0;\n}\n\n:host([disabled]:not([disabled='false'])) {\n  opacity: 0.7;\n\n  * {\n    pointer-events: none !important;\n  }\n}\n\nlabel,\n.more,\n.error,\n.helper {\n  display: block;\n  width: 100%;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n\n  &.visually-hide {\n    @include visually-hide;\n  }\n}\n\n.placeholder-as-label {\n  @include padding(0, 0, 0, var(--padding-start));\n\n  color: var(--input-text-color);\n  position: absolute;\n  font-size: 1.4em;\n  transform: translateY(-50%);\n  transform-origin: top left;\n  top: 50%;\n  transition: 0.125s ease-in;\n  opacity: 0.7;\n  pointer-events: none;\n\n  :host(.is-invalid) & {\n    color: var(--invalid-msg-color);\n  }\n\n  :host(.has-value) & {\n    transform: translateY(-110%);\n    font-size: 0.9em;\n  }\n\n  :host(.has-focus.has-multiple) &,\n  :host(.has-value.has-multiple) & {\n    transform: translateY(-75%);\n    font-size: 0.9em;\n  }\n\n  :host(.has-multiple) & {\n    top: 1.5em;\n  }\n\n  & ~ .native-select-wrap {\n    font-size: 1.1em;\n  }\n}\n\n.label {\n  @include padding(0, 0, var(--padding-bottom));\n\n  color: var(--label-color);\n  font-size: var(--label-font-size);\n  line-height: 1;\n\n  .placeholder {\n    opacity: 0;\n    appearance: none;\n    transition: 0.3s ease opacity;\n    font-size: 0.9em;\n  }\n\n  :host(.has-value) & {\n    .placeholder {\n      opacity: 0.5;\n    }\n  }\n\n  :host(.has-focus) & {\n    color: var(--label-color--focus);\n  }\n\n  :host(.is-invalid) & {\n    color: var(--label-color--invalid);\n  }\n}\n\n.more {\n  @include margin(4px, 0, var(--padding-bottom), 3px);\n\n  height: 1em;\n  position: relative;\n}\n\n.helper,\n.error {\n  top: 0;\n  left: 0;\n  position: absolute;\n  font-size: var(--invalid-msg-font-size);\n  line-height: 1.2;\n  transition: 0.3s ease-out opacity;\n}\n\n.helper {\n  color: var(--help-msg-color);\n  font-style: italic;\n\n  :host([show-inline-error]:not([show-inline-error='false']).is-invalid) & {\n    opacity: 0;\n  }\n}\n\n.error {\n  opacity: 0;\n  color: var(--invalid-msg-color);\n  font-stretch: condensed;\n\n  :host(.is-invalid) & {\n    opacity: 1;\n  }\n}\n\n.select {\n  @include text-inherit();\n  @include border-radius(var(--input-border-radius));\n\n  width: 100%;\n  padding: 0 !important;\n  position: relative;\n  background: var(--input-bg-color);\n  border: var(--input-border-style);\n  border-width: var(--input-border-width);\n  font-size: var(--input-font-size);\n\n  :host(.has-focus) & {\n    z-index: 10;\n    background: var(--input-bg-color--focus);\n    border: var(--input-border-style--focus);\n    border-width: var(--input-border-width);\n  }\n\n  :host(.is-invalid) & {\n    background: var(--input-bg-color--invalid);\n    border: var(--input-border-style--invalid);\n    border-width: var(--input-border-width);\n  }\n\n  :host(.is-invalid.has-focus) & {\n    background: var(--input-bg-color--invalid);\n    border: var(--input-border-style--invalid-focus);\n    border-width: var(--input-border-width);\n  }\n}\n\n// Native Select\n// --------------------------------------------------\n\n.native-select-wrap {\n  display: flex;\n  align-items: center;\n}\n\n.select-mask {\n  @include border-radius(var(--input-border-radius));\n  @include padding(0, var(--padding-end), 0, var(--padding-start));\n  @include text-inherit();\n\n  pointer-events: none;\n  line-height: 2.5em;\n  min-height: 2.5em;\n}\n\n.native-select {\n  @include border-radius(var(--input-border-radius));\n  @include padding(0, var(--padding-end), 0, var(--padding-start));\n  @include text-inherit();\n\n  color: var(--input-text-color);\n  display: inline-block;\n  flex: 1;\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\n  box-sizing: border-box;\n  transition: 0.3s ease opacity;\n  appearance: none;\n  // line-height: 1.3;\n  margin: 0;\n  line-height: 2.5em;\n  min-height: 2.5em;\n\n  :host(.legacy) & {\n    box-sizing: content-box;\n  }\n\n  :host(.masked) & {\n    opacity: 0;\n    position: absolute;\n    left: 0;\n    top: 0;\n  }\n\n  :host(.has-float-label) & {\n    opacity: 0;\n    padding-top: 1.8em;\n  }\n\n  :host(.has-value.has-float-label) & {\n    opacity: 1;\n  }\n\n  &:-webkit-autofill {\n    background-color: transparent;\n  }\n\n  &:invalid {\n    box-shadow: none;\n  }\n\n  &::-ms-clear {\n    display: none;\n  }\n\n  &::-ms-expand {\n    display: none;\n  }\n\n  &[disabled] {\n    opacity: 0.4;\n  }\n\n  :host(.has-multiple) & {\n    display: none;\n  }\n\n  option {\n    color: black;\n  }\n}\n\n// multi stuff\n\n.multi {\n  &-wrap {\n    @include padding(\n      0,\n      calc(1.9em + var(--padding-end)),\n      calc(var(--padding-bottom) / 2),\n      0\n    );\n\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    max-width: 100%;\n\n    :host(.has-clr-btn) & {\n      @include padding(\n        0,\n        calc(2.6em + (var(--padding-end) * 2) + (var(--padding-end) * 2)),\n        calc(var(--padding-bottom) / 2),\n        0\n      );\n    }\n\n    :host(.has-float-label) & {\n      padding-top: 1.3em;\n    }\n  }\n\n  &-input {\n    @include text-inherit();\n    @include padding(\n      calc(var(--padding-top) / 2),\n      var(--padding-end),\n      0,\n      var(--padding-start)\n    );\n\n    min-width: 50px;\n    max-width: 100%;\n    max-height: 100%;\n    appearance: none;\n    border: 0;\n    outline: none;\n    display: inline-block;\n    background: transparent;\n    flex: 0;\n    position: relative;\n    // line-height: calc(2.8em - var(--padding-top));\n    min-height: calc(2.8em - var(--padding-top));\n    box-sizing: border-box;\n\n    :host(.legacy) & {\n      box-sizing: content-box;\n    }\n\n    &:last-child {\n      flex: 1;\n    }\n  }\n\n  &-select-box {\n    position: absolute;\n    background: #{$layer-bg-color};\n    min-width: calc(100% + (var(--input-border-width) * 2));\n    z-index: #{$layer-index-dropdown};\n    margin: 0;\n    font-size: 1.15em;\n    line-height: 1.4;\n    max-height: 50vh;\n    overflow-y: auto;\n    overscroll-behavior: none;\n    transition: opacity 0.2s ease;\n    opacity: 0;\n    box-sizing: border-box;\n    border-radius: #{$layer-border-radius};\n    box-shadow: #{$layer-shadow-large};\n    padding: var(--padding-top) 0 var(--padding-bottom);\n    border: #{$layer-border-style};\n\n    &--open {\n      opacity: 1;\n    }\n\n    li {\n      @include padding(\n        var(--padding-top),\n        var(--padding-end),\n        var(--padding-bottom),\n        var(--padding-start)\n      );\n\n      font-size: var(--input-font-size);\n      cursor: pointer;\n      list-style: none;\n      color: var(--input-text-color);\n\n      :host(.nano-color) & {\n        color: black;\n      }\n\n      &:hover,\n      &:focus {\n        color: var(--color--focus-contrast);\n        outline: none;\n        background: rgba(var(--multi-input-value-bg), 0.2);\n\n        :host(.nano-color) & {\n          background: current-color(base, 0.2);\n        }\n      }\n    }\n  }\n\n  &-value {\n    @include margin(4px, 0, 0, 4px);\n\n    background: rgba(var(--multi-input-value-bg), 0.8);\n    color: var(--multi-input-value-text-color);\n    border: 2px solid;\n    border-color: var(--multi-input-value-border);\n    padding: 0.3em 0.5em;\n    border-radius: 3px;\n    line-height: 1;\n    max-width: 100%;\n    display: flex;\n    align-items: center;\n    font-size: var(--input-font-size);\n    font-weight: 600;\n    letter-spacing: 1px;\n\n    span {\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      max-width: 100%;\n      overflow: hidden;\n      line-height: 1.4;\n    }\n  }\n\n  &-value-remove {\n    @include margin(0);\n    @include background-position(center);\n    @include padding(0, 0, 0, 0.5em);\n\n    color: inherit;\n    border: 0;\n    outline: none;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    appearance: none;\n    display: flex;\n    align-items: center;\n    top: 0;\n    font-size: 1em;\n\n    nano-icon {\n      --color: var(--multi-input-value-text-color);\n    }\n  }\n}\n\n// Clear Input Icon\n// --------------------------------------------------\n\n.select-down-icon {\n  @include margin(0);\n  @include background-position(center);\n  @include padding(\n    var(--padding-top),\n    var(--padding-end),\n    var(--padding-bottom),\n    var(--padding-start)\n  );\n\n  color: var(--input-text-color);\n  font-size: 1.4em;\n  right: 0;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n\n  :host(.is-invalid) & {\n    color: var(--clear-btn-color--invalid);\n  }\n\n  :host(.rtl) & {\n    right: unset;\n    left: 0;\n  }\n\n  :host(.has-multiple) & {\n    pointer-events: all;\n  }\n\n  :host(.masked) & {\n    position: relative;\n  }\n}\n\n.select-clear-icon {\n  @include margin(0);\n  @include background-position(center);\n  @include padding(\n    var(--padding-top),\n    var(--padding-end),\n    var(--padding-bottom),\n    var(--padding-start)\n  );\n\n  font-size: 1.4em;\n  color: var(--clear-btn-color);\n  border: 0;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  visibility: hidden;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  position: absolute;\n  top: 0;\n  height: 100%;\n  right: calc(1.4em + var(--padding-end));\n\n  &:hover {\n    color: var(--clear-btn-color--hover);\n  }\n\n  :host(.rtl) & {\n    right: unset;\n    left: calc(1.4em + var(--padding-end));\n  }\n\n  :host(.is-invalid) & {\n    color: var(--clear-btn-color--invalid);\n  }\n\n  :host(.has-value) & {\n    visibility: visible;\n  }\n\n  nano-icon {\n    --color: inherit;\n  }\n}\n\n// Input Has focus\n// --------------------------------------------------\n// When the select has focus, then the select cover should be hidden\n\n// :host(.has-focus) {\n//   pointer-events: none;\n// }\n\n:host(.has-focus) select,\n:host(.has-focus) a,\n:host(.has-focus) button {\n  pointer-events: auto;\n}\n"]}

package/dist/nano-components/p-1ed74370.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/algolia/algolia-input.tsx"],"names":["AlgoliaInput","[object Object]","hostRef","this","searchStr","algoliaIndex","appId","apiKey","searchIndex","minChars","autoEmit","browseIndex","storeMethod","handleFocus","inputField","setFocus","emitResults","searchIndexName","length","index","internalIndex","searchSubmit","isNested","algoliaClient","algoliasearch","initIndex","ev","console","error","target","tagName","toLowerCase","detail","value","host","querySelector","nanoSearchResult","emit","results","client","options","filters","facets","fixDomain","search","indexName","name","selected","domain","currentResults","nanoSearch","hits","map","hit","url","match","location","protocol","parentElement","hasAttribute","getAttribute","addEventListener","onOpen","resolve","searchIndexNameChange","initAlgoliaClient","storeId","ComponentStore","init","h","Host","onFocus","tabindex","Wormhole"],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Element,\n  Host,\n  Prop,\n  State,\n  EventEmitter,\n  Event,\n  Listen,\n  Method,\n  Watch,\n  ComponentInterface,\n} from '@stencil/core';\n\nimport algoliasearch, {\n  SearchClient as AlgoliaClient,\n  SearchIndex as AlgoliaIndex,\n} from 'algoliasearch';\nimport {\n  InputChangeEventDetail,\n  AloliaSearchResultDetail,\n  SearchIndex,\n  AlgoliaMultiResult,\n} from '../../interface';\nimport { Wormhole } from '../algolia/algolia-data';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\n\n/**\n * @deprecated\n * Component for querying Algolia Indeces.\n * Can be nested within an algolia element or used outside as a 'resultsEmitter' (see algolia component documentation)\n * Must include one 'nano-input' component\n */\n@Component({\n  tag: 'nano-algolia-input',\n  shadow: true,\n})\nexport class AlgoliaInput implements ComponentInterface {\n  private internalIndex: AlgoliaIndex;\n  private algoliaClient: AlgoliaClient;\n  private isNested: boolean;\n  private inputField: HTMLNanoInputElement;\n\n  @Element() host: HTMLNanoAlgoliaInputElement;\n\n  @State() searchStr: string = '';\n  @State() algoliaIndex: AlgoliaIndex = null;\n  @State() currentResults: AlgoliaMultiResult;\n\n  /**\n   * An Algolia App ID key. Used in conjunction with 'searchIndex' & 'apiKey'.\n   * Alternatively this will be set automatically when nested within an algolia component\n   */\n  @Prop() appId: string = '';\n\n  /**\n   * An Algolia API Key. Used in conjunction with 'searchIndex' & 'appId'.\n   * Alternatively this will be set automatically when nested within an algolia component\n   */\n  @Prop() apiKey: string = '';\n\n  /**\n   * Algolia search index. Used in conjunction with 'searchIndex' & 'appId'.\n   * Alternatively this will be set automatically if you're using a 'resultsEmitter' element.\n   * ```\n   * { index: string, // algolia index name\n   *   domain?: string, // used in template filers to resolve incomplete url fields\n   *   filters?: [string], // algolia facets to retrive\n   *   hitsPerPage?: number,\n   *   name?: string // human readable index name\n   * }\n   * ```\n   */\n  @Prop({ mutable: true }) searchIndex: SearchIndex = null;\n\n  /**\n   * Algolia search index name. Alternative to 'searchIndex'.\n   * A simplified shortcut for setting an index.\n   * properties such as hitsPerPage and facets will come from the algolia index\n   */\n  @Prop() searchIndexName: string;\n\n  /**\n   * Minimum number of characters before performing a search\n   */\n  @Prop() minChars: number = 2;\n\n  /**\n   * Automatically emit results data to algolia components.\n   * For example, if you wanted to provide an 'autocomplete' style dropdown\n   * before showing the main results with a submit button\n   */\n  @Prop() autoEmit: boolean = true;\n\n  /**\n   * Will maintain a search all / '*' on init and reset allowing for a view\n   * then filter experience rather than a search first experience\n   */\n  @Prop() browseIndex: boolean = false;\n\n  /**\n   * Store search queries (against this ID) to the component store.\n   * Use in conjunction with storeMethod\n   */\n  @Prop() storeId?: string;\n\n  /**\n   * The method of storage.\n   * Either session storage, url hash (after the '#') or url query (after the '?').\n   */\n  @Prop() storeMethod: StorageMethods = 'session';\n\n  /**\n   * Manually emit search results to algolia components.\n   * Useful if you don't wish to search on input change / want to provide 'autocomplete' options\n   * or / and want to use a submit button */\n  @Method()\n  async search() {\n    this.emitResults();\n  }\n\n  /**\n   * Emitted when search results are successfully returned from Algolia.\n   * @internal\n   */\n  @Event() nanoSearchResult!: EventEmitter<AloliaSearchResultDetail>;\n\n  /**\n   * Emitted when search results are successfully returned from Algolia.\n   */\n  @Event() nanoSearch!: EventEmitter<AloliaSearchResultDetail>;\n\n  /**\n   * Emitted when search field is cleared.\n   */\n  @Event() nanoSearchReset!: EventEmitter<AloliaSearchResultDetail>;\n\n  @Watch('searchIndexName')\n  searchIndexNameChange() {\n    if (!this.searchIndexName || !this.searchIndexName.length) return;\n    this.searchIndex = { index: this.searchIndexName };\n  }\n\n  @Watch('algoliaIndex')\n  algoliaChange() {\n    this.internalIndex = this.algoliaIndex;\n  }\n\n  @Watch('browseIndex')\n  browseIndexChange() {\n    if (this.browseIndex) {\n      this.searchStr = '*';\n      this.searchSubmit();\n    }\n  }\n\n  @Watch('apiKey')\n  @Watch('appId')\n  @Watch('searchIndex')\n  initAlgoliaClient() {\n    if (this.isNested || !this.appId || !this.apiKey) return;\n    this.algoliaClient = algoliasearch(this.appId, this.apiKey);\n    if (this.searchIndex)\n      this.algoliaIndex = this.algoliaClient.initIndex(this.searchIndex.index);\n  }\n\n  @Listen('nanoChange')\n  async searchSubmit(ev?: CustomEvent<InputChangeEventDetail>) {\n    if (!this.internalIndex) {\n      console.error('No algolia index set');\n      return;\n    }\n\n    if (ev) {\n      if ((ev.target as HTMLElement).tagName.toLowerCase() !== 'nano-input')\n        return;\n      this.searchStr = ev.detail.value;\n    } else {\n      this.inputField =\n        this.inputField || this.host.querySelector('nano-input');\n      if (!this.inputField) return;\n      this.searchStr = this.inputField.value;\n    }\n\n    if (this.searchStr.length < this.minChars) {\n      if (this.browseIndex) this.searchStr = '*';\n      else {\n        if (this.searchStr.length === 0) {\n          this.nanoSearchResult.emit({\n            results: [],\n            client: { apiKey: this.appId, appId: this.appId },\n          });\n          return;\n        }\n        if (this.searchStr.length < this.minChars) return;\n      }\n    }\n\n    let options = {};\n    if (this.searchIndex.filters)\n      options = { facets: this.searchIndex.filters };\n\n    let results = this.fixDomain(\n      await this.internalIndex.search(this.searchStr, options)\n    );\n    results.indexName = this.searchIndex.name;\n    results.selected = true;\n    results.domain = this.searchIndex.domain || null;\n    results.index = this.searchIndex.index;\n\n    this.currentResults = results;\n    this.nanoSearch.emit({\n      results: [this.currentResults],\n      client: { apiKey: this.appId, appId: this.appId },\n    });\n\n    if (this.autoEmit) this.emitResults();\n  }\n\n  private emitResults() {\n    this.nanoSearchResult.emit({\n      results: [this.currentResults],\n      client: { apiKey: this.appId, appId: this.appId },\n    });\n  }\n\n  private fixDomain(results: AlgoliaMultiResult) {\n    if (!this.searchIndex.domain) return results;\n    results.hits.map((hit) => {\n      if (hit.url && !hit.url.match(/^http/))\n        hit.url = location.protocol + '//' + this.searchIndex.domain + hit.url;\n    });\n    return results;\n  }\n\n  private handleFocus = () => {\n    if (this.inputField) this.inputField.setFocus();\n  };\n\n  connectedCallback() {\n    this.isNested =\n      this.host.parentElement.tagName.toLowerCase() === 'nano-algolia' &&\n      this.host.hasAttribute('slot') &&\n      this.host.getAttribute('slot') === 'search-input';\n\n    if (!this.isNested) {\n      this.host.addEventListener(\n        'openWormhole',\n        (ev: CustomEvent<{ onOpen: any }>) => {\n          ev.detail.onOpen.resolve();\n          this.searchIndexNameChange();\n          this.initAlgoliaClient();\n        }\n      );\n    }\n  }\n\n  componentWillLoad() {\n    this.inputField = this.host.querySelector('nano-input');\n    if (this.storeId)\n      ComponentStore.init(this, ['searchStr'], this.storeMethod, this.storeId);\n  }\n\n  render() {\n    return (\n      <Host onFocus={this.handleFocus} tabindex=\"-1\">\n        <slot />\n      </Host>\n    );\n  }\n}\n\nWormhole(AlgoliaInput, ['algoliaIndex', 'searchIndex', 'browseIndex']);\n"]}

package/dist/nano-components/p-1f7502fa.js

@@ -1,2 +0,0 @@
-import{g as n}from"./p-f55560d3.js";var e;!function(n){n.Filter="filter",n.Page="page",n.Replica="replica",n.Init="init"}(e||(e={}));const o=(e,o)=>function(e,o){var t=e.prototype,i=t.componentWillLoad;t.componentWillLoad=function(){var e,t=this,r=n(this),s={promise:new Promise((function(n){e=n})),resolve:e},u=new CustomEvent("openWormhole",{bubbles:!0,composed:!0,detail:{consumer:this,fields:o,updater:function(n,e){t[n]=e},onOpen:s}});return r.dispatchEvent(u),s.promise.then((function(){if(i)return i.call(t)}))}}(e,o);export{e as S,o as W}
-//# sourceMappingURL=p-1f7502fa.js.map

package/dist/nano-components/p-1f7502fa.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["node_modules/stencil-wormhole/dist/esm/deferred.js","src/components/algolia/algolia-data.tsx","node_modules/stencil-wormhole/dist/esm/consumer.js"],"names":["SearchChangeEvent","Wormhole","Component","props","ComponentPrototype","prototype","componentWillLoad","resolve","_this","this","el","getElement","onOpen","promise","Promise","res","event","CustomEvent","bubbles","composed","detail","consumer","fields","updater","prop","value","dispatchEvent","then","call","openWormhole"],"mappings":"oCAAO,ICKKA,GAAZ,SAAYA,GACVA,EAAA,OAAA,SACAA,EAAA,KAAA,OACAA,EAAA,QAAA,UACAA,EAAA,KAAA,OAJF,CAAYA,IAAAA,EAAiB,WA0BhBC,EAAW,CACtBC,EACAC,IC/BwB,SAAUD,EAAWC,GAC3C,IAAIC,EAAqBF,EAAUG,UAC/BC,EAAoBF,EAAmBE,kBAC3CF,EAAmBE,kBAAoB,WACnC,IFLAC,EEKIC,EAAQC,KACRC,EAAKC,EAAWF,MAChBG,EFLD,CAAEC,QADK,IAAIC,SAAQ,SAAUC,GAAOR,EAAUQ,KAC1BR,QAASA,GEM5BS,EAAQ,IAAIC,YAAY,eAAgB,CACxCC,SAAS,EACTC,UAAU,EACVC,OAAQ,CACJC,SAAUZ,KACVa,OAAQnB,EACRoB,QAAS,SAAUC,EAAMC,GAASjB,EAAMgB,GAAQC,GAChDb,OAAQA,KAIhB,OADAF,EAAGgB,cAAcV,GACVJ,EAAOC,QAAQc,MAAK,WACvB,GAAIrB,EACA,OAAOA,EAAkBsB,KAAKpB,ODYzCqB,CAAa3B,EAAWC","sourcesContent":["export var createDeferredPromise = function () {\n    var resolve;\n    var promise = new Promise(function (res) { resolve = res; });\n    return { promise: promise, resolve: resolve };\n};\n","import { openWormhole, WormholeConsumerConstructor } from 'stencil-wormhole';\nimport { SearchIndex as AlgoliaIndex } from 'algoliasearch';\nimport { IndexResult, AlgoliaResultHit, SearchIndex } from '../../interface';\nimport { StorageMethods } from '../../utils/store/component-store';\n\nexport enum SearchChangeEvent {\n  Filter = 'filter',\n  Page = 'page',\n  Replica = 'replica',\n  Init = 'init',\n}\n\nexport interface WormholeState {\n  indexResults: IndexResult;\n  filterChanged?: string;\n  facets?: {\n    [prop: string]: {\n      [prop: string]: number;\n    };\n  };\n  results: AlgoliaResultHit[];\n  resultsPage: number;\n  tplRenderFn?: (...args: any[]) => string;\n  changeEvent: SearchChangeEvent;\n  algoliaIndex: AlgoliaIndex;\n  searchIndex: SearchIndex;\n  browseIndex: boolean;\n  globalStoreMethod: StorageMethods;\n  isLoading: boolean;\n}\n\nexport const Wormhole = (\n  Component: WormholeConsumerConstructor,\n  props: (keyof WormholeState)[]\n) => openWormhole(Component, props);\n\nexport * from 'stencil-wormhole';\n","import { getElement } from \"@stencil/core\";\nimport { createDeferredPromise } from \"./deferred\";\nexport var openWormhole = function (Component, props) {\n    var ComponentPrototype = Component.prototype;\n    var componentWillLoad = ComponentPrototype.componentWillLoad;\n    ComponentPrototype.componentWillLoad = function () {\n        var _this = this;\n        var el = getElement(this);\n        var onOpen = createDeferredPromise();\n        var event = new CustomEvent('openWormhole', {\n            bubbles: true,\n            composed: true,\n            detail: {\n                consumer: this,\n                fields: props,\n                updater: function (prop, value) { _this[prop] = value; },\n                onOpen: onOpen,\n            },\n        });\n        el.dispatchEvent(event);\n        return onOpen.promise.then(function () {\n            if (componentWillLoad) {\n                return componentWillLoad.call(_this);\n            }\n        });\n    };\n};\n"]}

package/dist/nano-components/p-1fd60eec.system.js

@@ -1,2 +0,0 @@
-System.register(["./p-2d59dda3.system.js","./p-5198e4c6.system.js"],(function(e,a){"use strict";var o,t,n,s,r,i,l;return{setters:[function(e){o=e.p;t=e.w;n=e.d;s=e.N;r=e.a;i=e.H;l=e.b},function(){}],execute:function(){var e=function(e){return"__sc_import_"+e.replace(/\s|-/g,"_")};var c=function(){{o.$cssShim$=t.__cssshim}{p(i.prototype)}var e=Array.from(n.querySelectorAll("script")).find((function(e){return new RegExp("/"+s+"(\\.esm)?\\.js($|\\?|#)").test(e.src)||e.getAttribute("data-stencil-namespace")===s}));var l={};if("onbeforeload"in e&&!history.scrollRestoration){return{then:function(){}}}{l.resourcesUrl=new URL(".",new URL(e.getAttribute("data-resources-url")||e.src,t.location.href)).href;{d(l.resourcesUrl,e)}if(!t.customElements){return a.import("./p-47d2a49e.system.js").then((function(){return l}))}}return r(l)};var d=function(a,o){var r=e(s);try{t[r]=new Function("w","return import(w);//"+Math.random())}catch(l){var i=new Map;t[r]=function(e){var s=new URL(e,a).href;var l=i.get(s);if(!l){var c=n.createElement("script");c.type="module";c.crossOrigin=o.crossOrigin;c.src=URL.createObjectURL(new Blob(["import * as m from '"+s+"'; window."+r+".m = m;"],{type:"application/javascript"}));l=new Promise((function(e){c.onload=function(){e(t[r].m);c.remove()}}));i.set(s,l);n.head.appendChild(c)}return l}}};var p=function(e){var a=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return a.call(this,e)}var o=a.call(this,false);var t=this.childNodes;if(e){for(var n=0;n<t.length;n++){if(t[n].nodeType!==2){o.appendChild(t[n].cloneNode(true))}}}return o}};c().then((function(e){return l(JSON.parse('[["p-4042379b.system",[[1,"nano-global-nav",{"env":[1],"ssoRedirect":[1,"sso-redirect"],"getMyAccountData":[4,"get-my-account-data"],"activeMyAccountSections":[16],"showSearch":[4,"show-search"],"showLogo":[4,"show-logo"],"logoUrl":[1,"logo-url"],"searchIndeces":[16],"myAccountUser":[16],"searchAppId":[1025,"search-app-id"],"searchApiKey":[1025,"search-api-key"],"searchValue":[1025,"search-value"],"searchIndex":[1025,"search-index"],"cartCount":[1026,"cart-count"],"msgCount":[1026,"msg-count"],"cartUrl":[1025,"cart-url"],"msgUrl":[1025,"msg-url"],"hasLoggedinSlot":[32],"hasSiteSlot":[32],"hasPromotionSlot":[32],"aboutSlotLen":[32],"iconSlotLen":[32],"mainSlotLen":[32],"overflowSlotLen":[32],"searchSlotLen":[32],"internalSearchIndeces":[32],"thresholdReady":[32],"remoteDataReady":[32],"ready":[32],"isResizing":[32],"intersectRatio":[32],"threshold":[32],"modalOpen":[32],"modalIsOpen":[32],"searchBarShown":[32],"scrollingUp":[32],"searchLoading":[32],"showAutocomplete":[32],"secondaryMenuOpen":[32],"userMenuOpen":[32],"menuFullScreen":[32],"searchValInternal":[32],"submitSearch":[64]},[[0,"nanoOpen","secondaryOpen"],[0,"nanoClose","secondaryClose"]]]]],["p-21f484a3.system",[[1,"nano-hero",{"imgSrc":[1,"img-src"],"imgSrcSet":[1,"img-src-set"],"largeScreenBP":[2,"large-screen-b-p"],"theme":[1],"level":[1],"hasIconBox":[32],"hasScrim":[32],"hasSecondaryContent":[32],"hasQuote":[32],"hasBg":[32],"hasBackBtn":[32],"hasCtas":[32],"breadCrumbs":[32],"iconBoxItems":[32]}]]],["p-da9f75d2.system",[[6,"nano-date-input",{"helperText":[4,"helper-text"],"helperTextFormat":[16],"floatLabel":[4,"float-label"],"name":[1],"readonly":[4],"size":[2],"form":[1],"firstDayOfWeek":[2,"first-day-of-week"],"localization":[16],"disabled":[4],"color":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"label":[1],"placeholder":[1025],"value":[1537],"validateOn":[1,"validate-on"],"showInlineError":[516,"show-inline-error"],"dateOrder":[1,"date-order"],"required":[4],"min":[1],"max":[1],"hideLabel":[4,"hide-label"],"picker":[4],"initialPickerDate":[1,"initial-picker-date"],"pickerOpen":[1540,"picker-open"],"closeAfterPicked":[4,"close-after-picked"],"pattern":[32],"inputValue":[32],"reportValidity":[64],"setFocus":[64],"getInputElement":[64],"showError":[64]}]]],["p-c4edcfc5.system",[[1,"nano-dialog",{"showRibbon":[4,"show-ribbon"],"open":[1540],"label":[1],"noHeader":[4,"no-header"],"noFooter":[4,"no-footer"],"noUserDismiss":[4,"no-user-dismiss"],"storeId":[1,"store-id"],"storeMethod":[1,"store-method"],"isVisible":[32],"noDismiss":[32],"hasFooter":[32],"show":[64],"hide":[64]}]]],["p-45e06083.system",[[6,"nano-file-upload",{"name":[1],"accept":[1],"capture":[1],"maxFileSize":[2,"max-file-size"],"maxFiles":[2,"max-files"],"label":[1],"placeholder":[1],"hideLabel":[4,"hide-label"],"required":[4],"disabled":[516],"clearInput":[4,"clear-input"],"showInlineError":[516,"show-inline-error"],"validateOn":[1025,"validate-on"],"invalid":[2564],"files":[2064],"value":[6145],"hasHelperSlot":[32],"hasLabelSlot":[32],"errorMessage":[32],"isDragging":[32],"fileList":[32],"hasFocus":[32],"_invalid":[32],"reportValidity":[64],"setFocus":[64],"getInputElement":[64],"showError":[64]},[[8,"click","globalClickHandler"],[8,"keydown","globalKeydownHandler"]]]]],["p-a897cfae.system",[[1,"nano-alert",{"open":[1540],"closable":[516],"color":[513],"duration":[2],"isModal":[32],"isToast":[32],"isShowing":[32],"label":[32],"show":[64],"hide":[64],"toast":[64],"alert":[64]}]]],["p-8a41ccd9.system",[[1,"nano-global-search-results",{"algoliaEle":[32],"currentWidth":[32],"apiKey":[32],"appId":[32],"index":[32]}]]],["p-be430309.system",[[1,"nano-menu-drawer",{"open":[4],"saveState":[4,"save-state"],"hideWidth":[2,"hide-width"],"hideHeight":[4,"hide-height"],"reset":[32],"widthOk":[32],"heightOk":[32],"isLoading":[32],"hide":[32]},[[0,"nanoOpen","cancelNavItemEvents"],[0,"nanoClose","cancelNavItemEvents"]]]]],["p-4739c706.system",[[1,"nano-tab-group",{"placement":[1],"noScrollControls":[4,"no-scroll-controls"],"color":[1],"storeId":[1,"store-id"],"storeMethod":[1,"store-method"],"hasScrollControls":[32],"hideControlRight":[32],"hideControlLeft":[32],"isLegacy":[32],"tab":[32],"show":[64]}]]],["p-e1429ff0.system",[[1,"nano-accordion",{"color":[1],"itemOpened":[32]},[[0,"nanoOpened","onToggleHandler"],[0,"nanoClosed","onClosedHandler"]]]]],["p-6747f517.system",[[1,"nano-algolia-filter",{"filterName":[1,"filter-name"],"value":[1],"operator":[1],"storeId":[1,"store-id"],"storeMethod":[1,"store-method"],"changeEvent":[32],"internalValue":[32],"showFilter":[32],"indexResults":[32],"filterChanged":[32],"facets":[32],"tplRenderFn":[32],"globalStoreMethod":[32]}]]],["p-461c539f.system",[[1,"nano-algolia-input",{"appId":[1,"app-id"],"apiKey":[1,"api-key"],"searchIndex":[1040],"searchIndexName":[1,"search-index-name"],"minChars":[2,"min-chars"],"autoEmit":[4,"auto-emit"],"browseIndex":[4,"browse-index"],"storeId":[1,"store-id"],"storeMethod":[1,"store-method"],"searchStr":[32],"algoliaIndex":[32],"currentResults":[32],"search":[64]},[[0,"nanoChange","searchSubmit"]]]]],["p-63cc5e0d.system",[[1,"nano-algolia-pagination",{"maxToShow":[2,"max-to-show"],"currentPage":[32],"canGoPrev":[32],"canGoNext":[32],"show":[32],"tplRenderFn":[32],"indexResults":[32],"infiniteScroll":[32],"nextPage":[64],"prevPage":[64],"goToPage":[64]}]]],["p-8611e764.system",[[1,"nano-algolia-results",{"infiniteScroll":[4,"infinite-scroll"],"appendPages":[4,"append-pages"],"showResults":[32],"tplRenderFn":[32],"results":[32],"indexResults":[32],"resultsPage":[32],"changeEvent":[32],"facets":[32],"isLoading":[32]}]]],["p-76bf0452.system",[[1,"nano-aspect-ratio",{"aspectRatio":[1,"aspect-ratio"],"fit":[1]}]]],["p-e2848c8a.system",[[6,"nano-checkbox",{"hasFocus":[1540,"has-focus"],"checked":[1540],"disabled":[4],"value":[1],"name":[1],"required":[4],"type":[513],"label":[1],"indeterminate":[1540],"invalid":[1540],"color":[1],"inputType":[32],"getInputElement":[64],"reportError":[64],"setError":[64],"setFocus":[64],"removeFocus":[64]}]]],["p-e8a97250.system",[[6,"nano-checkbox-group",{"validateOn":[1025,"validate-on"],"showInlineError":[516,"show-inline-error"],"min":[2],"max":[2],"disabled":[516],"legend":[1],"invalid":[1540],"checkboxes":[32],"nativeCbs":[32],"errorMessage":[32],"showErrorMsg":[32],"hasHelperSlot":[32],"reportValidity":[64]},[[0,"nanoChange","handleCbChange"]]]]],["p-79e11525.system",[[1,"nano-details",{"label":[1],"open":[1540],"noHandle":[4,"no-handle"],"iconRotation":[2,"icon-rotation"],"color":[1],"isLoading":[32]}]]],["p-7a0e9c6f.system",[[1,"nano-drawer",{"open":[1540],"label":[1],"placement":[1],"contained":[4],"noHeader":[4,"no-header"],"type":[1],"contentSelector":[1,"content-selector"],"hasFooter":[32],"isVisible":[32],"show":[64],"hide":[64]}]]],["p-35eb8352.system",[[6,"nano-menu",{"setFocus":[64],"removeFocus":[64]}]]],["p-507490fc.system",[[6,"nano-range",{"color":[1],"debounce":[2],"name":[1],"dualKnobs":[4,"dual-knobs"],"min":[2],"max":[2],"pin":[4],"snaps":[4],"step":[2],"ticks":[4],"disabled":[4],"value":[1026],"ratioA":[32],"ratioB":[32],"pressedKnob":[32]}]]],["p-60b2ba81.system",[[2,"nano-rating",{"value":[1538],"max":[2],"precision":[2],"readonly":[4],"disabled":[4],"name":[1],"symbolName":[1,"symbol-name"],"symbol":[16],"hoverValue":[32],"isHovering":[32],"setFocus":[64],"removeFocus":[64]}]]],["p-a50ca06f.system",[[1,"nano-select-option",{"label":[1],"value":[1],"selected":[4],"disabled":[4]}]]],["p-fb8aa0a7.system",[[1,"nano-slide",{"ready":[1540]}]]],["p-6a9fe61f.system",[[1,"nano-slides",{"options":[1040],"navbtns":[4],"pager":[4],"fullscreenbtn":[4],"fullscreen":[1540],"animation":[513],"currentSlide":[1538,"current-slide"],"autoplay":[8],"ready":[1540],"iCurrentSlide":[32],"slidesReady":[32],"didInit":[32],"update":[64],"updateAutoHeight":[64],"slideTo":[64],"slideNext":[64],"slidePrev":[64],"getActiveIndex":[64],"length":[64],"isEnd":[64],"isBeginning":[64],"startAutoplay":[64],"stopAutoplay":[64],"lockSwipes":[64],"getflickity":[64],"reload":[64]}]]],["p-1bd92497.system",[[1,"nano-tab",{"panel":[513],"active":[516],"disabled":[516],"setFocus":[64],"removeFocus":[64]}]]],["p-c8ff45ab.system",[[1,"nano-tab-content",{"name":[1],"active":[4]}]]],["p-f578998d.system",[[1,"nano-algolia",{"showResults":[1028,"show-results"],"resultsPage":[1026,"results-page"],"appId":[1,"app-id"],"apiKey":[1,"api-key"],"searchIndex":[16],"searchIndexName":[1025,"search-index-name"],"listenTo":[1,"listen-to"],"query":[1025],"operator":[1],"filters":[16],"tplEngine":[16],"tplRenderFn":[16],"replicaIndex":[1,"replica-index"],"browseIndex":[4,"browse-index"],"minChars":[2,"min-chars"],"storeId":[1,"store-id"],"storeMethod":[1,"store-method"],"_dynFacetFilters":[32],"inputField":[32],"algoliaIndex":[32],"indeces":[32],"resultsEmitterEle":[32],"indexResults":[32],"filterChanged":[32],"currentHits":[32],"changeEvent":[32],"isLoading":[32],"wormholeState":[32],"removeFilters":[64]},[[0,"nanoTplUpdated","onAllTplUpdate"],[0,"nanoPageChanged","onPageChange"],[0,"nanoFilterChanged","onFilterChange"]]]]],["p-5f716719.system",[[1,"nano-tooltip",{"content":[1],"placement":[1],"disabled":[4],"distance":[2],"open":[1540],"skidding":[2],"trigger":[1],"show":[64],"hide":[64]}]]],["p-c8792b54.system",[[1,"nano-date-picker",{"selectedDate":[1025,"selected-date"],"min":[1],"max":[1],"firstDayOfWeek":[2,"first-day-of-week"],"localization":[16],"color":[1],"isDateDisabled":[16],"isModal":[4,"is-modal"],"firstFocusEle":[16],"activeFocus":[32],"focusedDay":[32],"setFocus":[64]}],[1,"nano-dropdown",{"autoOpen":[4,"auto-open"],"open":[1540],"placement":[1],"closeOnSelect":[4,"close-on-select"],"containingElement":[16],"distance":[2],"skidding":[2],"hoist":[4],"dialogTitle":[1,"dialog-title"],"show":[64],"hide":[64]},[[0,"nanoFocus","menuFocus"],[0,"nanoOpen","secondaryOpen"],[0,"nanoClose","secondaryClose"],[0,"nanoSelect","handlePanelSelect"]]]]],["p-fa926d02.system",[[6,"nano-select",{"invalid":[1540],"color":[1],"autofocus":[4],"disabled":[516],"validateOn":[1025,"validate-on"],"showInlineError":[516,"show-inline-error"],"label":[1],"hideLabel":[4,"hide-label"],"floatLabel":[4,"float-label"],"multiple":[4],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"size":[2],"max":[2],"min":[2],"form":[1],"allowCustomValues":[4,"allow-custom-values"],"value":[1025],"options":[1040],"clearSelect":[4,"clear-select"],"mask":[4],"debounce":[2],"native":[4],"currInsertIndex":[32],"availOpts":[32],"showErrorMsg":[32],"errorMessage":[32],"hasFocus":[32],"listOpen":[32],"isLegacy":[32],"hasLabelSlot":[32],"hasHelperSlot":[32],"hasIconSlot":[32],"reportValidity":[64],"setFocus":[64],"getSelectElement":[64],"showError":[64]}],[1,"nano-nav-item",{"href":[1],"target":[1],"disabled":[4],"open":[1540],"selected":[516],"secondaryActiveWidth":[2,"secondary-active-width"],"secondaryFallback":[16],"closeOnBlur":[4,"close-on-blur"],"didOpen":[32],"isInGlobalNav":[32],"isInMenuDrawer":[32],"isInMenu":[32],"isLegacy":[32],"hasFocus":[32],"setFocus":[64]}]]],["p-8fe04c5c.system",[[6,"nano-input",{"invalid":[2564],"color":[1],"accept":[1],"autocapitalise":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"clearOnEdit":[4,"clear-on-edit"],"debounce":[2],"disabled":[516],"inputmode":[1],"validateOn":[1025,"validate-on"],"showInlineError":[516,"show-inline-error"],"label":[1],"hideLabel":[4,"hide-label"],"floatLabel":[4,"float-label"],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"step":[1],"size":[2],"type":[1],"form":[1],"value":[1025],"resize":[1],"rows":[2],"showCharCount":[4,"show-char-count"],"hasFocus":[32],"isLegacy":[32],"hasLabelSlot":[32],"hasButtonSlot":[32],"hasHelperSlot":[32],"_invalid":[32],"reportValidity":[64],"setFocus":[64],"getInputElement":[64],"showError":[64]}]]],["p-7367dfd5.system",[[1,"nano-spinner",{"type":[1],"overlay":[516],"hasText":[32]}]]],["p-9b9ca075.system",[[1,"nano-sticker",{"autoResize":[4,"auto-resize"],"isSticky":[1028,"is-sticky"],"offset":[1026],"position":[1],"quietMode":[1,"quiet-mode"],"hideOnNewStickers":[4,"hide-on-new-stickers"],"breakPointMax":[2,"break-point-max"],"breakPointMin":[2,"break-point-min"],"scrollParent":[1040],"stickTo":[1,"stick-to"],"isStuck":[32],"isRootSticker":[32],"hide":[32],"scrollHide":[32],"multiStickerHide":[32],"scrollingTo":[32],"quietModeIsOn":[32],"stuckCounter":[32],"stickerIndex":[32],"stickToEle":[32],"triggerPos":[32],"trigger":[32],"_offset":[32],"isHiding":[64],"isSticking":[64],"setTriggerPos":[64],"getTriggerPos":[64],"pauseHiding":[64]}]]],["p-20ad4e90.system",[[2,"nano-icon-button",{"iconName":[1,"icon-name"],"iconSrc":[1,"icon-src"],"type":[513],"name":[513],"value":[513],"label":[1],"disabled":[516],"href":[1],"target":[1]}]]],["p-ec01a0ad.system",[[1,"nano-resize-observe",{"states":[1],"currentWidth":[32],"currentHeight":[32],"classNames":[32]}],[1,"nano-skeleton",{"animated":[4]}]]],["p-e142f6b6.system",[[1,"nano-img",{"alt":[1],"src":[1],"srcSet":[1,"src-set"],"lazy":[4],"background":[4],"autoHeight":[1,"auto-height"],"loadSrc":[32],"loadError":[32],"hasLoaded":[32],"imgStates":[32],"_src":[32]}],[1,"nano-grid",{"sSize":[2,"s-size"],"mSize":[2,"m-size"],"lSize":[2,"l-size"],"xlSize":[2,"xl-size"],"sCols":[2,"s-cols"],"mCols":[2,"m-cols"],"lCols":[2,"l-cols"],"xlCols":[2,"xl-cols"],"xxlCols":[2,"xxl-cols"],"showHelper":[516,"show-helper"],"contentPanel":[516,"content-panel"],"fullHeight":[516,"full-height"],"ready":[32],"isSmall":[32],"isMedium":[32],"isLarge":[32],"isXL":[32],"isXXL":[32]}],[1,"nano-grid-item",{"gridStates":[1,"grid-states"],"changeBP":[64]}]]],["p-346f0d8c.system",[[1,"nano-icon",{"color":[1],"ariaLabel":[1537,"aria-label"],"flipRtl":[4,"flip-rtl"],"name":[1],"src":[1],"icon":[8],"size":[1],"lazy":[4],"svgContent":[32],"isVisible":[32],"isLoading":[32]}]]]]'),e)}))}}}));
-//# sourceMappingURL=p-1fd60eec.system.js.map

package/dist/nano-components/p-1fd60eec.system.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"names":["getDynamicImportFunction","namespace","replace","patchBrowser","plt","$cssShim$","win","__cssshim","patchCloneNodeFix","H","prototype","scriptElm","Array","from","doc","querySelectorAll","find","s","RegExp","NAMESPACE","test","src","getAttribute","opts","history","scrollRestoration","then","resourcesUrl","URL","location","href","patchDynamicImport","customElements","module","import","promiseResolve","base","orgScriptElm","importFunctionName","Function","Math","random","e","moduleMap_1","Map","url","mod","get","script_1","createElement","type","crossOrigin","createObjectURL","Blob","Promise","resolve","onload","m","remove","set","head","appendChild","HTMLElementPrototype","nativeCloneNodeFn","cloneNode","deep","this","nodeName","call","clonedNode","srcChildNodes","childNodes","i","length","nodeType","options","bootstrapLazy","JSON","parse"],"mappings":"0NAKA,IAAMA,EAA2B,SAACC,GAAc,MAAA,eAAeA,EAAUC,QAAQ,QAAS,MAC1F,IAAMC,EAAe,WAKK,CAElBC,EAAIC,UAAYC,EAAIC,UAEA,CAEpBC,EAAkBC,EAAEC,WAUxB,IAAMC,EACAC,MAAMC,KAAKC,EAAIC,iBAAiB,WAAWC,MAAK,SAACC,GAAM,OAAA,IAAIC,OAAO,IAAKC,EAAS,2BAA2BC,KAAKH,EAAEI,MAChHJ,EAAEK,aAAa,4BAA8BH,KAGrD,IAAMI,EAA6D,GACnE,GAAsB,iBAAkBZ,IAAca,QAAQC,kBAAsC,CAQhG,MAAO,CACHC,KAAI,cAQwC,CAChDH,EAAKI,aAAe,IAAIC,IAAI,IAAK,IAAIA,IAAIjB,EAAUW,aAAa,uBAAyBX,EAAUU,IAAKf,EAAIuB,SAASC,OAAOA,KAC/F,CACzBC,EAAmBR,EAAKI,aAAchB,GAE1C,IAAgCL,EAAI0B,eAAgB,CAGhD,OAAOC,EAAAC,OAA+C,0BAAYR,MAAK,WAAM,OAAAH,MAGrF,OAAOY,EAAeZ,IAE1B,IAAMQ,EAAqB,SAACK,EAAMC,GAC9B,IAAMC,EAAqBtC,EAAyBmB,GACpD,IAKIb,EAAIgC,GAAsB,IAAIC,SAAS,IAAK,sBAAsBC,KAAKC,UAE3E,MAAOC,GAIH,IAAMC,EAAY,IAAIC,IACtBtC,EAAIgC,GAAsB,SAACjB,GACvB,IAAMwB,EAAM,IAAIjB,IAAIP,EAAKe,GAAMN,KAC/B,IAAIgB,EAAMH,EAAUI,IAAIF,GACxB,IAAKC,EAAK,CACN,IAAME,EAASlC,EAAImC,cAAc,UACjCD,EAAOE,KAAO,SACdF,EAAOG,YAAcd,EAAac,YAClCH,EAAO3B,IAAMO,IAAIwB,gBAAgB,IAAIC,KAAK,CAAC,uBAAuBR,EAAG,aAAaP,EAAkB,WAAY,CAC5GY,KAAM,4BAEVJ,EAAM,IAAIQ,SAAQ,SAACC,GACfP,EAAOQ,OAAS,WACZD,EAAQjD,EAAIgC,GAAoBmB,GAChCT,EAAOU,aAGff,EAAUgB,IAAId,EAAKC,GACnBhC,EAAI8C,KAAKC,YAAYb,GAEzB,OAAOF,KAInB,IAAMtC,EAAoB,SAACsD,GACvB,IAAMC,EAAoBD,EAAqBE,UAC/CF,EAAqBE,UAAY,SAAUC,GACvC,GAAIC,KAAKC,WAAa,WAAY,CAC9B,OAAOJ,EAAkBK,KAAKF,KAAMD,GAExC,IAAMI,EAAaN,EAAkBK,KAAKF,KAAM,OAChD,IAAMI,EAAgBJ,KAAKK,WAC3B,GAAIN,EAAM,CACN,IAAK,IAAIO,EAAI,EAAGA,EAAIF,EAAcG,OAAQD,IAAK,CAE3C,GAAIF,EAAcE,GAAGE,WAAa,EAAG,CACjCL,EAAWR,YAAYS,EAAcE,GAAGR,UAAU,SAI9D,OAAOK,ICjHflE,IAAeuB,MAAK,SAAAiD,GAElB,OAAOC,EAAcC,KAAAC,MAAA,gobAAuCH","sourcesContent":["/*\n Stencil Client Patch Browser v2.5.9 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    if (BUILD.cssVarShim) {\n        // shim css vars\n        plt.$cssShim$ = win.__cssshim;\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    if (BUILD.profile && !performance.mark) {\n        // not all browsers support performance.mark/measure (Safari 10)\n        performance.mark = performance.measure = () => {\n            /*noop*/\n        };\n        performance.getEntriesByName = () => [];\n    }\n    // @ts-ignore\n    const scriptElm = BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? scriptElm['data-opts'] || {} : {};\n    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n        // Safari < v11 support: This IF is true if it's Safari below v11.\n        // This fn cannot use async/await since Safari didn't support it until v11,\n        // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n        // so both the ESM file and nomodule file would get downloaded. Only Safari\n        // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n        return {\n            then() {\n                /* promise noop */\n            },\n        };\n    }\n    if (!BUILD.safari10 && importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n    }\n    else if (BUILD.dynamicImportShim || BUILD.safari10) {\n        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n        if (BUILD.dynamicImportShim) {\n            patchDynamicImport(opts.resourcesUrl, scriptElm);\n        }\n        if (BUILD.dynamicImportShim && !win.customElements) {\n            // module support, but no custom elements support (Old Edge)\n            // @ts-ignore\n            return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n        }\n    }\n    return promiseResolve(opts);\n};\nconst patchDynamicImport = (base, orgScriptElm) => {\n    const importFunctionName = getDynamicImportFunction(NAMESPACE);\n    try {\n        // test if this browser supports dynamic imports\n        // There is a caching issue in V8, that breaks using import() in Function\n        // By generating a random string, we can workaround it\n        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n    }\n    catch (e) {\n        // this shim is specifically for browsers that do support \"esm\" imports\n        // however, they do NOT support \"dynamic\" imports\n        // basically this code is for old Edge, v18 and below\n        const moduleMap = new Map();\n        win[importFunctionName] = (src) => {\n            const url = new URL(src, base).href;\n            let mod = moduleMap.get(url);\n            if (!mod) {\n                const script = doc.createElement('script');\n                script.type = 'module';\n                script.crossOrigin = orgScriptElm.crossOrigin;\n                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n                    type: 'application/javascript',\n                }));\n                mod = new Promise((resolve) => {\n                    script.onload = () => {\n                        resolve(win[importFunctionName].m);\n                        script.remove();\n                    };\n                });\n                moduleMap.set(url, mod);\n                doc.head.appendChild(script);\n            }\n            return mod;\n        };\n    }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","import { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"]}

package/dist/nano-components/p-201b5f5b.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as i,e as s,g as n}from"./p-f55560d3.js";import{p as a,a as o,c as d}from"./p-6ecf2f5c.js";import{c as h}from"./p-d3af43d2.js";const r={d:"(\\d{1,2})",m:"(\\d{1,2})",y:"(\\d{4})"};let l=0,c=class{constructor(i){t(this,i),this.nanoChange=e(this,"nanoChange",7),this.nanoValidate=e(this,"nanoValidate",7),this.directInput=!1,this.dateOrderIndeces={d:0,m:1,y:3},this.inputId="nano-input-"+l++,this.helperText=!0,this.helperTextFormat={year:"numeric",month:"long",day:"numeric"},this.floatLabel=!1,this.name=this.inputId,this.readonly=!1,this.disabled=!1,this.autofocus=!1,this.clearInput=!1,this.value="",this.validateOn="submit",this.showInlineError=!0,this.dateOrder="dmy",this.required=!1,this.hideLabel=!1,this.picker=!0,this.pickerOpen=!1,this.closeAfterPicked=!0,this.onInputChange=t=>{t.stopPropagation(),this.setValue(t.target.value)},this.onInputValidate=t=>{t.stopPropagation(),this.nanoValidate.emit({isValid:t.detail.isValid,errorMessage:t.detail.errorMessage,originalEvent:t.detail.originalEvent})},this.onInputKey=()=>{this.directInput=!0},this.onDatePicked=t=>{this.directInput=!1,this.value=t.detail.value,this.closeAfterPicked&&(this.pickerOpen=!1)},this.onDropdownHide=()=>{setTimeout((()=>this.pickerOpen=!1),200),setTimeout((()=>this.trigger.focus()),20)},this.onDropdownShow=()=>{setTimeout((()=>this.pickerEle.setFocus()),200)},this.onTriggerClick=()=>{this.pickerOpen||(this.pickerOpen=!0)},this.onCloseClick=()=>{this.pickerOpen&&(this.pickerOpen=!1)},this.onCloseKeyDown=t=>{"Tab"===t.key&&t.shiftKey&&(this.pickerEle.setFocus(!0),t.preventDefault())}}handleValueChange(){this.directInput||(this.inputValue=this.formatIsoDate(this.value)),this.nanoChange.emit({value:this.value,date:a(this.value)}),this.directInput=!1}handleDateOrderChange(){this.setDatePattern()}testDateValidity(){const t=a(this.value);let e,i,s="";this.value&&t&&(this.min&&(e=a(this.min))&&t<e?s="Date below the minimum: "+e.toLocaleDateString(void 0,this.helperTextFormat):this.max&&(i=a(this.max))&&t>i&&(s="Date above the maximum: "+i.toLocaleDateString(void 0,this.helperTextFormat))),setTimeout((async()=>{if(!this.input)return;const e=await this.input.getInputElement();this.value.length&&!t&&(s="Please enter a valid date"),e.setCustomValidity(s),"dirty"===this.input.validateOn&&this.input.showError(s)}),100)}handlePickerOpenChange(){this.dropdown.open=this.pickerOpen}async reportValidity(t){return await this.input.reportValidity(t)}async setFocus(){this.input&&this.input.setFocus()}getInputElement(){return this.input.getInputElement()}async showError(t){this.input&&this.input.showError(t)}setDatePattern(){let t=[],e=[];Array.from(this.dateOrder).map(((i,s)=>{t.push(r[i]),this.dateOrderIndeces[i]=s,e.push("y"===i?"yyyy":i+i)})),this.pattern=t.join("\\W+"),this.placeholder||"false"===this.placeholder||(this.placeholder=e.join(" "))}formatIsoDate(t){let e=[];Array.from("ymd").map((t=>e.push(r[t])));const i=t.match(new RegExp(e.join("\\W+")));if(!i)return"";let s=[];return s.splice(this.dateOrderIndeces.d,0,i[3]),s.splice(this.dateOrderIndeces.m,0,i[2]),s.splice(this.dateOrderIndeces.y,0,i[1]),s.join(" ")}setValue(t){const e=t.match(new RegExp(this.pattern));if(!e)return void(this.value=t);let i=d(e[this.dateOrderIndeces.y+1],e[this.dateOrderIndeces.m+1],e[this.dateOrderIndeces.d+1]);if(!i&&(i=new Date(t),!i))return void(this.value=t);const s=o(i);return this.value=s,s}connectedCallback(){this.setDatePattern(),this.handleValueChange()}componentDidLoad(){this.pickerCloseBtn&&this.picker&&(this.pickerEle.firstFocusEle=this.pickerCloseBtn)}render(){let t="rtl"===this.host.ownerDocument.dir?"bottom-start":"bottom-end";const e=a(this.value),n=!!this.host.querySelector('[slot="helper"]');return i(s,{class:Object.assign({},h(this.color))},i("div",{class:"date-field"},i("nano-input",{class:"date-field__input",slot:"trigger",required:this.required||void 0,showInlineError:this.showInlineError,validateOn:this.validateOn,placeholder:"false"!==this.placeholder?this.placeholder:void 0,pattern:this.pattern,label:this.label,disabled:this.disabled||void 0,color:this.color||void 0,autofocus:this.autofocus||void 0,clearInput:this.clearInput||void 0,onNanoChange:this.onInputChange,onNanoInput:this.onInputKey,onNanoValidate:this.onInputValidate,name:"",form:this.form||void 0,size:this.size||void 0,readonly:this.readonly,value:this.inputValue,ref:t=>this.input=t,floatLabel:this.floatLabel,hideLabel:this.hideLabel,inputmode:"numeric"},i("slot",{name:"label"}),this.picker&&i("button",{class:"date-field__open",slot:"inline-button",type:"button",onClick:this.onTriggerClick,ref:t=>this.trigger=t,disabled:this.disabled||this.readonly},i("nano-icon",{name:"light/calendar-alt"})),(n||this.helperText||this.showInlineError)&&i("span",{slot:"helper"},i("span",{class:{vhidden:!!this.value.length}},i("slot",{name:"helper"})),this.helperText&&!!e&&i("span",null,e.toLocaleDateString(void 0,this.helperTextFormat)))),i("nano-dropdown",{placement:t,onNanoHide:this.onDropdownHide,onNanoShow:this.onDropdownShow,"dialog-title":"Choose a date",distance:-20,class:"date-field__dropdown",ref:t=>this.dropdown=t},i("div",null,i("div",{class:"date-field__close-bar"},i("button",{class:"date-field__close",type:"button",onClick:this.onCloseClick,onKeyDown:this.onCloseKeyDown,ref:t=>this.pickerCloseBtn=t},i("nano-icon",{name:"light/times"}),i("span",{class:"vhidden"},"Close window"))),i("nano-date-picker",{onNanoDatePicked:this.onDatePicked,min:this.min||void 0,max:this.max||void 0,"is-modal":!0,ref:t=>this.pickerEle=t,localization:this.localization,selectedDate:this.value||this.initialPickerDate,firstDayOfWeek:this.firstDayOfWeek,color:this.color||void 0}))),i("input",{type:"hidden",value:this.value,name:this.name})))}get host(){return n(this)}static get watchers(){return{value:["handleValueChange","testDateValidity"],dateOrder:["handleDateOrderChange"],min:["testDateValidity"],max:["testDateValidity"],pickerOpen:["handlePickerOpenChange"]}}};c.style='.sc-nano-date-input-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-date-input,*.sc-nano-date-input::before,*.sc-nano-date-input::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-nano-date-input-h{display:inline-block;width:100%;--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--open-btn-color:var(--nano-button-color, #f0efed);--open-btn-border:none;--close-btn-color:var(--nano-button-color, #f0efed);--picker-base-size:16px}.nano-color.sc-nano-date-input-h{--focus-shadow:0 0 0 0.1875rem rgba(var(--nano-color-tint-rgb), 0.56)}[disabled].sc-nano-date-input-h:not([disabled=false]){opacity:0.7}nano-icon.sc-nano-date-input{pointer-events:none}.date-field.sc-nano-date-input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative}@media (max-width: 35.9375em){.date-field.sc-nano-date-input::before{content:"";position:fixed;background:rgba(0, 0, 0, 0);left:0;right:0;top:0;bottom:0;z-index:-1;-webkit-transition:z-index 0.001s ease 1s, background 0.2s ease;transition:z-index 0.001s ease 1s, background 0.2s ease}[picker-open].sc-nano-date-input-h .date-field.sc-nano-date-input::before{-webkit-transition:z-index 0.001s ease, background 0.2s ease 0.001s;transition:z-index 0.001s ease, background 0.2s ease 0.001s;background:rgba(0, 0, 0, 0.5);z-index:100}}.date-field__dropdown.sc-nano-date-input{--padding:0;--overflow:visible;width:100%}.date-field__close-bar.sc-nano-date-input{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;text-overflow:ellipsis;white-space:nowrap;border:0;margin:0;overflow:visible;padding:0;position:absolute;right:-8px;top:-8px;width:auto;z-index:1}.date-field__open.sc-nano-date-input{background:var(--open-btn-color);border:var(--open-btn-border);margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.date-field__open.sc-nano-date-input:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);outline:none}.date-field__close.sc-nano-date-input{-webkit-appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-moz-appearance:none;appearance:none;background:var(--close-btn-color);border:0;border-radius:50%;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;height:24px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:0;width:24px}@media (min-width: 36em){.date-field__close.sc-nano-date-input{opacity:0}}.date-field__close.sc-nano-date-input:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);outline:none}@media (min-width: 36em){.date-field__close.sc-nano-date-input:focus{opacity:1}}.date-field__close.sc-nano-date-input nano-icon.sc-nano-date-input{margin:0 auto}.date-field.sc-nano-date-input nano-date-picker.sc-nano-date-input{font-size:var(--picker-base-size)}.vhidden.sc-nano-date-input{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}';export{c as nano_date_input}
-//# sourceMappingURL=p-201b5f5b.entry.js.map

package/dist/nano-components/p-201b5f5b.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/date-input/date-input.scss?tag=nano-date-input&encapsulation=scoped","src/components/date-input/date-input.tsx"],"names":["DateRegxps","d","m","y","inputIds","DateInput","[object Object]","hostRef","this","directInput","dateOrderIndeces","inputId","helperText","helperTextFormat","year","month","day","floatLabel","name","readonly","disabled","autofocus","clearInput","value","validateOn","showInlineError","dateOrder","required","hideLabel","picker","pickerOpen","closeAfterPicked","onInputChange","e","stopPropagation","setValue","target","onInputValidate","nanoValidate","emit","isValid","detail","errorMessage","originalEvent","onInputKey","onDatePicked","onDropdownHide","setTimeout","trigger","focus","onDropdownShow","pickerEle","setFocus","onTriggerClick","onCloseClick","onCloseKeyDown","key","shiftKey","preventDefault","inputValue","formatIsoDate","nanoChange","date","parseISODate","setDatePattern","valueDate","min","max","error","toLocaleDateString","undefined","async","input","getInputElement","length","setCustomValidity","showError","dropdown","open","validateFirst","reportValidity","message","dateRegexOrdered","dateStrOrd","Array","from","map","datepart","i","push","pattern","join","placeholder","isoDate","matches","match","RegExp","formatted","splice","createDate","Date","dateStr","printISODate","handleValueChange","pickerCloseBtn","firstFocusEle","placement","host","ownerDocument","dir","hasHelperSlot","querySelector","h","Host","class","Object","assign","createColorClasses","color","slot","label","onNanoChange","onNanoInput","onNanoValidate","form","size","ref","inputmode","type","onClick","vhidden","onNanoHide","onNanoShow","dialog-title","distance","onKeyDown","pickerClose","onNanoDatePicked","is-modal","localization","selectedDate","initialPickerDate","firstDayOfWeek"],"mappings":"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","sourcesContent":["@import '../../global/style/nano-theme/form';\n@import '../../global/style/utilities/globals';\n\n:host {\n  /**\n   * @prop --focus-shadow: defaults to #{$control-focus-style};\n   * @prop --open-btn-color: defaults to #{$button-bg-color};\n   * @prop --open-btn-border: defaults to none;\n   * @prop --close-btn-color: defaults to #{$color-celsius};\n   * @prop --picker-base-size: Base font size of the date picker component. Defaults to 16px;\n   */\n\n  display: inline-block;\n  width: 100%;\n\n  --focus-shadow: #{$control-focus-style};\n  --open-btn-color: #{$button-bg-color};\n  --open-btn-border: none;\n  --close-btn-color: #{$button-bg-color};\n  --picker-base-size: 16px;\n}\n\n:host(.nano-color) {\n  --focus-shadow: #{$control-focus-size current-color(tint, 0.56)};\n}\n\n:host([disabled]:not([disabled='false'])) {\n  opacity: 0.7;\n}\n\nnano-icon {\n  pointer-events: none;\n}\n\n.date-field {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n\n  @media (max-width: 35.9375em) {\n    &::before {\n      content: '';\n      position: fixed;\n      background: rgba(0, 0, 0, 0);\n      left: 0;\n      right: 0;\n      top: 0;\n      bottom: 0;\n      z-index: -1;\n      transition: z-index 0.001s ease 1s, background 0.2s ease;\n\n      :host([picker-open]) & {\n        transition: z-index 0.001s ease, background 0.2s ease 0.001s;\n        background: rgba(0, 0, 0, 0.5);\n        z-index: 100;\n      }\n    }\n  }\n\n  &__dropdown {\n    --padding: 0;\n    --overflow: visible;\n\n    width: 100%;\n  }\n\n  &__close-bar {\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    border: 0;\n    margin: 0;\n    overflow: visible;\n    padding: 0;\n    position: absolute;\n    right: -8px;\n    top: -8px;\n    width: auto;\n    z-index: 1;\n  }\n\n  &__open {\n    background: var(--open-btn-color);\n    border: var(--open-btn-border);\n    margin: 0;\n    appearance: none;\n\n    &:focus {\n      box-shadow: var(--focus-shadow);\n      outline: none;\n    }\n  }\n\n  &__close {\n    -webkit-appearance: none;\n    align-items: center;\n    appearance: none;\n    background: var(--close-btn-color);\n    border: 0;\n    border-radius: 50%;\n    cursor: pointer;\n    display: flex;\n    height: 24px;\n    justify-content: center;\n    padding: 0;\n    width: 24px;\n\n    @media (min-width: 36em) {\n      opacity: 0;\n    }\n\n    &:focus {\n      box-shadow: var(--focus-shadow);\n      outline: none;\n\n      @media (min-width: 36em) {\n        opacity: 1;\n      }\n    }\n\n    nano-icon {\n      margin: 0 auto;\n    }\n  }\n\n  nano-date-picker {\n    font-size: var(--picker-base-size);\n  }\n}\n\n.vhidden {\n  @include visually-hide();\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  h,\n  Prop,\n  Watch,\n  State,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n} from '@stencil/core';\nimport {\n  createDate,\n  DaysOfWeek,\n  printISODate,\n  parseISODate,\n} from '../../utils/date-utils';\n\nimport {\n  PickerChangeEvent,\n  DateInputChangeEventDetail,\n  Color,\n  LocalDateOpts,\n  DuetLocalizedText,\n  ControlValidity,\n  ControlValidityEventDetail,\n} from '../../interface';\nimport { createColorClasses } from '../../utils/utils';\n\nconst DateRegxps = {\n  d: '(\\\\d{1,2})',\n  m: '(\\\\d{1,2})',\n  y: '(\\\\d{4})',\n};\n\nlet inputIds = 0;\n\n/**\n * The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field. It has specific options for localisation, date formatting and validation.\n *\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 */\n@Component({\n  tag: 'nano-date-input',\n  styleUrl: 'date-input.scss',\n  scoped: true,\n})\nexport class DateInput implements ComponentInterface {\n  private pickerEle!: HTMLNanoDatePickerElement;\n  private trigger!: HTMLButtonElement;\n  private pickerCloseBtn!: HTMLButtonElement;\n  private dropdown!: HTMLNanoDropdownElement;\n  private input: HTMLNanoInputElement;\n\n  private directInput = false;\n  private dateOrderIndeces = { d: 0, m: 1, y: 3 };\n  private inputId = `nano-input-${inputIds++}`;\n\n  @Element() host: HTMLNanoDateInputElement;\n\n  // Private state\n\n  @State() pattern!: string;\n  @State() inputValue: string;\n\n  // Public Api / Prop\n\n  /**\n   * Whether to show a long form, confirmation date string of the one currently entered\n   */\n  @Prop() helperText: boolean = true;\n\n  /**\n   * Options for the date string display. Refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString.\n   */\n  @Prop() helperTextFormat: LocalDateOpts = {\n    year: 'numeric',\n    month: 'long',\n    day: 'numeric',\n  };\n\n  /**\n   * Enable floating label behaviour. Will disable placeholder if set.\n   */\n  @Prop() floatLabel: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * The initial size (number of characters) of the control.\n   */\n  @Prop() size?: 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   * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n   * Default is Monday.\n   */\n  @Prop() firstDayOfWeek?: DaysOfWeek;\n\n  /**\n   * Button labels, day names, month names, etc, used for localization.\n   * Default is English.\n   */\n  @Prop() localization?: DuetLocalizedText;\n\n  /**\n   * If `true`, the user cannot interact with the input.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The color to use from the application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n   */\n  @Prop() autofocus = false;\n\n  /**\n   * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.\n   */\n  @Prop() clearInput = false;\n\n  /**\n   * String to place within a label element. Alternatively you may use a label slot.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Instructional text that shows before the input has a value.\n   * The pattern prop will be used to create a placeholder automatically if unused.\n   */\n  @Prop({ mutable: true }) placeholder: string;\n\n  /**\n   * Current value. Must be in IS0-8601 format: YYYY-MM-DD.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  @Watch('value')\n  handleValueChange() {\n    if (!this.directInput) this.inputValue = this.formatIsoDate(this.value);\n    this.nanoChange.emit({ value: this.value, date: parseISODate(this.value) });\n    this.directInput = false;\n  }\n\n  /**\n   * When should the field perform validation\n   */\n  @Prop() validateOn?: 'dirty' | 'submit' | 'submitThenDirty' = 'submit';\n\n  /**\n   * Whether to show validation errors underneath input\n   */\n  @Prop({ reflect: true }) showInlineError = true;\n\n  /**\n   * The order of the date parts for entry and display.\n   * e.g. dmy = dd mm yyyy\n   */\n  @Prop() dateOrder: 'dmy' | 'mdy' | 'ymd' | 'dym' = 'dmy';\n\n  @Watch('dateOrder')\n  handleDateOrderChange() {\n    this.setDatePattern();\n  }\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required = false;\n\n  /**\n   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property.\n   */\n  @Prop() min?: string;\n\n  /**\n   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property.\n   */\n  @Prop() max?: string;\n\n  /**\n   * Visually hide the label - but make it accessible.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  @Watch('min')\n  @Watch('max')\n  @Watch('value')\n  testDateValidity() {\n    const valueDate = parseISODate(this.value);\n    let min: Date,\n      max: Date,\n      error: string = '';\n\n    if (this.value && valueDate) {\n      if (this.min && (min = parseISODate(this.min)) && valueDate < min) {\n        error =\n          'Date below the minimum: ' +\n          min.toLocaleDateString(undefined, this.helperTextFormat);\n      } else if (\n        this.max &&\n        (max = parseISODate(this.max)) &&\n        valueDate > max\n      ) {\n        error =\n          'Date above the maximum: ' +\n          max.toLocaleDateString(undefined, this.helperTextFormat);\n      }\n    }\n\n    setTimeout(async (_) => {\n      if (!this.input) return;\n      const input = await this.input.getInputElement();\n      if (this.value.length && !valueDate) error = 'Please enter a valid date';\n\n      input.setCustomValidity(error);\n      if (this.input.validateOn === 'dirty') {\n        this.input.showError(error);\n      }\n    }, 100);\n  }\n\n  /**\n   * Show a date picker. Date pickers are not very useful\n   * if the potential input is too far in the distance or past\n   * e.g. Birthdays\n   */\n  @Prop() picker: boolean = true;\n\n  /**\n   * Initial picker date. Will be to `value` if set. Will be today's date if nothing set.\n   * Must be in IS0-8601 format: YYYY-MM-DD.\n   */\n  @Prop() initialPickerDate?: string;\n\n  /**\n   * Set / read whether the picker is currently open.\n   */\n  @Prop({ reflect: true, mutable: true }) pickerOpen: boolean = false;\n\n  @Watch('pickerOpen')\n  handlePickerOpenChange() {\n    this.dropdown.open = this.pickerOpen;\n  }\n\n  /**\n   * Close the picker after a date is selected\n   */\n  @Prop() closeAfterPicked: boolean = true;\n\n  // Event emitters\n\n  /**\n   * Event emitted when a date is selected.\n   */\n  @Event() nanoChange: EventEmitter<DateInputChangeEventDetail>;\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  // 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    return await this.input.reportValidity(validateFirst);\n  }\n\n  /**\n   * Sets focus on the child `nano-input`.\n   */\n  @Method()\n  async setFocus() {\n    if (this.input) this.input.setFocus();\n  }\n\n  /**\n   * Returns the native `<input>` element used under the hood.\n   */\n  @Method()\n  getInputElement(): Promise<HTMLInputElement | HTMLTextAreaElement> {\n    return this.input.getInputElement();\n  }\n\n  /**\n   * Invalidate the field and show a custom error message. To clear the error you will need to re-call this method with an empty string.\n   */\n  @Method()\n  async showError(message: string) {\n    if (!this.input) return;\n    this.input.showError(message);\n  }\n\n  // Event handlers\n\n  private onInputChange = (e: CustomEvent) => {\n    e.stopPropagation();\n    this.setValue((e.target as HTMLInputElement).value);\n  };\n\n  private onInputValidate = (e: CustomEvent<ControlValidityEventDetail>) => {\n    e.stopPropagation();\n    this.nanoValidate.emit({\n      isValid: e.detail.isValid,\n      errorMessage: e.detail.errorMessage,\n      originalEvent: e.detail.originalEvent,\n    });\n  };\n\n  private onInputKey = () => {\n    this.directInput = true;\n  };\n\n  private onDatePicked = (e: { detail: PickerChangeEvent }) => {\n    this.directInput = false;\n    this.value = e.detail.value;\n    if (this.closeAfterPicked) this.pickerOpen = false;\n  };\n\n  private onDropdownHide = () => {\n    setTimeout((_) => (this.pickerOpen = false), 200);\n    setTimeout((_) => this.trigger.focus(), 20);\n  };\n\n  private onDropdownShow = () => {\n    setTimeout((_) => this.pickerEle.setFocus(), 200);\n  };\n\n  private onTriggerClick = () => {\n    if (!this.pickerOpen) this.pickerOpen = true;\n  };\n\n  private onCloseClick = () => {\n    if (this.pickerOpen) this.pickerOpen = false;\n  };\n\n  private onCloseKeyDown = (e: KeyboardEvent) => {\n    // this ensures focus is trapped inside the picker\n    if (e.key === 'Tab' && e.shiftKey) {\n      this.pickerEle.setFocus(true);\n      e.preventDefault();\n    }\n  };\n\n  // Private logic\n\n  // set the regexp input pattern and placeholder (if necessary)\n  private setDatePattern() {\n    let dateRegexOrdered = [];\n    let dateStrOrd = [];\n    Array.from(this.dateOrder).map((datepart, i) => {\n      dateRegexOrdered.push(DateRegxps[datepart]);\n      this.dateOrderIndeces[datepart] = i;\n      dateStrOrd.push(datepart === 'y' ? 'yyyy' : datepart + datepart);\n    });\n    this.pattern = dateRegexOrdered.join('\\\\W+');\n    if (!this.placeholder && this.placeholder !== 'false')\n      this.placeholder = dateStrOrd.join(' ');\n  }\n\n  // set the public facing date string\n  private formatIsoDate(isoDate: string) {\n    let dateRegexOrdered = [];\n    Array.from('ymd').map((datepart) =>\n      dateRegexOrdered.push(DateRegxps[datepart])\n    );\n    const matches = isoDate.match(new RegExp(dateRegexOrdered.join('\\\\W+')));\n    if (!matches) return '';\n\n    let formatted = [];\n    formatted.splice(this.dateOrderIndeces.d, 0, matches[3]);\n    formatted.splice(this.dateOrderIndeces.m, 0, matches[2]);\n    formatted.splice(this.dateOrderIndeces.y, 0, matches[1]);\n    return formatted.join(' ');\n  }\n\n  // on manual user entry, set the value that will be sent with the form field\n  private setValue(inputValue: string) {\n    const matches = inputValue.match(new RegExp(this.pattern));\n\n    // it's an invalid date, but we still need to set it\n    if (!matches) {\n      this.value = inputValue;\n      return;\n    }\n\n    let date = createDate(\n      matches[this.dateOrderIndeces.y + 1],\n      matches[this.dateOrderIndeces.m + 1],\n      matches[this.dateOrderIndeces.d + 1]\n    );\n\n    if (!date) {\n      // last ditch attempt - see if the browser can get something\n      date = new Date(inputValue);\n\n      // it's definitely an invalid date, but set it anyway for validation messages\n      if (!date) {\n        this.value = inputValue;\n        return;\n      }\n    }\n\n    const dateStr = printISODate(date);\n    this.value = dateStr;\n    return dateStr;\n  }\n\n  connectedCallback() {\n    this.setDatePattern();\n    this.handleValueChange();\n  }\n\n  componentDidLoad() {\n    if (!this.pickerCloseBtn || !this.picker) return;\n    this.pickerEle.firstFocusEle = this.pickerCloseBtn;\n  }\n\n  render() {\n    let placement: 'bottom-start' | 'bottom-end' =\n      (this.host.ownerDocument as Document).dir === 'rtl'\n        ? 'bottom-start'\n        : 'bottom-end';\n    const valueDate = parseISODate(this.value);\n    const hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n\n    return (\n      <Host class={{ ...createColorClasses(this.color) }}>\n        <div class=\"date-field\">\n          <nano-input\n            class=\"date-field__input\"\n            slot=\"trigger\"\n            required={this.required || undefined}\n            showInlineError={this.showInlineError}\n            validateOn={this.validateOn}\n            placeholder={\n              this.placeholder !== 'false' ? this.placeholder : undefined\n            }\n            pattern={this.pattern}\n            label={this.label}\n            disabled={this.disabled || undefined}\n            color={this.color || undefined}\n            autofocus={this.autofocus || undefined}\n            clearInput={this.clearInput || undefined}\n            onNanoChange={this.onInputChange}\n            onNanoInput={this.onInputKey}\n            onNanoValidate={this.onInputValidate}\n            name=\"\"\n            form={this.form || undefined}\n            size={this.size || undefined}\n            readonly={this.readonly}\n            value={this.inputValue}\n            ref={(input) => (this.input = input)}\n            floatLabel={this.floatLabel}\n            hideLabel={this.hideLabel}\n            inputmode={'numeric'}\n          >\n            <slot name=\"label\" />\n            {this.picker && (\n              <button\n                class=\"date-field__open\"\n                slot=\"inline-button\"\n                type=\"button\"\n                onClick={this.onTriggerClick}\n                ref={(trigger) => (this.trigger = trigger)}\n                disabled={this.disabled || this.readonly}\n              >\n                <nano-icon name=\"light/calendar-alt\"></nano-icon>\n              </button>\n            )}\n            {(hasHelperSlot || this.helperText || this.showInlineError) && (\n              <span slot=\"helper\">\n                <span class={{ vhidden: !!this.value.length }}>\n                  <slot name=\"helper\" />\n                </span>\n                {this.helperText && !!valueDate && (\n                  <span>\n                    {valueDate.toLocaleDateString(\n                      undefined,\n                      this.helperTextFormat\n                    )}\n                  </span>\n                )}\n              </span>\n            )}\n          </nano-input>\n          <nano-dropdown\n            placement={placement}\n            onNanoHide={this.onDropdownHide}\n            onNanoShow={this.onDropdownShow}\n            dialog-title=\"Choose a date\"\n            distance={-20}\n            class=\"date-field__dropdown\"\n            ref={(dropdown) => (this.dropdown = dropdown)}\n          >\n            <div>\n              <div class=\"date-field__close-bar\">\n                <button\n                  class=\"date-field__close\"\n                  type=\"button\"\n                  onClick={this.onCloseClick}\n                  onKeyDown={this.onCloseKeyDown}\n                  ref={(pickerClose) => (this.pickerCloseBtn = pickerClose)}\n                >\n                  <nano-icon name=\"light/times\"></nano-icon>\n                  <span class=\"vhidden\">Close window</span>\n                </button>\n              </div>\n              <nano-date-picker\n                onNanoDatePicked={this.onDatePicked}\n                min={this.min || undefined}\n                max={this.max || undefined}\n                is-modal={true}\n                ref={(picker) => (this.pickerEle = picker)}\n                localization={this.localization}\n                selectedDate={this.value || this.initialPickerDate}\n                firstDayOfWeek={this.firstDayOfWeek}\n                color={this.color || undefined}\n              ></nano-date-picker>\n            </div>\n          </nano-dropdown>\n          <input type=\"hidden\" value={this.value} name={this.name} />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-214ad382.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as o,h as i,e as r,g as e}from"./p-f55560d3.js";import{P as s}from"./p-4ee095f3.js";let n=0,a=class{constructor(i){t(this,i),this.nanoShow=o(this,"nanoShow",7),this.nanoAfterShow=o(this,"nanoAfterShow",7),this.nanoHide=o(this,"nanoHide",7),this.nanoAfterHide=o(this,"nanoAfterHide",7),this.componentId="tooltip-"+ ++n,this.isVisible=!1,this.content="",this.placement="top",this.disabled=!1,this.distance=10,this.open=!1,this.skidding=0,this.trigger="hover focus",this.handleBlur=()=>{this.hasTrigger("focus")&&this.hide()},this.handleClick=()=>{this.hasTrigger("click")&&(this.open?this.hide():this.show())},this.handleFocus=()=>{this.hasTrigger("focus")&&this.show()},this.handleKeyDown=t=>{this.open&&"Escape"===t.key&&(t.stopPropagation(),this.hide())},this.handleMouseOver=()=>{this.hasTrigger("hover")&&this.show()},this.handleMouseOut=()=>{this.hasTrigger("hover")&&this.hide()},this.handleSlotChange=()=>{const t=this.target,o=this.getTarget();o!==t&&(t&&t.removeAttribute("aria-describedby"),o.setAttribute("aria-describedby",this.componentId))}}handleOpenChange(){this.open?this.show():this.hide()}componentDidLoad(){this.target=this.getTarget(),this.popover=new s(this.target,this.tooltipPositioner),this.syncOptions(),this.host.addEventListener("blur",this.handleBlur,!0),this.host.addEventListener("click",this.handleClick,!0),this.host.addEventListener("focus",this.handleFocus,!0),this.tooltipPositioner.hidden=!this.open,this.open&&this.show()}componentDidUpdate(){this.syncOptions()}disconnectedCallback(){this.popover.destroy(),this.host.removeEventListener("blur",this.handleBlur,!0),this.host.removeEventListener("click",this.handleClick,!0),this.host.removeEventListener("focus",this.handleFocus,!0)}async show(){this.isVisible||(this.nanoShow.emit().defaultPrevented?this.open=!1:(this.isVisible=!0,this.open=!0,this.popover.show()))}async hide(){this.isVisible&&(this.nanoHide.emit().defaultPrevented?this.open=!0:(this.isVisible=!1,this.open=!1,this.popover.hide()))}getTarget(){const t=[...Array.from(this.host.children)].find((t=>"style"!==t.tagName.toLowerCase()&&"content"!==t.getAttribute("slot")));if(!t)throw new Error("Invalid tooltip target: no child element was found.");return t}hasTrigger(t){return this.trigger.split(" ").includes(t)}syncOptions(){this.popover.setOptions({placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.tooltip,onAfterHide:()=>this.nanoAfterHide.emit(),onAfterShow:()=>this.nanoAfterShow.emit()})}render(){return i(r,{onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onMouseOut:this.handleMouseOut},i("slot",{onSlotchange:this.handleSlotChange}),!this.disabled&&i("div",{ref:t=>this.tooltipPositioner=t,class:"tooltip-positioner"},i("div",{part:"base",ref:t=>this.tooltip=t,id:this.componentId,class:{tooltip:!0,"tooltip--open":this.open},role:"tooltip","aria-hidden":this.open?"false":"true"},i("slot",{name:"content"},this.content))))}get host(){return e(this)}static get watchers(){return{open:["handleOpenChange"]}}};a.style=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{--max-width:20rem;--hide-delay:0s;--hide-duration:0.125s;--hide-timing-function:ease;--show-delay:0.125s;--show-duration:0.125s;--show-timing-function:ease;display:contents}.tooltip{max-width:var(--max-width);border-radius:var(--nano-tooltip-border-radius, var(--nano-border-radius-small, 2px));background-color:black;font-size:var(--nano-fontsize-small, 0.875rem);line-height:1.5;color:white;opacity:0;padding:var(--nano-tooltip-padding, var(--nano-spacing-xsmall, 4px) var(--nano-spacing-small, 8px));-webkit-transform:translateY(10px) translateZ(0);transform:translateY(10px) translateZ(0);-webkit-transform-origin:bottom;transform-origin:bottom;-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:opacity, transform;transition-property:opacity, transform, -webkit-transform;-webkit-transition-delay:var(--hide-delay);transition-delay:var(--hide-delay);-webkit-transition-duration:var(--hide-duration);transition-duration:var(--hide-duration);-webkit-transition-timing-function:var(--hide-timing-function);transition-timing-function:var(--hide-timing-function);white-space:normal}.tooltip::after{content:"";position:absolute;width:0;height:0;color:black}.tooltip-positioner{position:absolute;z-index:var(--nano-layer-index-tooltip, 1000);pointer-events:none}.tooltip-positioner[data-popper-placement^=top] .tooltip{-webkit-transform-origin:bottom;transform-origin:bottom;-webkit-transform:translateY(-10px) translateZ(0);transform:translateY(-10px) translateZ(0)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip{-webkit-transform-origin:top;transform-origin:top}.tooltip-positioner[data-popper-placement^=left] .tooltip{-webkit-transform-origin:right;transform-origin:right}.tooltip-positioner[data-popper-placement^=right] .tooltip{-webkit-transform-origin:left;transform-origin:left}.tooltip-positioner.popover-visible .tooltip{opacity:1;-webkit-transform:none;transform:none;-webkit-transition-delay:var(--show-delay);transition-delay:var(--show-delay);-webkit-transition-duration:var(--show-duration);transition-duration:var(--show-duration);-webkit-transition-timing-function:var(--show-timing-function);transition-timing-function:var(--show-timing-function)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip::after{bottom:100%;left:calc(50% - 5px);border-bottom:5px solid;border-left:5px solid transparent;border-right:5px solid transparent}.tooltip-positioner[data-popper-placement=bottom-start] .tooltip::after{left:5px}.tooltip-positioner[data-popper-placement=bottom-end] .tooltip::after{right:5px;left:auto}.tooltip-positioner[data-popper-placement^=top] .tooltip::after{top:100%;left:calc(50% - 5px);border-top:5px solid;border-left:5px solid transparent;border-right:5px solid transparent}.tooltip-positioner[data-popper-placement=top-start] .tooltip::after{left:5px}.tooltip-positioner[data-popper-placement=top-end] .tooltip::after{right:5px;left:auto}.tooltip-positioner[data-popper-placement^=left] .tooltip::after{top:calc(50% - 5px);left:100%;border-left:5px solid;border-top:5px solid transparent;border-bottom:5px solid transparent}.tooltip-positioner[data-popper-placement=left-start] .tooltip::after{top:5px}.tooltip-positioner[data-popper-placement=left-end] .tooltip::after{top:auto;bottom:5px}.tooltip-positioner[data-popper-placement^=right] .tooltip::after{top:calc(50% - 5px);right:100%;border-right:5px solid;border-top:5px solid transparent;border-bottom:5px solid transparent}.tooltip-positioner[data-popper-placement=right-start] .tooltip::after{top:5px}.tooltip-positioner[data-popper-placement=right-end] .tooltip::after{top:auto;bottom:5px}';export{a as nano_tooltip}
-//# sourceMappingURL=p-214ad382.entry.js.map

package/dist/nano-components/p-214ad382.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/tooltip/tooltip.tsx","src/components/tooltip/tooltip.scss?tag=nano-tooltip&encapsulation=shadow"],"names":["id","Tooltip","[object Object]","hostRef","this","componentId","isVisible","content","placement","disabled","distance","open","skidding","trigger","handleBlur","hasTrigger","hide","handleClick","show","handleFocus","handleKeyDown","event","key","stopPropagation","handleMouseOver","handleMouseOut","handleSlotChange","oldTarget","target","newTarget","getTarget","removeAttribute","setAttribute","popover","Popover","tooltipPositioner","syncOptions","host","addEventListener","hidden","destroy","removeEventListener","nanoShow","emit","defaultPrevented","nanoHide","Array","from","children","find","el","tagName","toLowerCase","getAttribute","Error","triggerType","split","includes","setOptions","transitionElement","tooltip","onAfterHide","nanoAfterHide","onAfterShow","nanoAfterShow","h","Host","onKeyDown","onMouseOver","onMouseOut","onSlotchange","ref","class","part","tooltip--open","role","aria-hidden","name"],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  Watch,\n  h,\n} from '@stencil/core';\nimport Popover from '../../utils/popover';\n\nlet id = 0;\n\n/**\n * Tooltips display additional information based on a specific action.\n * @slot - The tooltip's target element. Only the first element will be used as the target.\n * @slot content - The tooltip's content. Alternatively, you can use the content prop.\n */\n@Component({\n  tag: 'nano-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true,\n})\nexport class Tooltip {\n  private componentId = `tooltip-${++id}`;\n  private isVisible = false;\n  private popover: Popover;\n  private tooltipPositioner: HTMLElement;\n  private target: HTMLElement;\n  private tooltip: any;\n\n  @Element() host: HTMLNanoTooltipElement;\n\n  /** The tooltip's content. Alternatively, you can use the content slot. */\n  @Prop() content = '';\n\n  /**\n   * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n   * inside of the viewport.\n   */\n  @Prop() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /** Set to true to disable the tooltip so it won't show when triggered. */\n  @Prop() disabled = false;\n\n  /** The distance in pixels from which to offset the tooltip away from its target. */\n  @Prop() distance = 10;\n\n  /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The distance in pixels from which to offset the tooltip along its target. */\n  @Prop() skidding = 0;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger: string = 'hover focus';\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the tooltip has shown and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the tooltip has hidden and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  componentDidLoad() {\n    this.target = this.getTarget();\n    this.popover = new Popover(this.target, this.tooltipPositioner);\n    this.syncOptions();\n\n    this.host.addEventListener('blur', this.handleBlur, true);\n    this.host.addEventListener('click', this.handleClick, true);\n    this.host.addEventListener('focus', this.handleFocus, true);\n\n    // Show on init if open\n    this.tooltipPositioner.hidden = !this.open;\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  componentDidUpdate() {\n    this.syncOptions();\n  }\n\n  disconnectedCallback() {\n    this.popover.destroy();\n\n    this.host.removeEventListener('blur', this.handleBlur, true);\n    this.host.removeEventListener('click', this.handleClick, true);\n    this.host.removeEventListener('focus', this.handleFocus, true);\n  }\n\n  /** Shows the tooltip. */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible) {\n      return;\n    }\n\n    const slShow = this.nanoShow.emit();\n    if (slShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.isVisible = true;\n    this.open = true;\n    this.popover.show();\n  }\n\n  /** Shows the tooltip. */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible) {\n      return;\n    }\n\n    const slHide = this.nanoHide.emit();\n    if (slHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.isVisible = false;\n    this.open = false;\n    this.popover.hide();\n  }\n\n  private getTarget() {\n    // Get the first child that isn't a <style> or content slot\n    const target = [...Array.from(this.host.children)].find(\n      (el) =>\n        el.tagName.toLowerCase() !== 'style' &&\n        el.getAttribute('slot') !== 'content'\n    ) as HTMLElement;\n\n    if (!target) {\n      throw new Error('Invalid tooltip target: no child element was found.');\n    }\n\n    return target;\n  }\n\n  private handleBlur = () => {\n    if (this.hasTrigger('focus')) {\n      this.hide();\n    }\n  };\n\n  private handleClick = () => {\n    if (this.hasTrigger('click')) {\n      this.open ? this.hide() : this.show();\n    }\n  };\n\n  private handleFocus = () => {\n    if (this.hasTrigger('focus')) {\n      this.show();\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Pressing escape when the target element has focus should dismiss the tooltip\n    if (this.open && event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n    }\n  };\n\n  private handleMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      this.show();\n    }\n  };\n\n  private handleMouseOut = () => {\n    if (this.hasTrigger('hover')) {\n      this.hide();\n    }\n  };\n\n  private handleSlotChange = () => {\n    const oldTarget = this.target;\n    const newTarget = this.getTarget();\n\n    if (newTarget !== oldTarget) {\n      if (oldTarget) {\n        oldTarget.removeAttribute('aria-describedby');\n      }\n      newTarget.setAttribute('aria-describedby', this.componentId);\n    }\n  };\n\n  private hasTrigger(triggerType: string) {\n    const triggers = this.trigger.split(' ');\n    return triggers.includes(triggerType);\n  }\n\n  private syncOptions() {\n    this.popover.setOptions({\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.tooltip,\n      onAfterHide: () => this.nanoAfterHide.emit(),\n      onAfterShow: () => this.nanoAfterShow.emit(),\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        onKeyDown={this.handleKeyDown}\n        onMouseOver={this.handleMouseOver}\n        onMouseOut={this.handleMouseOut}\n      >\n        <slot onSlotchange={this.handleSlotChange} />\n\n        {!this.disabled && (\n          <div\n            ref={(el) => (this.tooltipPositioner = el)}\n            class=\"tooltip-positioner\"\n          >\n            <div\n              part=\"base\"\n              ref={(el) => (this.tooltip = el)}\n              id={this.componentId}\n              class={{\n                tooltip: true,\n                'tooltip--open': this.open,\n              }}\n              role=\"tooltip\"\n              aria-hidden={this.open ? 'false' : 'true'}\n            >\n              <slot name=\"content\">{this.content}</slot>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n","@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n/**\n * @prop --hide-delay: The amount of time to wait before hiding the tooltip.\n * @prop --hide-duration: The amount of time the hide transition takes to complete.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --show-delay: The amount of time to wait before showing the tooltip.\n * @prop --show-duration: The amount of time the show transition takes to complete.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n */\n:host {\n  --max-width: 20rem;\n  --hide-delay: 0s;\n  --hide-duration: 0.125s;\n  --hide-timing-function: ease;\n  --show-delay: 0.125s;\n  --show-duration: 0.125s;\n  --show-timing-function: ease;\n\n  /* autoprefixer: ignore next */\n  display: contents;\n}\n\n.tooltip {\n  $self: &;\n\n  max-width: var(--max-width);\n  border-radius: #{$tooltip-border-radius};\n  background-color: black;\n  font-size: #{$tooltip-fontsize};\n  line-height: 1.5;\n  color: white;\n  opacity: 0;\n  padding: #{$tooltip-padding};\n  transform: translateY(10px) translateZ(0);\n  transform-origin: bottom;\n  transition-property: opacity, transform;\n  transition-delay: var(--hide-delay);\n  transition-duration: var(--hide-duration);\n  transition-timing-function: var(--hide-timing-function);\n  white-space: normal;\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    color: black;\n  }\n\n  &-positioner {\n    position: absolute;\n    z-index: #{$layer-index-tooltip};\n    pointer-events: none;\n\n    &[data-popper-placement^='top'] #{$self} {\n      transform-origin: bottom;\n      transform: translateY(-10px) translateZ(0);\n    }\n\n    &[data-popper-placement^='bottom'] #{$self} {\n      transform-origin: top;\n    }\n\n    &[data-popper-placement^='left'] #{$self} {\n      transform-origin: right;\n    }\n\n    &[data-popper-placement^='right'] #{$self} {\n      transform-origin: left;\n    }\n\n    &.popover-visible #{$self} {\n      opacity: 1;\n      transform: none;\n      transition-delay: var(--show-delay);\n      transition-duration: var(--show-duration);\n      transition-timing-function: var(--show-timing-function);\n    }\n\n    // Arrow + bottom\n    &[data-popper-placement^='bottom'] #{$self}::after {\n      bottom: 100%;\n      left: calc(50% - #{$tooltip-arrow-size});\n      border-bottom: #{$tooltip-arrow-size} solid;\n      border-left: #{$tooltip-arrow-size} solid transparent;\n      border-right: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='bottom-start'] #{$self}::after {\n      left: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='bottom-end'] #{$self}::after {\n      right: #{$tooltip-arrow-offset};\n      left: auto;\n    }\n\n    // Arrow + top\n    &[data-popper-placement^='top'] #{$self}::after {\n      top: 100%;\n      left: calc(50% - #{$tooltip-arrow-size});\n      border-top: #{$tooltip-arrow-size} solid;\n      border-left: #{$tooltip-arrow-size} solid transparent;\n      border-right: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='top-start'] #{$self}::after {\n      left: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='top-end'] #{$self}::after {\n      right: #{$tooltip-arrow-offset};\n      left: auto;\n    }\n\n    // Arrow + left\n    &[data-popper-placement^='left'] #{$self}::after {\n      top: calc(50% - #{$tooltip-arrow-size});\n      left: 100%;\n      border-left: #{$tooltip-arrow-size} solid;\n      border-top: #{$tooltip-arrow-size} solid transparent;\n      border-bottom: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='left-start'] #{$self}::after {\n      top: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='left-end'] #{$self}::after {\n      top: auto;\n      bottom: #{$tooltip-arrow-offset};\n    }\n\n    // Arrow + right\n    &[data-popper-placement^='right'] #{$self}::after {\n      top: calc(50% - #{$tooltip-arrow-size});\n      right: 100%;\n      border-right: #{$tooltip-arrow-size} solid;\n      border-top: #{$tooltip-arrow-size} solid transparent;\n      border-bottom: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='right-start'] #{$self}::after {\n      top: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='right-end'] #{$self}::after {\n      top: auto;\n      bottom: #{$tooltip-arrow-offset};\n    }\n  }\n}\n"]}