@nanoporetech-digital/components 4.10.0 → 5.0.0

package/dist/nano-components/{p-58b53239.entry.js.map → p-553acf24.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["GlobalNavUserProfile","render","this","myAccountUser","h","href","userProfileUrl","class","src","_a","small_avatar_url","alt","height","width","is_nanopore_user","getAssetPath","name","job_title","company","slot","navItemCss","NavItem","hasSecondarySlot","animating","closeSecondary","async","didOpen","open","displayTransition","secondaryDiv","nanoClosing","emit","secondaryMenu","openSecondary","window","innerWidth","secondaryActiveWidth","secondaryFallback","call","nanoOpening","toggleSecondary","handleFocus","hasFocus","nanoFocus","handleHostBlur","el","removeAttribute","nanoBlur","handleHostClick","ev","hasAnchorEle","foundlink","target","closest","btn","click","handleMouseEnter","globalNavEle","classList","contains","timeToWait","getSiblings","length","clearTimeout","waitHide","fromHover","waitShow","setTimeout","handleMouseLeave","handleClick","focus","openChange","didOpenChange","document","activeElement","body","preventScroll","tabIndex","nanoClose","panelIO","IntersectionObserver","data","boundingClientRect","top","scrollIntoView","behavior","disconnect","threshold","observe","focusableChild","getTabbableElements","nanoOpen","handleClose","e","composedPath","some","componentWillLoad","secondaryEle","querySelector","link","getDirectChildren","addEventListener","connectedCallback","isInGlobalNav","isInMenuDrawer","isInMenu","parentElement","Host","selected","disabled","onBlur","dir","ownerDocument","onMouseEnter","onMouseLeave","onClick","role","part","ref","a","onFocus","notification","div","selectCss","selectIds","Select","inputCtrl","_inputCtrl","input","setDataListOpts","selectWrap","_selectWrap","ele","datalist","_datalist","constructor","hostRef","valueItems","selectId","rtl","onInit","customError","_value","multiple","_options","customValidate","nativeSelect","setCustomValidity","required","valArray","allowCustomValues","isValidValues","max","min","showInlineValidation","validateOn","_invalid","showErrorMsg","errorMessage","validity","valid","validationMessage","nanoValidate","isValid","invalid","originalEvent","handleInvalid","showInlineError","preventDefault","requestAnimationFrame","setValue","value","detail","includes","currInsertIndex","slice","inputSearchVal","removeValue","toFind","filter","val","setFocus","setOptions","activeOptions","_eOptions","map","ao","label","filterMeta","handleDocumentKeyDown","rm","key","previousElementSibling","dataset","nextElementSibling","previousSibling","nextSibling","event","Event","dispatchEvent","clearSelectValue","clearSelect","readonly","stopPropagation","onDragStart","dragVal","onDragEnd","onDragLeave","spanVal","to","indexOf","from","tmpArr","tmpVal","onMultiInput","trim","nanoSearchChange","debounce","validityMessage","split","Array","isArray","options","opts","opt","debounceChanged","debounceEvent","shouldValidate","valueChanged","nanoChange","currDWConfig","dropDownConfig","Object","assign","tetherTo","validateFirst","Promise","resolve","getSelectElement","message","find","slotChangeObserver","mo","MutationObserver","processSlottedContent","childList","subtree","hasLabelSlot","querySelectorAll","hasHelperSlot","hasHelperEndSlot","getLabel","onReset","form","handleBlur","kev","getActiveElement","closestElement","tagName","toLowerCase","CustomEvent","disconnectedCallback","componentDidLoad","labelId","moreId","helperEndId","compWrapOptions","floatLabel","hideLabel","placeholder","wrapOptions","hasValue","controlId","controlOptions","clearControl","type","createColorClasses","color","masked","mask","FormControlWrap","FormControl","onClearText","control","endValueSlot","multipleValues","id","readOnly","onNanoOptionsUpdated","onNanoSelect","onNanoDeselect","undefined","select","onInvalid","autoFocus","autofocus","autocomplete","onKeyDown","onInput","onTouchStart","onMouseDown","i","toReturn","onDragOver","draggable","span","push","tabindex","onTouchEnd","onMouseUp"],"sources":["./src/components/global-nav/global-nav-user-profile.tsx","./src/components/nav-item/nav-item.scss?tag=nano-nav-item&encapsulation=shadow","./src/components/nav-item/nav-item.tsx","./src/components/select/select.scss?tag=nano-select&encapsulation=scoped","./src/components/select/select.tsx"],"sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  getAssetPath,\n  ComponentInterface,\n} from '@stencil/core';\nimport { MyAccountUser } from './global-nav-interface';\n\n/**\n * Nanopore digital global navigation user profile.\n */\n@Component({\n  tag: 'nano-global-nav-user-profile',\n})\nexport class GlobalNavUserProfile implements ComponentInterface {\n  /**\n   * Logged in user details automatically populated from MyAccount\n   */\n  @Prop() myAccountUser: MyAccountUser;\n\n  /**\n   * Link to the user profile\n   */\n  @Prop() userProfileUrl: string;\n\n  // Render output\n\n  render() {\n    return (\n      !!this.myAccountUser && (\n        <a href={this.userProfileUrl} class=\"user-profile\">\n          <div class=\"left\">\n            <div class=\"avatar-container\">\n              <img\n                class=\"avatar\"\n                src={this.myAccountUser?.small_avatar_url}\n                alt=\"User Avatar\"\n                height={75}\n                width={75}\n              />\n              {this.myAccountUser.is_nanopore_user && (\n                <img\n                  class=\"logo-small\"\n                  src={getAssetPath(`../nano-assets/ont-wheel-light.svg`)}\n                  alt=\"Nanopore Logo\"\n                />\n              )}\n            </div>\n\n            <div class=\"user-details\">\n              <span class=\"name\">{this.myAccountUser.name}</span>\n\n              <span class=\"bio\">\n                {this.myAccountUser.job_title} at {this.myAccountUser.company}\n              </span>\n            </div>\n          </div>\n\n          <div class=\"right\">\n            <div class=\"chevron-right\">\n              <nano-icon\n                slot=\"icon-end\"\n                name=\"light/chevron-right\"\n                aria-label=\"navigate to ...\"\n              ></nano-icon>\n            </div>\n          </div>\n        </a>\n      )\n    );\n  }\n}\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  // These can be overwritten, but are automatically set from context components\n\n  // --padding-top: inherit;\n  // --padding-bottom: inherit;\n  // --padding-start: inherit;\n  // --padding-end: inherit;\n  // --margin: inherit;\n\n  // --secondary-padding-top: inherit;\n  // --secondary-padding-bottom: inherit;\n  // --secondary-padding-start: inherit;\n  // --secondary-padding-end: inherit;\n\n  // --border-bottom: inherit;\n  // --icon-size: inherit;\n\n  // --color: inherit;\n  // --color-hover: inherit;\n  // --color-focus: inherit;\n  // --color-selected: inherit;\n  // --color-open: inherit;\n\n  // --bg-color: inherit;\n  // --bg-color-hover: inherit;\n  // --bg-color-selected: inherit;\n  // --bg-color-open: inherit;\n  // --bg-color-focus: inherit;\n\n  // --secondary-bg-color: inherit;\n  // --secondary-color: inherit;\n\n  opacity: inherit;\n  display: block;\n  color: var(--color) !important;\n  margin: var(--margin);\n  outline: none !important;\n\n  .nav-item,\n  .link {\n    outline: none !important;\n    border-radius: inherit;\n  }\n\n  ::slotted(*),\n  * {\n    box-sizing: border-box;\n  }\n\n  ::slotted(button),\n  button {\n    background: none;\n    border: none;\n    margin: 0;\n  }\n\n  ::slotted(button),\n  ::slotted(a),\n  ::slotted(a:visited),\n  button,\n  a,\n  a:visited {\n    @include text-inherit();\n\n    padding-inline: var(--padding-start) var(--padding-end);\n    padding-block: var(--padding-top) var(--padding-bottom);\n    display: var(--display, block);\n    white-space: nowrap;\n    color: var(--color) !important;\n    background-color: var(--bg-color);\n    line-height: inherit;\n    outline: none !important;\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    padding-inline-end: var(--padding-end);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    padding-inline-start: var(--padding-start);\n  }\n\n  .link {\n    ::slotted(nano-icon[slot='icon-start']) {\n      padding-inline-start: var(--padding-start);\n      padding-inline-end: 0;\n    }\n\n    ::slotted(nano-icon[slot='icon-end']) {\n      padding-inline-end: var(--padding-end);\n      padding-inline-start: 0;\n    }\n  }\n\n  .link,\n  button,\n  a {\n    border-block-end: var(--border-bottom);\n    display: flex;\n    align-items: center;\n    border-radius: inherit;\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-visible,\n  a:focus-visible {\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    box-shadow: #{$control-focus-style};\n  }\n\n  ::slotted(a:focus-visible),\n  ::slotted(button:focus-visible) {\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    box-shadow: #{$control-focus-style};\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    padding-inline-start: 0;\n    padding-inline-end: var(--padding-end);\n    flex: 1;\n  }\n\n  ::slotted(a),\n  ::slotted(button) {\n    flex: 1;\n  }\n\n  .secondary-menu {\n    display: none;\n    position: absolute;\n    color: var(--secondary-color, currentcolor);\n    min-height: 100%;\n    inset-block-start: 0;\n    inset-inline-start: 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    padding-inline: 0 var(--padding-end);\n    padding-block: 0;\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    padding-inline: 0 var(--padding-end);\n    padding-block: 0;\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    transform: translateX(-100%);\n\n    &.open {\n      transform: translateX(0);\n    }\n  }\n}\n\n:host(.nano-menu) {\n  ::slotted(a:focus),\n  ::slotted(button:focus) {\n    box-shadow: none;\n  }\n\n  .secondary-menu-content {\n    padding-inline: var(--secondary-padding-start) var(--secondary-padding-end);\n    padding-block: var(--secondary-padding-top) var(--secondary-padding-bottom);\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    margin-inline: var(--padding-end) 0;\n    margin-block: 0;\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    margin-inline: 0 var(--padding-start);\n    margin-block: 0;\n  }\n\n  ::slotted(a),\n  button {\n    position: relative;\n\n    &::before {\n      content: '';\n      background-color: rgb(12 90 113);\n      height: 9px;\n      inset-inline: 0 5px;\n      inset-block-end: -22px;\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\n:host(.nano-global-nav-bar.selected) {\n  ::slotted(a) {\n    &::before {\n      transform: translateZ(0) scaleX(1);\n    }\n  }\n}\n\n:host(.nano-global-nav-bar.has-secondary) {\n  .secondary-open button::before {\n    opacity: 0.7;\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 rgb(0 0 0 / 15%);\n    inset-inline: 0;\n    z-index: -2;\n    outline: none;\n\n    &.open {\n      transform: translateY(12px) translateZ(0);\n    }\n  }\n}\n\n:host(.nano-menu-drawer) {\n  .link,\n  a,\n  button {\n    padding-block-start: calc(var(--padding-top) / 2);\n    padding-inline-end: 0;\n    padding-block-end: calc(var(--padding-bottom) / 2);\n    padding-inline-start: var(--padding-start);\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    padding-inline-end: var(--padding-end);\n    padding-inline-start: 0;\n    text-align: start;\n    flex: 0 1 auto;\n    min-width: 130px;\n    width: 130px;\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    padding-inline: 0 var(--padding-end);\n    padding-block: 0;\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    padding: 0 var(--padding-end) 0 0;\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    inset-inline: auto 0;\n    inset-block: 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    padding-inline:\n      var(--secondary-padding-start, var(--padding-start))\n      var(--secondary-padding-end, var(--padding-end));\n    padding-block:\n      var(--secondary-padding-top, var(--padding-top))\n      var(--secondary-padding-bottom, var(--padding-bottom));\n\n    &:focus {\n      outline: none;\n    }\n\n    &.open {\n      transform: translateX(100%);\n    }\n  }\n\n  .notification {\n    position: relative;\n\n    &::after {\n      content: '';\n      display: block;\n      position: absolute;\n      width: 6px;\n      height: 6px;\n      background-color: #ef4135;\n      inset-inline-start: 10px;\n      inset-block-start: 7px;\n      border-radius: 50%;\n\n      @media (min-width: 52em) {\n        width: 7px;\n        height: 7px;\n        inset-inline-start: 8px;\n        inset-block-start: 5px;\n      }\n    }\n  }\n}\n\n:host(.nano-menu-drawer[dir='rtl']) {\n  .secondary-menu {\n    transform: translateX(0%);\n\n    &.open {\n      transform: translateX(-100%);\n      opacity: 1;\n    }\n  }\n}\n","import {\n  Component,\n  h,\n  Host,\n  Element,\n  Prop,\n  Watch,\n  EventEmitter,\n  Event,\n  State,\n  Method,\n  ComponentInterface,\n  Listen,\n} from '@stencil/core';\nimport { getSiblings, getDirectChildren } from '../../utils/dom';\nimport { displayTransition } from '../../utils/transitions';\nimport { getTabbableElements } from '../../utils/tabbable';\nimport type { 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 * @slot icon-start - an icon at the start of the main control\n * @slot icon-end - an icon at the end of the main control\n * @slot secondary - a content panel in which you can place any html to display on control click\n * @slot - use the default slot for either `<a>` or text (if constructing a secondary content panel or using `href` directly)\n * @part ctrl - the controlling `<a>` or `<button>` element\n * @part ctrl--button - the controlling `<button>` element\n * @part ctrl--anchor - the controlling <a> element\n * @part ctrl-wrapper - the wrapping div around the control (shadow `<button>` / `<a>` or slotted `<a>`)\n * @part secondary-wrapper - the div surrounding slotted secondary content\n * @part secondary-mask - the div that is added when secondary content is shown\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 secondaryDiv: HTMLDivElement;\n  private btn: HTMLButtonElement | HTMLAnchorElement;\n  private fromHover: boolean;\n  private animating: boolean = false;\n  private waitHide: number;\n  private waitShow: number;\n  private globalNavEle?: HTMLNanoGlobalNavElement;\n\n  @State() hasAnchorEle: boolean = false;\n  @State() didOpen: boolean = false;\n  @State() isInGlobalNav: boolean = false;\n  @State() isInMenuDrawer: boolean = false;\n  @State() isInMenu: boolean = false;\n  @State() hasFocus: boolean = false;\n  @Element() private el: HTMLNanoNavItemElement;\n\n  /**\n   * Href to link to\n   */\n  @Prop({ mutable: true }) href: string = null;\n\n  /**\n   * Target to use for links\n   */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /**\n   * Disable the nav item\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether a secondary menu should be or is currently open\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Whether this menu item is currently 'selected'\n   */\n  @Prop({ reflect: true }) selected: boolean = false;\n\n  /**\n   * Screen pixel width to activate the secondary menu\n   */\n  @Prop() secondaryActiveWidth: number = 0;\n\n  /**\n   * Secondary fallback function for when the secondary menu is no longer active.\n   */\n  @Prop() secondaryFallback = () => {};\n\n  /**\n   * Whether secondary menus should close on blur\n   */\n  @Prop() closeOnBlur: boolean = true;\n\n  /**\n   * Will show an indicator badge - only when placed in a nano-menu-draw\n   */\n  @Prop() notification: boolean = false;\n\n  /**\n   * Emitted when the nav item closes it's secondary navigation.\n   */\n  @Event() nanoClose!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item opens it's secondary navigation.\n   */\n  @Event() nanoOpen!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item is about to open it's secondary navigation.\n   */\n  @Event() nanoOpening!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item is about to close it's secondary navigation.\n   */\n  @Event() nanoClosing!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the nav item has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the first button or anchor present. Use this method instead of the global\n   * `element.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (!this.btn) return;\n    this.btn.focus();\n  }\n\n  /**\n   * Public open watcher\n   */\n  @Watch('open')\n  openChange() {\n    this.open ? this.openSecondary() : this.closeSecondary();\n  }\n\n  /**\n   * Internal open watcher\n   */\n  @Watch('didOpen')\n  didOpenChange() {\n    if (!this.hasSecondarySlot) return;\n\n    if (!this.didOpen) {\n      /* the secondadry panel is not closing via hover,\n      remove blur events, add focus back to originating button */\n      setTimeout(() => {\n        if (\n          !this.fromHover &&\n          (!document.activeElement || document.activeElement === document.body)\n        )\n          this.btn.focus({ preventScroll: true });\n        this.el.tabIndex = null;\n        this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });\n      }, 50);\n    } else {\n      /* the secondary 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        const focusableChild = getTabbableElements(this.secondaryDiv, true);\n        if (focusableChild[0]) focusableChild[0].focus();\n\n        this.el.tabIndex = -1;\n        this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });\n      }\n    }\n  }\n\n  @Listen('click', { target: 'body' })\n  @Listen('keyup', { target: 'body' })\n  handleClose(e: MouseEvent | KeyboardEvent) {\n    if (!this.didOpen || !this.hasSecondarySlot) return;\n    if (!e.composedPath().some((el) => el === this.secondaryDiv))\n      this.toggleSecondary();\n  }\n\n  private closeSecondary = async () => {\n    if (!this.hasSecondarySlot || !this.didOpen) return;\n    this.open = false;\n    await displayTransition(this.secondaryDiv, 'open', false);\n    this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });\n    this.didOpen = false;\n  };\n\n  private openSecondary = async () => {\n    if (window.innerWidth < this.secondaryActiveWidth) {\n      this.secondaryFallback.call(this);\n      return;\n    }\n\n    if (!this.hasSecondarySlot || this.didOpen) return;\n    this.open = true;\n    await displayTransition(this.secondaryDiv, 'open', true);\n    this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });\n    this.didOpen = true;\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    const 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  };\n\n  componentWillLoad() {\n    const secondaryEle = this.el.querySelector('[slot=\"secondary\"]');\n    this.hasSecondarySlot = !!secondaryEle;\n\n    const link = getDirectChildren<HTMLAnchorElement | HTMLButtonElement>(\n      this.el,\n      'a, button'\n    )[0];\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        }}\n        onBlur={this.handleHostBlur}\n        dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n        onClick={this.handleHostClick}\n        role=\"menuitem\"\n      >\n        <div\n          class={{\n            'nav-item': true,\n            'secondary-open': this.open,\n            selected: this.selected,\n          }}\n          part=\"ctrl-wrapper\"\n        >\n          {this.href && !this.hasAnchorEle && !this.disabled && (\n            <a\n              part=\"ctrl ctrl--anchor\"\n              target={this.target}\n              ref={(a) => (this.btn = a)}\n              href={this.href}\n              onFocus={this.handleFocus}\n              class={{\n                notification: this.notification,\n              }}\n            >\n              <slot name=\"icon-start\" />\n              <span class=\"text\">\n                <slot />\n              </span>\n              <slot name=\"icon-end\" />\n            </a>\n          )}\n          {((!this.hasAnchorEle && !this.href) || this.disabled) && (\n            <button\n              part=\"ctrl ctrl--button\"\n              ref={(btn) => (this.btn = btn)}\n              onClick={this.handleClick}\n              onFocus={this.handleFocus}\n              disabled={this.disabled}\n              class={{\n                notification: this.notification,\n              }}\n            >\n              <slot name=\"icon-start\" />\n              <span class=\"text\">\n                <slot />\n              </span>\n              <slot name=\"icon-end\" />\n            </button>\n          )}\n          {this.hasAnchorEle && !this.disabled && (\n            <div class=\"link\">\n              <slot name=\"icon-start\" />\n              <slot />\n              <slot name=\"icon-end\" />\n            </div>\n          )}\n          {this.hasSecondarySlot && !this.disabled && (\n            <div\n              class=\"secondary-menu\"\n              ref={(div) => (this.secondaryDiv = div)}\n              tabIndex={-1}\n            >\n              <div class=\"secondary-menu-content\" part=\"secondary-wrapper\">\n                <slot name=\"secondary\" />\n              </div>\n              <div\n                class=\"secondary-menu-mask\"\n                onClick={this.closeSecondary}\n                part=\"secondary-mask\"\n              ></div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/layers';\n@import '../form-control/form-control';\n@import '../form-control/form-control-vars';\n\n:host {\n  @include formControlVars;\n\n  /**\n   * @prop --max-menu-height: the maximum of the dropdown menu. Defaults to 50vw.\n   */\n\n  position: relative;\n  width: 100%;\n  padding: 0 !important;\n  font-family: $font-family-base;\n  display: block;\n}\n\n:host(.nano-color) {\n  --input-border-style--focus:\n    #{$input-border-style} var(\n      --nano-color-tint,\n      #{nano-color(\n        primary,\n        tint\n      )}\n    );\n  --multi-input-value-bg: var(--nano-color-tint-rgb);\n  --multi-input-value-border: var(--nano-color-shade);\n  --multi-input-value-text-color: var(--nano-color-contrast);\n\n  color: current-color(base);\n}\n\n:host-context(nano-item:not(.item-label)) {\n  --padding-start: 0;\n}\n\n:host([disabled]:not([disabled='false'])) {\n  * {\n    pointer-events: none !important;\n  }\n}\n\nselect {\n  display: none;\n}\n\n.select__native-input {\n  @include text-inherit();\n\n  padding: unset;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  text-overflow: ellipsis;\n  color: var(--input-text-color);\n  display: inline-block;\n  flex: 1;\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\n  appearance: none;\n  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n  cursor: default;\n  line-height: 2.5em;\n\n  .has-float-label & {\n    line-height: 2.1em;\n    min-height: 2.1em;\n    padding-block-start: 1.4em;\n  }\n\n  &::selection {\n    background: transparent;\n  }\n\n  /* stylelint-disable-next-line selector-no-vendor-prefix */\n  &::-moz-selection {\n    background: transparent;\n  }\n\n  &::placeholder {\n    color: var(--placeholder-color);\n    font-family: inherit;\n    font-style: var(--placeholder-font-style);\n    font-weight: var(--placeholder-font-weight);\n    opacity: var(--placeholder-opacity);\n    line-height: inherit;\n    min-height: initial;\n  }\n\n  /* stylelint-disable-next-line selector-no-vendor-prefix */\n  &::-moz-placeholder {\n    line-height: 2.8em;\n    text-overflow: ellipsis;\n  }\n\n  &:-webkit-autofill {\n    background-color: transparent;\n  }\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    appearance: none;\n  }\n\n  &:invalid {\n    box-shadow: none;\n  }\n\n  &::-ms-clear,\n  &::-ms-reveal {\n    display: none;\n  }\n\n  &.resizable {\n    resize: vertical;\n    overflow: auto;\n  }\n\n  .form-ctrl__textarea & {\n    line-height: 1.5em;\n    padding-block: var(--padding-top) var(--padding-bottom);\n    white-space: pre-wrap;\n\n    &::placeholder {\n      line-height: 1.5em;\n    }\n  }\n\n  .has-float-label.textarea & {\n    padding-block-start: 1.8em;\n  }\n\n  :host(.masked) & {\n    opacity: 0;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n  }\n}\n\n.select__mask {\n  @include text-inherit();\n\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  pointer-events: none;\n  line-height: 2.5em;\n  min-height: 2.5em;\n}\n\n// multi stuff\n\n.select__multi {\n  &-wrap {\n    padding-block: 0 var(--padding-bottom);\n    padding-inline: 0 0;\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    overflow: hidden;\n    align-items: flex-start;\n\n    :host(.has-float-label) & {\n      padding-block-start: 1em;\n    }\n  }\n\n  &-input {\n    @include text-inherit();\n\n    padding-inline: var(--padding-start) var(--padding-end);\n    padding-block: var(--padding-bottom) 0;\n    min-width: 50px;\n    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    box-sizing: border-box;\n    line-height: calc(2.5em - var(--padding-bottom));\n    height: calc(2.5em - var(--padding-bottom));\n\n    &:last-child {\n      flex: 1;\n    }\n  }\n\n  &-value {\n    margin-block: var(--padding-bottom) 0;\n    margin-inline: var(--padding-start) -3px;\n    background: rgb(var(--multi-input-value-bg) / 80%);\n    color: var(--multi-input-value-text-color);\n    border: 1px solid;\n    border-color: var(--multi-input-value-border);\n    padding: 0.35em 0.5em;\n    max-width: 100%;\n    display: flex;\n    align-items: center;\n    font-size: var(--input-font-size);\n    letter-spacing: 1px;\n    max-height: calc(2.5em - 8px);\n\n    span {\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      max-width: 100%;\n      overflow: hidden;\n      line-height: 1;\n    }\n  }\n\n  &-value-remove {\n    @include background-position(center);\n\n    padding-inline-start: 0.5em;\n    margin: 0;\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    inset-block-start: 0;\n    font-size: 1em;\n\n    nano-icon {\n      --color: var(--multi-input-value-text-color);\n    }\n  }\n}\n\n.form-ctrl__float-label {\n  width: calc(100% - (1em + (var(--padding-start) * 2)));\n\n  :host(.has-focus.has-multiple) & {\n    transform: translateY(-110%);\n    font-size: 0.8em;\n  }\n\n  :host(.has-value.has-multiple) & {\n    transform: translateY(21%);\n    inset-block-start: 0;\n  }\n}\n\n:host(.has-focus) select,\n:host(.has-focus) a,\n:host(.has-focus) button {\n  pointer-events: auto;\n}\n","import {\n  Build,\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  VNode,\n  Listen,\n} from '@stencil/core';\n\nimport { getActiveElement } from '../../utils/active-element';\nimport { closestElement } from '../../utils/dom';\nimport { createColorClasses } from '../../utils/theme';\nimport { debounce, debounceEvent } from '../../utils/throttle';\nimport { FormControl, FormControlWrap } from '../form-control/form-control';\nimport { OptionInterface } from '../option/option-interface';\nimport type { Dropdown } from '../dropdown/dropdown';\nimport type {\n  Color,\n  SelectChangeEventDetail,\n  InputChangeEventDetail,\n  ControlValidityEventDetail,\n  ControlValidity,\n} from '../../interface';\n\nlet selectIds = 0;\n\n/**\n * The select component is a wrapper to the HTML select element with custom styling and additional functionality.\n * It accepts most of the same properties as the HTML [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).\n * It's multi selection functionality is vastly improved from the native solution. It allows for the control of\n * value order through drag and drop or changing the insertion point with arrow keys. It also can allow for user defined values.\n *\n * @slot start - suitable for inline action buttons or icons that may add extra contextual information\n * @slot end - suitable for inline action buttons or icons that may add extra contextual information\n * @slot value-start - similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist\n * @slot value-end - similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist\n * @slot label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot helper - helper text to accompany the form field underneath.\n * @slot helper-end - helper text to accompany the form field on the side.\n * @slot down-arrow - use this to replace the default down arrow\n * @slot - default slot; nest `nano-option` elements\n */\n@Component({\n  tag: 'nano-select',\n  styleUrl: 'select.scss',\n  scoped: true,\n})\nexport class Select implements ComponentInterface {\n  private nativeSelect?: HTMLSelectElement;\n  private valueItems: Array<HTMLSpanElement> = [];\n  private dragVal: string;\n  private mo?: MutationObserver;\n  private selectId = `nano-select-${selectIds++}`;\n  private rtl: boolean = false;\n  private onInit: boolean = true;\n  private customError: string = '';\n\n  private get inputCtrl() {\n    return this._inputCtrl;\n  }\n  private set inputCtrl(input) {\n    if (input === this._inputCtrl) return;\n    this._inputCtrl = input;\n    this.setDataListOpts();\n  }\n  private _inputCtrl?: HTMLInputElement;\n\n  // we don't want these rendered eles decorated with @State\n  // because that will cause re-renders. Use get/set to set datalist options\n  private _selectWrap: HTMLElement;\n  private get selectWrap() {\n    return this._selectWrap;\n  }\n  private set selectWrap(ele: HTMLElement) {\n    if (this._selectWrap === ele) return;\n    this._selectWrap = ele;\n    this.setDataListOpts();\n  }\n\n  private _datalist: HTMLNanoDatalistElement;\n  private get datalist() {\n    return this._datalist;\n  }\n  private set datalist(ele: HTMLNanoDatalistElement) {\n    if (this._datalist === ele) return;\n    this._datalist = ele;\n    this.setDataListOpts();\n  }\n\n  constructor() {\n    this.showInlineValidation = debounce(this.showInlineValidation, 50);\n  }\n\n  @State() currInsertIndex: number = -1;\n  @State() showErrorMsg = false;\n  @State() errorMessage: string = '';\n  @State() hasFocus = false;\n  @State() hasLabelSlot: boolean = false;\n  @State() hasHelperSlot: boolean = false;\n  @State() hasHelperEndSlot = false;\n  @State() inputSearchVal: string = '';\n\n  @Element() el!: HTMLNanoSelectElement;\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set.\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n  @State() _invalid = false;\n\n  /**\n   * Current validation message - if any. @readonly\n   */\n  @Prop()\n  get validityMessage() {\n    if (!this.nativeSelect) return '';\n    return this.nativeSelect.validationMessage;\n  }\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    'submitThenDirty';\n\n  /**\n   * Whether to show validation errors underneath input\n   */\n  @Prop({ reflect: true }) showInlineError = true;\n\n  /**\n   * String to place within a label element. Alternatively use the 'label' slot\n   */\n  @Prop() label!: string;\n\n  /**\n   * Visually hide the label - but make it accessible.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  /**\n   * Enable floating label behaviour. Will disable placeholder if set.\n   */\n  @Prop() floatLabel: boolean = false;\n\n  /**\n   * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"` or `\"file\"`, otherwise it is ignored.\n   */\n  @Prop() multiple?: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.selectId + '-name';\n\n  /**\n   * Instructional text that shows before the select has a value. Text set here will be placed inside the label when a value is set. If you don't want this behaviour just set the first option to have no value.\n   */\n  @Prop() placeholder?: string | null;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop({ reflect: true }) readonly = false;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required = false;\n\n  /**\n   * The initial size of the control.\n   */\n  @Prop() size?: number;\n\n  /**\n   * Maximum number of options that can be selected when multiple is true\n   */\n  @Prop() max?: number;\n\n  /**\n   * Minimum number of options that can be selected when multiple is true\n   */\n  @Prop() min?: number;\n\n  /**\n   * The form element to associate the select with (its form owner). Must be the id of a form.\n   */\n  @Prop() form?: string | null;\n\n  /**\n   * in multiple mode, allow users to enter their own values\n   */\n  @Prop() allowCustomValues: boolean = false;\n\n  /**\n   * The value of the select.\n   */\n  @Prop()\n  get value() {\n    return this._value;\n  }\n  set value(val: string | string[]) {\n    if (typeof val === 'string') {\n      if (this.multiple) this._value = val.split(',');\n      else this._value = val;\n    } else if (Array.isArray(val)) {\n      if (this.multiple) this._value = val;\n      else this._value = val[0];\n    }\n  }\n  private _value: Array<string> | string = this.multiple ? [] : '';\n\n  /**\n   * You can set options via js as an array of strings: `domElement.options = ['option 1', 'option 2']` or\n   * objects `domElement.options = [{label: 'option 1', value: 'opt-1'}]`. See `nano-option` docs for all available properties.\n   * Alternatively, you can nest `<nano-option>` elements within a `<nano-select>`\n   * Regardless - reading `options` will return the current component options - slotted or otherwise\n   */\n  @Prop()\n  get options(): Array<OptionInterface | string> {\n    if (this._options.length) return this._options;\n\n    if (!this.datalist || !this.datalist.activeOptions) return [];\n\n    return this._eOptions.map((ao) => {\n      const { value, selected, label, filterMeta } = ao;\n      return { value, selected, label, filterMeta };\n    });\n  }\n  set options(opts: Array<OptionInterface | string>) {\n    this._options = opts.map((opt) => {\n      if (typeof opt === 'string') return { value: opt, label: opt };\n      else return opt;\n    });\n  }\n  private _options: OptionInterface[] = [];\n  @State() _eOptions: OptionInterface[] = [];\n\n  /**\n   * If `true`, a clear icon will appear in the select when there is a value. Clicking it clears the select.\n   */\n  @Prop() clearSelect = false;\n\n  /**\n   * Hide the native select element and cover with a value 'mask'.\n   * Enables a fluid nano-select width upon value change (if required). Doesn't work with multiple=\"true\".\n   */\n  @Prop() mask = false;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait to trigger the `nanoSearchChange` event after each keystroke.\n   */\n  @Prop() debounce = 0;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.nanoSearchChange = debounceEvent(this.nanoSearchChange, this.debounce);\n  }\n\n  @Watch('required')\n  @Watch('disabled')\n  @Watch('min')\n  @Watch('max')\n  @Watch('readonly')\n  protected shouldValidate() {\n    if (this.onInit) return;\n    if (this.invalid) this.showErrorMsg = this._invalid = false;\n\n    this.customValidate();\n    if (this.validateOn !== 'dirty') return;\n    this.showInlineValidation();\n  }\n\n  /**\n   * Update the native select element when the value changes\n   */\n  // eslint-disable-next-line @stencil-community/no-unused-watch\n  @Watch('value')\n  valueChanged() {\n    this.customValidate();\n\n    if (this.onInit) {\n      if (this.multiple) this.currInsertIndex = this.value.length - 1;\n      return;\n    }\n    requestAnimationFrame(() => {\n      this.shouldValidate();\n      this.nanoChange.emit({ value: this.value });\n    });\n  }\n\n  /** nano-dropdown config options you can pass to the nested dropdown component */\n  @Prop({ mutable: true }) dropDownConfig?: Partial<Dropdown> = {};\n\n  @Watch('dropDownConfig')\n  setDataListOpts() {\n    if (!this.datalist || !this.selectWrap) return;\n\n    this.datalist.input = this.inputCtrl;\n\n    const currDWConfig = this.datalist.dropDownConfig || {};\n    this.datalist.dropDownConfig = {\n      ...currDWConfig,\n      ...this.dropDownConfig,\n      tetherTo: this.selectWrap,\n    };\n  }\n\n  // Custom Events\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() nanoChange!: EventEmitter<SelectChangeEventDetail>;\n\n  /**\n   * Emitted when the select loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has been created.\n   * @internal\n   */\n  @Event() nanoDidLoad!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has been removed.\n   * @internal\n   */\n  @Event() nanoDidUnload!: EventEmitter<void>;\n\n  /**\n   * Emitted when a keyboard input occurred on a multiple=\"true\" input\n   */\n  @Event() nanoSearchChange!: EventEmitter<InputChangeEventDetail>;\n\n  /**\n   * Called when validation is performed (which depends on `validateOn`).\n   * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n   */\n  @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n  // Public Methods\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `{ isValid: boolean, errorMessage: string }`\n   */\n  @Method()\n  async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n    return new Promise((resolve) => {\n      if (validateFirst) {\n        this.customValidate();\n        this.showInlineValidation();\n      }\n      setTimeout(() => {\n        resolve({\n          isValid: !this._invalid,\n          errorMessage: this.nativeSelect.validationMessage,\n        });\n      }, 50);\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.inputCtrl) return;\n    this.inputCtrl.focus();\n    setTimeout(() => this.inputCtrl.click(), 50);\n  }\n\n  /**\n   * @returns the native `<select>` element used under the hood.\n   */\n  @Method()\n  getSelectElement(): Promise<HTMLSelectElement> {\n    return Promise.resolve(this.nativeSelect!);\n  }\n\n  /**\n   * Invalidate the field and show a custom error message.\n   * To clear the error you will need to re-call this method with an empty string.\n   */\n  @Method()\n  async showError(message: string) {\n    if (this.nativeSelect) {\n      this.customError = message;\n      this.nativeSelect.setCustomValidity(message);\n      this.showInlineValidation();\n    }\n  }\n\n  /* Logic */\n\n  private get valArray() {\n    return typeof this.value === 'string'\n      ? this.value.length\n        ? [this.value]\n        : []\n      : this.value;\n  }\n\n  private isValidValues() {\n    return this.valArray.find((val) =>\n      (this.options as OptionInterface[]).find((opt) => opt.value === val)\n    );\n  }\n\n  private customValidate = () => {\n    if (\n      !this.nativeSelect ||\n      !!this.customError ||\n      !this.nativeSelect['setCustomValidity']\n    )\n      return;\n\n    this.nativeSelect.setCustomValidity('');\n    // add custom validations 'cos html5 validations are a bit rubbish on selects\n    if (this.required && !this.valArray.length) {\n      this.nativeSelect.setCustomValidity('Please fill in this field.');\n      return true;\n    }\n    if (\n      this.valArray.length &&\n      !this.allowCustomValues &&\n      !this.isValidValues()\n    ) {\n      this.nativeSelect.setCustomValidity(\n        'Please choose an item from this field.'\n      );\n      return true;\n    }\n    if (this.max && this.valArray.length > this.max) {\n      this.nativeSelect.setCustomValidity(\n        `Only up to ${this.max} values are allowed.`\n      );\n      return true;\n    }\n    if (this.min && this.valArray.length < this.min) {\n      this.nativeSelect.setCustomValidity(\n        `You must select a minimum of ${this.min} values.`\n      );\n      return true;\n    }\n    return false;\n  };\n\n  private showInlineValidation = (ev?: Event) => {\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n    this._invalid = false;\n    this.showErrorMsg = false;\n    this.errorMessage = '';\n\n    if (!this.nativeSelect.validity.valid) {\n      this.errorMessage = this.nativeSelect.validationMessage;\n      this._invalid = true;\n      this.showErrorMsg = true;\n    }\n    this.nanoValidate.emit({\n      isValid: !this.invalid,\n      errorMessage: this.errorMessage,\n      originalEvent: ev,\n    });\n  };\n\n  private handleInvalid = (ev: Event) => {\n    this._invalid = true;\n\n    if (this.validateOn === 'submit') {\n      this._invalid = this.showErrorMsg = this.customValidate();\n    }\n    if (this.showInlineError) ev.preventDefault();\n\n    requestAnimationFrame(() => this.showInlineValidation(ev));\n  };\n\n  private setValue = (e: CustomEvent<HTMLNanoOptionElement>) => {\n    e.preventDefault();\n\n    if (!this.multiple) {\n      this.value = e.detail.value;\n      return;\n    }\n    if (this.value && this.value.length && this.value.includes(e.detail.value))\n      return;\n    if (this.max && this.value.length === this.max) return;\n\n    this.currInsertIndex++;\n    this.value = [\n      ...this.value.slice(0, this.currInsertIndex),\n      e.detail.value,\n      ...this.value.slice(this.currInsertIndex),\n    ];\n    this.inputSearchVal = '';\n    // this.selectWrap.clientWidth; // force reflow\n  };\n\n  private removeValue = (toFind?: string) => {\n    if (!this.multiple || !this.value.length) return;\n\n    if (!toFind) toFind = this.value[this.value.length - 1];\n    this.value = (this.value as Array<string>).filter((val) => val !== toFind);\n\n    this.currInsertIndex--;\n    // this.selectWrap.clientWidth; // force reflow\n    this.setFocus();\n  };\n\n  private slotChangeObserver() {\n    if (!window['MutationObserver']) return;\n\n    const mo = (this.mo = new MutationObserver(() =>\n      this.processSlottedContent()\n    ));\n    mo.observe(this.el, { childList: true, subtree: true });\n  }\n\n  private processSlottedContent() {\n    // see if we have label / helper content\n    this.hasLabelSlot = !!this.el.querySelectorAll('[slot=\"label\"]').length;\n    this.hasHelperSlot = !!this.el.querySelector('[slot=\"helper\"]');\n    this.hasHelperEndSlot = !!this.el.querySelector('[slot=\"helper-end\"]');\n  }\n\n  private getLabel(toFind: string) {\n    const label = (this.options as OptionInterface[]).find((opt) => {\n      return !opt.disabled && opt.value?.length && opt.value === toFind;\n    });\n    return label && label.label ? label.label : toFind;\n  }\n\n  /* Event handling */\n\n  @Listen('reset', { target: 'body' })\n  onReset(e) {\n    const form = this.form\n      ? document.querySelector('#' + this.form)\n      : this.el.closest('form');\n    if (!form || e.target !== this.el.closest('form')) return;\n\n    this.clearSelectValue();\n  }\n\n  @Listen('mousedown', { target: 'body' })\n  @Listen('keydown')\n  handleBlur(e: KeyboardEvent | MouseEvent) {\n    if (!this.hasFocus) return;\n\n    const kev = e as KeyboardEvent;\n    let target: Element;\n\n    requestAnimationFrame(() => {\n      if (kev.key) {\n        if (kev.key !== 'Tab') return;\n        target = getActiveElement();\n      } else target = e.target as Element;\n\n      if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {\n        this.onBlur();\n      }\n    });\n  }\n\n  private setOptions = () => {\n    if (\n      !this.datalist ||\n      !this.datalist.activeOptions ||\n      !this.datalist.activeOptions.length\n    )\n      return;\n\n    this._eOptions = this.datalist.activeOptions.map((ao) => {\n      const { value, selected, label, filterMeta } = ao;\n      return { value, selected, label, filterMeta };\n    });\n    this.customValidate();\n  };\n\n  private handleDocumentKeyDown = (ev: KeyboardEvent) => {\n    if (!this.multiple || !this.hasFocus) return;\n\n    if (!this.inputSearchVal) {\n      let rm: HTMLSpanElement;\n\n      switch (ev.key) {\n        case 'Backspace':\n          if (this.inputCtrl.previousElementSibling)\n            rm = this.inputCtrl.previousElementSibling as HTMLSpanElement;\n          else break;\n\n          this.removeValue(rm.dataset.value || null);\n          break;\n\n        case 'Delete':\n          if (this.inputCtrl.nextElementSibling)\n            rm = this.inputCtrl.nextElementSibling as HTMLSpanElement;\n          else break;\n\n          this.removeValue(rm.dataset.value || null);\n          break;\n\n        case 'ArrowLeft':\n        case 'ArrowRight':\n          if (!this.value.length) break;\n\n          if (ev.key === 'ArrowLeft' && this.inputCtrl.previousSibling)\n            this.currInsertIndex--;\n          if (ev.key === 'ArrowRight' && this.inputCtrl.nextSibling)\n            this.currInsertIndex++;\n\n          setTimeout(() => {\n            this.inputCtrl.focus();\n          }, 20);\n          ev.preventDefault();\n          break;\n      }\n    }\n  };\n\n  private onBlur = () => {\n    this.hasFocus = false;\n\n    requestAnimationFrame(() => {\n      if (this.validateOn === 'dirty' && !this.hasFocus)\n        this.showInlineValidation();\n    });\n    this.nanoBlur.emit();\n\n    if (!this.allowCustomValues && this.multiple) {\n      this.inputSearchVal = '';\n      const event = new window.Event('change');\n      this.inputCtrl.dispatchEvent(event);\n    }\n  };\n\n  private onFocus = () => {\n    this.hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private clearSelectValue = (ev?: Event) => {\n    if (this.clearSelect && !this.readonly && !this.disabled && ev) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    }\n\n    if (this.multiple) {\n      this.value = [];\n      this.currInsertIndex = -1;\n    } else this.value = '';\n\n    this.inputCtrl.value = '';\n    const event = new window.Event('change');\n    this.inputCtrl.dispatchEvent(event);\n  };\n\n  private onClick = () => {\n    this.setFocus();\n  };\n\n  /* Multi event handlers */\n\n  private onDragStart = (ev: MouseEvent) => {\n    const 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    const ele = ev.target as HTMLSpanElement;\n    const 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    const to = this.value.indexOf(spanVal);\n    const from = this.value.indexOf(this.dragVal);\n    const tmpArr = this.value as Array<string>;\n    const tmpVal = tmpArr[to];\n\n    tmpArr[to] = tmpArr[from];\n    tmpArr[from] = tmpVal;\n    this.value = [...tmpArr];\n  };\n\n  private onMultiInput = (ev) => {\n    this.inputSearchVal = ev.target.value.trim();\n    this.nanoSearchChange.emit({ value: ev.target.value.trim() });\n  };\n\n  /* Stencil Component lifecycle hooks */\n\n  connectedCallback() {\n    this.debounceChanged();\n\n    if (!Build.isBrowser) return;\n\n    this.el.dispatchEvent(\n      new CustomEvent('nanoDidLoad', {\n        detail: this.el,\n      })\n    );\n  }\n\n  disconnectedCallback() {\n    document.dispatchEvent(\n      new CustomEvent('nanoDidUnload', {\n        detail: this.el,\n      })\n    );\n\n    if (!Build.isBrowser) return;\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n    this.customValidate();\n    this.setDataListOpts();\n    requestAnimationFrame(() => (this.onInit = false));\n  }\n\n  componentWillLoad() {\n    this.processSlottedContent();\n  }\n\n  render() {\n    const labelId = this.selectId + '-lbl';\n    const moreId =\n      this.showInlineError || this.hasHelperSlot\n        ? this.selectId + '-moreId'\n        : '';\n    const helperEndId = this.hasHelperEndSlot ? this.selectId + '-helper' : '';\n\n    this.rtl = (this.el.ownerDocument as Document).dir === 'rtl';\n    this.valueItems = [];\n\n    const compWrapOptions = (({\n      el,\n      floatLabel,\n      label,\n      errorMessage,\n      showInlineError,\n      hasHelperSlot,\n      hasHelperEndSlot,\n      hasLabelSlot,\n      hideLabel,\n      placeholder,\n      rtl,\n    }) => ({\n      el,\n      floatLabel,\n      label,\n      errorMessage,\n      showInlineError,\n      hasHelperSlot,\n      hasHelperEndSlot,\n      hasLabelSlot,\n      hideLabel,\n      placeholder,\n      rtl,\n    }))(this);\n    const wrapOptions = {\n      ...compWrapOptions,\n      labelId,\n      moreId,\n      helperEndId,\n      hasValue: !!this.value.length || !!this.inputSearchVal.length,\n      controlId: this.selectId,\n    };\n\n    const controlOptions = (({ readonly, disabled }) => ({\n      readonly,\n      disabled,\n      clearControl: this.clearSelect,\n    }))(this);\n\n    return (\n      <Host\n        type={this.multiple ? 'select-multiple' : 'select-one'}\n        aria-disabled={this.disabled ? 'true' : null}\n        class={{\n          ...createColorClasses(this.color),\n          'has-value': !!this.value.length || !!this.inputSearchVal.length,\n          'has-focus': this.hasFocus,\n          'is-invalid': this.invalid,\n          'has-label': this.label !== null && !this.floatLabel,\n          'has-float-label': this.label !== null && this.floatLabel,\n          rtl: this.rtl,\n          'has-multiple': this.multiple,\n          'has-clr-btn': this.clearSelect,\n          masked: this.mask,\n        }}\n      >\n        <FormControlWrap {...wrapOptions}>\n          <FormControl\n            {...controlOptions}\n            onClearText={this.clearSelectValue}\n            control={this.el}\n            ref={(el) => (this.selectWrap = el)}\n            endValueSlot={\n              <slot name=\"down-arrow\">\n                <nano-icon slot=\"value-end\" name=\"light/chevron-down\" />\n              </slot>\n            }\n          >\n            {this.multiple && (\n              <div class=\"select__multi-wrap select\">\n                {this.multipleValues(labelId, moreId, helperEndId)}\n              </div>\n            )}\n            {!this.multiple && [\n              this.mask && (\n                <div class=\"select__mask\">\n                  {this.getLabel(this.value as string)}\n                </div>\n              ),\n              <input\n                id={this.selectId}\n                class=\"select__native-input\"\n                ref={(input) => (this.inputCtrl = input)}\n                aria-labelledby={labelId + ' ' + moreId + ' ' + helperEndId}\n                disabled={this.disabled}\n                form={this.form}\n                placeholder={this.placeholder}\n                readOnly={true}\n                required={this.required}\n                value={this.getLabel(this.value as string)}\n                onFocus={this.onFocus}\n              />,\n            ]}\n          </FormControl>\n        </FormControlWrap>\n        {!this.readonly && !this.disabled && (\n          <nano-datalist\n            onNanoOptionsUpdated={this.setOptions}\n            ref={(el) => (this.datalist = el)}\n            selected={this.valArray}\n            type={this.multiple ? 'selctMulti' : 'select'}\n            onNanoSelect={this.setValue}\n            onNanoDeselect={(e) => {\n              e.preventDefault();\n              this.removeValue(e.detail.value);\n            }}\n            options={this._options.length ? this._options : undefined}\n          >\n            {this.allowCustomValues &&\n              this.multiple &&\n              !!this.inputSearchVal && (\n                <nano-option\n                  slot=\"list-top\"\n                  value={this.inputSearchVal}\n                  selected={false}\n                  label={this.inputSearchVal}\n                  onNanoSelect={() => this.inputCtrl.focus()}\n                >\n                  <span slot=\"check-icon\"></span>\n                  Add '{this.inputSearchVal}'\n                </nano-option>\n              )}\n            <slot />\n          </nano-datalist>\n        )}\n\n        <select\n          id={this.selectId + '-hidden'}\n          class=\"select__native-ctrl\"\n          ref={(select) => (this.nativeSelect = select)}\n          aria-labelledby={labelId + ' ' + moreId + ' ' + helperEndId}\n          disabled={this.disabled}\n          form={this.form}\n          multiple={this.multiple}\n          name={this.name}\n          required={this.required}\n          onInvalid={this.handleInvalid}\n        >\n          {this.allowCustomValues &&\n            this.valArray.map((val) => {\n              return (\n                <option value={val} selected={true}>\n                  {val}\n                </option>\n              );\n            })}\n          {!this.allowCustomValues &&\n            this.options.map((opt: OptionInterface) => {\n              return (\n                <option\n                  value={opt.value}\n                  selected={this.valArray.includes(opt.value)}\n                  disabled={opt.disabled}\n                  label={opt.label}\n                >\n                  {this.valArray.includes(opt.value)}\n                </option>\n              );\n            })}\n        </select>\n      </Host>\n    );\n  }\n\n  private multipleValues(\n    labelId: string,\n    moreId: string,\n    helperEndId: string\n  ): VNode | (VNode | VNode[])[] {\n    const input: VNode = (\n      <input\n        class=\"select__multi-input\"\n        id={this.selectId}\n        ref={(input) => (this.inputCtrl = input)}\n        readOnly={this.readonly}\n        disabled={this.disabled}\n        autoFocus={this.autofocus}\n        autocomplete=\"off\"\n        onKeyDown={this.handleDocumentKeyDown}\n        onInput={this.onMultiInput}\n        value={this.inputSearchVal}\n        onTouchStart={this.onClick}\n        onMouseDown={this.onClick}\n        onFocus={this.onFocus}\n        placeholder={\n          this.placeholder && !this.value.length ? this.placeholder : ''\n        }\n        aria-labelledby={labelId + ' ' + moreId + ' ' + helperEndId}\n      />\n    );\n    if (!this.value.length) return input;\n\n    return (this.value as Array<string>).map((val, i) => {\n      let toReturn: VNode | VNode[] = (\n        <span\n          onDragStart={this.onDragStart}\n          onDragLeave={this.onDragLeave}\n          onDragEnd={this.onDragEnd}\n          onDragOver={(e) => e.preventDefault()}\n          draggable\n          data-value={val}\n          ref={(span) => this.valueItems.push(span)}\n          class=\"select__multi-value\"\n        >\n          <span>{this.getLabel(val)}</span>\n          <button\n            class=\"select__multi-value-remove\"\n            type=\"button\"\n            tabindex=\"-1\"\n            onTouchEnd={() => {\n              this.removeValue(val);\n            }}\n            onMouseUp={() => {\n              this.removeValue(val);\n            }}\n          >\n            <nano-icon name=\"light/times\"></nano-icon>\n          </button>\n        </span>\n      );\n      if (i === 0 && this.currInsertIndex < 0)\n        toReturn = [input, toReturn as VNode];\n      else if (i === this.currInsertIndex)\n        toReturn = [toReturn as VNode, input];\n      return toReturn;\n    });\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["GlobalNavUserProfile","render","this","myAccountUser","h","href","userProfileUrl","class","src","_a","small_avatar_url","alt","height","width","is_nanopore_user","getAssetPath","name","job_title","company","slot","navItemCss","NavItem","hasSecondarySlot","animating","closeSecondary","async","didOpen","open","displayTransition","secondaryDiv","nanoClosing","emit","secondaryMenu","openSecondary","window","innerWidth","secondaryActiveWidth","secondaryFallback","call","nanoOpening","toggleSecondary","handleFocus","hasFocus","nanoFocus","handleHostBlur","el","removeAttribute","nanoBlur","handleHostClick","ev","hasAnchorEle","foundlink","target","closest","btn","click","handleMouseEnter","globalNavEle","classList","contains","timeToWait","getSiblings","length","clearTimeout","waitHide","fromHover","waitShow","setTimeout","handleMouseLeave","handleClick","focus","openChange","didOpenChange","document","activeElement","body","preventScroll","tabIndex","nanoClose","panelIO","IntersectionObserver","data","boundingClientRect","top","scrollIntoView","behavior","disconnect","threshold","observe","focusableChild","getTabbableElements","nanoOpen","handleClose","e","composedPath","some","componentWillLoad","secondaryEle","querySelector","link","getDirectChildren","addEventListener","connectedCallback","isInGlobalNav","isInMenuDrawer","isInMenu","parentElement","Host","selected","disabled","onBlur","dir","ownerDocument","onMouseEnter","onMouseLeave","onClick","role","part","ref","a","onFocus","notification","div","selectCss","selectIds","Select","inputCtrl","_inputCtrl","input","setDataListOpts","selectWrap","_selectWrap","ele","datalist","_datalist","constructor","hostRef","valueItems","selectId","rtl","onInit","customError","_value","multiple","_options","customValidate","nativeSelect","setCustomValidity","required","valArray","allowCustomValues","isValidValues","max","min","showInlineValidation","validateOn","_invalid","showErrorMsg","errorMessage","validity","valid","validationMessage","nanoValidate","isValid","invalid","originalEvent","handleInvalid","showInlineError","preventDefault","requestAnimationFrame","setValue","value","detail","includes","currInsertIndex","slice","inputSearchVal","removeValue","toFind","filter","val","setFocus","setOptions","activeOptions","_eOptions","map","ao","label","filterMeta","handleDocumentKeyDown","rm","key","previousElementSibling","dataset","nextElementSibling","previousSibling","nextSibling","event","Event","dispatchEvent","clearSelectValue","clearSelect","readonly","stopPropagation","onDragStart","dragVal","onDragEnd","onDragLeave","spanVal","to","indexOf","from","tmpArr","tmpVal","onMultiInput","trim","nanoSearchChange","debounce","validityMessage","split","Array","isArray","options","opts","opt","debounceChanged","debounceEvent","shouldValidate","valueChanged","nanoChange","currDWConfig","dropDownConfig","Object","assign","tetherTo","validateFirst","Promise","resolve","getSelectElement","message","find","slotChangeObserver","mo","MutationObserver","processSlottedContent","childList","subtree","hasLabelSlot","querySelectorAll","hasHelperSlot","hasHelperEndSlot","getLabel","onReset","form","handleBlur","kev","getActiveElement","closestElement","tagName","toLowerCase","CustomEvent","disconnectedCallback","componentDidLoad","labelId","moreId","helperEndId","compWrapOptions","floatLabel","hideLabel","placeholder","wrapOptions","hasValue","controlId","controlOptions","clearControl","type","createColorClasses","color","masked","mask","FormControlWrap","FormControl","onClearText","control","endValueSlot","multipleValues","id","readOnly","onNanoOptionsUpdated","onNanoSelect","onNanoDeselect","undefined","select","onInvalid","autoFocus","autofocus","autocomplete","onKeyDown","onInput","onTouchStart","onMouseDown","i","toReturn","onDragOver","draggable","span","push","tabindex","onTouchEnd","onMouseUp"],"sources":["./src/components/global-nav/global-nav-user-profile.tsx","./src/components/nav-item/nav-item.scss?tag=nano-nav-item&encapsulation=shadow","./src/components/nav-item/nav-item.tsx","./src/components/select/select.scss?tag=nano-select&encapsulation=scoped","./src/components/select/select.tsx"],"sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  getAssetPath,\n  ComponentInterface,\n} from '@stencil/core';\nimport { MyAccountUser } from './global-nav-interface';\n\n/**\n * Nanopore digital global navigation user profile.\n */\n@Component({\n  tag: 'nano-global-nav-user-profile',\n})\nexport class GlobalNavUserProfile implements ComponentInterface {\n  /**\n   * Logged in user details automatically populated from MyAccount\n   */\n  @Prop() myAccountUser: MyAccountUser;\n\n  /**\n   * Link to the user profile\n   */\n  @Prop() userProfileUrl: string;\n\n  // Render output\n\n  render() {\n    return (\n      !!this.myAccountUser && (\n        <a href={this.userProfileUrl} class=\"user-profile\">\n          <div class=\"left\">\n            <div class=\"avatar-container\">\n              <img\n                class=\"avatar\"\n                src={this.myAccountUser?.small_avatar_url}\n                alt=\"User Avatar\"\n                height={75}\n                width={75}\n              />\n              {this.myAccountUser.is_nanopore_user && (\n                <img\n                  class=\"logo-small\"\n                  src={getAssetPath(`../nano-assets/ont-wheel-light.svg`)}\n                  alt=\"Nanopore Logo\"\n                />\n              )}\n            </div>\n\n            <div class=\"user-details\">\n              <span class=\"name\">{this.myAccountUser.name}</span>\n\n              <span class=\"bio\">\n                {this.myAccountUser.job_title} at {this.myAccountUser.company}\n              </span>\n            </div>\n          </div>\n\n          <div class=\"right\">\n            <div class=\"chevron-right\">\n              <nano-icon\n                slot=\"icon-end\"\n                name=\"light/chevron-right\"\n                aria-label=\"navigate to ...\"\n              ></nano-icon>\n            </div>\n          </div>\n        </a>\n      )\n    );\n  }\n}\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  // These can be overwritten, but are automatically set from context components\n\n  // --padding-top: inherit;\n  // --padding-bottom: inherit;\n  // --padding-start: inherit;\n  // --padding-end: inherit;\n  // --margin: inherit;\n\n  // --secondary-padding-top: inherit;\n  // --secondary-padding-bottom: inherit;\n  // --secondary-padding-start: inherit;\n  // --secondary-padding-end: inherit;\n\n  // --border-bottom: inherit;\n  // --icon-size: inherit;\n\n  // --color: inherit;\n  // --color-hover: inherit;\n  // --color-focus: inherit;\n  // --color-selected: inherit;\n  // --color-open: inherit;\n\n  // --bg-color: inherit;\n  // --bg-color-hover: inherit;\n  // --bg-color-selected: inherit;\n  // --bg-color-open: inherit;\n  // --bg-color-focus: inherit;\n\n  // --secondary-bg-color: inherit;\n  // --secondary-color: inherit;\n\n  opacity: inherit;\n  display: block;\n  color: var(--color) !important;\n  margin: var(--margin);\n  outline: none !important;\n\n  .nav-item,\n  .link {\n    outline: none !important;\n    border-radius: inherit;\n  }\n\n  ::slotted(*),\n  * {\n    box-sizing: border-box;\n  }\n\n  ::slotted(button),\n  button {\n    background: none;\n    border: none;\n    margin: 0;\n  }\n\n  ::slotted(button),\n  ::slotted(a),\n  ::slotted(a:visited),\n  button,\n  a,\n  a:visited {\n    @include text-inherit();\n\n    padding-inline: var(--padding-start) var(--padding-end);\n    padding-block: var(--padding-top) var(--padding-bottom);\n    display: var(--display, block);\n    white-space: nowrap;\n    color: var(--color) !important;\n    background-color: var(--bg-color);\n    line-height: inherit;\n    outline: none !important;\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    padding-inline-end: var(--padding-end);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    padding-inline-start: var(--padding-start);\n  }\n\n  .link {\n    ::slotted(nano-icon[slot='icon-start']) {\n      padding-inline-start: var(--padding-start);\n      padding-inline-end: 0;\n    }\n\n    ::slotted(nano-icon[slot='icon-end']) {\n      padding-inline-end: var(--padding-end);\n      padding-inline-start: 0;\n    }\n  }\n\n  .link,\n  button,\n  a {\n    border-block-end: var(--border-bottom);\n    display: flex;\n    align-items: center;\n    border-radius: inherit;\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-visible,\n  a:focus-visible {\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    box-shadow: #{$control-focus-style};\n  }\n\n  ::slotted(a:focus-visible),\n  ::slotted(button:focus-visible) {\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    box-shadow: #{$control-focus-style};\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    padding-inline-start: 0;\n    padding-inline-end: var(--padding-end);\n    flex: 1;\n  }\n\n  ::slotted(a),\n  ::slotted(button) {\n    flex: 1;\n  }\n\n  .secondary-menu {\n    display: none;\n    position: absolute;\n    color: var(--secondary-color, currentcolor);\n    min-height: 100%;\n    inset-block-start: 0;\n    inset-inline-start: 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    padding-inline: 0 var(--padding-end);\n    padding-block: 0;\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    padding-inline: 0 var(--padding-end);\n    padding-block: 0;\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    transform: translateX(-100%);\n\n    &.open {\n      transform: translateX(0);\n    }\n  }\n}\n\n:host(.nano-menu) {\n  ::slotted(a:focus),\n  ::slotted(button:focus) {\n    box-shadow: none;\n  }\n\n  .secondary-menu-content {\n    padding-inline: var(--secondary-padding-start) var(--secondary-padding-end);\n    padding-block: var(--secondary-padding-top) var(--secondary-padding-bottom);\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    margin-inline: var(--padding-end) 0;\n    margin-block: 0;\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    margin-inline: 0 var(--padding-start);\n    margin-block: 0;\n  }\n\n  ::slotted(a),\n  button {\n    position: relative;\n\n    &::before {\n      content: '';\n      background-color: rgb(12 90 113);\n      height: 9px;\n      inset-inline: 0 5px;\n      inset-block-end: -22px;\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\n:host(.nano-global-nav-bar.selected) {\n  ::slotted(a) {\n    &::before {\n      transform: translateZ(0) scaleX(1);\n    }\n  }\n}\n\n:host(.nano-global-nav-bar.has-secondary) {\n  .secondary-open button::before {\n    opacity: 0.7;\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 rgb(0 0 0 / 15%);\n    inset-inline: 0;\n    z-index: -2;\n    outline: none;\n\n    &.open {\n      transform: translateY(12px) translateZ(0);\n    }\n  }\n}\n\n:host(.nano-menu-drawer) {\n  .link,\n  a,\n  button {\n    padding-block-start: calc(var(--padding-top) / 2);\n    padding-inline-end: 0;\n    padding-block-end: calc(var(--padding-bottom) / 2);\n    padding-inline-start: var(--padding-start);\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    padding-inline-end: var(--padding-end);\n    padding-inline-start: 0;\n    text-align: start;\n    flex: 0 1 auto;\n    min-width: 130px;\n    width: 130px;\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    padding-inline: 0 var(--padding-end);\n    padding-block: 0;\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    padding: 0 var(--padding-end) 0 0;\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    inset-inline: auto 0;\n    inset-block: 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    padding-inline:\n      var(--secondary-padding-start, var(--padding-start))\n      var(--secondary-padding-end, var(--padding-end));\n    padding-block:\n      var(--secondary-padding-top, var(--padding-top))\n      var(--secondary-padding-bottom, var(--padding-bottom));\n\n    &:focus {\n      outline: none;\n    }\n\n    &.open {\n      transform: translateX(100%);\n    }\n  }\n\n  .notification {\n    position: relative;\n\n    &::after {\n      content: '';\n      display: block;\n      position: absolute;\n      width: 6px;\n      height: 6px;\n      background-color: #ef4135;\n      inset-inline-start: 10px;\n      inset-block-start: 7px;\n      border-radius: 50%;\n\n      @media (min-width: 52em) {\n        width: 7px;\n        height: 7px;\n        inset-inline-start: 8px;\n        inset-block-start: 5px;\n      }\n    }\n  }\n}\n\n:host(.nano-menu-drawer[dir='rtl']) {\n  .secondary-menu {\n    transform: translateX(0%);\n\n    &.open {\n      transform: translateX(-100%);\n      opacity: 1;\n    }\n  }\n}\n","import {\n  Component,\n  h,\n  Host,\n  Element,\n  Prop,\n  Watch,\n  EventEmitter,\n  Event,\n  State,\n  Method,\n  ComponentInterface,\n  Listen,\n} from '@stencil/core';\nimport { getSiblings, getDirectChildren } from '../../utils/dom';\nimport { displayTransition } from '../../utils/transitions';\nimport { getTabbableElements } from '../../utils/tabbable';\nimport type { 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 * @slot icon-start - an icon at the start of the main control\n * @slot icon-end - an icon at the end of the main control\n * @slot secondary - a content panel in which you can place any html to display on control click\n * @slot - use the default slot for either `<a>` or text (if constructing a secondary content panel or using `href` directly)\n * @part ctrl - the controlling `<a>` or `<button>` element\n * @part ctrl--button - the controlling `<button>` element\n * @part ctrl--anchor - the controlling <a> element\n * @part ctrl-wrapper - the wrapping div around the control (shadow `<button>` / `<a>` or slotted `<a>`)\n * @part secondary-wrapper - the div surrounding slotted secondary content\n * @part secondary-mask - the div that is added when secondary content is shown\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 secondaryDiv: HTMLDivElement;\n  private btn: HTMLButtonElement | HTMLAnchorElement;\n  private fromHover: boolean;\n  private animating: boolean = false;\n  private waitHide: number;\n  private waitShow: number;\n  private globalNavEle?: HTMLNanoGlobalNavElement;\n\n  @State() hasAnchorEle: boolean = false;\n  @State() didOpen: boolean = false;\n  @State() isInGlobalNav: boolean = false;\n  @State() isInMenuDrawer: boolean = false;\n  @State() isInMenu: boolean = false;\n  @State() hasFocus: boolean = false;\n  @Element() private el: HTMLNanoNavItemElement;\n\n  /**\n   * Href to link to\n   */\n  @Prop({ mutable: true }) href: string = null;\n\n  /**\n   * Target to use for links\n   */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /**\n   * Disable the nav item\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether a secondary menu should be or is currently open\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Whether this menu item is currently 'selected'\n   */\n  @Prop({ reflect: true }) selected: boolean = false;\n\n  /**\n   * Screen pixel width to activate the secondary menu\n   */\n  @Prop() secondaryActiveWidth: number = 0;\n\n  /**\n   * Secondary fallback function for when the secondary menu is no longer active.\n   */\n  @Prop() secondaryFallback = () => {};\n\n  /**\n   * Whether secondary menus should close on blur\n   */\n  @Prop() closeOnBlur: boolean = true;\n\n  /**\n   * Will show an indicator badge - only when placed in a nano-menu-draw\n   */\n  @Prop() notification: boolean = false;\n\n  /**\n   * Emitted when the nav item closes it's secondary navigation.\n   */\n  @Event() nanoClose!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item opens it's secondary navigation.\n   */\n  @Event() nanoOpen!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item is about to open it's secondary navigation.\n   */\n  @Event() nanoOpening!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item is about to close it's secondary navigation.\n   */\n  @Event() nanoClosing!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the nav item has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the first button or anchor present. Use this method instead of the global\n   * `element.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (!this.btn) return;\n    this.btn.focus();\n  }\n\n  /**\n   * Public open watcher\n   */\n  @Watch('open')\n  openChange() {\n    this.open ? this.openSecondary() : this.closeSecondary();\n  }\n\n  /**\n   * Internal open watcher\n   */\n  @Watch('didOpen')\n  didOpenChange() {\n    if (!this.hasSecondarySlot) return;\n\n    if (!this.didOpen) {\n      /* the secondadry panel is not closing via hover,\n      remove blur events, add focus back to originating button */\n      setTimeout(() => {\n        if (\n          !this.fromHover &&\n          (!document.activeElement || document.activeElement === document.body)\n        )\n          this.btn.focus({ preventScroll: true });\n        this.el.tabIndex = null;\n        this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });\n      }, 50);\n    } else {\n      /* the secondary 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        const focusableChild = getTabbableElements(this.secondaryDiv, true);\n        if (focusableChild[0]) focusableChild[0].focus();\n\n        this.el.tabIndex = -1;\n        this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });\n      }\n    }\n  }\n\n  @Listen('click', { target: 'body' })\n  @Listen('keyup', { target: 'body' })\n  handleClose(e: MouseEvent | KeyboardEvent) {\n    if (!this.didOpen || !this.hasSecondarySlot) return;\n    if (!e.composedPath().some((el) => el === this.secondaryDiv))\n      this.toggleSecondary();\n  }\n\n  private closeSecondary = async () => {\n    if (!this.hasSecondarySlot || !this.didOpen) return;\n    this.open = false;\n    await displayTransition(this.secondaryDiv, 'open', false);\n    this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });\n    this.didOpen = false;\n  };\n\n  private openSecondary = async () => {\n    if (window.innerWidth < this.secondaryActiveWidth) {\n      this.secondaryFallback.call(this);\n      return;\n    }\n\n    if (!this.hasSecondarySlot || this.didOpen) return;\n    this.open = true;\n    await displayTransition(this.secondaryDiv, 'open', true);\n    this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });\n    this.didOpen = true;\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    const 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  };\n\n  componentWillLoad() {\n    const secondaryEle = this.el.querySelector('[slot=\"secondary\"]');\n    this.hasSecondarySlot = !!secondaryEle;\n\n    const link = getDirectChildren<HTMLAnchorElement | HTMLButtonElement>(\n      this.el,\n      'a, button'\n    )[0];\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        }}\n        onBlur={this.handleHostBlur}\n        dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n        onClick={this.handleHostClick}\n        role=\"menuitem\"\n      >\n        <div\n          class={{\n            'nav-item': true,\n            'secondary-open': this.open,\n            selected: this.selected,\n          }}\n          part=\"ctrl-wrapper\"\n        >\n          {this.href && !this.hasAnchorEle && !this.disabled && (\n            <a\n              part=\"ctrl ctrl--anchor\"\n              target={this.target}\n              ref={(a) => (this.btn = a)}\n              href={this.href}\n              onFocus={this.handleFocus}\n              class={{\n                notification: this.notification,\n              }}\n            >\n              <slot name=\"icon-start\" />\n              <span class=\"text\">\n                <slot />\n              </span>\n              <slot name=\"icon-end\" />\n            </a>\n          )}\n          {((!this.hasAnchorEle && !this.href) || this.disabled) && (\n            <button\n              part=\"ctrl ctrl--button\"\n              ref={(btn) => (this.btn = btn)}\n              onClick={this.handleClick}\n              onFocus={this.handleFocus}\n              disabled={this.disabled}\n              class={{\n                notification: this.notification,\n              }}\n            >\n              <slot name=\"icon-start\" />\n              <span class=\"text\">\n                <slot />\n              </span>\n              <slot name=\"icon-end\" />\n            </button>\n          )}\n          {this.hasAnchorEle && !this.disabled && (\n            <div class=\"link\">\n              <slot name=\"icon-start\" />\n              <slot />\n              <slot name=\"icon-end\" />\n            </div>\n          )}\n          {this.hasSecondarySlot && !this.disabled && (\n            <div\n              class=\"secondary-menu\"\n              ref={(div) => (this.secondaryDiv = div)}\n              tabIndex={-1}\n            >\n              <div class=\"secondary-menu-content\" part=\"secondary-wrapper\">\n                <slot name=\"secondary\" />\n              </div>\n              <div\n                class=\"secondary-menu-mask\"\n                onClick={this.closeSecondary}\n                part=\"secondary-mask\"\n              ></div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/layers';\n@import '../form-control/form-control';\n@import '../form-control/form-control-vars';\n\n:host {\n  @include formControlVars;\n\n  /**\n   * @prop --max-menu-height: the maximum of the dropdown menu. Defaults to 50vw.\n   */\n\n  position: relative;\n  width: 100%;\n  padding: 0 !important;\n  font-family: $font-family-base;\n  display: block;\n}\n\n:host(.nano-color) {\n  --input-border-style--focus:\n    #{$input-border-style} var(\n      --nano-color-tint,\n      #{nano-color(\n        primary,\n        tint\n      )}\n    );\n  --multi-input-value-bg: var(--nano-color-tint-rgb);\n  --multi-input-value-border: var(--nano-color-shade);\n  --multi-input-value-text-color: var(--nano-color-contrast);\n\n  color: current-color(base);\n}\n\n:host-context(nano-item:not(.item-label)) {\n  --padding-start: 0;\n}\n\n:host([disabled]:not([disabled='false'])) {\n  * {\n    pointer-events: none !important;\n  }\n}\n\nselect {\n  display: none;\n}\n\n.select__native-input {\n  @include text-inherit();\n\n  padding: unset;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  text-overflow: ellipsis;\n  color: var(--input-text-color);\n  display: inline-block;\n  flex: 1;\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\n  appearance: none;\n  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n  cursor: default;\n  line-height: 2.5em;\n\n  .has-float-label & {\n    line-height: 2.1em;\n    min-height: 2.1em;\n    padding-block-start: 1.4em;\n  }\n\n  &::selection {\n    background: transparent;\n  }\n\n  /* stylelint-disable-next-line selector-no-vendor-prefix */\n  &::-moz-selection {\n    background: transparent;\n  }\n\n  &::placeholder {\n    color: var(--placeholder-color);\n    font-family: inherit;\n    font-style: var(--placeholder-font-style);\n    font-weight: var(--placeholder-font-weight);\n    opacity: var(--placeholder-opacity);\n    line-height: inherit;\n    min-height: initial;\n  }\n\n  /* stylelint-disable-next-line selector-no-vendor-prefix */\n  &::-moz-placeholder {\n    line-height: 2.8em;\n    text-overflow: ellipsis;\n  }\n\n  &:-webkit-autofill {\n    background-color: transparent;\n  }\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    appearance: none;\n  }\n\n  &:invalid {\n    box-shadow: none;\n  }\n\n  &::-ms-clear,\n  &::-ms-reveal {\n    display: none;\n  }\n\n  &.resizable {\n    resize: vertical;\n    overflow: auto;\n  }\n\n  .form-ctrl__textarea & {\n    line-height: 1.5em;\n    padding-block: var(--padding-top) var(--padding-bottom);\n    white-space: pre-wrap;\n\n    &::placeholder {\n      line-height: 1.5em;\n    }\n  }\n\n  .has-float-label.textarea & {\n    padding-block-start: 1.8em;\n  }\n\n  :host(.masked) & {\n    opacity: 0;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n  }\n}\n\n.select__mask {\n  @include text-inherit();\n\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  pointer-events: none;\n  line-height: 2.5em;\n  min-height: 2.5em;\n}\n\n// multi stuff\n\n.select__multi {\n  &-wrap {\n    padding-block: 0 var(--padding-bottom);\n    padding-inline: 0 0;\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    overflow: hidden;\n    align-items: flex-start;\n\n    :host(.has-float-label) & {\n      padding-block-start: 1em;\n    }\n  }\n\n  &-input {\n    @include text-inherit();\n\n    padding-inline: var(--padding-start) var(--padding-end);\n    padding-block: var(--padding-bottom) 0;\n    min-width: 50px;\n    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    box-sizing: border-box;\n    line-height: calc(2.5em - var(--padding-bottom));\n    height: calc(2.5em - var(--padding-bottom));\n\n    &:last-child {\n      flex: 1;\n    }\n  }\n\n  &-value {\n    margin-block: var(--padding-bottom) 0;\n    margin-inline: var(--padding-start) -3px;\n    background: rgb(var(--multi-input-value-bg) / 80%);\n    color: var(--multi-input-value-text-color);\n    border: 1px solid;\n    border-color: var(--multi-input-value-border);\n    padding: 0.35em 0.5em;\n    max-width: 100%;\n    display: flex;\n    align-items: center;\n    font-size: var(--input-font-size);\n    letter-spacing: 1px;\n    max-height: calc(2.5em - 8px);\n\n    span {\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      max-width: 100%;\n      overflow: hidden;\n      line-height: 1;\n    }\n  }\n\n  &-value-remove {\n    @include background-position(center);\n\n    padding-inline-start: 0.5em;\n    margin: 0;\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    inset-block-start: 0;\n    font-size: 1em;\n\n    nano-icon {\n      --color: var(--multi-input-value-text-color);\n    }\n  }\n}\n\n.form-ctrl__float-label {\n  width: calc(100% - (1em + (var(--padding-start) * 2)));\n\n  :host(.has-focus.has-multiple) & {\n    transform: translateY(-110%);\n    font-size: 0.8em;\n  }\n\n  :host(.has-value.has-multiple) & {\n    transform: translateY(21%);\n    inset-block-start: 0;\n  }\n}\n\n:host(.has-focus) select,\n:host(.has-focus) a,\n:host(.has-focus) button {\n  pointer-events: auto;\n}\n","import {\n  Build,\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  VNode,\n  Listen,\n} from '@stencil/core';\n\nimport { getActiveElement } from '../../utils/active-element';\nimport { closestElement } from '../../utils/dom';\nimport { createColorClasses } from '../../utils/theme';\nimport { debounce, debounceEvent } from '../../utils/throttle';\nimport { FormControl, FormControlWrap } from '../form-control/form-control';\nimport { OptionInterface } from '../option/option-interface';\nimport type { Dropdown } from '../dropdown/dropdown';\nimport type {\n  Color,\n  SelectChangeEventDetail,\n  InputChangeEventDetail,\n  ControlValidityEventDetail,\n  ControlValidity,\n} from '../../interface';\n\nlet selectIds = 0;\n\n/**\n * The select component is a wrapper to the HTML select element with custom styling and additional functionality.\n * It accepts most of the same properties as the HTML [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).\n * It's multi selection functionality is vastly improved from the native solution. It allows for the control of\n * value order through drag and drop or changing the insertion point with arrow keys. It also can allow for user defined values.\n *\n * @slot start - suitable for inline action buttons or icons that may add extra contextual information\n * @slot end - suitable for inline action buttons or icons that may add extra contextual information\n * @slot value-start - similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist\n * @slot value-end - similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist\n * @slot label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot helper - helper text to accompany the form field underneath.\n * @slot helper-end - helper text to accompany the form field on the side.\n * @slot down-arrow - use this to replace the default down arrow\n * @slot - default slot; nest `nano-option` elements\n */\n@Component({\n  tag: 'nano-select',\n  styleUrl: 'select.scss',\n  scoped: true,\n})\nexport class Select implements ComponentInterface {\n  private nativeSelect?: HTMLSelectElement;\n  private valueItems: Array<HTMLSpanElement> = [];\n  private dragVal: string;\n  private mo?: MutationObserver;\n  private selectId = `nano-select-${selectIds++}`;\n  private rtl: boolean = false;\n  private onInit: boolean = true;\n  private customError: string = '';\n\n  private get inputCtrl() {\n    return this._inputCtrl;\n  }\n  private set inputCtrl(input) {\n    if (input === this._inputCtrl) return;\n    this._inputCtrl = input;\n    this.setDataListOpts();\n  }\n  private _inputCtrl?: HTMLInputElement;\n\n  // we don't want these rendered eles decorated with @State\n  // because that will cause re-renders. Use get/set to set datalist options\n  private _selectWrap: HTMLElement;\n  private get selectWrap() {\n    return this._selectWrap;\n  }\n  private set selectWrap(ele: HTMLElement) {\n    if (this._selectWrap === ele) return;\n    this._selectWrap = ele;\n    this.setDataListOpts();\n  }\n\n  private _datalist: HTMLNanoDatalistElement;\n  private get datalist() {\n    return this._datalist;\n  }\n  private set datalist(ele: HTMLNanoDatalistElement) {\n    if (this._datalist === ele) return;\n    this._datalist = ele;\n    this.setDataListOpts();\n  }\n\n  constructor() {\n    this.showInlineValidation = debounce(this.showInlineValidation, 50);\n  }\n\n  @State() currInsertIndex: number = -1;\n  @State() showErrorMsg = false;\n  @State() errorMessage: string = '';\n  @State() hasFocus = false;\n  @State() hasLabelSlot: boolean = false;\n  @State() hasHelperSlot: boolean = false;\n  @State() hasHelperEndSlot = false;\n  @State() inputSearchVal: string = '';\n\n  @Element() el!: HTMLNanoSelectElement;\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set.\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n  @State() _invalid = false;\n\n  /**\n   * Current validation message - if any. @readonly\n   */\n  @Prop()\n  get validityMessage() {\n    if (!this.nativeSelect) return '';\n    return this.nativeSelect.validationMessage;\n  }\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    'submitThenDirty';\n\n  /**\n   * Whether to show validation errors underneath input\n   */\n  @Prop({ reflect: true }) showInlineError = true;\n\n  /**\n   * String to place within a label element. Alternatively use the 'label' slot\n   */\n  @Prop() label!: string;\n\n  /**\n   * Visually hide the label - but make it accessible.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  /**\n   * Enable floating label behaviour. Will disable placeholder if set.\n   */\n  @Prop() floatLabel: boolean = false;\n\n  /**\n   * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"` or `\"file\"`, otherwise it is ignored.\n   */\n  @Prop() multiple?: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.selectId + '-name';\n\n  /**\n   * Instructional text that shows before the select has a value. Text set here will be placed inside the label when a value is set. If you don't want this behaviour just set the first option to have no value.\n   */\n  @Prop() placeholder?: string | null;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop({ reflect: true }) readonly = false;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required = false;\n\n  /**\n   * The initial size of the control.\n   */\n  @Prop() size?: number;\n\n  /**\n   * Maximum number of options that can be selected when multiple is true\n   */\n  @Prop() max?: number;\n\n  /**\n   * Minimum number of options that can be selected when multiple is true\n   */\n  @Prop() min?: number;\n\n  /**\n   * The form element to associate the select with (its form owner). Must be the id of a form.\n   */\n  @Prop() form?: string | null;\n\n  /**\n   * in multiple mode, allow users to enter their own values\n   */\n  @Prop() allowCustomValues: boolean = false;\n\n  /**\n   * The value of the select.\n   */\n  @Prop()\n  get value() {\n    return this._value;\n  }\n  set value(val: string | string[]) {\n    if (typeof val === 'string') {\n      if (this.multiple) this._value = val.split(',');\n      else this._value = val;\n    } else if (Array.isArray(val)) {\n      if (this.multiple) this._value = val;\n      else this._value = val[0];\n    }\n  }\n  private _value: Array<string> | string = this.multiple ? [] : '';\n\n  /**\n   * You can set options via js as an array of strings: `domElement.options = ['option 1', 'option 2']` or\n   * objects `domElement.options = [{label: 'option 1', value: 'opt-1'}]`. See `nano-option` docs for all available properties.\n   * Alternatively, you can nest `<nano-option>` elements within a `<nano-select>`\n   * Regardless - reading `options` will return the current component options - slotted or otherwise\n   */\n  @Prop()\n  get options(): Array<OptionInterface | string> {\n    if (this._options.length) return this._options;\n\n    if (!this.datalist || !this.datalist.activeOptions) return [];\n\n    return this._eOptions.map((ao) => {\n      const { value, selected, label, filterMeta } = ao;\n      return { value, selected, label, filterMeta };\n    });\n  }\n  set options(opts: Array<OptionInterface | string>) {\n    this._options = opts.map((opt) => {\n      if (typeof opt === 'string') return { value: opt, label: opt };\n      else return opt;\n    });\n  }\n  private _options: OptionInterface[] = [];\n  @State() _eOptions: OptionInterface[] = [];\n\n  /**\n   * If `true`, a clear icon will appear in the select when there is a value. Clicking it clears the select.\n   */\n  @Prop() clearSelect = false;\n\n  /**\n   * Hide the native select element and cover with a value 'mask'.\n   * Enables a fluid nano-select width upon value change (if required). Doesn't work with multiple=\"true\".\n   */\n  @Prop() mask = false;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait to trigger the `nanoSearchChange` event after each keystroke.\n   */\n  @Prop() debounce = 0;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.nanoSearchChange = debounceEvent(this.nanoSearchChange, this.debounce);\n  }\n\n  @Watch('required')\n  @Watch('disabled')\n  @Watch('min')\n  @Watch('max')\n  @Watch('readonly')\n  protected shouldValidate() {\n    if (this.onInit) return;\n    if (this.invalid) this.showErrorMsg = this._invalid = false;\n\n    this.customValidate();\n    if (this.validateOn !== 'dirty') return;\n    this.showInlineValidation();\n  }\n\n  /**\n   * Update the native select element when the value changes\n   */\n  // eslint-disable-next-line @stencil-community/no-unused-watch\n  @Watch('value')\n  valueChanged() {\n    this.customValidate();\n\n    if (this.onInit) {\n      if (this.multiple) this.currInsertIndex = this.value.length - 1;\n      return;\n    }\n    requestAnimationFrame(() => {\n      this.shouldValidate();\n      this.nanoChange.emit({ value: this.value });\n    });\n  }\n\n  /** nano-dropdown config options you can pass to the nested dropdown component */\n  @Prop({ mutable: true }) dropDownConfig?: Partial<Dropdown> = {};\n\n  @Watch('dropDownConfig')\n  setDataListOpts() {\n    if (!this.datalist || !this.selectWrap) return;\n\n    this.datalist.input = this.inputCtrl;\n\n    const currDWConfig = this.datalist.dropDownConfig || {};\n    this.datalist.dropDownConfig = {\n      ...currDWConfig,\n      ...this.dropDownConfig,\n      tetherTo: this.selectWrap,\n    };\n  }\n\n  // Custom Events\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() nanoChange!: EventEmitter<SelectChangeEventDetail>;\n\n  /**\n   * Emitted when the select loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has been created.\n   * @internal\n   */\n  @Event() nanoDidLoad!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has been removed.\n   * @internal\n   */\n  @Event() nanoDidUnload!: EventEmitter<void>;\n\n  /**\n   * Emitted when a keyboard input occurred on a multiple=\"true\" input\n   */\n  @Event() nanoSearchChange!: EventEmitter<InputChangeEventDetail>;\n\n  /**\n   * Called when validation is performed (which depends on `validateOn`).\n   * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n   */\n  @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n  // Public Methods\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `{ isValid: boolean, errorMessage: string }`\n   */\n  @Method()\n  async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n    return new Promise((resolve) => {\n      if (validateFirst) {\n        this.customValidate();\n        this.showInlineValidation();\n      }\n      setTimeout(() => {\n        resolve({\n          isValid: !this._invalid,\n          errorMessage: this.nativeSelect.validationMessage,\n        });\n      }, 50);\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.inputCtrl) return;\n    this.inputCtrl.focus();\n    setTimeout(() => this.inputCtrl.click(), 50);\n  }\n\n  /**\n   * @returns the native `<select>` element used under the hood.\n   */\n  @Method()\n  getSelectElement(): Promise<HTMLSelectElement> {\n    return Promise.resolve(this.nativeSelect!);\n  }\n\n  /**\n   * Invalidate the field and show a custom error message.\n   * To clear the error you will need to re-call this method with an empty string.\n   */\n  @Method()\n  async showError(message: string) {\n    if (this.nativeSelect) {\n      this.customError = message;\n      this.nativeSelect.setCustomValidity(message);\n      this.showInlineValidation();\n    }\n  }\n\n  /* Logic */\n\n  private get valArray() {\n    return typeof this.value === 'string'\n      ? this.value.length\n        ? [this.value]\n        : []\n      : this.value;\n  }\n\n  private isValidValues() {\n    return this.valArray.find((val) =>\n      (this.options as OptionInterface[]).find((opt) => opt.value === val)\n    );\n  }\n\n  private customValidate = () => {\n    if (\n      !this.nativeSelect ||\n      !!this.customError ||\n      !this.nativeSelect['setCustomValidity']\n    )\n      return;\n\n    this.nativeSelect.setCustomValidity('');\n    // add custom validations 'cos html5 validations are a bit rubbish on selects\n    if (this.required && !this.valArray.length) {\n      this.nativeSelect.setCustomValidity('Please fill in this field.');\n      return true;\n    }\n    if (\n      this.valArray.length &&\n      !this.allowCustomValues &&\n      !this.isValidValues()\n    ) {\n      this.nativeSelect.setCustomValidity(\n        'Please choose an item from this field.'\n      );\n      return true;\n    }\n    if (this.max && this.valArray.length > this.max) {\n      this.nativeSelect.setCustomValidity(\n        `Only up to ${this.max} values are allowed.`\n      );\n      return true;\n    }\n    if (this.min && this.valArray.length < this.min) {\n      this.nativeSelect.setCustomValidity(\n        `You must select a minimum of ${this.min} values.`\n      );\n      return true;\n    }\n    return false;\n  };\n\n  private showInlineValidation = (ev?: Event) => {\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n    this._invalid = false;\n    this.showErrorMsg = false;\n    this.errorMessage = '';\n\n    if (!this.nativeSelect.validity.valid) {\n      this.errorMessage = this.nativeSelect.validationMessage;\n      this._invalid = true;\n      this.showErrorMsg = true;\n    }\n    this.nanoValidate.emit({\n      isValid: !this.invalid,\n      errorMessage: this.errorMessage,\n      originalEvent: ev,\n    });\n  };\n\n  private handleInvalid = (ev: Event) => {\n    this._invalid = true;\n\n    if (this.validateOn === 'submit') {\n      this._invalid = this.showErrorMsg = this.customValidate();\n    }\n    if (this.showInlineError) ev.preventDefault();\n\n    requestAnimationFrame(() => this.showInlineValidation(ev));\n  };\n\n  private setValue = (e: CustomEvent<HTMLNanoOptionElement>) => {\n    e.preventDefault();\n\n    if (!this.multiple) {\n      this.value = e.detail.value;\n      return;\n    }\n    if (this.value && this.value.length && this.value.includes(e.detail.value))\n      return;\n    if (this.max && this.value.length === this.max) return;\n\n    this.currInsertIndex++;\n    this.value = [\n      ...this.value.slice(0, this.currInsertIndex),\n      e.detail.value,\n      ...this.value.slice(this.currInsertIndex),\n    ];\n    this.inputSearchVal = '';\n    // this.selectWrap.clientWidth; // force reflow\n  };\n\n  private removeValue = (toFind?: string) => {\n    if (!this.multiple || !this.value.length) return;\n\n    if (!toFind) toFind = this.value[this.value.length - 1];\n    this.value = (this.value as Array<string>).filter((val) => val !== toFind);\n\n    this.currInsertIndex--;\n    // this.selectWrap.clientWidth; // force reflow\n    this.setFocus();\n  };\n\n  private slotChangeObserver() {\n    if (!window['MutationObserver']) return;\n\n    const mo = (this.mo = new MutationObserver(() =>\n      this.processSlottedContent()\n    ));\n    mo.observe(this.el, { childList: true, subtree: true });\n  }\n\n  private processSlottedContent() {\n    // see if we have label / helper content\n    this.hasLabelSlot = !!this.el.querySelectorAll('[slot=\"label\"]').length;\n    this.hasHelperSlot = !!this.el.querySelector('[slot=\"helper\"]');\n    this.hasHelperEndSlot = !!this.el.querySelector('[slot=\"helper-end\"]');\n  }\n\n  private getLabel(toFind: string) {\n    const label = (this.options as OptionInterface[]).find((opt) => {\n      return !opt.disabled && opt.value?.length && opt.value === toFind;\n    });\n    return label && label.label ? label.label : toFind;\n  }\n\n  /* Event handling */\n\n  @Listen('reset', { target: 'body' })\n  onReset(e) {\n    const form = this.form\n      ? document.querySelector('#' + this.form)\n      : this.el.closest('form');\n    if (!form || e.target !== this.el.closest('form')) return;\n\n    this.clearSelectValue();\n  }\n\n  @Listen('mousedown', { target: 'body' })\n  @Listen('keydown')\n  handleBlur(e: KeyboardEvent | MouseEvent) {\n    if (!this.hasFocus) return;\n\n    const kev = e as KeyboardEvent;\n    let target: Element;\n\n    requestAnimationFrame(() => {\n      if (kev.key) {\n        if (kev.key !== 'Tab') return;\n        target = getActiveElement();\n      } else target = e.target as Element;\n\n      if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {\n        this.onBlur();\n      }\n    });\n  }\n\n  private setOptions = () => {\n    if (\n      !this.datalist ||\n      !this.datalist.activeOptions ||\n      !this.datalist.activeOptions.length\n    )\n      return;\n\n    this._eOptions = this.datalist.activeOptions.map((ao) => {\n      const { value, selected, label, filterMeta } = ao;\n      return { value, selected, label, filterMeta };\n    });\n    this.customValidate();\n  };\n\n  private handleDocumentKeyDown = (ev: KeyboardEvent) => {\n    if (!this.multiple || !this.hasFocus) return;\n\n    if (!this.inputSearchVal) {\n      let rm: HTMLSpanElement;\n\n      switch (ev.key) {\n        case 'Backspace':\n          if (this.inputCtrl.previousElementSibling)\n            rm = this.inputCtrl.previousElementSibling as HTMLSpanElement;\n          else break;\n\n          this.removeValue(rm.dataset.value || null);\n          break;\n\n        case 'Delete':\n          if (this.inputCtrl.nextElementSibling)\n            rm = this.inputCtrl.nextElementSibling as HTMLSpanElement;\n          else break;\n\n          this.removeValue(rm.dataset.value || null);\n          break;\n\n        case 'ArrowLeft':\n        case 'ArrowRight':\n          if (!this.value.length) break;\n\n          if (ev.key === 'ArrowLeft' && this.inputCtrl.previousSibling)\n            this.currInsertIndex--;\n          if (ev.key === 'ArrowRight' && this.inputCtrl.nextSibling)\n            this.currInsertIndex++;\n\n          setTimeout(() => {\n            this.inputCtrl.focus();\n          }, 20);\n          ev.preventDefault();\n          break;\n      }\n    }\n  };\n\n  private onBlur = () => {\n    this.hasFocus = false;\n\n    requestAnimationFrame(() => {\n      if (this.validateOn === 'dirty' && !this.hasFocus)\n        this.showInlineValidation();\n    });\n    this.nanoBlur.emit();\n\n    if (!this.allowCustomValues && this.multiple) {\n      this.inputSearchVal = '';\n      const event = new window.Event('change');\n      this.inputCtrl.dispatchEvent(event);\n    }\n  };\n\n  private onFocus = () => {\n    this.hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private clearSelectValue = (ev?: Event) => {\n    if (this.clearSelect && !this.readonly && !this.disabled && ev) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    }\n\n    if (this.multiple) {\n      this.value = [];\n      this.currInsertIndex = -1;\n    } else this.value = '';\n\n    this.inputCtrl.value = '';\n    const event = new window.Event('change');\n    this.inputCtrl.dispatchEvent(event);\n  };\n\n  private onClick = () => {\n    this.setFocus();\n  };\n\n  /* Multi event handlers */\n\n  private onDragStart = (ev: MouseEvent) => {\n    const 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    const ele = ev.target as HTMLSpanElement;\n    const 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    const to = this.value.indexOf(spanVal);\n    const from = this.value.indexOf(this.dragVal);\n    const tmpArr = this.value as Array<string>;\n    const tmpVal = tmpArr[to];\n\n    tmpArr[to] = tmpArr[from];\n    tmpArr[from] = tmpVal;\n    this.value = [...tmpArr];\n  };\n\n  private onMultiInput = (ev) => {\n    this.inputSearchVal = ev.target.value.trim();\n    this.nanoSearchChange.emit({ value: ev.target.value.trim() });\n  };\n\n  /* Stencil Component lifecycle hooks */\n\n  connectedCallback() {\n    this.debounceChanged();\n\n    if (!Build.isBrowser) return;\n\n    this.el.dispatchEvent(\n      new CustomEvent('nanoDidLoad', {\n        detail: this.el,\n      })\n    );\n  }\n\n  disconnectedCallback() {\n    document.dispatchEvent(\n      new CustomEvent('nanoDidUnload', {\n        detail: this.el,\n      })\n    );\n\n    if (!Build.isBrowser) return;\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n    this.customValidate();\n    this.setDataListOpts();\n    requestAnimationFrame(() => (this.onInit = false));\n  }\n\n  componentWillLoad() {\n    this.processSlottedContent();\n  }\n\n  render() {\n    const labelId = this.selectId + '-lbl';\n    const moreId =\n      this.showInlineError || this.hasHelperSlot\n        ? this.selectId + '-moreId'\n        : '';\n    const helperEndId = this.hasHelperEndSlot ? this.selectId + '-helper' : '';\n\n    this.rtl = (this.el.ownerDocument as Document).dir === 'rtl';\n    this.valueItems = [];\n\n    const compWrapOptions = (({\n      el,\n      floatLabel,\n      label,\n      errorMessage,\n      showInlineError,\n      hasHelperSlot,\n      hasHelperEndSlot,\n      hasLabelSlot,\n      hideLabel,\n      placeholder,\n      rtl,\n    }) => ({\n      el,\n      floatLabel,\n      label,\n      errorMessage,\n      showInlineError,\n      hasHelperSlot,\n      hasHelperEndSlot,\n      hasLabelSlot,\n      hideLabel,\n      placeholder,\n      rtl,\n    }))(this);\n    const wrapOptions = {\n      ...compWrapOptions,\n      labelId,\n      moreId,\n      helperEndId,\n      hasValue: !!this.value.length || !!this.inputSearchVal.length,\n      controlId: this.selectId,\n    };\n\n    const controlOptions = (({ readonly, disabled }) => ({\n      readonly,\n      disabled,\n      clearControl: this.clearSelect,\n    }))(this);\n\n    return (\n      <Host\n        type={this.multiple ? 'select-multiple' : 'select-one'}\n        aria-disabled={this.disabled ? 'true' : null}\n        class={{\n          ...createColorClasses(this.color),\n          'has-value': !!this.value.length || !!this.inputSearchVal.length,\n          'has-focus': this.hasFocus,\n          'is-invalid': this.invalid,\n          'has-label': this.label !== null && !this.floatLabel,\n          'has-float-label': this.label !== null && this.floatLabel,\n          rtl: this.rtl,\n          'has-multiple': this.multiple,\n          'has-clr-btn': this.clearSelect,\n          masked: this.mask,\n        }}\n      >\n        <FormControlWrap {...wrapOptions}>\n          <FormControl\n            {...controlOptions}\n            onClearText={this.clearSelectValue}\n            control={this.el}\n            ref={(el) => (this.selectWrap = el)}\n            endValueSlot={\n              <slot name=\"down-arrow\">\n                <nano-icon slot=\"value-end\" name=\"light/chevron-down\" />\n              </slot>\n            }\n          >\n            {this.multiple && (\n              <div class=\"select__multi-wrap select\">\n                {this.multipleValues(labelId, moreId, helperEndId)}\n              </div>\n            )}\n            {!this.multiple && [\n              this.mask && (\n                <div class=\"select__mask\">\n                  {this.getLabel(this.value as string)}\n                </div>\n              ),\n              <input\n                id={this.selectId}\n                class=\"select__native-input\"\n                ref={(input) => (this.inputCtrl = input)}\n                aria-labelledby={labelId + ' ' + moreId + ' ' + helperEndId}\n                disabled={this.disabled}\n                form={this.form}\n                placeholder={this.placeholder}\n                readOnly={true}\n                required={this.required}\n                value={this.getLabel(this.value as string)}\n                onFocus={this.onFocus}\n              />,\n            ]}\n          </FormControl>\n        </FormControlWrap>\n        {!this.readonly && !this.disabled && (\n          <nano-datalist\n            onNanoOptionsUpdated={this.setOptions}\n            ref={(el) => (this.datalist = el)}\n            selected={this.valArray}\n            type={this.multiple ? 'selctMulti' : 'select'}\n            onNanoSelect={this.setValue}\n            onNanoDeselect={(e) => {\n              e.preventDefault();\n              this.removeValue(e.detail.value);\n            }}\n            options={this._options.length ? this._options : undefined}\n          >\n            {this.allowCustomValues &&\n              this.multiple &&\n              !!this.inputSearchVal && (\n                <nano-option\n                  slot=\"list-top\"\n                  value={this.inputSearchVal}\n                  selected={false}\n                  label={this.inputSearchVal}\n                  onNanoSelect={() => this.inputCtrl.focus()}\n                >\n                  <span slot=\"check-icon\"></span>\n                  Add '{this.inputSearchVal}'\n                </nano-option>\n              )}\n            <slot />\n          </nano-datalist>\n        )}\n\n        <select\n          id={this.selectId + '-hidden'}\n          class=\"select__native-ctrl\"\n          ref={(select) => (this.nativeSelect = select)}\n          aria-labelledby={labelId + ' ' + moreId + ' ' + helperEndId}\n          disabled={this.disabled}\n          form={this.form}\n          multiple={this.multiple}\n          name={this.name}\n          required={this.required}\n          onInvalid={this.handleInvalid}\n        >\n          {this.allowCustomValues &&\n            this.valArray.map((val) => {\n              return (\n                <option value={val} selected={true}>\n                  {val}\n                </option>\n              );\n            })}\n          {!this.allowCustomValues &&\n            this.options.map((opt: OptionInterface) => {\n              return (\n                <option\n                  value={opt.value}\n                  selected={this.valArray.includes(opt.value)}\n                  disabled={opt.disabled}\n                  label={opt.label}\n                >\n                  {this.valArray.includes(opt.value)}\n                </option>\n              );\n            })}\n        </select>\n      </Host>\n    );\n  }\n\n  private multipleValues(\n    labelId: string,\n    moreId: string,\n    helperEndId: string\n  ): VNode | (VNode | VNode[])[] {\n    const input: VNode = (\n      <input\n        class=\"select__multi-input\"\n        id={this.selectId}\n        ref={(input) => (this.inputCtrl = input)}\n        readOnly={this.readonly}\n        disabled={this.disabled}\n        autoFocus={this.autofocus}\n        autocomplete=\"off\"\n        onKeyDown={this.handleDocumentKeyDown}\n        onInput={this.onMultiInput}\n        value={this.inputSearchVal}\n        onTouchStart={this.onClick}\n        onMouseDown={this.onClick}\n        onFocus={this.onFocus}\n        placeholder={\n          this.placeholder && !this.value.length ? this.placeholder : ''\n        }\n        aria-labelledby={labelId + ' ' + moreId + ' ' + helperEndId}\n      />\n    );\n    if (!this.value.length) return input;\n\n    return (this.value as Array<string>).map((val, i) => {\n      let toReturn: VNode | VNode[] = (\n        <span\n          onDragStart={this.onDragStart}\n          onDragLeave={this.onDragLeave}\n          onDragEnd={this.onDragEnd}\n          onDragOver={(e) => e.preventDefault()}\n          draggable\n          data-value={val}\n          ref={(span) => this.valueItems.push(span)}\n          class=\"select__multi-value\"\n        >\n          <span>{this.getLabel(val)}</span>\n          <button\n            class=\"select__multi-value-remove\"\n            type=\"button\"\n            tabindex=\"-1\"\n            onTouchEnd={() => {\n              this.removeValue(val);\n            }}\n            onMouseUp={() => {\n              this.removeValue(val);\n            }}\n          >\n            <nano-icon name=\"light/times\"></nano-icon>\n          </button>\n        </span>\n      );\n      if (i === 0 && this.currInsertIndex < 0)\n        toReturn = [input, toReturn as VNode];\n      else if (i === this.currInsertIndex)\n        toReturn = [toReturn as VNode, input];\n      return toReturn;\n    });\n  }\n}\n"],"mappings":";;;gWAeaA,EAAoB,M,oFAa/BC,S,MACE,QACIC,KAAKC,eACLC,EAAA,KAAGC,KAAMH,KAAKI,eAAgBC,MAAM,gBAClCH,EAAA,OAAKG,MAAM,QACTH,EAAA,OAAKG,MAAM,oBACTH,EAAA,OACEG,MAAM,SACNC,KAAKC,EAAAP,KAAKC,iBAAa,MAAAM,SAAA,SAAAA,EAAEC,iBACzBC,IAAI,cACJC,OAAQ,GACRC,MAAO,KAERX,KAAKC,cAAcW,kBAClBV,EAAA,OACEG,MAAM,aACNC,IAAKO,EAAa,sCAClBJ,IAAI,mBAKVP,EAAA,OAAKG,MAAM,gBACTH,EAAA,QAAMG,MAAM,QAAQL,KAAKC,cAAca,MAEvCZ,EAAA,QAAMG,MAAM,OACTL,KAAKC,cAAcc,UAAS,OAAMf,KAAKC,cAAce,WAK5Dd,EAAA,OAAKG,MAAM,SACTH,EAAA,OAAKG,MAAM,iBACTH,EAAA,aACEe,KAAK,WACLH,KAAK,sBAAqB,aACf,sB,GChE3B,MAAMI,EAAa,k+T,MCyCNC,EAAO,M,2PACVnB,KAAAoB,iBAA4B,MAI5BpB,KAAAqB,UAAqB,MAgKrBrB,KAAAsB,eAAiBC,UACvB,IAAKvB,KAAKoB,mBAAqBpB,KAAKwB,QAAS,OAC7CxB,KAAKyB,KAAO,YACNC,EAAkB1B,KAAK2B,aAAc,OAAQ,OACnD3B,KAAK4B,YAAYC,KAAK,CAAEC,cAAe9B,KAAK2B,eAC5C3B,KAAKwB,QAAU,KAAK,EAGdxB,KAAA+B,cAAgBR,UACtB,GAAIS,OAAOC,WAAajC,KAAKkC,qBAAsB,CACjDlC,KAAKmC,kBAAkBC,KAAKpC,MAC5B,M,CAGF,IAAKA,KAAKoB,kBAAoBpB,KAAKwB,QAAS,OAC5CxB,KAAKyB,KAAO,WACNC,EAAkB1B,KAAK2B,aAAc,OAAQ,MACnD3B,KAAKqC,YAAYR,KAAK,CAAEC,cAAe9B,KAAK2B,eAC5C3B,KAAKwB,QAAU,IAAI,EAGbxB,KAAAsC,gBAAkB,KACxB,IAAKtC,KAAKoB,iBAAkB,OAC5B,GAAIpB,KAAKwB,QAASxB,KAAKsB,sBAClBtB,KAAK+B,eAAe,EAGnB/B,KAAAuC,YAAc,KACpBvC,KAAKwC,SAAW,KAEhB,GAAIxC,KAAKG,OAASH,KAAKqB,WAAarB,KAAKoB,iBACvCpB,KAAK+B,gBACP/B,KAAKyC,UAAUZ,MAAM,EAGf7B,KAAA0C,eAAiB,KACvB,GAAI1C,KAAKqB,UAAW,OAIpBrB,KAAK2C,GAAGC,gBAAgB,YACxB5C,KAAKwC,SAAW,MAChBxC,KAAK6C,SAAShB,MAAM,EAId7B,KAAA8C,gBAAmBC,IACzB,IAAK/C,KAAKgD,aAAc,OACxB,MAAMC,EAAaF,EAAGG,OAAuBC,QAAQ,aACrD,IAAKF,EAAWjD,KAAKoD,IAAIC,OAAO,EAI1BrD,KAAAsD,iBAAmB/B,UACzB,IACGvB,KAAKG,MACNH,KAAKqB,YACJrB,KAAKoB,kBACLpB,KAAKuD,eAAiBvD,KAAKuD,aAAaC,UAAUC,SAAS,SAE5D,OAIF,IAAIC,EAAa,EACjB,GAAIC,EAAY3D,KAAK2C,GAAI,iCAAiCiB,OACxDF,EAAa,IAEfG,aAAa7D,KAAK8D,UAClB9D,KAAK+D,UAAY,KACjB/D,KAAKqB,UAAY,KACjBrB,KAAKgE,SAAWhC,OAAOiC,YACrB1C,eAAkBvB,KAAK+B,iBACvB2B,GAEF1D,KAAKqB,UAAY,KAAK,EAIhBrB,KAAAkE,iBAAmB,KACzB,IAAKlE,KAAKG,KAAM,OAChB0D,aAAa7D,KAAKgE,UAClBhE,KAAK+D,UAAY,KACjB/D,KAAKqB,UAAY,KAGjBrB,KAAK8D,SAAW9B,OAAOiC,YACrB1C,eAAkBvB,KAAKsB,kBACvB,KAEFtB,KAAKqB,UAAY,KAAK,EAGhBrB,KAAAmE,YAAc,KACpBnE,KAAK+D,UAAY,MACjB,GAAI/D,KAAKoB,iBAAkBpB,KAAKsC,iBAAiB,E,kBA1PlB,M,aACL,M,mBACM,M,oBACC,M,cACN,M,cACA,M,UAMW,K,YAKkB,Q,cAK9B,M,UAK4B,M,cAKX,M,0BAKN,E,uBAKX,O,iBAKG,K,kBAKC,K,CAqChCf,iBACE,IAAKvB,KAAKoD,IAAK,OACfpD,KAAKoD,IAAIgB,O,CAOXC,aACErE,KAAKyB,KAAOzB,KAAK+B,gBAAkB/B,KAAKsB,gB,CAO1CgD,gBACE,IAAKtE,KAAKoB,iBAAkB,OAE5B,IAAKpB,KAAKwB,QAAS,CAGjByC,YAAW,KACT,IACGjE,KAAK+D,aACJQ,SAASC,eAAiBD,SAASC,gBAAkBD,SAASE,MAEhEzE,KAAKoD,IAAIgB,MAAM,CAAEM,cAAe,OAClC1E,KAAK2C,GAAGgC,SAAW,KACnB3E,KAAK4E,UAAU/C,KAAK,CAAEC,cAAe9B,KAAK2B,cAAe,GACxD,G,KACE,CAGL,IAAK3B,KAAK+D,UAAW,CACnB,MAAMc,EAAU,IAAK7C,OAAe8C,sBACjCC,IACC,GAAIA,EAAK,GAAGC,mBAAmBC,IAAM,EAAG,CACtCjF,KAAK2B,aAAauD,eAAe,CAC/BC,SAAU,U,CAGdN,EAAQO,YAAY,GAEtB,CAAEC,UAAW,IAEfR,EAAQS,QAAQtF,KAAK2B,cACrB3B,KAAK2B,aAAayC,MAAM,CAAEM,cAAe,OAEzC,MAAMa,EAAiBC,EAAoBxF,KAAK2B,aAAc,MAC9D,GAAI4D,EAAe,GAAIA,EAAe,GAAGnB,QAEzCpE,KAAK2C,GAAGgC,UAAY,EACpB3E,KAAKyF,SAAS5D,KAAK,CAAEC,cAAe9B,KAAK2B,c,GAO/C+D,YAAYC,GACV,IAAK3F,KAAKwB,UAAYxB,KAAKoB,iBAAkB,OAC7C,IAAKuE,EAAEC,eAAeC,MAAMlD,GAAOA,IAAO3C,KAAK2B,eAC7C3B,KAAKsC,iB,CAqGTwD,oBACE,MAAMC,EAAe/F,KAAK2C,GAAGqD,cAAc,sBAC3ChG,KAAKoB,mBAAqB2E,EAE1B,MAAME,EAAOC,EACXlG,KAAK2C,GACL,aACA,GACF3C,KAAKgD,eAAiBiD,EAEtB,GAAIA,EAAM,CACRjG,KAAKG,KAAQ8F,EAA2B9F,KACnC8F,EAA2B9F,KAC5B,KACJH,KAAKoD,IAAM6C,EACX,GAAIjG,KAAKoB,iBACPpB,KAAKoD,IAAI+C,iBAAiB,QAASnG,KAAKsC,iBAE1CtC,KAAKoD,IAAI+C,iBAAiB,QAASnG,KAAKuC,aACxCvC,KAAKoD,IAAI+C,iBAAiB,OAAQnG,KAAK0C,e,EAI3C0D,oBACEpG,KAAKqG,cAAgB,MACrBrG,KAAKsG,eAAiB,MACtBtG,KAAKuD,aAAevD,KAAK2C,GAAGQ,QAAQ,mBAEpCnD,KAAKsG,iBAAmBtG,KAAK2C,GAAGQ,QAAQ,oBACxCnD,KAAKuG,WAAavG,KAAK2C,GAAGQ,QAAQ,aAClCnD,KAAKqG,cACHrG,KAAK2C,GAAG6D,gBAAkBxG,KAAKuD,gBAC7BvD,KAAK2C,GAAGQ,QAAQ,c,CAGtBpD,SACE,OACEG,EAACuG,EAAI,CACHpG,MAAO,CACL,gBAAiBL,KAAKoB,iBACtB,iBAAkBpB,KAAKyB,KACvBiF,SAAU1G,KAAK0G,SACf,YAAa1G,KAAKwC,SAClBmE,SAAU3G,KAAK2G,SACf,kBAAmB3G,KAAKqG,cACxB,mBAAoBrG,KAAKsG,eACzB,YAAatG,KAAKuG,UAEpBK,OAAQ5G,KAAK0C,eACbmE,IAAM7G,KAAK2C,GAAGmE,cAA2BD,MAAQ,MAAQ,MAAQ,KACjEE,aAAc/G,KAAKsD,iBACnB0D,aAAchH,KAAKkE,iBACnB+C,QAASjH,KAAK8C,gBACdoE,KAAK,YAELhH,EAAA,OACEG,MAAO,CACL,WAAY,KACZ,iBAAkBL,KAAKyB,KACvBiF,SAAU1G,KAAK0G,UAEjBS,KAAK,gBAEJnH,KAAKG,OAASH,KAAKgD,eAAiBhD,KAAK2G,UACxCzG,EAAA,KACEiH,KAAK,oBACLjE,OAAQlD,KAAKkD,OACbkE,IAAMC,GAAOrH,KAAKoD,IAAMiE,EACxBlH,KAAMH,KAAKG,KACXmH,QAAStH,KAAKuC,YACdlC,MAAO,CACLkH,aAAcvH,KAAKuH,eAGrBrH,EAAA,QAAMY,KAAK,eACXZ,EAAA,QAAMG,MAAM,QACVH,EAAA,cAEFA,EAAA,QAAMY,KAAK,gBAGXd,KAAKgD,eAAiBhD,KAAKG,MAASH,KAAK2G,WAC3CzG,EAAA,UACEiH,KAAK,oBACLC,IAAMhE,GAASpD,KAAKoD,IAAMA,EAC1B6D,QAASjH,KAAKmE,YACdmD,QAAStH,KAAKuC,YACdoE,SAAU3G,KAAK2G,SACftG,MAAO,CACLkH,aAAcvH,KAAKuH,eAGrBrH,EAAA,QAAMY,KAAK,eACXZ,EAAA,QAAMG,MAAM,QACVH,EAAA,cAEFA,EAAA,QAAMY,KAAK,cAGdd,KAAKgD,eAAiBhD,KAAK2G,UAC1BzG,EAAA,OAAKG,MAAM,QACTH,EAAA,QAAMY,KAAK,eACXZ,EAAA,aACAA,EAAA,QAAMY,KAAK,cAGdd,KAAKoB,mBAAqBpB,KAAK2G,UAC9BzG,EAAA,OACEG,MAAM,iBACN+G,IAAMI,GAASxH,KAAK2B,aAAe6F,EACnC7C,UAAW,GAEXzE,EAAA,OAAKG,MAAM,yBAAyB8G,KAAK,qBACvCjH,EAAA,QAAMY,KAAK,eAEbZ,EAAA,OACEG,MAAM,sBACN4G,QAASjH,KAAKsB,eACd6F,KAAK,qB,iHCtarB,MAAMM,EAAY,4qqBCgClB,IAAIC,EAAY,E,MAuBHC,EAAM,MAULC,gBACV,OAAO5H,KAAK6H,U,CAEFD,cAAUE,GACpB,GAAIA,IAAU9H,KAAK6H,WAAY,OAC/B7H,KAAK6H,WAAaC,EAClB9H,KAAK+H,iB,CAOKC,iBACV,OAAOhI,KAAKiI,W,CAEFD,eAAWE,GACrB,GAAIlI,KAAKiI,cAAgBC,EAAK,OAC9BlI,KAAKiI,YAAcC,EACnBlI,KAAK+H,iB,CAIKI,eACV,OAAOnI,KAAKoI,S,CAEFD,aAASD,GACnB,GAAIlI,KAAKoI,YAAcF,EAAK,OAC5BlI,KAAKoI,UAAYF,EACjBlI,KAAK+H,iB,CAGPM,YAAAC,G,6SAxCQtI,KAAAuI,WAAqC,GAGrCvI,KAAAwI,SAAW,eAAed,MAC1B1H,KAAAyI,IAAe,MACfzI,KAAA0I,OAAkB,KAClB1I,KAAA2I,YAAsB,GAgLtB3I,KAAA4I,OAAiC5I,KAAK6I,SAAW,GAAK,GAyBtD7I,KAAA8I,SAA8B,GAwL9B9I,KAAA+I,eAAiB,KACvB,IACG/I,KAAKgJ,gBACJhJ,KAAK2I,cACN3I,KAAKgJ,aAAa,qBAEnB,OAEFhJ,KAAKgJ,aAAaC,kBAAkB,IAEpC,GAAIjJ,KAAKkJ,WAAalJ,KAAKmJ,SAASvF,OAAQ,CAC1C5D,KAAKgJ,aAAaC,kBAAkB,8BACpC,OAAO,I,CAET,GACEjJ,KAAKmJ,SAASvF,SACb5D,KAAKoJ,oBACLpJ,KAAKqJ,gBACN,CACArJ,KAAKgJ,aAAaC,kBAChB,0CAEF,OAAO,I,CAET,GAAIjJ,KAAKsJ,KAAOtJ,KAAKmJ,SAASvF,OAAS5D,KAAKsJ,IAAK,CAC/CtJ,KAAKgJ,aAAaC,kBAChB,cAAcjJ,KAAKsJ,2BAErB,OAAO,I,CAET,GAAItJ,KAAKuJ,KAAOvJ,KAAKmJ,SAASvF,OAAS5D,KAAKuJ,IAAK,CAC/CvJ,KAAKgJ,aAAaC,kBAChB,gCAAgCjJ,KAAKuJ,eAEvC,OAAO,I,CAET,OAAO,KAAK,EAGNvJ,KAAAwJ,qBAAwBzG,IAC9B,GAAI/C,KAAKyJ,aAAe,kBAAmBzJ,KAAKyJ,WAAa,QAE7DzJ,KAAK0J,SAAW,MAChB1J,KAAK2J,aAAe,MACpB3J,KAAK4J,aAAe,GAEpB,IAAK5J,KAAKgJ,aAAaa,SAASC,MAAO,CACrC9J,KAAK4J,aAAe5J,KAAKgJ,aAAae,kBACtC/J,KAAK0J,SAAW,KAChB1J,KAAK2J,aAAe,I,CAEtB3J,KAAKgK,aAAanI,KAAK,CACrBoI,SAAUjK,KAAKkK,QACfN,aAAc5J,KAAK4J,aACnBO,cAAepH,GACf,EAGI/C,KAAAoK,cAAiBrH,IACvB/C,KAAK0J,SAAW,KAEhB,GAAI1J,KAAKyJ,aAAe,SAAU,CAChCzJ,KAAK0J,SAAW1J,KAAK2J,aAAe3J,KAAK+I,gB,CAE3C,GAAI/I,KAAKqK,gBAAiBtH,EAAGuH,iBAE7BC,uBAAsB,IAAMvK,KAAKwJ,qBAAqBzG,IAAI,EAGpD/C,KAAAwK,SAAY7E,IAClBA,EAAE2E,iBAEF,IAAKtK,KAAK6I,SAAU,CAClB7I,KAAKyK,MAAQ9E,EAAE+E,OAAOD,MACtB,M,CAEF,GAAIzK,KAAKyK,OAASzK,KAAKyK,MAAM7G,QAAU5D,KAAKyK,MAAME,SAAShF,EAAE+E,OAAOD,OAClE,OACF,GAAIzK,KAAKsJ,KAAOtJ,KAAKyK,MAAM7G,SAAW5D,KAAKsJ,IAAK,OAEhDtJ,KAAK4K,kBACL5K,KAAKyK,MAAQ,IACRzK,KAAKyK,MAAMI,MAAM,EAAG7K,KAAK4K,iBAC5BjF,EAAE+E,OAAOD,SACNzK,KAAKyK,MAAMI,MAAM7K,KAAK4K,kBAE3B5K,KAAK8K,eAAiB,EAAE,EAIlB9K,KAAA+K,YAAeC,IACrB,IAAKhL,KAAK6I,WAAa7I,KAAKyK,MAAM7G,OAAQ,OAE1C,IAAKoH,EAAQA,EAAShL,KAAKyK,MAAMzK,KAAKyK,MAAM7G,OAAS,GACrD5D,KAAKyK,MAASzK,KAAKyK,MAAwBQ,QAAQC,GAAQA,IAAQF,IAEnEhL,KAAK4K,kBAEL5K,KAAKmL,UAAU,EA0DTnL,KAAAoL,WAAa,KACnB,IACGpL,KAAKmI,WACLnI,KAAKmI,SAASkD,gBACdrL,KAAKmI,SAASkD,cAAczH,OAE7B,OAEF5D,KAAKsL,UAAYtL,KAAKmI,SAASkD,cAAcE,KAAKC,IAChD,MAAMf,MAAEA,EAAK/D,SAAEA,EAAQ+E,MAAEA,EAAKC,WAAEA,GAAeF,EAC/C,MAAO,CAAEf,QAAO/D,WAAU+E,QAAOC,aAAY,IAE/C1L,KAAK+I,gBAAgB,EAGf/I,KAAA2L,sBAAyB5I,IAC/B,IAAK/C,KAAK6I,WAAa7I,KAAKwC,SAAU,OAEtC,IAAKxC,KAAK8K,eAAgB,CACxB,IAAIc,EAEJ,OAAQ7I,EAAG8I,KACT,IAAK,YACH,GAAI7L,KAAK4H,UAAUkE,uBACjBF,EAAK5L,KAAK4H,UAAUkE,4BACjB,MAEL9L,KAAK+K,YAAYa,EAAGG,QAAQtB,OAAS,MACrC,MAEF,IAAK,SACH,GAAIzK,KAAK4H,UAAUoE,mBACjBJ,EAAK5L,KAAK4H,UAAUoE,wBACjB,MAELhM,KAAK+K,YAAYa,EAAGG,QAAQtB,OAAS,MACrC,MAEF,IAAK,YACL,IAAK,aACH,IAAKzK,KAAKyK,MAAM7G,OAAQ,MAExB,GAAIb,EAAG8I,MAAQ,aAAe7L,KAAK4H,UAAUqE,gBAC3CjM,KAAK4K,kBACP,GAAI7H,EAAG8I,MAAQ,cAAgB7L,KAAK4H,UAAUsE,YAC5ClM,KAAK4K,kBAEP3G,YAAW,KACTjE,KAAK4H,UAAUxD,OAAO,GACrB,IACHrB,EAAGuH,iBACH,M,GAKAtK,KAAA4G,OAAS,KACf5G,KAAKwC,SAAW,MAEhB+H,uBAAsB,KACpB,GAAIvK,KAAKyJ,aAAe,UAAYzJ,KAAKwC,SACvCxC,KAAKwJ,sBAAsB,IAE/BxJ,KAAK6C,SAAShB,OAEd,IAAK7B,KAAKoJ,mBAAqBpJ,KAAK6I,SAAU,CAC5C7I,KAAK8K,eAAiB,GACtB,MAAMqB,EAAQ,IAAInK,OAAOoK,MAAM,UAC/BpM,KAAK4H,UAAUyE,cAAcF,E,GAIzBnM,KAAAsH,QAAU,KAChBtH,KAAKwC,SAAW,KAChBxC,KAAKyC,UAAUZ,MAAM,EAGf7B,KAAAsM,iBAAoBvJ,IAC1B,GAAI/C,KAAKuM,cAAgBvM,KAAKwM,WAAaxM,KAAK2G,UAAY5D,EAAI,CAC9DA,EAAGuH,iBACHvH,EAAG0J,iB,CAGL,GAAIzM,KAAK6I,SAAU,CACjB7I,KAAKyK,MAAQ,GACbzK,KAAK4K,iBAAmB,C,MACnB5K,KAAKyK,MAAQ,GAEpBzK,KAAK4H,UAAU6C,MAAQ,GACvB,MAAM0B,EAAQ,IAAInK,OAAOoK,MAAM,UAC/BpM,KAAK4H,UAAUyE,cAAcF,EAAM,EAG7BnM,KAAAiH,QAAU,KAChBjH,KAAKmL,UAAU,EAKTnL,KAAA0M,YAAe3J,IACrB,MAAMmF,EAAMnF,EAAGG,OACflD,KAAK2M,QAAUzE,EAAI6D,QAAQtB,KAAK,EAG1BzK,KAAA4M,UAAa7J,IACnB/C,KAAK2M,QAAU,KACf5J,EAAGuH,gBAAgB,EAGbtK,KAAA6M,YAAe9J,IACrB,MAAMmF,EAAMnF,EAAGG,OACf,MAAM4J,EACJ5E,EAAI6D,SAAW7D,EAAI6D,QAAQtB,MAAQvC,EAAI6D,QAAQtB,MAAQ,KAEzD,IACGqC,GACD9M,KAAK2M,UAAYG,IAChB9M,KAAKyK,MAAME,SAAS3K,KAAK2M,SAC1B,CACA5J,EAAGuH,iBACH,M,CAGF,MAAMyC,EAAK/M,KAAKyK,MAAMuC,QAAQF,GAC9B,MAAMG,EAAOjN,KAAKyK,MAAMuC,QAAQhN,KAAK2M,SACrC,MAAMO,EAASlN,KAAKyK,MACpB,MAAM0C,EAASD,EAAOH,GAEtBG,EAAOH,GAAMG,EAAOD,GACpBC,EAAOD,GAAQE,EACfnN,KAAKyK,MAAQ,IAAIyC,EAAO,EAGlBlN,KAAAoN,aAAgBrK,IACtB/C,KAAK8K,eAAiB/H,EAAGG,OAAOuH,MAAM4C,OACtCrN,KAAKsN,iBAAiBzL,KAAK,CAAE4I,MAAO1H,EAAGG,OAAOuH,MAAM4C,QAAS,E,sBA9nB3B,E,kBACZ,M,kBACQ,G,cACZ,M,kBACa,M,mBACC,M,sBACN,M,oBACM,G,cAYd,M,oCAoBA,M,cAKgB,M,gBAMlC,kB,qBAKyC,K,oCAUb,M,gBAKA,M,cAKD,M,UAKNrN,KAAKwI,SAAW,Q,yCAUH,M,cAKjB,M,qGAyBkB,M,eA4CG,G,iBAKlB,M,UAMP,M,cAKI,E,oBAwC2C,GA/N5DxI,KAAKwJ,qBAAuB+D,EAASvN,KAAKwJ,qBAAsB,G,CAmB9DU,cACF,OAAOlK,KAAK0J,Q,CAQV8D,sBACF,IAAKxN,KAAKgJ,aAAc,MAAO,GAC/B,OAAOhJ,KAAKgJ,aAAae,iB,CAmGvBU,YACF,OAAOzK,KAAK4I,M,CAEV6B,UAAMS,GACR,UAAWA,IAAQ,SAAU,CAC3B,GAAIlL,KAAK6I,SAAU7I,KAAK4I,OAASsC,EAAIuC,MAAM,UACtCzN,KAAK4I,OAASsC,C,MACd,GAAIwC,MAAMC,QAAQzC,GAAM,CAC7B,GAAIlL,KAAK6I,SAAU7I,KAAK4I,OAASsC,OAC5BlL,KAAK4I,OAASsC,EAAI,E,EAYvB0C,cACF,GAAI5N,KAAK8I,SAASlF,OAAQ,OAAO5D,KAAK8I,SAEtC,IAAK9I,KAAKmI,WAAanI,KAAKmI,SAASkD,cAAe,MAAO,GAE3D,OAAOrL,KAAKsL,UAAUC,KAAKC,IACzB,MAAMf,MAAEA,EAAK/D,SAAEA,EAAQ+E,MAAEA,EAAKC,WAAEA,GAAeF,EAC/C,MAAO,CAAEf,QAAO/D,WAAU+E,QAAOC,aAAY,G,CAG7CkC,YAAQC,GACV7N,KAAK8I,SAAW+E,EAAKtC,KAAKuC,IACxB,UAAWA,IAAQ,SAAU,MAAO,CAAErD,MAAOqD,EAAKrC,MAAOqC,QACpD,OAAOA,CAAG,G,CAuBTC,kBACR/N,KAAKsN,iBAAmBU,EAAchO,KAAKsN,iBAAkBtN,KAAKuN,S,CAQ1DU,iBACR,GAAIjO,KAAK0I,OAAQ,OACjB,GAAI1I,KAAKkK,QAASlK,KAAK2J,aAAe3J,KAAK0J,SAAW,MAEtD1J,KAAK+I,iBACL,GAAI/I,KAAKyJ,aAAe,QAAS,OACjCzJ,KAAKwJ,sB,CAQP0E,eACElO,KAAK+I,iBAEL,GAAI/I,KAAK0I,OAAQ,CACf,GAAI1I,KAAK6I,SAAU7I,KAAK4K,gBAAkB5K,KAAKyK,MAAM7G,OAAS,EAC9D,M,CAEF2G,uBAAsB,KACpBvK,KAAKiO,iBACLjO,KAAKmO,WAAWtM,KAAK,CAAE4I,MAAOzK,KAAKyK,OAAQ,G,CAQ/C1C,kBACE,IAAK/H,KAAKmI,WAAanI,KAAKgI,WAAY,OAExChI,KAAKmI,SAASL,MAAQ9H,KAAK4H,UAE3B,MAAMwG,EAAepO,KAAKmI,SAASkG,gBAAkB,GACrDrO,KAAKmI,SAASkG,eAAcC,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,GACvBH,GACApO,KAAKqO,gBAAc,CACtBG,SAAUxO,KAAKgI,Y,CAoDnBzG,qBAAqBkN,GACnB,OAAO,IAAIC,SAASC,IAClB,GAAIF,EAAe,CACjBzO,KAAK+I,iBACL/I,KAAKwJ,sB,CAEPvF,YAAW,KACT0K,EAAQ,CACN1E,SAAUjK,KAAK0J,SACfE,aAAc5J,KAAKgJ,aAAae,mBAChC,GACD,GAAG,G,CASVxI,iBACE,IAAKvB,KAAK4H,UAAW,OACrB5H,KAAK4H,UAAUxD,QACfH,YAAW,IAAMjE,KAAK4H,UAAUvE,SAAS,G,CAO3CuL,mBACE,OAAOF,QAAQC,QAAQ3O,KAAKgJ,a,CAQ9BzH,gBAAgBsN,GACd,GAAI7O,KAAKgJ,aAAc,CACrBhJ,KAAK2I,YAAckG,EACnB7O,KAAKgJ,aAAaC,kBAAkB4F,GACpC7O,KAAKwJ,sB,EAMGL,eACV,cAAcnJ,KAAKyK,QAAU,SACzBzK,KAAKyK,MAAM7G,OACT,CAAC5D,KAAKyK,OACN,GACFzK,KAAKyK,K,CAGHpB,gBACN,OAAOrJ,KAAKmJ,SAAS2F,MAAM5D,GACxBlL,KAAK4N,QAA8BkB,MAAMhB,GAAQA,EAAIrD,QAAUS,K,CAyG5D6D,qBACN,IAAK/M,OAAO,oBAAqB,OAEjC,MAAMgN,EAAMhP,KAAKgP,GAAK,IAAIC,kBAAiB,IACzCjP,KAAKkP,0BAEPF,EAAG1J,QAAQtF,KAAK2C,GAAI,CAAEwM,UAAW,KAAMC,QAAS,M,CAG1CF,wBAENlP,KAAKqP,eAAiBrP,KAAK2C,GAAG2M,iBAAiB,kBAAkB1L,OACjE5D,KAAKuP,gBAAkBvP,KAAK2C,GAAGqD,cAAc,mBAC7ChG,KAAKwP,mBAAqBxP,KAAK2C,GAAGqD,cAAc,sB,CAG1CyJ,SAASzE,GACf,MAAMS,EAASzL,KAAK4N,QAA8BkB,MAAMhB,I,MACtD,OAAQA,EAAInH,YAAYpG,EAAAuN,EAAIrD,SAAK,MAAAlK,SAAA,SAAAA,EAAEqD,SAAUkK,EAAIrD,QAAUO,CAAM,IAEnE,OAAOS,GAASA,EAAMA,MAAQA,EAAMA,MAAQT,C,CAM9C0E,QAAQ/J,GACN,MAAMgK,EAAO3P,KAAK2P,KACdpL,SAASyB,cAAc,IAAMhG,KAAK2P,MAClC3P,KAAK2C,GAAGQ,QAAQ,QACpB,IAAKwM,GAAQhK,EAAEzC,SAAWlD,KAAK2C,GAAGQ,QAAQ,QAAS,OAEnDnD,KAAKsM,kB,CAKPsD,WAAWjK,GACT,IAAK3F,KAAKwC,SAAU,OAEpB,MAAMqN,EAAMlK,EACZ,IAAIzC,EAEJqH,uBAAsB,KACpB,GAAIsF,EAAIhE,IAAK,CACX,GAAIgE,EAAIhE,MAAQ,MAAO,OACvB3I,EAAS4M,G,MACJ5M,EAASyC,EAAEzC,OAElB,GAAI6M,EAAe/P,KAAK2C,GAAGqN,QAAQC,cAAe/M,KAAYlD,KAAK2C,GAAI,CACrE3C,KAAK4G,Q,KAiJXR,oBACEpG,KAAK+N,kBAIL/N,KAAK2C,GAAG0J,cACN,IAAI6D,YAAY,cAAe,CAC7BxF,OAAQ1K,KAAK2C,K,CAKnBwN,uBACE5L,SAAS8H,cACP,IAAI6D,YAAY,gBAAiB,CAC/BxF,OAAQ1K,KAAK2C,MAKjB,GAAI3C,KAAKgP,GAAIhP,KAAKgP,GAAG5J,Y,CAGvBgL,mBACEpQ,KAAK+O,qBACL/O,KAAK+I,iBACL/I,KAAK+H,kBACLwC,uBAAsB,IAAOvK,KAAK0I,OAAS,O,CAG7C5C,oBACE9F,KAAKkP,uB,CAGPnP,SACE,MAAMsQ,EAAUrQ,KAAKwI,SAAW,OAChC,MAAM8H,EACJtQ,KAAKqK,iBAAmBrK,KAAKuP,cACzBvP,KAAKwI,SAAW,UAChB,GACN,MAAM+H,EAAcvQ,KAAKwP,iBAAmBxP,KAAKwI,SAAW,UAAY,GAExExI,KAAKyI,IAAOzI,KAAK2C,GAAGmE,cAA2BD,MAAQ,MACvD7G,KAAKuI,WAAa,GAElB,MAAMiI,EAAkB,GACtB7N,KACA8N,aACAhF,QACA7B,eACAS,kBACAkF,gBACAC,mBACAH,eACAqB,YACAC,cACAlI,UACD,CACC9F,KACA8N,aACAhF,QACA7B,eACAS,kBACAkF,gBACAC,mBACAH,eACAqB,YACAC,cACAlI,QAvBsB,CAwBpBzI,MACJ,MAAM4Q,EAAWtC,OAAAC,OAAAD,OAAAC,OAAA,GACZiC,GAAe,CAClBH,UACAC,SACAC,cACAM,WAAY7Q,KAAKyK,MAAM7G,UAAY5D,KAAK8K,eAAelH,OACvDkN,UAAW9Q,KAAKwI,WAGlB,MAAMuI,EAAiB,GAAIvE,WAAU7F,eAAU,CAC7C6F,WACA7F,WACAqK,aAAchR,KAAKuM,cAHE,CAInBvM,MAEJ,OACEE,EAACuG,EAAI,CACHwK,KAAMjR,KAAK6I,SAAW,kBAAoB,aAAY,gBACvC7I,KAAK2G,SAAW,OAAS,KACxCtG,MAAKiO,OAAAC,OAAAD,OAAAC,OAAA,GACA2C,EAAmBlR,KAAKmR,QAAM,CACjC,cAAenR,KAAKyK,MAAM7G,UAAY5D,KAAK8K,eAAelH,OAC1D,YAAa5D,KAAKwC,SAClB,aAAcxC,KAAKkK,QACnB,YAAalK,KAAKyL,QAAU,OAASzL,KAAKyQ,WAC1C,kBAAmBzQ,KAAKyL,QAAU,MAAQzL,KAAKyQ,WAC/ChI,IAAKzI,KAAKyI,IACV,eAAgBzI,KAAK6I,SACrB,cAAe7I,KAAKuM,YACpB6E,OAAQpR,KAAKqR,QAGfnR,EAACoR,EAAehD,OAAAC,OAAA,GAAKqC,GACnB1Q,EAACqR,EAAWjD,OAAAC,OAAA,GACNwC,EAAc,CAClBS,YAAaxR,KAAKsM,iBAClBmF,QAASzR,KAAK2C,GACdyE,IAAMzE,GAAQ3C,KAAKgI,WAAarF,EAChC+O,aACExR,EAAA,QAAMY,KAAK,cACTZ,EAAA,aAAWe,KAAK,YAAYH,KAAK,0BAIpCd,KAAK6I,UACJ3I,EAAA,OAAKG,MAAM,6BACRL,KAAK2R,eAAetB,EAASC,EAAQC,KAGxCvQ,KAAK6I,UAAY,CACjB7I,KAAKqR,MACHnR,EAAA,OAAKG,MAAM,gBACRL,KAAKyP,SAASzP,KAAKyK,QAGxBvK,EAAA,SACE0R,GAAI5R,KAAKwI,SACTnI,MAAM,uBACN+G,IAAMU,GAAW9H,KAAK4H,UAAYE,EAAM,kBACvBuI,EAAU,IAAMC,EAAS,IAAMC,EAChD5J,SAAU3G,KAAK2G,SACfgJ,KAAM3P,KAAK2P,KACXgB,YAAa3Q,KAAK2Q,YAClBkB,SAAU,KACV3I,SAAUlJ,KAAKkJ,SACfuB,MAAOzK,KAAKyP,SAASzP,KAAKyK,OAC1BnD,QAAStH,KAAKsH,cAKpBtH,KAAKwM,WAAaxM,KAAK2G,UACvBzG,EAAA,iBACE4R,qBAAsB9R,KAAKoL,WAC3BhE,IAAMzE,GAAQ3C,KAAKmI,SAAWxF,EAC9B+D,SAAU1G,KAAKmJ,SACf8H,KAAMjR,KAAK6I,SAAW,aAAe,SACrCkJ,aAAc/R,KAAKwK,SACnBwH,eAAiBrM,IACfA,EAAE2E,iBACFtK,KAAK+K,YAAYpF,EAAE+E,OAAOD,MAAM,EAElCmD,QAAS5N,KAAK8I,SAASlF,OAAS5D,KAAK8I,SAAWmJ,WAE/CjS,KAAKoJ,mBACJpJ,KAAK6I,YACH7I,KAAK8K,gBACL5K,EAAA,eACEe,KAAK,WACLwJ,MAAOzK,KAAK8K,eACZpE,SAAU,MACV+E,MAAOzL,KAAK8K,eACZiH,aAAc,IAAM/R,KAAK4H,UAAUxD,SAEnClE,EAAA,QAAMe,KAAK,eAAoB,QACzBjB,KAAK8K,eAAc,KAG/B5K,EAAA,cAIJA,EAAA,UACE0R,GAAI5R,KAAKwI,SAAW,UACpBnI,MAAM,sBACN+G,IAAM8K,GAAYlS,KAAKgJ,aAAekJ,EAAO,kBAC5B7B,EAAU,IAAMC,EAAS,IAAMC,EAChD5J,SAAU3G,KAAK2G,SACfgJ,KAAM3P,KAAK2P,KACX9G,SAAU7I,KAAK6I,SACf/H,KAAMd,KAAKc,KACXoI,SAAUlJ,KAAKkJ,SACfiJ,UAAWnS,KAAKoK,eAEfpK,KAAKoJ,mBACJpJ,KAAKmJ,SAASoC,KAAKL,GAEfhL,EAAA,UAAQuK,MAAOS,EAAKxE,SAAU,MAC3BwE,MAIPlL,KAAKoJ,mBACLpJ,KAAK4N,QAAQrC,KAAKuC,GAEd5N,EAAA,UACEuK,MAAOqD,EAAIrD,MACX/D,SAAU1G,KAAKmJ,SAASwB,SAASmD,EAAIrD,OACrC9D,SAAUmH,EAAInH,SACd8E,MAAOqC,EAAIrC,OAEVzL,KAAKmJ,SAASwB,SAASmD,EAAIrD,W,CASpCkH,eACNtB,EACAC,EACAC,GAEA,MAAMzI,EACJ5H,EAAA,SACEG,MAAM,sBACNuR,GAAI5R,KAAKwI,SACTpB,IAAMU,GAAW9H,KAAK4H,UAAYE,EAClC+J,SAAU7R,KAAKwM,SACf7F,SAAU3G,KAAK2G,SACfyL,UAAWpS,KAAKqS,UAChBC,aAAa,MACbC,UAAWvS,KAAK2L,sBAChB6G,QAASxS,KAAKoN,aACd3C,MAAOzK,KAAK8K,eACZ2H,aAAczS,KAAKiH,QACnByL,YAAa1S,KAAKiH,QAClBK,QAAStH,KAAKsH,QACdqJ,YACE3Q,KAAK2Q,cAAgB3Q,KAAKyK,MAAM7G,OAAS5D,KAAK2Q,YAAc,GAAE,kBAE/CN,EAAU,IAAMC,EAAS,IAAMC,IAGpD,IAAKvQ,KAAKyK,MAAM7G,OAAQ,OAAOkE,EAE/B,OAAQ9H,KAAKyK,MAAwBc,KAAI,CAACL,EAAKyH,KAC7C,IAAIC,EACF1S,EAAA,QACEwM,YAAa1M,KAAK0M,YAClBG,YAAa7M,KAAK6M,YAClBD,UAAW5M,KAAK4M,UAChBiG,WAAalN,GAAMA,EAAE2E,iBACrBwI,UAAS,kBACG5H,EACZ9D,IAAM2L,GAAS/S,KAAKuI,WAAWyK,KAAKD,GACpC1S,MAAM,uBAENH,EAAA,YAAOF,KAAKyP,SAASvE,IACrBhL,EAAA,UACEG,MAAM,6BACN4Q,KAAK,SACLgC,SAAS,KACTC,WAAY,KACVlT,KAAK+K,YAAYG,EAAI,EAEvBiI,UAAW,KACTnT,KAAK+K,YAAYG,EAAI,GAGvBhL,EAAA,aAAWY,KAAK,kBAItB,GAAI6R,IAAM,GAAK3S,KAAK4K,gBAAkB,EACpCgI,EAAW,CAAC9K,EAAO8K,QAChB,GAAID,IAAM3S,KAAK4K,gBAClBgI,EAAW,CAACA,EAAmB9K,GACjC,OAAO8K,CAAQ,G"}

package/dist/nano-components/p-6975f110.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as n,c as a,h as e,a as r,g as s}from"./p-f6a8467a.js";import{c as t}from"./p-ee045579.js";import{c as i}from"./p-411bb8f1.js";import{a as o}from"./p-9746b0a5.js";const h=(n,a,e,r)=>{let s=n.querySelector("input.aux-input");if(!s){s=n.ownerDocument.createElement("input");s.type="hidden";s.classList.add("aux-input");n.appendChild(s)}s.disabled=r;s.name=a;s.value=e||""};const c='.sc-nano-range-h{box-sizing:border-box}*.sc-nano-range,*.sc-nano-range::before,*.sc-nano-range::after{box-sizing:border-box}[hidden].sc-nano-range{display:none !important}.sc-nano-range-h{--knob-handle-size:(var(--knob-size) * 2);--rgb-inactive:165 165 165;--knob-border-radius:50%;--knob-background:var(--nano-color-primary, #007495);--knob-box-shadow:0 2px 4px 0 rgb(0 0 0 / 30%);--knob-size:30px;--bar-height:8px;--bar-background:#e2e1e0;--bar-background-active:#a5a5a5;--bar-border-radius:4px;--height:42px;--pin-background:var(--nano-color-primary, #007495);--pin-color:var(--nano-color-primary-contrast, #fff);--focus-style:0 0 0 5px var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))}.range-wrap.sc-nano-range{display:flex;position:relative;flex:3;align-items:center;-webkit-user-select:none;user-select:none}.range-wrap.sc-nano-range-s>ion-icon[slot],.range-wrap .sc-nano-range-s>ion-icon[slot]{font-size:1.5em}.range-wrap.sc-nano-range-s>[slot=start],.range-wrap .sc-nano-range-s>[slot=start]{margin-inline:0 14px;margin-block:0;font-size:0.9em}.range-wrap.sc-nano-range-s>[slot=end],.range-wrap .sc-nano-range-s>[slot=end]{margin-inline:14px 0;margin-block:0;font-size:0.9em}.range-slider.sc-nano-range{position:relative;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:grab;touch-action:pan-y}.range-pressed.sc-nano-range-h .range-slider.sc-nano-range{cursor:grabbing}.range-bar.sc-nano-range{border-radius:var(--bar-border-radius);inset-block-start:calc((var(--height) - var(--bar-height)) / 2);inset-inline-start:0;position:absolute;width:100%;height:var(--bar-height);background:var(--bar-background);pointer-events:none}.range-snaps.sc-nano-range-h .range-bar.sc-nano-range{border-radius:var(--bar-border-radius) 0 0 var(--bar-border-radius)}.range-bar-active.sc-nano-range{inset-block-end:0;width:auto;background:var(--bar-background-active)}.range-knob.sc-nano-range{border-radius:var(--knob-border-radius);inset-block-start:calc(50% - var(--knob-size) / 2);inset-inline-start:calc(50% - var(--knob-size) / 2);position:absolute;width:var(--knob-size);height:var(--knob-size);background:var(--knob-background);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none;transform:scale(0.67);transition-duration:120ms;transition-property:transform, background-color, border;transition-timing-function:ease}.sc-nano-range-h:not(.range-has-pin) .range-knob-pressed.sc-nano-range .range-knob.sc-nano-range{transform:scale(1)}.range-knob-handle.sc-nano-range{inset-block-start:calc((var(--height) - var(--knob-handle-size)) / 2);inset-inline-start:0;-webkit-margin-start:calc(0px - var(--knob-handle-size) / 2);margin-inline-start:calc(0px - var(--knob-handle-size) / 2);position:absolute;width:calc(var(--knob-handle-size));height:calc(var(--knob-handle-size));text-align:center}.range-knob-handle.sc-nano-range:active,.range-knob-handle.sc-nano-range:focus{outline:none}.range-knob-handle.sc-nano-range:active .range-knob.sc-nano-range,.range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{box-shadow:var(--knob-box-shadow), var(--focus-style)}.range-tick.sc-nano-range{position:absolute;inset-block-start:calc((var(--height) - var(--bar-height)) / 2);width:var(--bar-height);height:var(--bar-height);background:var(--bar-background-active);z-index:1;pointer-events:none}.range-tick.sc-nano-range:first-of-type{border-radius:var(--bar-border-radius) 0 0 var(--bar-border-radius)}.range-tick.sc-nano-range:last-of-type{border-radius:0 var(--bar-border-radius) var(--bar-border-radius) 0}.range-tick-active.sc-nano-range{background:transparent}.range-pin.sc-nano-range{transform:translate3d(0, 0, 0) scale(0.01);transform-origin:center top;padding:0.66em 0;border-radius:50%;text-align:center;box-sizing:border-box;display:inline-block;position:relative;min-width:2.33em;height:2.33em;transition:transform 120ms ease, background 120ms ease;background:var(--pin-background);color:var(--pin-color);font-size:0.75em}.range-pin.sc-nano-range::before{inset-block-start:0.25em;inset-inline-start:50%;-webkit-margin-start:-1.08em;margin-inline-start:-1.08em;border-radius:50% 50% 50% 0;position:absolute;width:2.16em;height:2.16em;transform:rotate(-45deg);transition:background 120ms ease;background:var(--pin-background);content:"";z-index:-1}.range-knob-pressed.sc-nano-range .range-pin.sc-nano-range{transform:translate3d(0, -50%, 0) scale(1);transform:translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1)}.range-disabled.sc-nano-range-h{pointer-events:none}.range-disabled.sc-nano-range-h .range-bar-active.sc-nano-range,.range-disabled.sc-nano-range-h .range-bar.sc-nano-range,.range-disabled.sc-nano-range-h .range-tick.sc-nano-range{background-color:rgb(var(--rgb-inactive)/50%)}.range-disabled.sc-nano-range-h .range-knob.sc-nano-range{transform:scale(0.55);outline:5px solid #fff;background-color:rgb(var(--rgb-inactive)/50%)}.nano-color.sc-nano-range-h .range-bar-active.sc-nano-range,.nano-color.sc-nano-range-h .range-knob.sc-nano-range,.nano-color.sc-nano-range-h .range-pin.sc-nano-range,.nano-color.sc-nano-range-h .range-pin.sc-nano-range::before,.nano-color.sc-nano-range-h .range-tick.sc-nano-range{background:var(--nano-color-base);color:var(--nano-color-contrast)}.nano-color.sc-nano-range-h .range-bar.sc-nano-range{background:rgb(var(--nano-color-base-rgb)/0.26)}.nano-color.sc-nano-range-h .range-knob-handle.sc-nano-range:active .range-knob.sc-nano-range,.nano-color.sc-nano-range-h .range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{box-shadow:var(--knob-box-shadow), 0 0 0 5px rgb(var(--nano-color-tint-rgb)/0.56)}';const g=class{constructor(e){n(this,e);this.nanoChange=a(this,"nanoChange",7);this.nanoStyle=a(this,"nanoStyle",7);this.nanoFocus=a(this,"nanoFocus",7);this.nanoBlur=a(this,"nanoBlur",7);this.noUpdate=false;this.hasFocus=false;this.clampBounds=n=>t(this.min,n,this.max);this.ensureValueInBounds=n=>{if(this.dualKnobs){return{lower:this.clampBounds(n.lower),upper:this.clampBounds(n.upper)}}else{return this.clampBounds(n)}};this.handleKeyboard=(n,a)=>{let e=this.step;e=e>0?e:1;e=e/(this.max-this.min);if(!a){e*=-1}if(n==="A"){this.ratioA=t(0,this.ratioA+e,1)}else{this.ratioB=t(0,this.ratioB+e,1)}this.updateValue()};this.onBlur=()=>{if(this.hasFocus){this.hasFocus=false;this.nanoBlur.emit();this.emitStyle()}};this.onFocus=()=>{if(!this.hasFocus){this.hasFocus=true;this.nanoFocus.emit();this.emitStyle()}};this.ratioA=0;this.ratioB=0;this.pressedKnob=undefined;this.color=undefined;this.debounce=0;this.name="";this.dualKnobs=false;this.min=0;this.max=100;this.pin=false;this.snaps=false;this.step=1;this.ticks=false;this.disabled=false;this.value=0}debounceChanged(){this.nanoChange=o(this.nanoChange,this.debounce)}minChanged(){if(!this.noUpdate){this.updateRatio()}}maxChanged(){if(!this.noUpdate){this.updateRatio()}}disabledChanged(){if(this.gesture){this.gesture.enable(!this.disabled)}this.emitStyle()}valueChanged(n){if(!this.noUpdate){this.updateRatio()}n=this.ensureValueInBounds(n);this.nanoChange.emit({value:n})}connectedCallback(){this.updateRatio();this.debounceChanged();this.disabledChanged()}disconnectedCallback(){if(this.gesture){this.gesture.destroy();this.gesture=undefined}}async componentDidLoad(){const n=this.rangeSlider;if(n){this.gesture=(await import("./p-bb07c3d0.js")).createGesture({el:n,gestureName:"range",gesturePriority:100,threshold:0,onStart:n=>this.onStart(n),onMove:n=>this.onMove(n),onEnd:n=>this.onEnd(n)});this.gesture.enable(!this.disabled)}}getValue(){const n=this.value||0;if(this.dualKnobs){if(typeof n==="object"){return n}return{lower:0,upper:n}}else{if(typeof n==="object"){return n.upper}return n}}emitStyle(){this.nanoStyle.emit({interactive:true,"interactive-disabled":this.disabled})}onStart(n){const a=this.rect=this.rangeSlider.getBoundingClientRect();const e=n.currentX;let r=t(0,(e-a.left)/a.width,1);if(document.dir==="rtl"){r=1-r}this.pressedKnob=!this.dualKnobs||Math.abs(this.ratioA-r)<Math.abs(this.ratioB-r)?"A":"B";this.setFocus(this.pressedKnob);this.update(e)}onMove(n){this.update(n.currentX)}onEnd(n){this.update(n.currentX);this.pressedKnob=undefined}update(n){const a=this.rect;let e=t(0,(n-a.left)/a.width,1);if(document.dir==="rtl"){e=1-e}if(this.snaps){e=d(b(e,this.min,this.max,this.step),this.min,this.max)}if(this.pressedKnob==="A"){this.ratioA=e}else{this.ratioB=e}this.updateValue()}get valA(){return b(this.ratioA,this.min,this.max,this.step)}get valB(){return b(this.ratioB,this.min,this.max,this.step)}get ratioLower(){if(this.dualKnobs){return Math.min(this.ratioA,this.ratioB)}return 0}get ratioUpper(){if(this.dualKnobs){return Math.max(this.ratioA,this.ratioB)}return this.ratioA}updateRatio(){const n=this.getValue();const{min:a,max:e}=this;if(this.dualKnobs){this.ratioA=d(n.lower,a,e);this.ratioB=d(n.upper,a,e)}else{this.ratioA=d(n,a,e)}}updateValue(){this.noUpdate=true;const{valA:n,valB:a}=this;this.value=!this.dualKnobs?n:{lower:Math.min(n,a),upper:Math.max(n,a)};this.noUpdate=false}setFocus(n){if(this.el.shadowRoot){const a=this.el.shadowRoot.querySelector(n==="A"?".range-knob-a":".range-knob-b");if(a){a.focus()}}}render(){const{min:n,max:a,step:s,el:t,handleKeyboard:o,pressedKnob:c,disabled:g,pin:b,ratioLower:u,ratioUpper:p}=this;const v=`${u*100}%`;const k=`${100-p*100}%`;const f=document;const m=f.dir==="rtl";const x=m?"right":"left";const w=m?"left":"right";const y=n=>({[x]:n[x]});const z={[x]:v,[w]:k};const A=[];if(this.snaps&&this.ticks){for(let e=n;e<=a;e+=s){const r=d(e,n,a);const s={ratio:r,active:r>=u&&r<=p};s[x]=`${r*100}%`;A.push(s)}}h(t,this.name,JSON.stringify(this.getValue()),g);return e(r,{onFocusin:this.onFocus,onFocusout:this.onBlur,class:i(this.color,{"range-disabled":g,"range-pressed":c!==undefined,"range-has-pin":b,"range-snaps":this.snaps})},e("div",{class:"range-wrap"},e("slot",{name:"start"}),e("div",{class:"range-slider",ref:n=>this.rangeSlider=n},A.map((n=>e("span",{style:y(n),role:"presentation",class:{"range-tick":true,"range-tick-active":n.active},part:n.active?"tick-active":"tick"}))),e("div",{class:"range-bar",role:"presentation",part:"bar"}),e("div",{class:"range-bar range-bar-active",role:"presentation",style:z,part:"bar-active"}),l(m,{knob:"A",pressed:c==="A",value:this.valA,ratio:this.ratioA,pin:b,disabled:g,handleKeyboard:o,min:n,max:a}),this.dualKnobs&&l(m,{knob:"B",pressed:c==="B",value:this.valB,ratio:this.ratioB,pin:b,disabled:g,handleKeyboard:o,min:n,max:a})),e("slot",{name:"end"})))}get el(){return s(this)}static get watchers(){return{debounce:["debounceChanged"],min:["minChanged"],max:["maxChanged"],disabled:["disabledChanged"],value:["valueChanged"]}}};const l=(n,{knob:a,value:r,ratio:s,min:t,max:i,disabled:o,pressed:h,pin:c,handleKeyboard:g})=>{const l=n?"right":"left";const b=()=>{const n={};n[l]=`${s*100}%`;return n};return e("div",{onKeyDown:n=>{const e=n.key;if(e==="ArrowLeft"||e==="ArrowDown"){g(a,false);n.preventDefault();n.stopPropagation()}else if(e==="ArrowRight"||e==="ArrowUp"){g(a,true);n.preventDefault();n.stopPropagation()}},class:{"range-knob-handle":true,"range-knob-a":a==="A","range-knob-b":a==="B","range-knob-pressed":h,"range-knob-min":r===t,"range-knob-max":r===i},style:b(),role:"slider",tabindex:o?-1:0,"aria-valuemin":t,"aria-valuemax":i,"aria-disabled":o?"true":null,"aria-valuenow":r},c&&e("div",{class:"range-pin",role:"presentation",part:"pin"},Math.round(r)),e("div",{class:"range-knob",role:"presentation",part:"knob"}))};const b=(n,a,e,r)=>{let s=(e-a)*n;if(r>0){s=Math.round(s/r)*r+a}return t(a,s,e)};const d=(n,a,e)=>t(0,(n-a)/(e-a),1);g.style=c;export{g as nano_range};
+//# sourceMappingURL=p-6975f110.entry.js.map

