@nanoporetech-digital/components 1.15.6 → 2.0.0

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

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

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

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-System.register(["./p-59b3d24b.system.js","./p-b86fc6b7.system.js"],(function(t){"use strict";var o,e,r,i;return{setters:[function(t){o=t.r;e=t.h;r=t.g},function(t){i=t.h}],execute:function(){var n=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:block;--nano-loader-base:#4a4a4a;--nano-loader-tint:#7d7d7d;--theme-color:#fff;--theme-tint-color:#90c6e7;--scrim-color:0, 0, 0;--scrim-direction:90deg;--scrim-opacity-from:0.25;--scrim-opacity-to:0.7;--padding:0;color:var(--theme-color)}:host([theme=light]){--nano-loader-base:#fff;--nano-loader-tint:white;--theme-color:#4a4a4a;--scrim-color:255, 255, 255;--scrim-opacity-from:0.25;--scrim-opacity-to:1;--scrim-direction:270deg;color:var(--theme-color)}:host([theme=light]) .hero__primary-content{--color:#4a4a4a}.hero{position:relative}.hero--rtl{--scrim-direction:270deg}.hero--secondary:not(.hero--iconbox){--scrim-direction:0deg}.hero__bg-wrap{overflow:hidden}.hero__bg-slot{position:absolute;top:0;bottom:0;left:0;right:0}.hero__ctas{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;padding:32px 32px 0;margin-bottom:-64px;position:relative;z-index:1}@media (max-width: 52em){.hero__ctas{display:none}}@media (max-width: 58em){.hero__ctas{margin-bottom:-48px}}.hero__ctas ::slotted(a.button[slot=secondary-ctas]),.hero__ctas::slotted(a.button[slot=secondary-ctas]){padding:0.25rem 0.5rem !important;font-size:0.875rem !important;margin:0 0.25rem !important}.hero__img{display:block;--padding:inherit}.hero__breadcrumbs{display:none;margin:20px 14px 0;line-height:14px}.hero--breadcrumb .hero__breadcrumbs{display:block}.is-xl .hero__breadcrumbs{margin:0 50px;max-width:50%}.is-xxl .hero__breadcrumbs{margin:0 83px}.hero__breadcrumbs ::slotted(*[slot=breadcrumb]),.hero__breadcrumbs::slotted(*[slot=breadcrumb]){font-size:0.85rem;text-transform:uppercase;letter-spacing:1.5px;font-weight:600;font-stretch:125%;display:inline-block;margin-bottom:16px;position:relative;z-index:2}.hero--hasbg .hero__breadcrumbs ::slotted(*[slot=breadcrumb]),.hero--hasbg .hero__breadcrumbs::slotted(*[slot=breadcrumb]){text-shadow:1px 1px rgba(0, 0, 0, 0.15)}.hero__breadcrumbs ::slotted(a[slot=breadcrumb]),.hero__breadcrumbs::slotted(a[slot=breadcrumb]){color:var(--theme-tint-color) !important;cursor:pointer}.hero__breadcrumbs ::slotted(.slash[slot=breadcrumb]),.hero__breadcrumbs::slotted(.slash[slot=breadcrumb]){color:var(--theme-color);position:relative;margin:0 0.5rem;display:inline-block}.hero__scrim{position:absolute;left:0;right:0;bottom:0;top:0;z-index:0;background:-webkit-gradient(linear, left top, left bottom, from(var(--scrim-direction)), color-stop(0%, rgba(var(--scrim-color), var(--scrim-opacity-from))), to(rgba(var(--scrim-color), var(--scrim-opacity-to))));background:linear-gradient(var(--scrim-direction), rgba(var(--scrim-color), var(--scrim-opacity-from)) 0%, rgba(var(--scrim-color), var(--scrim-opacity-to)) 100%)}.hero--scrim .hero__scrim{background:none}.hero__content{max-width:1440px;--grid-row-gap:0;margin:0 auto;position:relative}.hero__content.is-xl{margin-top:50px;max-width:1540px}.hero__content.is-xxl{margin-top:83px;max-width:1606px}.hero__primary{margin:16px}.hero--breadcrumb .hero__primary{margin:0 16px}.hero--backbtn .hero__primary{margin-left:0}.hero__primary ::slotted(nano-icon-button[slot=back-btn]),.hero__primary::slotted(nano-icon-button[slot=back-btn]){font-size:2rem}.is-xl .hero__primary{margin:0 0 50px 50px}.is-xl .hero__primary ::slotted(nano-icon-button[slot=back-btn]),.is-xl .hero__primary::slotted(nano-icon-button[slot=back-btn]){margin-left:-3rem;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.is-xl .hero__primary ::slotted(nano-icon-button[slot=back-btn]),.is-xl .hero__primary::slotted(nano-icon-button[slot=back-btn]){margin-left:unset;margin-right:unset;-webkit-margin-start:-3rem;margin-inline-start:-3rem;-webkit-margin-end:0;margin-inline-end:0}}.is-xxl .hero__primary{margin:0 0 83px 83px}.hero__primary-content{max-width:45rem;--color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex}.hero--backbtn .hero__primary-content>div{padding:10px 0 0 0}.hero__primary-content ::slotted(h1[slot=primary-content]),.hero__primary-content::slotted(h1[slot=primary-content]){line-height:26px !important;margin-top:0 !important;margin-bottom:18px !important;font-size:2rem !important}.is-xl .hero__primary-content ::slotted(h1[slot=primary-content]),.is-xl .hero__primary-content::slotted(h1[slot=primary-content]){line-height:31px !important;margin-bottom:30px !important}.is-xl .hero__primary-content ::slotted(.button[slot=primary-content]),.is-xl .hero__primary-content::slotted(.button[slot=primary-content]){margin-top:20px !important}.hero__secondary{display:none;height:100%;padding:0 14px 20px}.hero--secondary .hero__secondary{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.is-xl .hero__secondary{padding:0 50px 50px;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.is-xxl .hero__secondary{padding:0 83px 83px}.hero__icon-box{background:rgba(0, 0, 0, 0.7);padding:24px;width:100%;margin-bottom:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;color:white}.is-xl .hero__icon-box{max-width:410px;-webkit-box-flex:0;-ms-flex:0 1 410px;flex:0 1 410px}.hero__icon-box::slotted([slot=icon-box-item] nano-icon){color:var(--theme-tint-color);--nano-icon-size:32px;--nano-icon-margin-end:20px}.hero__icon-box ::slotted([slot=icon-box-item]){--nano-color-base:var(--theme-tint-color);--nano-icon-size:32px;--nano-icon-margin-end:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:0.8125rem;margin-bottom:20px}.hero__icon-box ::slotted(.last[slot=icon-box-item]),.hero__icon-box::slotted(.last[slot=icon-box-item]){margin-bottom:0}.hero__quote-content{margin-top:auto;text-align:center;width:100%}.is-xl .hero__quote-content{max-width:500px;-webkit-box-flex:0;-ms-flex:0 1 500px;flex:0 1 500px;text-align:initial}.hero__quote::before,.hero__quote::after{content:'\"';font-size:2.5rem;font-weight:700;font-style:italic;color:#abb6b8;display:inline}.hero__quote ::slotted([slot=quote]),.hero__quote::slotted([slot=quote]){font-size:32px;font-weight:300;font-style:italic;display:inline}.is-xl .hero__quote ::slotted([slot=quote]),.is-xl .hero__quote::slotted([slot=quote]){font-size:42px}.hero__quote-author{text-align:right;text-align:end;font-size:1rem;opacity:0.8}.hero--sub .hero__content.is-xl{margin-top:40px}.hero--sub .hero__content.is-xl .hero__primary{margin:0 0 40px 50px}.hero--sub .hero__content.is-xl .hero__secondary{padding:0 50px 50px 40px}.hero--sub .hero__content.is-xl ::slotted(.button[slot=primary-content]),.hero--sub .hero__content.is-xl::slotted(.button[slot=primary-content]){margin-top:8px !important}.hero--sub .hero__content.is-xl ::slotted(h1[slot=primary-content]),.hero--sub .hero__content.is-xl::slotted(h1[slot=primary-content]){margin-bottom:18px !important}.hero--sub .hero__content.is-xxl .hero__primary{margin:0 0 40px 83px}.hero--sub .hero__content.is-xxl .hero__secondary{padding:0 83px 83px 40px}";var s=t("nano_hero",function(){function t(t){var r=this;o(this,t);this.isLegacy=false;this.imgSrcSet=null;this.largeScreenBP=900;this.theme="dark";this.level="top";this.HeroContent=function(){return[!r.hasIconBox&&r.hasCtas?e("div",{class:"hero__ctas"},e("slot",{name:"secondary-ctas"})):"",e("div",{class:"hero__scrim"},e("slot",{name:"scrim"})),e("nano-grid",{class:"hero__content",xlCols:2,xlSize:r.largeScreenBP},e("nano-grid-item",{gridStates:"xl-col-span-2"},e("div",{class:"hero__breadcrumbs"},e("slot",{name:"breadcrumb"}))),e("nano-grid-item",{gridStates:r.hasSecondaryContent?"xl-col-span-1 xl-col-start-1 xl-row-start-2":"xl-col-span-2 xl-col-start-1 xl-row-start-2"},e("div",{class:"hero__primary"},e("div",{class:"hero__primary-content"},e("slot",{name:"back-btn"}),e("div",null,e("slot",{name:"primary-content"}))))),r.hasSecondaryContent&&e("nano-grid-item",{gridStates:"xl-col-span-1 xl-col-start-2 xl-row-start-2"},e("div",{class:"hero__secondary"},e("slot",{name:"secondary-content"}),r.hasIconBox&&e("div",{class:"hero__icon-box"},e("slot",{name:"icon-box"}),e("slot",{name:"icon-box-item"})),r.hasQuote&&e("div",{class:"hero__quote-content"},e("span",{class:"hero__quote"},e("slot",{name:"quote"})),e("div",{class:"hero__quote-author"},e("slot",{name:"quote-author"}))))))]}}t.prototype.breadCrumbChange=function(){this.breadCrumbs.filter((function(t){return t.tagName==="A"&&!t.nextElementSibling.classList.contains("slash")})).forEach((function(t){t.insertAdjacentHTML("afterend",'<span slot="breadcrumb" class="slash">/</span>')}))};t.prototype.iconBoxItemChange=function(){this.iconBoxItems.forEach((function(t){return t.classList.remove("last")}));if(this.iconBoxItems[this.iconBoxItems.length-1]&&this.iconBoxItems[this.iconBoxItems.length-1].classList)this.iconBoxItems[this.iconBoxItems.length-1].classList.add("last")};t.prototype.slotChangeObserver=function(){var t=this;if(this.mo)this.mo.disconnect();var o=this.mo=new MutationObserver((function(){return t.processSlottedContent()}));o.observe(this.host,{childList:true})};t.prototype.processSlottedContent=function(){this.hasCtas=!!this.host.querySelector('[slot="secondary-ctas"]');this.iconBoxItems=Array.from(this.host.querySelectorAll('[slot="icon-box-item"]'));this.hasIconBox=!!this.host.querySelector('[slot="icon-box"]')||!!this.iconBoxItems.length;this.hasScrim=!!this.host.querySelector('[slot="scrim"]');this.breadCrumbs=Array.from(this.host.querySelectorAll('[slot="breadcrumb"]'));this.hasSecondaryContent=!!this.host.querySelector('[slot="icon-box"]')||!!this.host.querySelector('[slot="quote"]')||!!this.host.querySelector('[slot="icon-box-item"]')||!!this.host.querySelector('[slot="secondary-content"]');this.hasBg=!!this.host.querySelector('[slot="background"]')||!!this.imgSrc;this.hasBackBtn=!!this.host.querySelector('[slot="back-btn"]');this.hasQuote=!!this.host.querySelector('[slot="quote"]')};t.prototype.connectedCallback=function(){this.isLegacy=!i(this.host)};t.prototype.disconnectedCallback=function(){if(this.mo)this.mo.disconnect()};t.prototype.componentDidLoad=function(){this.slotChangeObserver()};t.prototype.componentWillLoad=function(){this.processSlottedContent()};t.prototype.render=function(){var t=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl";return e("div",{class:{hero:true,"hero--light":this.theme==="light","hero--secondary":this.hasSecondaryContent,"hero--iconbox":this.hasIconBox,"hero--rtl":t,"hero--scrim":this.hasScrim,"hero--legacy":this.isLegacy,"hero--breadcrumb":!!this.breadCrumbs.length,"hero--hasbg":this.hasBg,"hero--backbtn":this.hasBackBtn,"hero--sub":this.level==="sub"}},e("div",{class:"hero__bg-wrap"},!!this.imgSrc&&e("nano-img",{class:"hero__img",lazy:false,background:true,srcSet:this.imgSrcSet,src:this.imgSrc},e(this.HeroContent,null)),!this.imgSrc&&[e("div",{class:"hero__bg-slot"},e("slot",{name:"background"})),e(this.HeroContent,null)]))};Object.defineProperty(t.prototype,"host",{get:function(){return r(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{breadCrumbs:["breadCrumbChange"],iconBoxItems:["iconBoxItemChange"]}},enumerable:false,configurable:true});return t}());s.style=n}}}));
-//# sourceMappingURL=p-f2b2cd38.system.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/hero/hero.scss?tag=nano-hero&encapsulation=shadow","src/components/hero/hero.tsx"],"names":["heroCss","Hero","exports","class_1","hostRef","_this","this","isLegacy","imgSrcSet","largeScreenBP","theme","level","HeroContent","hasIconBox","hasCtas","h","class","name","xlCols","xlSize","gridStates","hasSecondaryContent","hasQuote","prototype","breadCrumbChange","breadCrumbs","filter","crumb","tagName","nextElementSibling","classList","contains","forEach","insertAdjacentHTML","iconBoxItemChange","iconBoxItems","item","remove","length","add","slotChangeObserver","mo","disconnect","MutationObserver","processSlottedContent","observe","host","childList","querySelector","Array","from","querySelectorAll","hasScrim","hasBg","imgSrc","hasBackBtn","connectedCallback","hasShadowDom","disconnectedCallback","componentDidLoad","componentWillLoad","render","rtl","dir","ownerDocument","hero","hero--light","hero--secondary","hero--iconbox","hero--rtl","hero--scrim","hero--legacy","hero--breadcrumb","hero--hasbg","hero--backbtn","hero--sub","lazy","background","srcSet","src"],"mappings":";;;gMAAA,IAAMA,EAAU,+nOC+BHC,EAAIC,EAAA,YAAA,WALjB,SAAAC,EAAAC,GAAA,IAAAC,EAAAC,eAOUA,KAAAC,SAAW,MA4CXD,KAAAE,UAAqB,KAGrBF,KAAAG,cAAwB,IAGxBH,KAAAI,MAA0B,OAG1BJ,KAAAK,MAAuB,MAiDvBL,KAAAM,YAAc,WACpB,MAAO,EACJP,EAAKQ,YAAcR,EAAKS,QACvBC,EAAA,MAAA,CAAKC,MAAM,cACTD,EAAA,OAAA,CAAME,KAAK,oBACP,GAIRF,EAAA,MAAA,CAAKC,MAAM,eACTD,EAAA,OAAA,CAAME,KAAK,WAEbF,EAAA,YAAA,CAAWC,MAAM,gBAAgBE,OAAQ,EAAGC,OAAQd,EAAKI,eACvDM,EAAA,iBAAA,CAAgBK,WAAW,iBACzBL,EAAA,MAAA,CAAKC,MAAM,qBACTD,EAAA,OAAA,CAAME,KAAK,iBAGfF,EAAA,iBAAA,CACEK,WACEf,EAAKgB,oBACD,8CACA,+CAGNN,EAAA,MAAA,CAAKC,MAAM,iBACTD,EAAA,MAAA,CAAKC,MAAM,yBACTD,EAAA,OAAA,CAAME,KAAK,aACXF,EAAA,MAAA,KACEA,EAAA,OAAA,CAAME,KAAK,wBAKlBZ,EAAKgB,qBACJN,EAAA,iBAAA,CAAgBK,WAAW,+CACzBL,EAAA,MAAA,CAAKC,MAAM,mBACTD,EAAA,OAAA,CAAME,KAAK,sBACVZ,EAAKQ,YACJE,EAAA,MAAA,CAAKC,MAAM,kBACTD,EAAA,OAAA,CAAME,KAAK,aACXF,EAAA,OAAA,CAAME,KAAK,mBAGdZ,EAAKiB,UACJP,EAAA,MAAA,CAAKC,MAAM,uBACTD,EAAA,OAAA,CAAMC,MAAM,eACVD,EAAA,OAAA,CAAME,KAAK,WAEbF,EAAA,MAAA,CAAKC,MAAM,sBACTD,EAAA,OAAA,CAAME,KAAK,wBA3I7Bd,EAAAoB,UAAAC,iBAAA,WAEElB,KAAKmB,YACFC,QACC,SAACC,GACC,OAAAA,EAAMC,UAAY,MACjBD,EAAME,mBAAmBC,UAAUC,SAAS,YAEhDC,SAAQ,SAACL,GACRA,EAAMM,mBACJ,WACA,sDAMR9B,EAAAoB,UAAAW,kBAAA,WACE5B,KAAK6B,aAAaH,SAAQ,SAACI,GAAS,OAAAA,EAAKN,UAAUO,OAAO,WAC1D,GACE/B,KAAK6B,aAAa7B,KAAK6B,aAAaG,OAAS,IAC7ChC,KAAK6B,aAAa7B,KAAK6B,aAAaG,OAAS,GAAGR,UAEhDxB,KAAK6B,aAAa7B,KAAK6B,aAAaG,OAAS,GAAGR,UAAUS,IAAI,SAmB1DpC,EAAAoB,UAAAiB,mBAAA,WAAA,IAAAnC,EAAAC,KACN,GAAIA,KAAKmC,GAAInC,KAAKmC,GAAGC,aACrB,IAAMD,EAAMnC,KAAKmC,GAAK,IAAIE,kBAAiB,WACzC,OAAAtC,EAAKuC,2BAEPH,EAAGI,QAAQvC,KAAKwC,KAAM,CAAEC,UAAW,QAG7B5C,EAAAoB,UAAAqB,sBAAA,WACNtC,KAAKQ,UAAYR,KAAKwC,KAAKE,cAAc,2BACzC1C,KAAK6B,aAAec,MAAMC,KACxB5C,KAAKwC,KAAKK,iBAAiB,2BAE7B7C,KAAKO,aACDP,KAAKwC,KAAKE,cAAc,wBACxB1C,KAAK6B,aAAaG,OACtBhC,KAAK8C,WAAa9C,KAAKwC,KAAKE,cAAc,kBAC1C1C,KAAKmB,YAAcwB,MAAMC,KACvB5C,KAAKwC,KAAKK,iBAAiB,wBAE7B7C,KAAKe,sBACDf,KAAKwC,KAAKE,cAAc,wBACxB1C,KAAKwC,KAAKE,cAAc,qBACxB1C,KAAKwC,KAAKE,cAAc,6BACxB1C,KAAKwC,KAAKE,cAAc,8BAC5B1C,KAAK+C,QACD/C,KAAKwC,KAAKE,cAAc,0BAA4B1C,KAAKgD,OAC7DhD,KAAKiD,aAAejD,KAAKwC,KAAKE,cAAc,qBAC5C1C,KAAKgB,WAAahB,KAAKwC,KAAKE,cAAc,mBAG5C7C,EAAAoB,UAAAiC,kBAAA,WACElD,KAAKC,UAAYkD,EAAanD,KAAKwC,OAGrC3C,EAAAoB,UAAAmC,qBAAA,WACE,GAAIpD,KAAKmC,GAAInC,KAAKmC,GAAGC,cAGvBvC,EAAAoB,UAAAoC,iBAAA,WACErD,KAAKkC,sBAGPrC,EAAAoB,UAAAqC,kBAAA,WACEtD,KAAKsC,yBAgEPzC,EAAAoB,UAAAsC,OAAA,WACE,IAAMC,EACJxD,KAAKwC,KAAKiB,MAAQ,OACjBzD,KAAKwC,KAAKkB,cAA2BD,MAAQ,MAEhD,OACEhD,EAAA,MAAA,CACEC,MAAO,CACLiD,KAAM,KACNC,cAAe5D,KAAKI,QAAU,QAC9ByD,kBAAmB7D,KAAKe,oBACxB+C,gBAAiB9D,KAAKO,WACtBwD,YAAaP,EACbQ,cAAehE,KAAK8C,SACpBmB,eAAgBjE,KAAKC,SACrBiE,qBAAsBlE,KAAKmB,YAAYa,OACvCmC,cAAenE,KAAK+C,MACpBqB,gBAAiBpE,KAAKiD,WACtBoB,YAAarE,KAAKK,QAAU,QAG9BI,EAAA,MAAA,CAAKC,MAAM,mBACNV,KAAKgD,QACNvC,EAAA,WAAA,CACEC,MAAM,YACN4D,KAAM,MACNC,WAAU,KACVC,OAAQxE,KAAKE,UACbuE,IAAKzE,KAAKgD,QAEVvC,EAACT,KAAKM,YAAW,QAGnBN,KAAKgD,QAAU,CACfvC,EAAA,MAAA,CAAKC,MAAM,iBACTD,EAAA,OAAA,CAAME,KAAK,gBAEbF,EAACT,KAAKM,YAAW,sSA1MZ","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n\n:host {\n  /**\n   * @prop --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;\n   * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;\n   * @prop --theme-color: Text color. Default depends on theme;\n   * @prop --theme-tint-color: Color used for bread crumbs and icons. Defaults to #{$color-lightblue};\n   * @prop --scrim-color: Color of the gradient covering the background. Default depends on theme;\n   * @prop --scrim-direction: Direction of the gradient covering the background. Default what content slots are present;\n   * @prop --scrim-opacity-from: Starting opactiy of the gradient covering the background. Default .25;\n   * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;\n  */\n\n  display: block;\n\n  --nano-loader-base: #{$color-black};\n  --nano-loader-tint: #{lighten($color-black, 20%)};\n  --theme-color: #{$color-white};\n  --theme-tint-color: #{$color-lightblue};\n  --scrim-color: 0, 0, 0;\n  --scrim-direction: 90deg;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 0.7;\n  --padding: 0;\n\n  color: var(--theme-color);\n}\n\n:host([theme='light']) {\n  --nano-loader-base: #{$color-white};\n  --nano-loader-tint: #{lighten($color-white, 20%)};\n  --theme-color: #{$color-black};\n  --scrim-color: 255, 255, 255;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 1;\n  --scrim-direction: 270deg;\n\n  color: var(--theme-color);\n\n  .hero__primary-content {\n    --color: #{$color-black};\n  }\n}\n\n.hero {\n  position: relative;\n\n  &--rtl {\n    --scrim-direction: 270deg;\n  }\n\n  &--secondary:not(.hero--iconbox) {\n    --scrim-direction: 0deg;\n  }\n\n  &__bg-wrap {\n    overflow: hidden;\n  }\n\n  &__bg-slot {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n  }\n\n  &__ctas {\n    @media (max-width: 52em) {\n      display: none;\n    }\n\n    @media (max-width: 58em) {\n      margin-bottom: -48px;\n    }\n\n    display: flex;\n    justify-content: flex-end;\n    padding: 32px 32px 0;\n    margin-bottom: -64px;\n    position: relative;\n    z-index: 1;\n\n    ::slotted(a.button[slot='secondary-ctas']),\n    &::slotted(a.button[slot='secondary-ctas']) {\n      padding: 0.25rem 0.5rem !important;\n      font-size: 0.875rem !important;\n      margin: 0 0.25rem !important;\n    }\n  }\n\n  &__img {\n    display: block;\n\n    --padding: inherit;\n  }\n\n  &__breadcrumbs {\n    display: none;\n    margin: 20px 14px 0;\n    line-height: 14px;\n\n    .hero--breadcrumb & {\n      display: block;\n    }\n\n    .is-xl & {\n      margin: 0 50px;\n      max-width: 50%;\n    }\n\n    .is-xxl & {\n      margin: 0 83px;\n    }\n\n    ::slotted(*[slot='breadcrumb']),\n    &::slotted(*[slot='breadcrumb']) {\n      font-size: 0.85rem;\n      text-transform: uppercase;\n      letter-spacing: 1.5px;\n      font-weight: 600;\n      font-stretch: 125%;\n      display: inline-block;\n      margin-bottom: 16px;\n      position: relative;\n      z-index: 2;\n\n      .hero--hasbg & {\n        text-shadow: 1px 1px rgb(0 0 0 / 15%);\n      }\n    }\n\n    ::slotted(a[slot='breadcrumb']),\n    &::slotted(a[slot='breadcrumb']) {\n      color: var(--theme-tint-color) !important;\n      cursor: pointer;\n    }\n\n    ::slotted(.slash[slot='breadcrumb']),\n    &::slotted(.slash[slot='breadcrumb']) {\n      color: var(--theme-color);\n      position: relative;\n      margin: 0 0.5rem;\n      display: inline-block;\n    }\n  }\n\n  &__scrim {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    top: 0;\n    z-index: 0;\n    background:\n      linear-gradient(\n        var(--scrim-direction),\n        rgba(var(--scrim-color), var(--scrim-opacity-from)) 0%,\n        rgba(var(--scrim-color), var(--scrim-opacity-to)) 100%\n      );\n\n    .hero--scrim & {\n      background: none;\n    }\n  }\n\n  &__content {\n    max-width: 1440px;\n\n    --grid-row-gap: 0;\n\n    margin: 0 auto;\n    position: relative;\n\n    &.is-xl {\n      margin-top: 50px;\n      max-width: 1540px;\n    }\n\n    &.is-xxl {\n      margin-top: 83px;\n      max-width: 1606px;\n    }\n  }\n\n  &__primary {\n    margin: 16px;\n\n    .hero--breadcrumb & {\n      margin: 0 16px;\n    }\n\n    .hero--backbtn & {\n      margin-left: 0;\n    }\n\n    ::slotted(nano-icon-button[slot='back-btn']),\n    &::slotted(nano-icon-button[slot='back-btn']) {\n      font-size: 2rem;\n    }\n\n    .is-xl & {\n      margin: 0 0 50px 50px;\n\n      ::slotted(nano-icon-button[slot='back-btn']),\n      &::slotted(nano-icon-button[slot='back-btn']) {\n        @include margin(0, 0, 0, -3rem);\n      }\n    }\n\n    .is-xxl & {\n      margin: 0 0 83px 83px;\n    }\n  }\n\n  &__primary-content {\n    max-width: 45rem;\n\n    --color: #fff;\n\n    display: flex;\n\n    .hero--backbtn & {\n      > div {\n        padding: 10px 0 0 0;\n      }\n    }\n\n    ::slotted(h1[slot='primary-content']),\n    &::slotted(h1[slot='primary-content']) {\n      line-height: 26px !important;\n      margin-top: 0 !important;\n      margin-bottom: 18px !important;\n      font-size: 2rem !important;\n    }\n\n    .is-xl & {\n      ::slotted(h1[slot='primary-content']),\n      &::slotted(h1[slot='primary-content']) {\n        line-height: 31px !important;\n        margin-bottom: 30px !important;\n      }\n\n      ::slotted(.button[slot='primary-content']),\n      &::slotted(.button[slot='primary-content']) {\n        margin-top: 20px !important;\n      }\n    }\n  }\n\n  &__secondary {\n    display: none;\n    height: 100%;\n    padding: 0 14px 20px;\n\n    .hero--secondary & {\n      display: flex;\n      align-items: center;\n    }\n\n    .is-xl & {\n      padding: 0 50px 50px;\n      justify-content: flex-end;\n    }\n\n    .is-xxl & {\n      padding: 0 83px 83px;\n    }\n  }\n\n  &__icon-box {\n    background: rgba(0, 0, 0, 0.7);\n    padding: 24px;\n    width: 100%;\n    margin-bottom: auto;\n    display: flex;\n    flex-direction: column;\n    color: white;\n\n    .is-xl & {\n      max-width: 410px;\n      flex: 0 1 410px;\n    }\n\n    // for silly IE\n    &::slotted([slot='icon-box-item'] nano-icon) {\n      color: var(--theme-tint-color);\n\n      --nano-icon-size: 32px;\n      --nano-icon-margin-end: 20px;\n    }\n\n    ::slotted([slot='icon-box-item']) {\n      --nano-color-base: var(--theme-tint-color);\n      --nano-icon-size: 32px;\n      --nano-icon-margin-end: 20px;\n\n      display: flex;\n      align-items: center;\n      font-size: 0.8125rem;\n      margin-bottom: 20px;\n    }\n\n    ::slotted(.last[slot='icon-box-item']),\n    &::slotted(.last[slot='icon-box-item']) {\n      margin-bottom: 0;\n    }\n  }\n\n  &__quote-content {\n    margin-top: auto;\n    text-align: center;\n    width: 100%;\n\n    .is-xl & {\n      max-width: 500px;\n      flex: 0 1 500px;\n      text-align: initial;\n    }\n  }\n\n  &__quote {\n    &::before,\n    &::after {\n      content: '\"';\n      font-size: 2.5rem;\n      font-weight: 700;\n      font-style: italic;\n      color: #abb6b8;\n      display: inline;\n    }\n\n    ::slotted([slot='quote']),\n    &::slotted([slot='quote']) {\n      font-size: 32px;\n      font-weight: 300;\n      font-style: italic;\n      display: inline;\n\n      .is-xl & {\n        font-size: 42px;\n      }\n    }\n  }\n\n  &__quote-author {\n    text-align: right;\n    text-align: end;\n    font-size: 1rem;\n    opacity: 0.8;\n  }\n\n  &--sub {\n    .hero__content.is-xl {\n      margin-top: 40px;\n\n      .hero__primary {\n        margin: 0 0 40px 50px;\n      }\n\n      .hero__secondary {\n        padding: 0 50px 50px 40px;\n      }\n\n      ::slotted(.button[slot='primary-content']),\n      &::slotted(.button[slot='primary-content']) {\n        margin-top: 8px !important;\n      }\n\n      ::slotted(h1[slot='primary-content']),\n      &::slotted(h1[slot='primary-content']) {\n        margin-bottom: 18px !important;\n      }\n    }\n\n    .hero__content.is-xxl {\n      .hero__primary {\n        margin: 0 0 40px 83px;\n      }\n\n      .hero__secondary {\n        padding: 0 83px 83px 40px;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  h,\n  ComponentInterface,\n  VNode,\n  State,\n  Element,\n  Watch,\n} from '@stencil/core';\nimport { hasShadowDom } from '../../utils';\n\n/**\n * Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.\n * @slot primary-content - title, leading paragraph and CTA\n * @slot breadcrumb - each individual bread crumb should be assigned seperately\n * @slot secondary-content - free form secondary content.\n * @slot icon-box - free form icon box container\n * @slot icon-box-item - seperate icon box items. Designed to contain 1 icon and 1 text element.\n * @slot secondary-ctas - CTAs. each individual button should be assigned seperately\n * @slot quote - quote content\n * @slot quote-author - quote author\n * @slot scrim - optional background overlay (e.g. faded colour or gradient)\n * @slot background - custom background. Only active when img-src is empty\n * @slot back-btn - a back button.\n */\n@Component({\n  tag: 'nano-hero',\n  styleUrl: 'hero.scss',\n  shadow: true,\n})\nexport class Hero implements ComponentInterface {\n  private mo?: MutationObserver;\n  private isLegacy = false;\n\n  @Element() host: HTMLNanoHeroElement;\n\n  @State() hasIconBox: boolean;\n  @State() hasScrim: boolean;\n  @State() hasSecondaryContent: boolean;\n  @State() hasQuote: boolean;\n  @State() hasBg: boolean;\n  @State() hasBackBtn: boolean;\n  @State() hasCtas: boolean;\n  @State() breadCrumbs: Element[];\n  @Watch('breadCrumbs')\n  breadCrumbChange() {\n    // safari doesn't support ::slotted()::after ... so this :/\n    this.breadCrumbs\n      .filter(\n        (crumb) =>\n          crumb.tagName === 'A' &&\n          !crumb.nextElementSibling.classList.contains('slash')\n      )\n      .forEach((crumb) => {\n        crumb.insertAdjacentHTML(\n          'afterend',\n          '<span slot=\"breadcrumb\" class=\"slash\">/</span>'\n        );\n      });\n  }\n  @State() iconBoxItems: Element[];\n  @Watch('iconBoxItems')\n  iconBoxItemChange() {\n    this.iconBoxItems.forEach((item) => item.classList.remove('last'));\n    if (\n      this.iconBoxItems[this.iconBoxItems.length - 1] &&\n      this.iconBoxItems[this.iconBoxItems.length - 1].classList\n    )\n      this.iconBoxItems[this.iconBoxItems.length - 1].classList.add('last');\n  }\n\n  /** src for backgronund image. For more control use the `background` slot instead. */\n  @Prop() imgSrc?: string;\n\n  /** Optional list string providing media sizes with corresponding image srcs.\n   * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` */\n  @Prop() imgSrcSet?: string = null;\n\n  /** The Break Point width that the hero component will change to the large view. Defaults to the XL grid size (900px) */\n  @Prop() largeScreenBP: number = 900;\n\n  /** Base style for the hero. Either 'light' (white bg / dark text), or 'dark' (dark bg / white text) */\n  @Prop() theme: 'dark' | 'light' = 'dark';\n\n  /** Set the content structure level of the hero. Defaults to 'top'  */\n  @Prop() level: 'top' | 'sub' = 'top';\n\n  private slotChangeObserver() {\n    if (this.mo) this.mo.disconnect();\n    const mo = (this.mo = new MutationObserver(() =>\n      this.processSlottedContent()\n    ));\n    mo.observe(this.host, { childList: true });\n  }\n\n  private processSlottedContent() {\n    this.hasCtas = !!this.host.querySelector('[slot=\"secondary-ctas\"]');\n    this.iconBoxItems = Array.from(\n      this.host.querySelectorAll('[slot=\"icon-box-item\"]')\n    );\n    this.hasIconBox =\n      !!this.host.querySelector('[slot=\"icon-box\"]') ||\n      !!this.iconBoxItems.length;\n    this.hasScrim = !!this.host.querySelector('[slot=\"scrim\"]');\n    this.breadCrumbs = Array.from(\n      this.host.querySelectorAll('[slot=\"breadcrumb\"]')\n    );\n    this.hasSecondaryContent =\n      !!this.host.querySelector('[slot=\"icon-box\"]') ||\n      !!this.host.querySelector('[slot=\"quote\"]') ||\n      !!this.host.querySelector('[slot=\"icon-box-item\"]') ||\n      !!this.host.querySelector('[slot=\"secondary-content\"]');\n    this.hasBg =\n      !!this.host.querySelector('[slot=\"background\"]') || !!this.imgSrc;\n    this.hasBackBtn = !!this.host.querySelector('[slot=\"back-btn\"]');\n    this.hasQuote = !!this.host.querySelector('[slot=\"quote\"]');\n  }\n\n  connectedCallback() {\n    this.isLegacy = !hasShadowDom(this.host);\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n  }\n\n  componentWillLoad() {\n    this.processSlottedContent();\n  }\n\n  private HeroContent = (): VNode[] => {\n    return [\n      !this.hasIconBox && this.hasCtas ? (\n        <div class=\"hero__ctas\">\n          <slot name=\"secondary-ctas\" />\n        </div>\n      ) : (\n        ''\n      ),\n      <div class=\"hero__scrim\">\n        <slot name=\"scrim\" />\n      </div>,\n      <nano-grid class=\"hero__content\" xlCols={2} xlSize={this.largeScreenBP}>\n        <nano-grid-item gridStates=\"xl-col-span-2\">\n          <div class=\"hero__breadcrumbs\">\n            <slot name=\"breadcrumb\" />\n          </div>\n        </nano-grid-item>\n        <nano-grid-item\n          gridStates={\n            this.hasSecondaryContent\n              ? 'xl-col-span-1 xl-col-start-1 xl-row-start-2'\n              : 'xl-col-span-2 xl-col-start-1 xl-row-start-2'\n          }\n        >\n          <div class=\"hero__primary\">\n            <div class=\"hero__primary-content\">\n              <slot name=\"back-btn\" />\n              <div>\n                <slot name=\"primary-content\" />\n              </div>\n            </div>\n          </div>\n        </nano-grid-item>\n        {this.hasSecondaryContent && (\n          <nano-grid-item gridStates=\"xl-col-span-1 xl-col-start-2 xl-row-start-2\">\n            <div class=\"hero__secondary\">\n              <slot name=\"secondary-content\" />\n              {this.hasIconBox && (\n                <div class=\"hero__icon-box\">\n                  <slot name=\"icon-box\" />\n                  <slot name=\"icon-box-item\" />\n                </div>\n              )}\n              {this.hasQuote && (\n                <div class=\"hero__quote-content\">\n                  <span class=\"hero__quote\">\n                    <slot name=\"quote\" />\n                  </span>\n                  <div class=\"hero__quote-author\">\n                    <slot name=\"quote-author\" />\n                  </div>\n                </div>\n              )}\n            </div>\n          </nano-grid-item>\n        )}\n      </nano-grid>,\n    ];\n  };\n\n  render() {\n    const rtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <div\n        class={{\n          hero: true,\n          'hero--light': this.theme === 'light',\n          'hero--secondary': this.hasSecondaryContent,\n          'hero--iconbox': this.hasIconBox,\n          'hero--rtl': rtl,\n          'hero--scrim': this.hasScrim,\n          'hero--legacy': this.isLegacy,\n          'hero--breadcrumb': !!this.breadCrumbs.length,\n          'hero--hasbg': this.hasBg,\n          'hero--backbtn': this.hasBackBtn,\n          'hero--sub': this.level === 'sub',\n        }}\n      >\n        <div class=\"hero__bg-wrap\">\n          {!!this.imgSrc && (\n            <nano-img\n              class=\"hero__img\"\n              lazy={false}\n              background\n              srcSet={this.imgSrcSet}\n              src={this.imgSrc}\n            >\n              <this.HeroContent />\n            </nano-img>\n          )}\n          {!this.imgSrc && [\n            <div class=\"hero__bg-slot\">\n              <slot name=\"background\" />\n            </div>,\n            <this.HeroContent />,\n          ]}\n        </div>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-System.register(["./p-59b3d24b.system.js","./p-b430a9b6.system.js","./p-b86fc6b7.system.js"],(function(e){"use strict";var t,n,i,a,s,l;return{setters:[function(e){t=e.r;n=e.h;i=e.e;a=e.g},function(e){s=e.i},function(e){l=e.r}],execute:function(){var r=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:block;-webkit-box-flex:1;-ms-flex:1 1 100%;flex:1 1 100%}.main-search{display:-webkit-box;display:-ms-flexbox;display:flex;background:white;font-size:14px;min-height:calc(100vh - 63px);-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.main-search__wrap{display:contents;height:100%}.main-search ul{margin:0;padding:0;list-style:none}.main-search li{margin:0;padding:0}.main-search button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:none}.main-search .icon-button{color:inherit;-ms-flex-item-align:normal;-ms-grid-row-align:normal;align-self:normal;padding:9px 7px;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.main-search__topbar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:1em}.main-search__topbar::after{content:"";width:calc(100% - 30px);left:30px;position:relative;border-bottom:1px solid #e5eef1;padding-top:0.9em}.main-search__applied-filters{border:solid 1px #e4e6e8;text-transform:uppercase;border-radius:3px;font-weight:bold;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:0.9;padding:5px 5px 0 5px;letter-spacing:2px;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:0.5rem}.main-search__applied-filters span{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}:host(.small) .main-search__applied-filters{display:none}.main-search__applied-nofilter{margin-left:0;margin-right:5px;margin-top:0;margin-bottom:3px;padding-left:7px;padding-right:7px;padding-top:10px;padding-bottom:10px;font-size:12px;color:rgba(69, 85, 86, 0.85)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-nofilter{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:5px;margin-inline-end:5px}}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-nofilter{padding-left:unset;padding-right:unset;-webkit-padding-start:7px;padding-inline-start:7px;-webkit-padding-end:7px;padding-inline-end:7px}}.main-search__applied-filter{padding-left:8px;padding-right:2px;padding-top:5px;padding-bottom:5px;margin-left:0;margin-right:5px;margin-top:0;margin-bottom:5px;color:#455556;font-size:11px;border-radius:2px;border:solid 1px rgba(0, 132, 169, 0.5);background-color:rgba(0, 132, 169, 0.2);line-height:1}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-filter{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:2px;padding-inline-end:2px}}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-filter{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:5px;margin-inline-end:5px}}.main-search__applied-filter .icon-button{padding-left:10px;padding-right:4px;padding-top:2px;padding-bottom:1px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-filter .icon-button{padding-left:unset;padding-right:unset;-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:4px;padding-inline-end:4px}}.main-search__applied-filter .icon-button nano-icon{pointer-events:none}.main-search .topbar__bkbtn{position:relative;left:-7px}:host(.small) .main-search .topbar__query{display:none}.main-search .topbar__filtering{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:1em;margin-right:0;margin-top:0;margin-bottom:0;-webkit-box-flex:1;-ms-flex:1;flex:1}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search .topbar__filtering{margin-left:unset;margin-right:unset;-webkit-margin-start:1em;margin-inline-start:1em;-webkit-margin-end:0;margin-inline-end:0}}.main-search .topbar__order{min-width:175px;max-width:200px;margin-left:auto;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search .topbar__order{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:0;margin-inline-end:0}}:host(.small) .main-search .topbar__order{max-width:300px}.main-search .topbar nano-select{opacity:1;-webkit-transition:0.1s ease opacity;transition:0.1s ease opacity}.main-search .topbar nano-select:not(.hydrated){opacity:0}.main-search .topbar__show-filters{margin-left:0.5em;margin-right:0;margin-top:0;margin-bottom:0;text-transform:uppercase;display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search .topbar__show-filters{margin-left:unset;margin-right:unset;-webkit-margin-start:0.5em;margin-inline-start:0.5em;-webkit-margin-end:0;margin-inline-end:0}}.main-search .topbar__show-filters nano-icon{font-size:20px}:host(.small) .main-search .topbar__show-filters{display:-webkit-box;display:-ms-flexbox;display:flex}.main-search .topbar__filter-count{width:12px;height:12px;-webkit-box-shadow:inset 0 3px 4px 0 rgba(0, 0, 0, 0.2);box-shadow:inset 0 3px 4px 0 rgba(0, 0, 0, 0.2);border:solid 1px #005c76;background-color:#005c76;color:white;font-size:7px;border-radius:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;line-height:1;margin-bottom:3px}.main-search__results{font-size:14px;padding:1em 40px;color:rgba(69, 85, 86, 0.85);width:70%;height:100%}@media (max-width: 576px){.main-search__results{padding:1em 20px}}:host(.small) .main-search__results{width:100%}.main-search__filters{outline:none;padding-left:0;padding-right:40px;padding-top:1.8em;padding-bottom:1em;-webkit-box-flex:1;-ms-flex:1 1 30%;flex:1 1 30%;-webkit-box-sizing:border-box;box-sizing:border-box}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__filters{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:40px;padding-inline-end:40px}}@media (max-width: 576px){.main-search__filters{padding-right:20px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__filters{padding-right:unset;-webkit-padding-end:20px;padding-inline-end:20px}}}:host(:not(.small)) .main-search__filters{max-width:350px;min-width:220px}.filters{color:#455556;background:white;font-size:14px}:host(.small) .filters{position:fixed;width:0;height:0;z-index:10;top:0;right:0;-webkit-transition:all 0s ease 0.5s;transition:all 0s ease 0.5s;background:none}:host(.small) .filters.show{height:100vh;width:100vw;-webkit-transition:all 0s ease 0s;transition:all 0s ease 0s}:host(.small) .filters.show::after{opacity:1}:host(.small) .filters::after{content:"";background:rgba(0, 0, 0, 0.5);position:absolute;left:0;top:0;right:0;bottom:0;z-index:-1;opacity:0;-webkit-transition:0.1s ease opacity;transition:0.1s ease opacity}.filters__close-filters{display:none !important;font-size:1.4em}:host(.small) .filters__close-filters{display:inline-block !important;margin-left:auto;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.small) .filters__close-filters{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:0;margin-inline-end:0}}:host(.small) .filters-wrap{position:absolute;top:0;right:0;background:#f7f6f6;-webkit-transform:translateX(100%);transform:translateX(100%);width:300px;min-width:200px;max-width:80vw;-webkit-transition:-webkit-transform 0.3s ease;transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease;transition:transform 0.3s ease, -webkit-transform 0.3s ease;padding:1em;color:black;overflow:auto;height:100vh}:host(.small) .filters.show .filters-wrap{-webkit-transform:translateX(0%);transform:translateX(0%);-webkit-box-shadow:-3px -3px 7px rgba(0, 0, 0, 0.1);box-shadow:-3px -3px 7px rgba(0, 0, 0, 0.1)}.filters ul{margin:0;padding:0;list-style:none}.filters li{margin:0;padding:0}.filters nano-details{--padding:0.8em;margin:0.8em 0}.filters nano-details strong[slot]{display:block;padding-left:calc(20px - 0.8em)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.filters nano-details strong[slot]{padding-left:unset;-webkit-padding-start:calc(20px - 0.8em);padding-inline-start:calc(20px - 0.8em);}}.filters nano-details nano-icon[slot=icon-end]{padding-left:calc(20px - 0.8em);padding-right:calc(20px - 0.8em)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.filters nano-details nano-icon[slot=icon-end]{padding-left:unset;padding-right:unset;-webkit-padding-start:calc(20px - 0.8em);padding-inline-start:calc(20px - 0.8em);-webkit-padding-end:calc(20px - 0.8em);padding-inline-end:calc(20px - 0.8em)}}.filters li:last-child .filter-label{margin-bottom:0}.filters .filter-label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;margin:0.5em 0;line-height:1.4;z-index:0}.filters .filter-label::before{margin-left:0;margin-right:1em;margin-top:0;margin-bottom:0;content:"";border:1px solid #007495;background:#fff;border-radius:3px;height:1em;width:1em;min-width:1em;min-height:1em;display:inline-block}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.filters .filter-label::before{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:1em;margin-inline-end:1em}}.filters .filter-label::after{background-image:url("data:image/svg+xml;charset=utf-8,<svg%20xmlns=\'http://www.w3.org/2000/svg\'%20viewBox=\'0%200%20512%20512\'><path%20fill=\'%23ffffff\'%20d=\'M173.898%20439.404l-166.4-166.4c-9.997-9.997-9.997-26.206%200-36.204l36.203-36.204c9.997-9.998%2026.207-9.998%2036.204%200L192%20312.69%20432.095%2072.596c9.997-9.997%2026.207-9.997%2036.204%200l36.203%2036.204c9.997%209.997%209.997%2026.206%200%2036.204l-294.4%20294.401c-9.998%209.997-26.207%209.997-36.204-.001z\'/></svg>");content:"";height:0.7em;width:0.7em;position:absolute;left:2px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:1;display:block;background-size:100%;background-position:center center;background-repeat:no-repeat}:host([dir=rtl]) .filters .filter-label::after{right:1px;left:auto}.filters .filter-cb{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.filters .filter-cb:checked+.filter-label::before{background:#245a6f}.filters .filter-cb:focus+.filter-label::before{-webkit-box-shadow:0 0 0 1px rgba(0, 0, 0, 0.7);box-shadow:0 0 0 1px rgba(0, 0, 0, 0.7)}.filters-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.filters-reset{color:#007495;font-size:12px;text-decoration:underline;margin-left:auto;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.filters-reset{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:0;margin-inline-end:0}}:host(.small) .filters-reset{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.filters-title{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;text-transform:uppercase;color:rgba(69, 85, 86, 0.85);font-weight:bold;font-size:14px}:host(.small) .filters-title{display:none}.result{text-decoration:none;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding-bottom:14px;border-bottom:1px solid #e4e6e8}.result *{word-wrap:break-word;word-break:break-word}.result__title{color:#007495;font-size:16px;line-height:1.43;margin:1em 0 0.5em 0;text-decoration:underline;width:70%;display:-webkit-box;display:-ms-flexbox;display:flex;font-weight:500}.result__title nano-icon{margin-left:0;margin-right:0.5em;margin-top:0;margin-bottom:0;min-width:20px;min-height:20px;opacity:0.8}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.result__title nano-icon{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0.5em;margin-inline-end:0.5em}}@media (max-width: 768px){.result__title{width:100%}}.result__body{color:#455556;font-size:14px;line-height:1.67;width:70%}@media (max-width: 768px){.result__body{width:100%}}.result__date{font-size:10px;line-height:1.6;color:#455556;text-align:right;margin:auto 0;width:30%}@media (max-width: 768px){.result__date{width:100%;margin:0.8em 0 0 0}}';var o=e("nano_global_search_results",function(){function e(e){t(this,e)}e.prototype.handleAlgoliaCredsChange=function(){if(!this.apiKey||!this.appId||!this.algoliaEle)return;this.algoliaEle.apiKey=this.apiKey;this.algoliaEle.appId=this.appId};e.prototype.handleAlgoliaIndexChange=function(){if(!this.index||!this.algoliaEle)return;this.algoliaEle.searchIndex=this.index};e.prototype.handleGlobalNavReset=function(e){if(e.target.tagName!=="NANO-GLOBAL-NAV")return;this.algoliaResultsEle=null;this.goback()};e.prototype.handleGlobalNavSearch=function(e){if(e.target.tagName!=="NANO-GLOBAL-NAV")return;var t=e.detail,n=t.results,i=t.client;var a=n.find((function(e){return e.selected}));this.apiKey=i.apiKey;this.appId=i.appId;this.index={name:a.indexName,index:a.index,domain:a.domain,filters:a.filters};this.algoliaEle.query=a.query};e.prototype.handleReorder=function(e){if(e.composedPath().find((function(e){return e.classList&&e.classList.contains("indexchange")}))&&!!this.algoliaResultsEle){this.changeOrder(e)}};e.prototype.attachListeners=function(e){var t=this;if(!e.composedPath().find((function(e){return e.id&&e.id==="main-search"})))return;this.algoliaResultsEle=this.algoliaEle.querySelector("#main-search-results");this.attachResultListeners();this.algoliaEle.querySelectorAll(".filters-reset").forEach((function(e){e.addEventListener("click",(function(){t.removeAllFilters()}))}));this.algoliaEle.querySelectorAll(".close-filters").forEach((function(e){e.addEventListener("click",(function(){t.closefilters()}))}));var n=this.algoliaEle.querySelector(".filters-wrap");if(n){n.addEventListener("click",(function(e){e.stopPropagation()}))}this.filtersDiv=this.algoliaEle.querySelector("#main-search-filters")};e.prototype.attachResultListeners=function(e){var t=this;if(e&&e.composedPath().find((function(e){return e===t.algoliaEle}))){this.algoliaResultsEle=this.algoliaEle.querySelector("nano-algolia-results")}if(!this.algoliaResultsEle)return;var n=this.algoliaResultsEle;n.querySelectorAll(".remove-filter").forEach((function(e){e.addEventListener("click",(function(e){var n=e.target;t.removeFilter(n.dataset.filter,n.dataset.filterVal)}))}));n.querySelectorAll(".back-btn").forEach((function(e){e.addEventListener("click",(function(){t.goback()}))}));n.querySelectorAll(".topbar__show-filters").forEach((function(e){t.openFilterBtn=e;e.addEventListener("click",(function(){t.filtersDiv.tabIndex=-1;t.filtersDiv.classList.add("show");t.filtersDiv.setAttribute("aria-expanded","true");document.body.style.overflow="hidden";setTimeout((function(){return t.filtersDiv.focus()}),20)}))}))};e.prototype.changeOrder=function(e){this.algoliaEle.replicaIndex=e.detail.value};e.prototype.goback=function(){this.removeAllFilters();this.algoliaEle.showResults=false;this.algoliaEle.query=""};e.prototype.removeFilter=function(e,t){this.algoliaEle.removeFilters(e,t)};e.prototype.removeAllFilters=function(){this.algoliaEle.removeFilters()};e.prototype.closefilters=function(){var e=this;if(!this.filtersDiv)return;this.filtersDiv.tabIndex=null;this.filtersDiv.classList.remove("show");this.filtersDiv.setAttribute("aria-expanded","false");document.body.style.overflow="";setTimeout((function(){return e.openFilterBtn.focus()}),20)};e.prototype.componentDidLoad=function(){var e=this;this.ro=new s((function(t){for(var n=0,i=t;n<i.length;n++){var a=i[n];if(!a.contentRect.width)return;e.currentWidth=a.contentRect.width}}));this.ro.observe(this.el);this.algoliaEle.filters=["created > "+Math.floor((Date.now()-631152e5)/1e3)]};e.prototype.render=function(){var e=this;return n(i,{class:{small:this.currentWidth<577},dir:this.el.ownerDocument.dir==="rtl"?"rtl":false},n("nano-algolia",{"store-id":"searchq","store-method":"url-hash-push",class:"main-search__wrap sc-nano-global-search-results",ref:function(t){return l((function(){return e.algoliaEle=t}))},id:"main-search"},n("script",{type:"text/template",slot:"template"},'<div class="main-search sc-nano-global-search-results">\n              <nano-algolia-results id="main-search-results" class="main-search__results sc-nano-global-search-results" infinite-scroll>\n                <script type="text/template" slot="start-template">\n                  <div class="sc-nano-global-search-results main-search__topbar topbar">\n                    <button class="sc-nano-global-search-results topbar__bkbtn back-btn icon-button">\n                      <nano-icon class="sc-nano-global-search-results" name="light/chevron-left" size="small"></nano-icon>\n                    </button>\n                    <div>\n                      <em class="sc-nano-global-search-results topbar__query">\'{{ it.query }}\' - </em> <strong>{{ it.totalHitsWithFilters }}</strong> Results\n                    </div>\n\n                    <div class="sc-nano-global-search-results topbar__filtering">\n                      {{ @if (it.results.length) }}\n\n                      {{ @if (it.indexName === \'All\') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--www indexchange" value="{{ it.index }}" hide-label="true" label="Sort order" show-inline-error="false">\n                          <option value="all_prod_en">Sort by: Most relevant</option>\n                          <option value="all_prod_en_date_desc">Sort by: Newest</option>\n                          <option value="all_prod_en_date_asc">Sort by: Oldest</option>\n                          <option value="all_prod_en_activity_date_desc">Sort by: Recent activity</option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === \'www\') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--www indexchange" value="{{ it.index }}" hide-label="true" label="Sort order" show-inline-error="false">\n                          <option value="cws_english_en">Sort by: Most relevant</option>\n                          <option value="cws_english_en_date_desc">Sort by: Newest</option>\n                          <option value="cws_english_en_date_asc">Sort by: Oldest</option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === \'Resources\') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--www indexchange" value="{{ it.index }}" hide-label="true" label="Sort order" show-inline-error="false">\n                          <option value="cws_english_resources_en">Sort by: Most relevant</option>\n                          <option value="cws_english_resources_en_featured_desc">Sort by: Newest</option>\n                          <option value="cws_english_resources_en_featured_asc">Sort by: Oldest</option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === \'Store\') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--www indexchange" value="{{ it.index }}" hide-label="true" label="Sort order" show-inline-error="false">\n                          <option value="store_prod">Sort by: Most relevant</option>\n                          <option value="store_prod_date_desc">Sort by: Newest</option>\n                          <option value="store_prod_date_asc">Sort by: Oldest</option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === \'Community\') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--community indexchange" value="{{ it.index }}" hide-label="true" label="Sort order" show-inline-error="false">\n                          <option value="community_prod">Sort by: Most relevant</option>\n                          <option value="community_prod_date_desc">Sort by: Newest</option>\n                          <option value="community_prod_date_asc">Sort by: Oldest</option>\n                          <option value="community_prod_activity_date_desc">Sort by: Recent activity</option>\n                        </nano-select>\n                        {{ /if }}\n                      {{ /if }}\n\n                      <button class="sc-nano-global-search-results topbar__show-filters filters-title" aria-controls="main-search-filters">\n                        {{ @if (it.appliedFilters && it.appliedFilters.length > 0) }}\n                          <span class="sc-nano-global-search-results topbar__filter-count">\n                            {{ (it.appliedFilters.reduce(function(a, b) { return a + (b.values ? b.values.length : 0) }, 0)) }}\n                          </span>\n                        {{ /if }}\n                        <nano-icon class="sc-nano-global-search-results" name="light/filter"></nano-icon>\n                      </button>\n                    </div>\n                  </div>\n\n                  {{ @if (it.results.length) }}\n                    <div class="sc-nano-global-search-results main-search__applied-filters">\n                      {{ @if (it.appliedFilters) }}\n                        {{ @each(it.appliedFilters) => filterObj }}\n                          {{ @each(filterObj.values) => filterVal }}\n                            <span class="sc-nano-global-search-results main-search__applied-filter">\n                              {{ filterVal | public_name }}\n                              <button class="sc-nano-global-search-results icon-button remove-filter" data-filter="{{ filterObj.name }}" data-filter-val="{{ filterVal }}">\n                                <nano-icon class="sc-nano-global-search-results" name="light/times"></nano-icon>\n                              </button>\n                            </span>\n                          {{ /each }}\n                        {{ /each }}\n                      {{ #else }}\n                        <span class="sc-nano-global-search-results main-search__applied-nofilter">&nbsp;</span>\n                      {{ /if }}\n                    </div>\n                  {{ /if }}\n                <\/script>\n\n                <script type="text/template" slot="result-template">\n                  {{ @if (it.totalHitsWithFilters > 0) }}\n                    {{ @each(it.results) => result }}\n                      <li class="sc-nano-global-search-results">\n                        <a class="sc-nano-global-search-results result" href="{{ result.url | abs_url(it, result) }}">\n                          <h4 class="sc-nano-global-search-results result__title" data-icon-set="{{(iconSet = false)}}">\n                            {{ @if (!it.legacy)  }}\n\n                              {{ @if (result.type === \'faq\' || result.type === \'faqs\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/question-circle"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'comment\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/comment"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'protocol\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/clipboard-list"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'publication\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/file-chart-line"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'poster\' || result.type === \'lc_poster\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/presentation"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'post\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/comments"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'news_item\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/newspaper"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'event\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/calendar"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'talk\' || result.type === \'lc_lightning_talk\' || result.type === \'ncm_plenary_talk\' || result.type === \'ncm_lightning_talk\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/keynote"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'video\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/video"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'data_release\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/analytics"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'job_vacancy\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/ballot-check"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'tool\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/wrench"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'literature\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/book"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'community_info\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/users"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'article\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/file-alt"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'provider\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/handshake"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'apps\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/vials"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'white_paper\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/file-pdf"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'Nanopore Store\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/shopping-cart"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (!result.type || !iconSet) }}\n                                <nano-icon  class="sc-nano-global-search-results" name="light/file"></nano-icon>\n                              {{ /if }}\n                            {{ /if }}\n                            {{ result.title | safe }}\n                          </h4>\n                          {{ @if (result.body) }}\n                            <div class="sc-nano-global-search-results result__body">{{ result.body | safe | trim_to(200) }}</div>\n                          {{ /if }}\n                          {{ @if (result.updated) }}\n                            <div class="sc-nano-global-search-results result__date">Last Updated: {{ result.updated | date_short }}</div>\n                          {{ #else }}\n                            {{ @if (result.created) }}\n                              <div class="sc-nano-global-search-results result__date">Added: {{ result.created | date_short }}</div>\n                            {{ /if }}\n                          {{ /if }}\n                        </a>\n                      </li>\n                    {{ /each }}\n                  {{ /if }}\n                <\/script>\n\n                <div slot="start-output"></div>\n                <ul slot="result-output" class="sc-nano-global-search-results"></ul>\n              </nano-algolia-results>\n\n              {{ @if(Object.keys(it.origFilters).length) }}\n                <div class="sc-nano-global-search-results main-search__filters filters close-filters" id="main-search-filters">\n                  <div class="sc-nano-global-search-results filters-wrap">\n                    {{ @if(it.totalHits) }}\n                      <div class="sc-nano-global-search-results filters-header">\n                        <strong class="sc-nano-global-search-results filters-title">Filters</strong>\n                        <button class="sc-nano-global-search-results filters-reset">Reset</button>\n                        <button class="sc-nano-global-search-results filters__close-filters close-filters icon-button" aria-controls="main-search-filters">\n                          <nano-icon class="sc-nano-global-search-results" name="light/times"></nano-icon>\n                        </button>\n                      </div>\n                    {{ /if }}\n\n                    <div>\n                      {{ @if(it.origFilters[\'type\']) }}\n                        <nano-details class="sc-nano-global-search-results" open={true} icon-rotation="180">\n                          <strong slot="label">Type</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf1" store-method="url-hash-push" filter-name="type">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                <input class="sc-nano-global-search-results filter-cb" type="checkbox" value="{{ filter }}" id="type-{{ filter }}-{{x}}" />\n                                <label class="sc-nano-global-search-results filter-label" for="type-{{ filter }}-{{x}}">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters[\'channel\']) }}\n                        <nano-details open={true} icon-rotation="180">\n                          <strong slot="label">Channels</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf2" store-method="url-hash-push" filter-name="channel">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter }}" id="channel-{{ filter }}-{{x}}" />\n                                <label class="filter-label sc-nano-global-search-results" for="channel-{{ filter }}-{{x}}">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters[\'authors\']) }}\n                        <nano-details open={true} icon-rotation="180">\n                          <strong slot="label">Authors</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf3" store-method="url-hash-push" filter-name="authors">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter }}" id="authors-{{ filter }}-{{x}}" />\n                                <label class="filter-label sc-nano-global-search-results" for="authors-{{ filter }}-{{x}}">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters[\'categories_without_path\']) }}\n                        <nano-details open={true} icon-rotation="180">\n                          <strong slot="label">Category</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf4" store-method="url-hash-push" filter-name="categories_without_path">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                {{ @if(!filter.match(/publication/)) }}\n                                  <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                  <input class="sc-nano-global-search-results filter-cb" type="checkbox" value="{{ filter }}" id="cwp-{{ filter }}-{{x}}" />\n                                  <label class="sc-nano-global-search-results filter-label" for="cwp-{{ filter }}-{{x}}">\n                                    <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                  </label></li>\n                                {{ /if }}\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters[\'tags\']) }}\n                        <nano-details open={true} icon-rotation="180">\n                          <strong slot="label">Tags</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf5" store-method="url-hash-push" filter-name="tags">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter }}" id="tags-{{ filter }}-{{x}}" />\n                                <label class="filter-label sc-nano-global-search-results" for="tags-{{ filter }}-{{x}}">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n                    </div>\n                  </div>\n                </div>\n              {{ /if }}\n            </div>'),n("div",{slot:"output"}),n("slot",null)))};Object.defineProperty(e.prototype,"el",{get:function(){return a(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{algoliaEle:["handleAlgoliaCredsChange","handleAlgoliaIndexChange"],apiKey:["handleAlgoliaCredsChange"],appId:["handleAlgoliaCredsChange"],index:["handleAlgoliaIndexChange"]}},enumerable:false,configurable:true});return e}());o.style=r}}}));
-//# sourceMappingURL=p-fcb5ffaf.system.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/global-search-results/global-search-results.scss?tag=nano-global-search-results&encapsulation=shadow","src/components/global-search-results/global-search-results.tsx"],"names":["globalSearchResultsCss","GlobalSearchResults","exports","class_1","prototype","handleAlgoliaCredsChange","this","apiKey","appId","algoliaEle","handleAlgoliaIndexChange","index","searchIndex","handleGlobalNavReset","e","target","tagName","algoliaResultsEle","goback","handleGlobalNavSearch","_a","detail","results","client","result","find","selected","name","indexName","domain","filters","query","handleReorder","composedPath","ele","classList","contains","changeOrder","attachListeners","_this","id","querySelector","attachResultListeners","querySelectorAll","forEach","item","addEventListener","removeAllFilters","closefilters","filterWrap","stopPropagation","filtersDiv","el","resultEle","clickEv","filter","removeFilter","dataset","filterVal","openFilterBtn","tabIndex","add","setAttribute","document","body","style","overflow","setTimeout","focus","ev","replicaIndex","value","showResults","facet","removeFilters","remove","componentDidLoad","ro","ResizeObserver","entries","_i","entries_1","length","entry","contentRect","width","currentWidth","observe","Math","floor","Date","now","render","h","Host","class","small","dir","ownerDocument","store-id","store-method","ref","raf","type","slot"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n\n:host {\n  display: block;\n  flex: 1 1 100%;\n}\n\n.main-search {\n  display: flex;\n  background: white;\n  font-size: 14px;\n  min-height: calc(100vh - 63px);\n  justify-content: space-between;\n\n  &__wrap {\n    /* autoprefixer: ignore next */\n    display: contents;\n    height: 100%;\n  }\n\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  li {\n    margin: 0;\n    padding: 0;\n  }\n\n  button {\n    appearance: none;\n    border: none;\n    background: none;\n  }\n\n  .icon-button {\n    color: inherit;\n    align-self: normal;\n    padding: 9px 7px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n  }\n\n  &__topbar {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    margin-bottom: 1em;\n\n    &::after {\n      content: '';\n      width: calc(100% - 30px);\n      left: 30px;\n      position: relative;\n      border-bottom: 1px solid #e5eef1;\n      padding-top: 0.9em;\n    }\n  }\n\n  &__applied-filters {\n    border: solid 1px $color-lightgrey;\n    text-transform: uppercase;\n    border-radius: 3px;\n    font-weight: bold;\n    display: flex;\n    align-items: center;\n    line-height: 0.9;\n    padding: 5px 5px 0 5px;\n    letter-spacing: 2px;\n    flex-wrap: wrap;\n    margin-bottom: 0.5rem;\n\n    span {\n      display: flex;\n      align-items: center;\n    }\n\n    :host(.small) & {\n      display: none;\n    }\n  }\n\n  &__applied-nofilter {\n    @include margin(0, 5px, 3px, 0);\n    @include padding(10px, 7px, 10px, 7px);\n\n    font-size: 12px;\n    color: rgba(69, 85, 86, 0.85);\n  }\n\n  &__applied-filter {\n    @include padding(5px, 2px, 5px, 8px);\n    @include margin(0, 5px, 5px, 0);\n\n    color: $color-darkgrey;\n    font-size: 11px;\n    border-radius: 2px;\n    border: solid 1px rgba(0, 132, 169, 0.5);\n    background-color: rgba(0, 132, 169, 0.2);\n    line-height: 1;\n\n    .icon-button {\n      @include padding(2px, 4px, 1px, 10px);\n\n      nano-icon {\n        pointer-events: none;\n      }\n    }\n  }\n\n  .topbar {\n    &__bkbtn {\n      position: relative;\n      left: -7px;\n    }\n\n    &__query {\n      :host(.small) & {\n        display: none;\n      }\n    }\n\n    &__filtering {\n      display: flex;\n      align-items: center;\n\n      @include margin(0, 0, 0, 1em);\n\n      flex: 1;\n    }\n\n    &__order {\n      min-width: 175px;\n      max-width: 200px;\n\n      @include margin(0, 0, 0, auto);\n\n      // @include media-breakpoint-down('sm') {\n      //   max-width: 300px;\n      // }\n\n      :host(.small) & {\n        max-width: 300px;\n      }\n    }\n\n    nano-select {\n      opacity: 1;\n      transition: 0.1s ease opacity;\n\n      &:not(.hydrated) {\n        opacity: 0;\n      }\n    }\n\n    &__show-filters {\n      @include margin(0, 0, 0, 0.5em);\n\n      text-transform: uppercase;\n      display: none;\n      flex-direction: column;\n      align-items: center;\n\n      nano-icon {\n        font-size: 20px;\n      }\n\n      // @include media-breakpoint-down('sm') {\n      //   display: flex;\n      // }\n\n      :host(.small) & {\n        display: flex;\n      }\n    }\n\n    &__filter-count {\n      width: 12px;\n      height: 12px;\n      box-shadow: inset 0 3px 4px 0 rgba(0, 0, 0, 0.2);\n      border: solid 1px #005c76;\n      background-color: #005c76;\n      color: white;\n      font-size: 7px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 1;\n      margin-bottom: 3px;\n    }\n  }\n\n  &__results {\n    font-size: 14px;\n    padding: 1em 40px;\n    color: rgba(69, 85, 86, 0.85);\n    width: 70%;\n    height: 100%;\n\n    @include media-breakpoint-down('sm') {\n      padding: 1em 20px;\n    }\n\n    :host(.small) & {\n      width: 100%;\n    }\n  }\n\n  &__filters {\n    outline: none;\n\n    @include padding(1.8em, 40px, 1em, 0);\n\n    @include media-breakpoint-down('sm') {\n      @include padding(null, 20px, null, null);\n    }\n\n    flex: 1 1 30%;\n    box-sizing: border-box;\n\n    :host(:not(.small)) & {\n      max-width: 350px;\n      min-width: 220px;\n    }\n  }\n}\n\n.filters {\n  color: $color-darkgrey;\n  background: white;\n  font-size: 14px;\n\n  :host(.small) & {\n    position: fixed;\n    width: 0;\n    height: 0;\n    z-index: 10;\n    top: 0;\n    right: 0;\n    transition: all 0s ease 0.5s;\n    background: none;\n\n    &.show {\n      height: 100vh;\n      width: 100vw;\n      transition: all 0s ease 0s;\n\n      &::after {\n        opacity: 1;\n      }\n    }\n\n    &::after {\n      content: '';\n      background: rgba(0, 0, 0, 0.5);\n      position: absolute;\n      left: 0;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      z-index: -1;\n      opacity: 0;\n      transition: 0.1s ease opacity;\n    }\n  }\n\n  &__close-filters {\n    display: none !important;\n    font-size: 1.4em;\n\n    :host(.small) & {\n      display: inline-block !important;\n\n      @include margin(0, 0, 0, auto);\n    }\n  }\n\n  &-wrap {\n    :host(.small) & {\n      position: absolute;\n      top: 0;\n      right: 0;\n      background: rgb(247, 246, 246);\n      transform: translateX(100%);\n      width: 300px;\n      min-width: 200px;\n      max-width: 80vw;\n      transition: transform 0.3s ease;\n      padding: 1em;\n      color: black;\n      overflow: auto;\n      height: 100vh;\n    }\n  }\n\n  &.show {\n    .filters-wrap {\n      :host(.small) & {\n        transform: translateX(0%);\n        box-shadow: -3px -3px 7px rgba(0, 0, 0, 0.1);\n      }\n    }\n  }\n\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  li {\n    margin: 0;\n    padding: 0;\n  }\n\n  nano-details {\n    --padding: 0.8em;\n\n    margin: 0.8em 0;\n\n    strong[slot] {\n      display: block;\n\n      @include padding(null, null, null, calc(20px - 0.8em));\n    }\n\n    nano-icon[slot='icon-end'] {\n      @include padding(null, calc(20px - 0.8em), null, calc(20px - 0.8em));\n    }\n  }\n\n  li:last-child .filter-label {\n    margin-bottom: 0;\n  }\n\n  .filter-label {\n    display: flex;\n    align-items: center;\n    position: relative;\n    margin: 0.5em 0;\n    line-height: 1.4;\n    z-index: 0;\n\n    &::before {\n      @include margin(0, 1em, 0, 0);\n\n      content: '';\n      border: 1px solid $color-blue;\n      background: $color-white;\n      border-radius: 3px;\n      height: 1em;\n      width: 1em;\n      min-width: 1em;\n      min-height: 1em;\n      display: inline-block;\n    }\n\n    &::after {\n      @include svg-background-image(\n        \"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='#ffffff' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/></svg>\"\n      );\n\n      content: '';\n      height: 0.7em;\n      width: 0.7em;\n      position: absolute;\n      left: 2px;\n      top: 50%;\n      transform: translateY(-50%);\n      z-index: 1;\n      display: block;\n      background-size: 100%;\n      background-position: center center;\n      background-repeat: no-repeat;\n\n      @include rtl-host() {\n        right: 1px;\n        left: auto;\n      }\n    }\n  }\n\n  .filter-cb {\n    @include visually-hide;\n\n    &:checked + .filter-label {\n      &::before {\n        background: $color-blue--darker;\n      }\n    }\n\n    &:focus + .filter-label {\n      &::before {\n        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7);\n      }\n    }\n  }\n\n  &-header {\n    display: flex;\n    align-items: center;\n  }\n\n  &-reset {\n    color: $color-blue;\n    font-size: 12px;\n    text-decoration: underline;\n\n    @include margin(0, 0, 0, auto);\n\n    :host(.small) & {\n      @include margin(0, 0, 0, 0);\n    }\n  }\n\n  &-title {\n    @include margin(0, 0, 0, 0);\n\n    text-transform: uppercase;\n    color: rgba(69, 85, 86, 0.85);\n    font-weight: bold;\n    font-size: 14px;\n\n    :host(.small) & {\n      display: none;\n    }\n  }\n}\n\n.result {\n  text-decoration: none;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n  padding-bottom: 14px;\n  border-bottom: 1px solid $color-lightgrey;\n\n  * {\n    word-wrap: break-word;\n    word-break: break-word;\n  }\n\n  &__title {\n    color: $color-blue;\n    font-size: 16px;\n    line-height: 1.43;\n    margin: 1em 0 0.5em 0;\n    text-decoration: underline;\n    width: 70%;\n    display: flex;\n    font-weight: 500;\n\n    nano-icon {\n      @include margin(0, 0.5em, 0, 0);\n\n      min-width: 20px;\n      min-height: 20px;\n      opacity: 0.8;\n    }\n\n    @include media-breakpoint-down('md') {\n      width: 100%;\n    }\n  }\n\n  &__body {\n    color: $color-darkgrey;\n    font-size: 14px;\n    line-height: 1.67;\n    width: 70%;\n\n    @include media-breakpoint-down('md') {\n      width: 100%;\n    }\n  }\n\n  &__date {\n    font-size: 10px;\n    line-height: 1.6;\n    color: $color-darkgrey;\n    text-align: right;\n    margin: auto 0;\n    width: 30%;\n\n    @include media-breakpoint-down('md') {\n      width: 100%;\n      margin: 0.8em 0 0 0;\n    }\n  }\n}\n","import {\n  Component,\n  h,\n  Host,\n  Element,\n  State,\n  ComponentInterface,\n  Watch,\n  Listen,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport { AloliaSearchResultDetail } from '../../interface';\nimport { SearchIndex } from '../../interface';\nimport { raf } from '../../utils';\n\n/**\n * Nanopore Global Search results component\n * to be used in conjunction with [Globla-Nav](/story/nano-compounds-global-nav).\n * A shortcut / helper which combines algolia components.\n * There should only be one <nano-global-search-results> per page\n * and should be a direct child of <nano-global-nav>\n */\n@Component({\n  tag: 'nano-global-search-results',\n  styleUrl: 'global-search-results.scss',\n  shadow: true,\n})\nexport class GlobalSearchResults implements ComponentInterface {\n  private algoliaResultsEle: HTMLNanoAlgoliaResultsElement;\n  private filtersDiv: HTMLElement;\n  private openFilterBtn: HTMLButtonElement;\n  private ro: ResizeObserver;\n\n  @State() algoliaEle: HTMLNanoAlgoliaElement;\n  @State() currentWidth: number;\n  @State() apiKey: string;\n  @State() appId: string;\n  @State() index: SearchIndex;\n\n  @Element() private el: HTMLNanoGlobalSearchResultsElement;\n\n  @Watch('algoliaEle')\n  @Watch('apiKey')\n  @Watch('appId')\n  handleAlgoliaCredsChange() {\n    if (!this.apiKey || !this.appId || !this.algoliaEle) return;\n    this.algoliaEle.apiKey = this.apiKey;\n    this.algoliaEle.appId = this.appId;\n  }\n\n  @Watch('algoliaEle')\n  @Watch('index')\n  handleAlgoliaIndexChange() {\n    if (!this.index || !this.algoliaEle) return;\n    this.algoliaEle.searchIndex = this.index;\n  }\n\n  @Listen('nanoSearchReset', { target: 'body' })\n  handleGlobalNavReset(e: CustomEvent & { target: HTMLElement }) {\n    if (e.target.tagName !== 'NANO-GLOBAL-NAV') return;\n    this.algoliaResultsEle = null;\n    this.goback();\n  }\n\n  @Listen('nanoSearchResult', { target: 'body' })\n  handleGlobalNavSearch(e: CustomEvent & { target: HTMLElement }) {\n    if (e.target.tagName !== 'NANO-GLOBAL-NAV') return;\n    const {\n      detail: { results, client },\n    } = e as { detail: AloliaSearchResultDetail };\n    const result = results.find((result) => result.selected);\n\n    this.apiKey = client.apiKey;\n    this.appId = client.appId;\n    this.index = {\n      name: result.indexName,\n      index: result.index,\n      domain: result.domain,\n      filters: result.filters,\n    };\n    this.algoliaEle.query = result.query;\n  }\n\n  @Listen('nanoChange')\n  handleReorder(e: CustomEvent & { target: HTMLNanoSelectElement }) {\n    if (\n      e\n        .composedPath()\n        .find(\n          (ele: HTMLElement) =>\n            ele.classList && ele.classList.contains('indexchange')\n        ) &&\n      !!this.algoliaResultsEle\n    ) {\n      this.changeOrder(e);\n    }\n  }\n\n  @Listen('nanoResultsShown')\n  attachListeners(e: CustomEvent & { target: HTMLElement }) {\n    if (\n      !e\n        .composedPath()\n        .find((ele: HTMLElement) => ele.id && ele.id === 'main-search')\n    )\n      return;\n\n    this.algoliaResultsEle = this.algoliaEle.querySelector(\n      '#main-search-results'\n    );\n\n    // add results listeners\n    this.attachResultListeners();\n\n    this.algoliaEle.querySelectorAll('.filters-reset').forEach((item) => {\n      item.addEventListener('click', () => {\n        this.removeAllFilters();\n      });\n    });\n\n    this.algoliaEle.querySelectorAll('.close-filters').forEach((item) => {\n      item.addEventListener('click', () => {\n        this.closefilters();\n      });\n    });\n\n    let filterWrap = this.algoliaEle.querySelector('.filters-wrap');\n    if (filterWrap) {\n      filterWrap.addEventListener('click', (e) => {\n        e.stopPropagation();\n      });\n    }\n\n    this.filtersDiv = this.algoliaEle.querySelector('#main-search-filters');\n  }\n\n  @Listen('nanoNewResults', { target: 'body' })\n  attachResultListeners(e?: CustomEvent & { target: HTMLElement }) {\n    if (e && e.composedPath().find((el) => el === this.algoliaEle)) {\n      this.algoliaResultsEle = this.algoliaEle.querySelector(\n        'nano-algolia-results'\n      );\n    }\n    if (!this.algoliaResultsEle) return;\n    let resultEle = this.algoliaResultsEle;\n\n    resultEle.querySelectorAll('.remove-filter').forEach((item) => {\n      item.addEventListener('click', (clickEv: MouseEvent) => {\n        let filter = clickEv.target as HTMLElement;\n        this.removeFilter(filter.dataset.filter, filter.dataset.filterVal);\n      });\n    });\n\n    resultEle.querySelectorAll('.back-btn').forEach((item) => {\n      item.addEventListener('click', () => {\n        this.goback();\n      });\n    });\n\n    resultEle.querySelectorAll('.topbar__show-filters').forEach((item) => {\n      this.openFilterBtn = item as HTMLButtonElement;\n      item.addEventListener('click', () => {\n        this.filtersDiv.tabIndex = -1;\n        this.filtersDiv.classList.add('show');\n        this.filtersDiv.setAttribute('aria-expanded', 'true');\n        document.body.style.overflow = 'hidden';\n        setTimeout(() => this.filtersDiv.focus(), 20);\n      });\n    });\n  }\n\n  private changeOrder(ev) {\n    this.algoliaEle.replicaIndex = ev.detail.value;\n  }\n\n  private goback() {\n    this.removeAllFilters();\n    this.algoliaEle.showResults = false;\n    this.algoliaEle.query = '';\n  }\n\n  private removeFilter(facet, filter) {\n    this.algoliaEle.removeFilters(facet, filter);\n  }\n\n  private removeAllFilters() {\n    this.algoliaEle.removeFilters();\n  }\n\n  private closefilters() {\n    if (!this.filtersDiv) return;\n    this.filtersDiv.tabIndex = null;\n    this.filtersDiv.classList.remove('show');\n    this.filtersDiv.setAttribute('aria-expanded', 'false');\n    document.body.style.overflow = '';\n    setTimeout(() => this.openFilterBtn.focus(), 20);\n  }\n\n  componentDidLoad() {\n    this.ro = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        if (!entry.contentRect.width) return;\n        this.currentWidth = entry.contentRect.width;\n      }\n    });\n    this.ro.observe(this.el);\n    this.algoliaEle.filters = [\n      'created > ' + Math.floor((Date.now() - 63115200000) / 1000),\n    ]; // only get last 2 years\n  }\n\n  render() {\n    return (\n      <Host\n        class={{ small: this.currentWidth < 577 }}\n        dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : false}\n      >\n        <nano-algolia\n          store-id=\"searchq\"\n          store-method=\"url-hash-push\"\n          class=\"main-search__wrap sc-nano-global-search-results\"\n          ref={(ele) => raf(() => (this.algoliaEle = ele))}\n          id=\"main-search\"\n        >\n          <script type=\"text/template\" slot=\"template\">\n            {`<div class=\"main-search sc-nano-global-search-results\">\n              <nano-algolia-results id=\"main-search-results\" class=\"main-search__results sc-nano-global-search-results\" infinite-scroll>\n                <script type=\"text/template\" slot=\"start-template\">\n                  <div class=\"sc-nano-global-search-results main-search__topbar topbar\">\n                    <button class=\"sc-nano-global-search-results topbar__bkbtn back-btn icon-button\">\n                      <nano-icon class=\"sc-nano-global-search-results\" name=\"light/chevron-left\" size=\"small\"></nano-icon>\n                    </button>\n                    <div>\n                      <em class=\"sc-nano-global-search-results topbar__query\">'{{ it.query }}' - </em> <strong>{{ it.totalHitsWithFilters }}</strong> Results\n                    </div>\n\n                    <div class=\"sc-nano-global-search-results topbar__filtering\">\n                      {{ @if (it.results.length) }}\n\n                      {{ @if (it.indexName === 'All') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n                          <option value=\"all_prod_en\">Sort by: Most relevant</option>\n                          <option value=\"all_prod_en_date_desc\">Sort by: Newest</option>\n                          <option value=\"all_prod_en_date_asc\">Sort by: Oldest</option>\n                          <option value=\"all_prod_en_activity_date_desc\">Sort by: Recent activity</option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'www') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n                          <option value=\"cws_english_en\">Sort by: Most relevant</option>\n                          <option value=\"cws_english_en_date_desc\">Sort by: Newest</option>\n                          <option value=\"cws_english_en_date_asc\">Sort by: Oldest</option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Resources') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n                          <option value=\"cws_english_resources_en\">Sort by: Most relevant</option>\n                          <option value=\"cws_english_resources_en_featured_desc\">Sort by: Newest</option>\n                          <option value=\"cws_english_resources_en_featured_asc\">Sort by: Oldest</option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Store') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n                          <option value=\"store_prod\">Sort by: Most relevant</option>\n                          <option value=\"store_prod_date_desc\">Sort by: Newest</option>\n                          <option value=\"store_prod_date_asc\">Sort by: Oldest</option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Community') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--community indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n                          <option value=\"community_prod\">Sort by: Most relevant</option>\n                          <option value=\"community_prod_date_desc\">Sort by: Newest</option>\n                          <option value=\"community_prod_date_asc\">Sort by: Oldest</option>\n                          <option value=\"community_prod_activity_date_desc\">Sort by: Recent activity</option>\n                        </nano-select>\n                        {{ /if }}\n                      {{ /if }}\n\n                      <button class=\"sc-nano-global-search-results topbar__show-filters filters-title\" aria-controls=\"main-search-filters\">\n                        {{ @if (it.appliedFilters && it.appliedFilters.length > 0) }}\n                          <span class=\"sc-nano-global-search-results topbar__filter-count\">\n                            {{ (it.appliedFilters.reduce(function(a, b) { return a + (b.values ? b.values.length : 0) }, 0)) }}\n                          </span>\n                        {{ /if }}\n                        <nano-icon class=\"sc-nano-global-search-results\" name=\"light/filter\"></nano-icon>\n                      </button>\n                    </div>\n                  </div>\n\n                  {{ @if (it.results.length) }}\n                    <div class=\"sc-nano-global-search-results main-search__applied-filters\">\n                      {{ @if (it.appliedFilters) }}\n                        {{ @each(it.appliedFilters) => filterObj }}\n                          {{ @each(filterObj.values) => filterVal }}\n                            <span class=\"sc-nano-global-search-results main-search__applied-filter\">\n                              {{ filterVal | public_name }}\n                              <button class=\"sc-nano-global-search-results icon-button remove-filter\" data-filter=\"{{ filterObj.name }}\" data-filter-val=\"{{ filterVal }}\">\n                                <nano-icon class=\"sc-nano-global-search-results\" name=\"light/times\"></nano-icon>\n                              </button>\n                            </span>\n                          {{ /each }}\n                        {{ /each }}\n                      {{ #else }}\n                        <span class=\"sc-nano-global-search-results main-search__applied-nofilter\">&nbsp;</span>\n                      {{ /if }}\n                    </div>\n                  {{ /if }}\n                </script>\n\n                <script type=\"text/template\" slot=\"result-template\">\n                  {{ @if (it.totalHitsWithFilters > 0) }}\n                    {{ @each(it.results) => result }}\n                      <li class=\"sc-nano-global-search-results\">\n                        <a class=\"sc-nano-global-search-results result\" href=\"{{ result.url | abs_url(it, result) }}\">\n                          <h4 class=\"sc-nano-global-search-results result__title\" data-icon-set=\"{{(iconSet = false)}}\">\n                            {{ @if (!it.legacy)  }}\n\n                              {{ @if (result.type === 'faq' || result.type === 'faqs') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/question-circle\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'comment') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/comment\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'protocol') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/clipboard-list\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'publication') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/file-chart-line\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'poster' || result.type === 'lc_poster') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/presentation\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'post') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/comments\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'news_item') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/newspaper\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'event') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/calendar\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'talk' || result.type === 'lc_lightning_talk' || result.type === 'ncm_plenary_talk' || result.type === 'ncm_lightning_talk') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/keynote\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'video') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/video\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'data_release') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/analytics\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'job_vacancy') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/ballot-check\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'tool') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/wrench\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'literature') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/book\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'community_info') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/users\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'article') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/file-alt\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'provider') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/handshake\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'apps') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/vials\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'white_paper') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/file-pdf\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'Nanopore Store') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/shopping-cart\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (!result.type || !iconSet) }}\n                                <nano-icon  class=\"sc-nano-global-search-results\" name=\"light/file\"></nano-icon>\n                              {{ /if }}\n                            {{ /if }}\n                            {{ result.title | safe }}\n                          </h4>\n                          {{ @if (result.body) }}\n                            <div class=\"sc-nano-global-search-results result__body\">{{ result.body | safe | trim_to(200) }}</div>\n                          {{ /if }}\n                          {{ @if (result.updated) }}\n                            <div class=\"sc-nano-global-search-results result__date\">Last Updated: {{ result.updated | date_short }}</div>\n                          {{ #else }}\n                            {{ @if (result.created) }}\n                              <div class=\"sc-nano-global-search-results result__date\">Added: {{ result.created | date_short }}</div>\n                            {{ /if }}\n                          {{ /if }}\n                        </a>\n                      </li>\n                    {{ /each }}\n                  {{ /if }}\n                </script>\n\n                <div slot=\"start-output\"></div>\n                <ul slot=\"result-output\" class=\"sc-nano-global-search-results\"></ul>\n              </nano-algolia-results>\n\n              {{ @if(Object.keys(it.origFilters).length) }}\n                <div class=\"sc-nano-global-search-results main-search__filters filters close-filters\" id=\"main-search-filters\">\n                  <div class=\"sc-nano-global-search-results filters-wrap\">\n                    {{ @if(it.totalHits) }}\n                      <div class=\"sc-nano-global-search-results filters-header\">\n                        <strong class=\"sc-nano-global-search-results filters-title\">Filters</strong>\n                        <button class=\"sc-nano-global-search-results filters-reset\">Reset</button>\n                        <button class=\"sc-nano-global-search-results filters__close-filters close-filters icon-button\" aria-controls=\"main-search-filters\">\n                          <nano-icon class=\"sc-nano-global-search-results\" name=\"light/times\"></nano-icon>\n                        </button>\n                      </div>\n                    {{ /if }}\n\n                    <div>\n                      {{ @if(it.origFilters['type']) }}\n                        <nano-details class=\"sc-nano-global-search-results\" open={true} icon-rotation=\"180\">\n                          <strong slot=\"label\">Type</strong>\n                          <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n                          <nano-algolia-filter store-id=\"searchf1\" store-method=\"url-hash-push\" filter-name=\"type\">\n                            <script type=\"text/template\" slot=\"filter-template\">\n                              <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n                                <input class=\"sc-nano-global-search-results filter-cb\" type=\"checkbox\" value=\"{{ filter }}\" id=\"type-{{ filter }}-{{x}}\" />\n                                <label class=\"sc-nano-global-search-results filter-label\" for=\"type-{{ filter }}-{{x}}\">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            </script>\n                            <div slot=\"output\"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['channel']) }}\n                        <nano-details open={true} icon-rotation=\"180\">\n                          <strong slot=\"label\">Channels</strong>\n                          <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n                          <nano-algolia-filter store-id=\"searchf2\" store-method=\"url-hash-push\" filter-name=\"channel\">\n                            <script type=\"text/template\" slot=\"filter-template\">\n                              <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n                                <input class=\"filter-cb sc-nano-global-search-results\" type=\"checkbox\" value=\"{{ filter }}\" id=\"channel-{{ filter }}-{{x}}\" />\n                                <label class=\"filter-label sc-nano-global-search-results\" for=\"channel-{{ filter }}-{{x}}\">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            </script>\n                            <div slot=\"output\"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['authors']) }}\n                        <nano-details open={true} icon-rotation=\"180\">\n                          <strong slot=\"label\">Authors</strong>\n                          <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n                          <nano-algolia-filter store-id=\"searchf3\" store-method=\"url-hash-push\" filter-name=\"authors\">\n                            <script type=\"text/template\" slot=\"filter-template\">\n                              <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n                                <input class=\"filter-cb sc-nano-global-search-results\" type=\"checkbox\" value=\"{{ filter }}\" id=\"authors-{{ filter }}-{{x}}\" />\n                                <label class=\"filter-label sc-nano-global-search-results\" for=\"authors-{{ filter }}-{{x}}\">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            </script>\n                            <div slot=\"output\"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['categories_without_path']) }}\n                        <nano-details open={true} icon-rotation=\"180\">\n                          <strong slot=\"label\">Category</strong>\n                          <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n                          <nano-algolia-filter store-id=\"searchf4\" store-method=\"url-hash-push\" filter-name=\"categories_without_path\">\n                            <script type=\"text/template\" slot=\"filter-template\">\n                              <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                {{ @if(!filter.match(/publication/)) }}\n                                  <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n                                  <input class=\"sc-nano-global-search-results filter-cb\" type=\"checkbox\" value=\"{{ filter }}\" id=\"cwp-{{ filter }}-{{x}}\" />\n                                  <label class=\"sc-nano-global-search-results filter-label\" for=\"cwp-{{ filter }}-{{x}}\">\n                                    <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                  </label></li>\n                                {{ /if }}\n                              {{ /foreach }}\n                              </ul>\n                            </script>\n                            <div slot=\"output\"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['tags']) }}\n                        <nano-details open={true} icon-rotation=\"180\">\n                          <strong slot=\"label\">Tags</strong>\n                          <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n                          <nano-algolia-filter store-id=\"searchf5\" store-method=\"url-hash-push\" filter-name=\"tags\">\n                            <script type=\"text/template\" slot=\"filter-template\">\n                              <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n                                <input class=\"filter-cb sc-nano-global-search-results\" type=\"checkbox\" value=\"{{ filter }}\" id=\"tags-{{ filter }}-{{x}}\" />\n                                <label class=\"filter-label sc-nano-global-search-results\" for=\"tags-{{ filter }}-{{x}}\">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            </script>\n                            <div slot=\"output\"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n                    </div>\n                  </div>\n                </div>\n              {{ /if }}\n            </div>`}\n          </script>\n          <div slot=\"output\"></div>\n          <slot />\n        </nano-algolia>\n      </Host>\n    );\n  }\n}\n"]}