package/dist/nano-components/p-6975f110.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["renderHiddenInput","container","name","value","disabled","input","querySelector","ownerDocument","createElement","type","classList","add","appendChild","rangeCss","Range","this","noUpdate","hasFocus","clampBounds","clamp","min","max","ensureValueInBounds","dualKnobs","lower","upper","handleKeyboard","knob","isIncrease","step","ratioA","ratioB","updateValue","onBlur","nanoBlur","emit","emitStyle","onFocus","nanoFocus","debounceChanged","nanoChange","debounceEvent","debounce","minChanged","updateRatio","maxChanged","disabledChanged","gesture","enable","valueChanged","connectedCallback","disconnectedCallback","destroy","undefined","async","rangeSlider","import","createGesture","el","gestureName","gesturePriority","threshold","onStart","ev","onMove","onEnd","getValue","nanoStyle","interactive","detail","rect","getBoundingClientRect","currentX","ratio","left","width","document","dir","pressedKnob","Math","abs","setFocus","update","snaps","valueToRatio","ratioToValue","valA","valB","ratioLower","ratioUpper","shadowRoot","knobEl","focus","render","pin","barStart","barEnd","doc","isRTL","start","end","tickStyle","tick","barStyle","ticks","active","push","JSON","stringify","h","Host","onFocusin","onFocusout","class","createColorClasses","color","ref","rangeEl","map","style","role","part","renderKnob","pressed","knobStyle","onKeyDown","key","preventDefault","stopPropagation","tabindex","round"],"sources":["./src/utils/form.ts","./src/components/range/range.scss?tag=nano-range&encapsulation=scoped","./src/components/range/range.tsx"],"sourcesContent":["export const renderHiddenInput = (\n  container: HTMLElement,\n  name: string,\n  value: string | undefined | null,\n  disabled: boolean\n) => {\n  let input = container.querySelector(\n    'input.aux-input'\n  ) as HTMLInputElement | null;\n  if (!input) {\n    input = container.ownerDocument!.createElement('input');\n    input.type = 'hidden';\n    input.classList.add('aux-input');\n    container.appendChild(input);\n  }\n  input.disabled = disabled;\n  input.name = name;\n  input.value = value || '';\n};\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n// Range\n// --------------------------------------------------\n\n:host {\n  /**\n   * @prop --knob-handle-size: defaults to calc(var(--knob-size) * 2);\n   * @prop --rgb-inactive: defaults to #{color-to-rgb-list(#a5a5a5)};\n   * @prop --bar-background: Background of the range bar; Defaults to #e2e1e0;\n   * @prop --bar-background-active: Background of the active range bar; Defaults to #a5a5a5;\n   * @prop --bar-height: Height of the range bar; Defaults to 8px;\n   * @prop --bar-border-radius: Border radius of the range bar; Defaults to 4px;\n   * @prop --height: Height of the range. Defaults to 42px;\n   * @prop --knob-background: Background of the range knob. Defaults to #{nano-color(primary, base)};\n   * @prop --knob-border-radius: Border radius of the range knob. Defaults to 50%;\n   * @prop --knob-box-shadow: Box shadow of the range knob; Defaults to 0 2px 4px 0 rgb(0 0 0 / 30%);\n   * @prop --knob-size: Size of the range knob; Defaults to 30px;\n   * @prop --pin-background: Background of the range pin; Defaults to #{nano-color(primary, base)};\n   * @prop --pin-color: Color of the range pin; Defaults to #{nano-color(primary, contrast)};\n   * @prop --focus-style: Focus shadow around knob; Defaults to 0 0 0 5px #{$control-focus-color};\n   */\n  --knob-handle-size: (var(--knob-size) * 2);\n  --rgb-inactive: #{color-to-rgb-list(#a5a5a5)};\n  --knob-border-radius: 50%;\n  --knob-background: #{nano-color(primary, base)};\n  --knob-box-shadow: 0 2px 4px 0 rgb(0 0 0 / 30%);\n  --knob-size: 30px;\n  --bar-height: 8px;\n  --bar-background: #e2e1e0;\n  --bar-background-active: #a5a5a5;\n  --bar-border-radius: 4px;\n  --height: 42px;\n  --pin-background: #{nano-color(primary, base)};\n  --pin-color: #{nano-color(primary, contrast)};\n  --focus-style: 0 0 0 5px #{$control-focus-color};\n}\n\n.range-wrap {\n  display: flex;\n  position: relative;\n  flex: 3;\n  align-items: center;\n  user-select: none;\n\n  ::slotted(ion-icon[slot]) {\n    font-size: 1.5em;\n  }\n\n  ::slotted([slot='start']) {\n    margin-inline: 0 14px;\n    margin-block: 0;\n    font-size: 0.9em;\n  }\n\n  ::slotted([slot='end']) {\n    margin-inline: 14px 0;\n    margin-block: 0;\n    font-size: 0.9em;\n  }\n}\n\n.range-slider {\n  position: relative;\n  flex: 1;\n  width: 100%;\n  height: var(--height);\n  contain: size layout style;\n  cursor: grab;\n  touch-action: pan-y;\n}\n\n:host(.range-pressed) .range-slider {\n  cursor: grabbing;\n}\n\n// bar\n\n.range-bar {\n  border-radius: var(--bar-border-radius);\n  inset-block-start: calc((var(--height) - var(--bar-height)) / 2);\n  inset-inline-start: 0;\n  position: absolute;\n  width: 100%;\n  height: var(--bar-height);\n  background: var(--bar-background);\n  pointer-events: none;\n\n  :host(.range-snaps) & {\n    border-radius: var(--bar-border-radius) 0 0 var(--bar-border-radius);\n  }\n}\n\n.range-bar-active {\n  inset-block-end: 0;\n  width: auto;\n  background: var(--bar-background-active);\n}\n\n// knob\n\n.range-knob {\n  border-radius: var(--knob-border-radius);\n  inset-block-start: calc(50% - var(--knob-size) / 2);\n  inset-inline-start: calc(50% - var(--knob-size) / 2);\n  position: absolute;\n  width: var(--knob-size);\n  height: var(--knob-size);\n  background: var(--knob-background);\n  box-shadow: var(--knob-box-shadow);\n  z-index: 2;\n  pointer-events: none;\n  transform: scale(0.67);\n  transition-duration: 120ms;\n  transition-property: transform, background-color, border;\n  transition-timing-function: ease;\n\n  :host(:not(.range-has-pin)) .range-knob-pressed & {\n    transform: scale(1);\n  }\n}\n\n.range-knob-handle {\n  inset-block-start: calc((var(--height) - var(--knob-handle-size)) / 2);\n  inset-inline-start: 0;\n  margin-inline-start: calc(0px - var(--knob-handle-size) / 2);\n  position: absolute;\n  width: calc(var(--knob-handle-size));\n  height: calc(var(--knob-handle-size));\n  text-align: center;\n\n  &:active,\n  &:focus {\n    outline: none;\n\n    .range-knob {\n      box-shadow: var(--knob-box-shadow), var(--focus-style);\n    }\n  }\n}\n\n// ticks\n\n.range-tick {\n  position: absolute;\n  inset-block-start: calc((var(--height) - var(--bar-height)) / 2);\n  width: var(--bar-height);\n  height: var(--bar-height);\n  background: var(--bar-background-active);\n  z-index: 1;\n  pointer-events: none;\n\n  &:first-of-type {\n    border-radius: var(--bar-border-radius) 0 0 var(--bar-border-radius);\n  }\n\n  &:last-of-type {\n    border-radius: 0 var(--bar-border-radius) var(--bar-border-radius) 0;\n  }\n\n  &-active {\n    background: transparent;\n  }\n}\n\n// pin\n\n.range-pin {\n  transform: translate3d(0, 0, 0) scale(0.01);\n  transform-origin: center top;\n  padding: 0.66em 0;\n  border-radius: 50%;\n  text-align: center;\n  box-sizing: border-box;\n  display: inline-block;\n  position: relative;\n  min-width: 2.33em;\n  height: 2.33em;\n  transition: transform 120ms ease, background 120ms ease;\n  background: var(--pin-background);\n  color: var(--pin-color);\n  font-size: 0.75em;\n\n  &::before {\n    inset-block-start: 0.25em;\n    inset-inline-start: 50%;\n    margin-inline-start: -1.08em;\n    border-radius: 50% 50% 50% 0;\n    position: absolute;\n    width: 2.16em;\n    height: 2.16em;\n    transform: rotate(-45deg);\n    transition: background 120ms ease;\n    background: var(--pin-background);\n    content: '';\n    z-index: -1;\n  }\n\n  .range-knob-pressed & {\n    transform: translate3d(0, -50%, 0) scale(1);\n    transform: translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1);\n  }\n}\n\n// disabled\n\n:host(.range-disabled) {\n  pointer-events: none;\n\n  .range-bar-active,\n  .range-bar,\n  .range-tick {\n    background-color: rgb(var(--rgb-inactive) / 50%);\n  }\n\n  .range-knob {\n    transform: scale(0.55);\n    outline: 5px solid #fff;\n    background-color: rgb(var(--rgb-inactive) / 50%);\n  }\n}\n\n// theme\n\n:host(.nano-color) {\n  .range-bar-active,\n  .range-knob,\n  .range-pin,\n  .range-pin::before,\n  .range-tick {\n    background: current-color(base);\n    color: current-color(contrast);\n  }\n\n  .range-bar {\n    background: current-color(base, 0.26);\n  }\n\n  .range-knob-handle {\n    &:active,\n    &:focus {\n      .range-knob {\n        box-shadow: var(--knob-box-shadow), 0 0 0 5px current-color(tint, 0.56);\n      }\n    }\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  State,\n  Watch,\n  h,\n} from '@stencil/core';\nimport { renderHiddenInput } from '../../utils/form';\nimport { clamp } from '../../utils/math';\nimport { createColorClasses } from '../../utils/theme';\nimport { debounceEvent } from '../../utils/throttle';\nimport type {\n  Color,\n  Gesture,\n  GestureDetail,\n  KnobName,\n  RangeChangeEventDetail,\n  RangeValue,\n  StyleEventDetail,\n} from '../../interface';\n\n/**\n * The Range slider lets users select from a range of values by moving\n * the slider knob. It can accept dual knobs, but by default one knob controls the value of the range.\n *\n * Labels can be placed on either side of the range by adding the\n * `slot=\"start\"` or `slot=\"end\"` to the element.\n *\n * @slot start - Content is placed to the left of the range slider in LTR, and to the right in RTL.\n * @slot end - Content is placed to the right of the range slider in LTR, and to the left in RTL.\n */\n@Component({\n  tag: 'nano-range',\n  styleUrl: 'range.scss',\n  scoped: true,\n})\nexport class Range implements ComponentInterface {\n  private noUpdate = false;\n  private rect!: ClientRect;\n  private hasFocus = false;\n  private rangeSlider?: HTMLElement;\n  private gesture?: Gesture;\n\n  @Element() el!: HTMLNanoRangeElement;\n\n  @State() private ratioA = 0;\n  @State() private ratioB = 0;\n  @State() private pressedKnob: KnobName;\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   * How long, in milliseconds, to wait to trigger the\n   * `nanoChange` event after each change in the range value.\n   */\n  @Prop() debounce = 0;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.nanoChange = debounceEvent(this.nanoChange, this.debounce);\n  }\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name = '';\n\n  /**\n   * Show two knobs.\n   */\n  @Prop() dualKnobs = false;\n\n  /**\n   * Minimum integer value of the range.\n   */\n  @Prop() min = 0;\n  @Watch('min')\n  protected minChanged() {\n    if (!this.noUpdate) {\n      this.updateRatio();\n    }\n  }\n\n  /**\n   * Maximum integer value of the range.\n   */\n  @Prop() max = 100;\n  @Watch('max')\n  protected maxChanged() {\n    if (!this.noUpdate) {\n      this.updateRatio();\n    }\n  }\n\n  /**\n   * If `true`, a pin with integer value is shown when the knob\n   * is pressed.\n   */\n  @Prop() pin = false;\n\n  /**\n   * If `true`, the knob snaps to tick marks evenly spaced based\n   * on the step property value.\n   */\n  @Prop() snaps = false;\n\n  /**\n   * Specifies the value granularity.\n   */\n  @Prop() step = 1;\n\n  /**\n   * If `true`, tick marks are displayed based on the step value.\n   * Only applies when `snaps` is `true`.\n   */\n  @Prop() ticks = false;\n\n  /**\n   * If `true`, the user cannot interact with the range.\n   */\n  @Prop() disabled = false;\n  @Watch('disabled')\n  protected disabledChanged() {\n    if (this.gesture) {\n      this.gesture.enable(!this.disabled);\n    }\n    this.emitStyle();\n  }\n\n  /**\n   * the value of the range.\n   */\n  @Prop({ mutable: true }) value: RangeValue = 0;\n  @Watch('value')\n  protected valueChanged(value: RangeValue) {\n    if (!this.noUpdate) {\n      this.updateRatio();\n    }\n\n    value = this.ensureValueInBounds(value);\n\n    this.nanoChange.emit({ value });\n  }\n\n  private clampBounds = (value: any): number => {\n    return clamp(this.min, value, this.max);\n  };\n\n  private ensureValueInBounds = (value: any) => {\n    if (this.dualKnobs) {\n      return {\n        lower: this.clampBounds(value.lower),\n        upper: this.clampBounds(value.upper),\n      };\n    } else {\n      return this.clampBounds(value);\n    }\n  };\n\n  /**\n   * Emitted when the value property has changed.\n   */\n  @Event() nanoChange!: EventEmitter<RangeChangeEventDetail>;\n\n  /**\n   * Emitted when the styles change.\n   * @internal\n   */\n  @Event() nanoStyle!: EventEmitter<StyleEventDetail>;\n\n  /**\n   * Emitted when the range has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the range loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  connectedCallback() {\n    this.updateRatio();\n    this.debounceChanged();\n    this.disabledChanged();\n  }\n\n  disconnectedCallback() {\n    if (this.gesture) {\n      this.gesture.destroy();\n      this.gesture = undefined;\n    }\n  }\n\n  async componentDidLoad() {\n    const rangeSlider = this.rangeSlider;\n    if (rangeSlider) {\n      this.gesture = (await import('../../utils/gesture/index')).createGesture({\n        el: rangeSlider,\n        gestureName: 'range',\n        gesturePriority: 100,\n        threshold: 0,\n        onStart: (ev) => this.onStart(ev),\n        onMove: (ev) => this.onMove(ev),\n        onEnd: (ev) => this.onEnd(ev),\n      });\n      this.gesture.enable(!this.disabled);\n    }\n  }\n\n  private handleKeyboard = (knob: KnobName, isIncrease: boolean) => {\n    let step = this.step;\n    step = step > 0 ? step : 1;\n    step = step / (this.max - this.min);\n    if (!isIncrease) {\n      step *= -1;\n    }\n    if (knob === 'A') {\n      this.ratioA = clamp(0, this.ratioA + step, 1);\n    } else {\n      this.ratioB = clamp(0, this.ratioB + step, 1);\n    }\n    this.updateValue();\n  };\n\n  private getValue(): RangeValue {\n    const value = this.value || 0;\n    if (this.dualKnobs) {\n      if (typeof value === 'object') {\n        return value;\n      }\n      return {\n        lower: 0,\n        upper: value,\n      };\n    } else {\n      if (typeof value === 'object') {\n        return value.upper;\n      }\n      return value;\n    }\n  }\n\n  private emitStyle() {\n    this.nanoStyle.emit({\n      interactive: true,\n      'interactive-disabled': this.disabled,\n    });\n  }\n\n  private onStart(detail: GestureDetail) {\n    const rect = (this.rect = this.rangeSlider!.getBoundingClientRect() as any);\n    const currentX = detail.currentX;\n\n    // figure out which knob they started closer to\n    let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);\n    if (document.dir === 'rtl') {\n      ratio = 1 - ratio;\n    }\n\n    this.pressedKnob =\n      !this.dualKnobs ||\n      Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio)\n        ? 'A'\n        : 'B';\n\n    this.setFocus(this.pressedKnob);\n\n    // update the active knob's position\n    this.update(currentX);\n  }\n\n  private onMove(detail: GestureDetail) {\n    this.update(detail.currentX);\n  }\n\n  private onEnd(detail: GestureDetail) {\n    this.update(detail.currentX);\n    this.pressedKnob = undefined;\n  }\n\n  private update(currentX: number) {\n    // figure out where the pointer is currently at\n    // update the knob being interacted with\n    const rect = this.rect;\n    let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);\n    if (document.dir === 'rtl') {\n      ratio = 1 - ratio;\n    }\n\n    if (this.snaps) {\n      // snaps the ratio to the current value\n      ratio = valueToRatio(\n        ratioToValue(ratio, this.min, this.max, this.step),\n        this.min,\n        this.max\n      );\n    }\n\n    // update which knob is pressed\n    if (this.pressedKnob === 'A') {\n      this.ratioA = ratio;\n    } else {\n      this.ratioB = ratio;\n    }\n\n    // Update input value\n    this.updateValue();\n  }\n\n  private get valA() {\n    return ratioToValue(this.ratioA, this.min, this.max, this.step);\n  }\n\n  private get valB() {\n    return ratioToValue(this.ratioB, this.min, this.max, this.step);\n  }\n\n  private get ratioLower() {\n    if (this.dualKnobs) {\n      return Math.min(this.ratioA, this.ratioB);\n    }\n    return 0;\n  }\n\n  private get ratioUpper() {\n    if (this.dualKnobs) {\n      return Math.max(this.ratioA, this.ratioB);\n    }\n    return this.ratioA;\n  }\n\n  private updateRatio() {\n    const value = this.getValue() as any;\n    const { min, max } = this;\n    if (this.dualKnobs) {\n      this.ratioA = valueToRatio(value.lower, min, max);\n      this.ratioB = valueToRatio(value.upper, min, max);\n    } else {\n      this.ratioA = valueToRatio(value, min, max);\n    }\n  }\n\n  private updateValue() {\n    this.noUpdate = true;\n\n    const { valA, valB } = this;\n    this.value = !this.dualKnobs\n      ? valA\n      : {\n          lower: Math.min(valA, valB),\n          upper: Math.max(valA, valB),\n        };\n\n    this.noUpdate = false;\n  }\n\n  private setFocus(knob: KnobName) {\n    if (this.el.shadowRoot) {\n      const knobEl = this.el.shadowRoot.querySelector(\n        knob === 'A' ? '.range-knob-a' : '.range-knob-b'\n      ) as HTMLElement | undefined;\n      if (knobEl) {\n        knobEl.focus();\n      }\n    }\n  }\n\n  private onBlur = () => {\n    if (this.hasFocus) {\n      this.hasFocus = false;\n      this.nanoBlur.emit();\n      this.emitStyle();\n    }\n  };\n\n  private onFocus = () => {\n    if (!this.hasFocus) {\n      this.hasFocus = true;\n      this.nanoFocus.emit();\n      this.emitStyle();\n    }\n  };\n\n  render() {\n    const {\n      min,\n      max,\n      step,\n      el,\n      handleKeyboard,\n      pressedKnob,\n      disabled,\n      pin,\n      ratioLower,\n      ratioUpper,\n    } = this;\n\n    const barStart = `${ratioLower * 100}%`;\n    const barEnd = `${100 - ratioUpper * 100}%`;\n\n    const doc = document;\n    const isRTL = doc.dir === 'rtl';\n    const start = isRTL ? 'right' : 'left';\n    const end = isRTL ? 'left' : 'right';\n\n    const tickStyle = (tick: any) => {\n      return {\n        [start]: tick[start],\n      };\n    };\n\n    const barStyle = {\n      [start]: barStart,\n      [end]: barEnd,\n    };\n\n    const ticks = [];\n    if (this.snaps && this.ticks) {\n      for (let value = min; value <= max; value += step) {\n        const ratio = valueToRatio(value, min, max);\n\n        const tick: any = {\n          ratio,\n          active: ratio >= ratioLower && ratio <= ratioUpper,\n        };\n\n        tick[start] = `${ratio * 100}%`;\n\n        ticks.push(tick);\n      }\n    }\n\n    renderHiddenInput(el, this.name, JSON.stringify(this.getValue()), disabled);\n\n    return (\n      <Host\n        onFocusin={this.onFocus}\n        onFocusout={this.onBlur}\n        class={createColorClasses(this.color, {\n          'range-disabled': disabled,\n          'range-pressed': pressedKnob !== undefined,\n          'range-has-pin': pin,\n          'range-snaps': this.snaps,\n        })}\n      >\n        <div class=\"range-wrap\">\n          <slot name=\"start\"></slot>\n          <div\n            class=\"range-slider\"\n            ref={(rangeEl) => (this.rangeSlider = rangeEl)}\n          >\n            {ticks.map((tick) => (\n              <span\n                style={tickStyle(tick)}\n                role=\"presentation\"\n                class={{\n                  'range-tick': true,\n                  'range-tick-active': tick.active,\n                }}\n                part={tick.active ? 'tick-active' : 'tick'}\n              />\n            ))}\n\n            <div class=\"range-bar\" role=\"presentation\" part=\"bar\" />\n            <div\n              class=\"range-bar range-bar-active\"\n              role=\"presentation\"\n              style={barStyle}\n              part=\"bar-active\"\n            />\n\n            {renderKnob(isRTL, {\n              knob: 'A',\n              pressed: pressedKnob === 'A',\n              value: this.valA,\n              ratio: this.ratioA,\n              pin,\n              disabled,\n              handleKeyboard,\n              min,\n              max,\n            })}\n\n            {this.dualKnobs &&\n              renderKnob(isRTL, {\n                knob: 'B',\n                pressed: pressedKnob === 'B',\n                value: this.valB,\n                ratio: this.ratioB,\n                pin,\n                disabled,\n                handleKeyboard,\n                min,\n                max,\n              })}\n          </div>\n          <slot name=\"end\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n\ninterface RangeKnob {\n  knob: KnobName;\n  value: number;\n  ratio: number;\n  min: number;\n  max: number;\n  disabled: boolean;\n  pressed: boolean;\n  pin: boolean;\n\n  handleKeyboard: (name: KnobName, isIncrease: boolean) => void;\n}\n\nconst renderKnob = (\n  isRTL: boolean,\n  {\n    knob,\n    value,\n    ratio,\n    min,\n    max,\n    disabled,\n    pressed,\n    pin,\n    handleKeyboard,\n  }: RangeKnob\n) => {\n  const start = isRTL ? 'right' : 'left';\n\n  const knobStyle = () => {\n    const style: any = {};\n    style[start] = `${ratio * 100}%`;\n    return style;\n  };\n\n  return (\n    <div\n      onKeyDown={(ev: KeyboardEvent) => {\n        const key = ev.key;\n        if (key === 'ArrowLeft' || key === 'ArrowDown') {\n          handleKeyboard(knob, false);\n          ev.preventDefault();\n          ev.stopPropagation();\n        } else if (key === 'ArrowRight' || key === 'ArrowUp') {\n          handleKeyboard(knob, true);\n          ev.preventDefault();\n          ev.stopPropagation();\n        }\n      }}\n      class={{\n        'range-knob-handle': true,\n        'range-knob-a': knob === 'A',\n        'range-knob-b': knob === 'B',\n        'range-knob-pressed': pressed,\n        'range-knob-min': value === min,\n        'range-knob-max': value === max,\n      }}\n      style={knobStyle()}\n      role=\"slider\"\n      tabindex={disabled ? -1 : 0}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-disabled={disabled ? 'true' : null}\n      aria-valuenow={value}\n    >\n      {pin && (\n        <div class=\"range-pin\" role=\"presentation\" part=\"pin\">\n          {Math.round(value)}\n        </div>\n      )}\n      <div class=\"range-knob\" role=\"presentation\" part=\"knob\" />\n    </div>\n  );\n};\n\nconst ratioToValue = (\n  ratio: number,\n  min: number,\n  max: number,\n  step: number\n): number => {\n  let value = (max - min) * ratio;\n  if (step > 0) {\n    value = Math.round(value / step) * step + min;\n  }\n  return clamp(min, value, max);\n};\n\nconst valueToRatio = (value: number, min: number, max: number): number => {\n  return clamp(0, (value - min) / (max - min), 1);\n};\n"],"mappings":"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"}

package/dist/nano-components/p-71057181.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{h as l}from"./p-f6a8467a.js";const r=({label:r,hasLabelSlot:e,controlId:a,labelId:t,floatLabel:s,placeholder:o,hideLabel:c,hasValue:n,rtl:_,showCharCount:d,maxlength:m,charCount:f})=>{if(!r&&!e)return;if(s){return l("label",{class:"form-ctrl__float-label",htmlFor:a,id:t},r&&r,!r&&e&&l("slot",{name:"label"}),d&&l("span",{class:"form-ctrl__label-charcount"},m?` ${f}/${m}`:` ${f}`))}else{return l("label",{class:{"form-ctrl__label":true,"visually-hide":c},htmlFor:a,id:t},l("div",{class:"form-ctrl__label-wrap"},o&&n&&_&&l("span",{class:"form-ctrl__label-placeholder"},o," / "),l("span",{class:"form-ctrl__labeltext"},r&&r,!r&&e&&l("slot",{name:"label"})),o&&n&&!_&&l("span",{class:"form-ctrl__label-placeholder"}," / ",o)),d&&l("span",{class:"form-ctrl__label-charcount"},m?m-f+" left":f+" characters"))}};const e=(e,a)=>{const{rtl:t,floatLabel:s,label:o,moreId:c,helperEndId:n,type:_,hasHelperSlot:d,showInlineError:m,errorMessage:f,hasHelperEndSlot:i}=e;return l("div",{class:{"has-label":o!==null&&!s,"has-float-label":o!==null&&s,"has-helper-end":i,rtl:t,"form-ctrl":true}},l("div",{class:"form-ctrl__wrapper"},!s?r(Object.assign({},e)):"",l("div",{class:{"form-ctrl__input":true,"form-ctrl__textarea":_==="textarea"}},s&&r(Object.assign(Object.assign({},e),{rtl:t})),a),m||d?l("div",{class:"form-ctrl__more",id:c},!!m?l("div",{class:"form-ctrl__error","aria-live":"polite"},f):"",l("div",{class:"form-ctrl__helper"},l("slot",{name:"helper"}))):""),i?l("div",{class:"form-ctrl__helper-end",id:n},l("slot",{name:"helper-end"})):"")};const a=(r,e)=>{const{clearControl:a,onClearText:t,readonly:s,disabled:o,control:c,ref:n,endSlot:_,endValueSlot:d,startSlot:m}=r;const f=()=>{c.setFocus()};return l("div",{class:"form-ctrl__input-wrap",ref:l=>{if(n)n(l)}},l("span",{class:"form-ctrl__slot-start"},l("slot",{name:"start"}),m),e,a&&!s&&!o&&l("button",{type:"button",class:"icon form-ctrl__clear-btn",tabindex:"-1",onTouchStart:t,onMouseDown:t},l("nano-icon",{name:"light/times"})),l("span",{class:"form-ctrl__slot-value-end",onClick:f},l("slot",{name:"value-end"}),d),l("span",{class:"form-ctrl__slot-end"},l("slot",{name:"end"}),_))};export{e as F,a};
+//# sourceMappingURL=p-71057181.js.map

package/dist/nano-components/p-71057181.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["renderLabel","label","hasLabelSlot","controlId","labelId","floatLabel","placeholder","hideLabel","hasValue","rtl","showCharCount","maxlength","charCount","h","class","htmlFor","id","name","FormControlWrap","props","children","moreId","helperEndId","type","hasHelperSlot","showInlineError","errorMessage","hasHelperEndSlot","Object","assign","FormControl","clearControl","onClearText","readonly","disabled","control","ref","endSlot","endValueSlot","startSlot","clickThrough","setFocus","el","tabindex","onTouchStart","onMouseDown","onClick"],"sources":["./src/components/form-control/form-control.tsx"],"sourcesContent":["import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport type { TextFieldTypes } from '../../interface';\n\ninterface FormControlWrapProps {\n  rtl: boolean;\n  floatLabel: boolean;\n  labelId: string;\n  label: string;\n  moreId: string;\n  helperEndId: string;\n  type?: TextFieldTypes;\n  showInlineError: boolean;\n  hasHelperSlot: boolean;\n  errorMessage: string;\n  controlId: string;\n  hasLabelSlot: boolean;\n  hideLabel: boolean;\n  placeholder: string;\n  hasValue: boolean;\n  showCharCount?: boolean;\n  maxlength?: number;\n  charCount?: number;\n  hasHelperEndSlot?: boolean;\n}\n\ninterface FormControlProps {\n  clearControl: boolean;\n  onClearText?: () => void;\n  readonly: boolean;\n  disabled: boolean;\n  control: HTMLNanoInputElement | HTMLNanoSelectElement;\n  ref?: (elm?: HTMLElement) => void;\n  endSlot?: VNode;\n  endValueSlot?: VNode;\n  startSlot?: VNode;\n}\n\ninterface LabelProps extends FormControlWrapProps {\n  rtl: boolean;\n}\n\nconst renderLabel = ({\n  label,\n  hasLabelSlot,\n  controlId,\n  labelId,\n  floatLabel,\n  placeholder,\n  hideLabel,\n  hasValue,\n  rtl,\n  showCharCount,\n  maxlength,\n  charCount,\n}: LabelProps) => {\n  if (!label && !hasLabelSlot) return;\n  if (floatLabel) {\n    return (\n      <label class=\"form-ctrl__float-label\" htmlFor={controlId} id={labelId}>\n        {label && label}\n        {!label && hasLabelSlot && <slot name=\"label\" />}\n        {showCharCount && (\n          <span class=\"form-ctrl__label-charcount\">\n            {maxlength ? ` ${charCount}/${maxlength}` : ` ${charCount}`}\n          </span>\n        )}\n      </label>\n    );\n  } else {\n    return (\n      <label\n        class={{ 'form-ctrl__label': true, 'visually-hide': hideLabel }}\n        htmlFor={controlId}\n        id={labelId}\n      >\n        <div class=\"form-ctrl__label-wrap\">\n          {placeholder && hasValue && rtl && (\n            <span class=\"form-ctrl__label-placeholder\">{placeholder} / </span>\n          )}\n          <span class=\"form-ctrl__labeltext\">\n            {label && label}\n            {!label && hasLabelSlot && <slot name=\"label\" />}\n          </span>\n          {placeholder && hasValue && !rtl && (\n            <span class=\"form-ctrl__label-placeholder\"> / {placeholder}</span>\n          )}\n        </div>\n        {showCharCount && (\n          <span class=\"form-ctrl__label-charcount\">\n            {maxlength\n              ? maxlength - charCount + ' left'\n              : charCount + ' characters'}\n          </span>\n        )}\n      </label>\n    );\n  }\n};\n\nexport const FormControlWrap: FunctionalComponent<FormControlWrapProps> = (\n  props: FormControlWrapProps,\n  children\n) => {\n  const {\n    rtl,\n    floatLabel,\n    label,\n    moreId,\n    helperEndId,\n    type,\n    hasHelperSlot,\n    showInlineError,\n    errorMessage,\n    hasHelperEndSlot,\n  } = props;\n\n  return (\n    <div\n      class={{\n        'has-label': label !== null && !floatLabel,\n        'has-float-label': label !== null && floatLabel,\n        'has-helper-end': hasHelperEndSlot,\n        rtl,\n        'form-ctrl': true,\n      }}\n    >\n      <div class=\"form-ctrl__wrapper\">\n        {!floatLabel ? renderLabel({ ...props }) : ''}\n        <div\n          class={{\n            'form-ctrl__input': true,\n            'form-ctrl__textarea': type === 'textarea',\n          }}\n        >\n          {floatLabel && renderLabel({ ...props, rtl })}\n          {children}\n        </div>\n        {showInlineError || hasHelperSlot ? (\n          <div class=\"form-ctrl__more\" id={moreId}>\n            {!!showInlineError ? (\n              <div class=\"form-ctrl__error\" aria-live=\"polite\">\n                {errorMessage}\n              </div>\n            ) : (\n              ''\n            )}\n            <div class=\"form-ctrl__helper\">\n              <slot name=\"helper\" />\n            </div>\n          </div>\n        ) : (\n          ''\n        )}\n      </div>\n      {hasHelperEndSlot ? (\n        <div class=\"form-ctrl__helper-end\" id={helperEndId}>\n          <slot name=\"helper-end\" />\n        </div>\n      ) : (\n        ''\n      )}\n    </div>\n  );\n};\n\nexport const FormControl: FunctionalComponent<FormControlProps> = (\n  props: FormControlProps,\n  children\n) => {\n  const {\n    clearControl,\n    onClearText,\n    readonly,\n    disabled,\n    control,\n    ref,\n    endSlot,\n    endValueSlot,\n    startSlot,\n  } = props;\n  const clickThrough = () => {\n    control.setFocus();\n  };\n\n  return (\n    <div\n      class=\"form-ctrl__input-wrap\"\n      ref={(el) => {\n        if (ref) ref(el);\n      }}\n    >\n      <span class=\"form-ctrl__slot-start\">\n        <slot name=\"start\" />\n        {startSlot}\n      </span>\n      {children}\n      {clearControl && !readonly && !disabled && (\n        <button\n          type=\"button\"\n          class=\"icon form-ctrl__clear-btn\"\n          tabindex=\"-1\"\n          onTouchStart={onClearText}\n          onMouseDown={onClearText}\n        >\n          <nano-icon name=\"light/times\"></nano-icon>\n        </button>\n      )}\n      <span class=\"form-ctrl__slot-value-end\" onClick={clickThrough}>\n        <slot name=\"value-end\" />\n        {endValueSlot}\n      </span>\n      <span class=\"form-ctrl__slot-end\">\n        <slot name=\"end\" />\n        {endSlot}\n      </span>\n    </div>\n  );\n};\n"],"mappings":";;;oCAyCA,MAAMA,EAAc,EAClBC,QACAC,eACAC,YACAC,UACAC,aACAC,cACAC,YACAC,WACAC,MACAC,gBACAC,YACAC,gBAEA,IAAKX,IAAUC,EAAc,OAC7B,GAAIG,EAAY,CACd,OACEQ,EAAA,SAAOC,MAAM,yBAAyBC,QAASZ,EAAWa,GAAIZ,GAC3DH,GAASA,GACRA,GAASC,GAAgBW,EAAA,QAAMI,KAAK,UACrCP,GACCG,EAAA,QAAMC,MAAM,8BACTH,EAAY,IAAIC,KAAaD,IAAc,IAAIC,K,KAKnD,CACL,OACEC,EAAA,SACEC,MAAO,CAAE,mBAAoB,KAAM,gBAAiBP,GACpDQ,QAASZ,EACTa,GAAIZ,GAEJS,EAAA,OAAKC,MAAM,yBACRR,GAAeE,GAAYC,GAC1BI,EAAA,QAAMC,MAAM,gCAAgCR,E,OAE9CO,EAAA,QAAMC,MAAM,wBACTb,GAASA,GACRA,GAASC,GAAgBW,EAAA,QAAMI,KAAK,WAEvCX,GAAeE,IAAaC,GAC3BI,EAAA,QAAMC,MAAM,gC,MAAmCR,IAGlDI,GACCG,EAAA,QAAMC,MAAM,8BACTH,EACGA,EAAYC,EAAY,QACxBA,EAAY,e,SAQfM,EAA6D,CACxEC,EACAC,KAEA,MAAMX,IACJA,EAAGJ,WACHA,EAAUJ,MACVA,EAAKoB,OACLA,EAAMC,YACNA,EAAWC,KACXA,EAAIC,cACJA,EAAaC,gBACbA,EAAeC,aACfA,EAAYC,iBACZA,GACER,EAEJ,OACEN,EAAA,OACEC,MAAO,CACL,YAAab,IAAU,OAASI,EAChC,kBAAmBJ,IAAU,MAAQI,EACrC,iBAAkBsB,EAClBlB,MACA,YAAa,OAGfI,EAAA,OAAKC,MAAM,uBACPT,EAAaL,EAAW4B,OAAAC,OAAA,GAAMV,IAAW,GAC3CN,EAAA,OACEC,MAAO,CACL,mBAAoB,KACpB,sBAAuBS,IAAS,aAGjClB,GAAcL,EAAW4B,OAAAC,OAAAD,OAAAC,OAAA,GAAMV,GAAK,CAAEV,SACtCW,GAEFK,GAAmBD,EAClBX,EAAA,OAAKC,MAAM,kBAAkBE,GAAIK,KAC5BI,EACDZ,EAAA,OAAKC,MAAM,mBAAkB,YAAW,UACrCY,GACG,GAIRb,EAAA,OAAKC,MAAM,qBACTD,EAAA,QAAMI,KAAK,aAET,IAKTU,EACCd,EAAA,OAAKC,MAAM,wBAAwBE,GAAIM,GACrCT,EAAA,QAAMI,KAAK,gBACP,GAIJ,E,MAIGa,EAAqD,CAChEX,EACAC,KAEA,MAAMW,aACJA,EAAYC,YACZA,EAAWC,SACXA,EAAQC,SACRA,EAAQC,QACRA,EAAOC,IACPA,EAAGC,QACHA,EAAOC,aACPA,EAAYC,UACZA,GACEpB,EACJ,MAAMqB,EAAe,KACnBL,EAAQM,UAAU,EAGpB,OACE5B,EAAA,OACEC,MAAM,wBACNsB,IAAMM,IACJ,GAAIN,EAAKA,EAAIM,EAAG,GAGlB7B,EAAA,QAAMC,MAAM,yBACVD,EAAA,QAAMI,KAAK,UACVsB,GAEFnB,EACAW,IAAiBE,IAAaC,GAC7BrB,EAAA,UACEU,KAAK,SACLT,MAAM,4BACN6B,SAAS,KACTC,aAAcZ,EACda,YAAab,GAEbnB,EAAA,aAAWI,KAAK,iBAGpBJ,EAAA,QAAMC,MAAM,4BAA4BgC,QAASN,GAC/C3B,EAAA,QAAMI,KAAK,cACVqB,GAEHzB,EAAA,QAAMC,MAAM,uBACVD,EAAA,QAAMI,KAAK,QACVoB,GAEC,S"}