@nanoporetech-digital/components 2.15.0 → 2.16.0

package/dist/nano-components/p-70a54c01.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/datalist/datalist.scss?tag=nano-datalist&encapsulation=shadow","src/components/datalist/datalist.tsx","src/components/menu/menu.scss?tag=nano-menu&encapsulation=shadow","src/components/menu/menu.tsx","src/components/option/option.scss?tag=nano-option&encapsulation=shadow","src/components/option/option.tsx"],"names":["datalistCss","findLabel","formCtrl","foundLabel","id","document","querySelector","closest","listIds","DataList","[object Object]","hostRef","this","isNanoInput","typeToSelect","listId","isFiltered","shouldFocus","_allOptEles","actvOptEles","canOpen","optionIds","selected","_dropDownConfig","skidding","options","type","open","disableFilter","disabled","optSelected","e","stopPropagation","changeInputValue","detail","raf","inputChange","shouldOpen","handleShow","async","listBox","setFocus","showActiveElement","handleHide","activeElement","getActiveElement","body","host","tagName","toLowerCase","connectedInput","focus","inputClick","manageDropdownDisplay","inputKeydown","ignoreKeys","includes","key","typeToSelectTimeout","test","clearTimeout","window","setTimeout","setOptStartsWith","preventDefault","optionKeyDown","deleteKeys","exactMatch","debounce","bind","allOptEles","opts","_a","value","forEach","opt","dropDownConfig","ddc","Object","assign","activeOptions","writeTask","nanoDropdown","setAttribute","toString","nanoInput","getInputElement","input","HTMLElement","length","mo","MutationObserver","processSlottedContent","observe","childList","subtree","disconnect","undefined","flatMap","option","i","label","createElement","ariaPosinset","ariaSetsize","textContent","slot","append","dwConfig","closeOnSelect","autocompleteType","readonly","placement","tetherTo","readOnly","newInput","oldInput","removeEventListener","inputLabel","removeAttribute","addEventListener","labels","item","c","val","optIds","hidden","isSelected","push","hasNoResult","openWatcher","nanoOptionsUpdated","emit","dropwdownOpen","find","nanoSelected","filter","nanoDeselect","nanoSelect","defaultPrevented","event","Event","dispatchEvent","attrFind","toFind","substring","foundEle","trim","filterMeta","Array","from","querySelectorAll","valStr","activeEles","indexOf","watchInputChange","manageSlotChangeListener","console","warn","h","Host","role","aria-owns","join","aria-label","ref","el","dialogTitle","class","dlist__dropdown","dlist--isfiltered","onNanoAfterShow","onNanoAfterHide","dlist__menu","dlist__menu--open","tabIndex","onNanoSelect","onKeyDown","name","aria-live","menuCss","Menu","ignoreMouseEvents","_hasFocus","handleFocus","setActiveFocusItem","selectedItem","getItems","nanoFocus","handleClick","target","handleKeyDown","ignoreMouseTimeout","activeItem","click","items","index","scrollIntoView","block","shadowRoot","getTextContent","handleMouseOver","hasFocus","menu","preventScroll","blur","map","opened","ctx","getDirectChildren","getAttribute","classList","contains","kev","found","composedPath","resetActiveItem","nanoBlur","onClick","onMouseOver","onFocus","part","menu--has-focus","optionCss","Option","optId","labelContent","valueChanged","labelChanged","aria-selected","aria-disabled","onMouseDown","option--selected","option--disabled","option--novalue","aria-hidden"],"mappings":"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","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n  * @prop --padding-top: for all nested `nano-option` elements. Defaults to #{$spacing-small};\n  * @prop --padding-bottom: for all nested `nano-option` elements. Defaults to #{$spacing-small};\n  * @prop --padding-start: for all nested `nano-option` elements. Defaults to #{$spacing-xlarge};\n  * @prop --padding-end: for all nested `nano-option` elements. Defaults to #{$spacing-xlarge};\n  * @prop --font-size: for all nested `nano-option` elements. Defaults to .8em;\n  * @prop --color: default text color of content other than `nano-option`. Defaults to #{map.get($colors, palegrey)};\n  */\n\n  --padding-top: #{$spacing-small};\n  --padding-bottom: #{$spacing-small};\n  --padding-start: #{$spacing-xlarge};\n  --padding-end: #{$spacing-xlarge};\n  --font-size: 0.8em;\n  --color: #{map.get($colors, palegrey)};\n\n  color: var(--color);\n}\n\n.dlist {\n  &--isfiltered {\n    ::slotted(*:not(nano-option):not([slot='no-result']):not([slot='list-top']):not([slot='list-bottom'])) {\n      display: none !important;\n    }\n  }\n\n  &__dropdown {\n    --min-width: 100%;\n    --overflow: auto;\n  }\n\n  &__status {\n    @include visually-hide();\n  }\n\n  &__menu {\n    --padding-top: inherit;\n    --padding-bottom: inherit;\n    --padding-start: inherit;\n    --padding-end: inherit;\n    --font-size: inherit;\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  h,\n  Host,\n  Element,\n  State,\n  Watch,\n  Prop,\n  Event,\n  EventEmitter,\n  writeTask,\n  Build,\n} from '@stencil/core';\nimport { debounce, getActiveElement, raf } from '../../utils';\nimport type { Dropdown } from '../dropdown/dropdown';\nimport type { NanoMenuCustomEvent, OptionInterface } from '../../interface';\n\nfunction findLabel(formCtrl: Element) {\n  let foundLabel: HTMLLabelElement;\n\n  if (formCtrl.id) {\n    foundLabel = document.querySelector(`label[for='${formCtrl.id}']`);\n  }\n  if (!foundLabel) {\n    foundLabel = formCtrl.closest('label');\n  }\n  return foundLabel;\n}\n\nlet listIds = 0;\n\n/**\n * `nano-datalist` a visually consistent and more flexible replacement for a native\n * [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist). Can be nested within a `nano-input`\n * or linked to any input control via the `input` prop. Is used internally within `nano-select`.\n * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using the `options` prop\n *\n * @slot - use `<nano-option>` elements for more complex html. Alternatively use the `options` prop\n * @slot list-top - shows at the top of the list when there are options present\n * @slot list-bottom - shows at the bottom of the list when there are options present\n * @slot no-result - shown when there are no results otherwise nothing will be shown\n */\n@Component({\n  tag: 'nano-datalist',\n  styleUrl: 'datalist.scss',\n  shadow: true,\n})\nexport class DataList implements ComponentInterface {\n  // Private State\n\n  private isNanoInput = false;\n  private typeToSelect = '';\n  private typeToSelectTimeout: number;\n  private nanoDropdown: HTMLNanoDropdownElement;\n  private listBox: HTMLNanoMenuElement;\n  private mo?: MutationObserver;\n  private listId = `nano-datalist-${listIds++}`;\n  private isFiltered = false;\n  private shouldFocus = false;\n  // all potential option eles. Set via slot or `options` prop.\n  // Some may get hidden due to filtering\n  private get allOptEles() {\n    return this._allOptEles;\n  }\n  private set allOptEles(opts) {\n    // when allOptEles are initially set (on slot change / options) -\n    // add options to 'selected' and fire selected event *if*\n    // value isn't set on the input\n    this._allOptEles = opts;\n    if (this.connectedInput?.value) return;\n\n    opts.forEach((opt) => {\n      if (opt.selected && !this.selected.includes(opt.value)) {\n        this.changeInputValue(opt);\n      }\n    });\n  }\n  private _allOptEles: HTMLNanoOptionElement[] = [];\n\n  @Element() host: HTMLNanoDatalistElement;\n\n  // active option eles that are not hidden.\n  @State() actvOptEles: HTMLNanoOptionElement[] = [];\n  @State() connectedInput: HTMLInputElement | HTMLTextAreaElement;\n  @State() inputLabel: HTMLLabelElement;\n  @State() hasNoResult: boolean;\n  @State() shouldOpen: boolean;\n  @State() canOpen: boolean = true;\n  @State() optionIds: string[] = [];\n\n  constructor() {\n    this.inputChange = debounce(this.inputChange.bind(this), 50);\n  }\n\n  // Public API\n\n  /** By default, items in the list will appear 'selected' when the value in the linked input control matches.\n   * However you can add other selected options via the the selected prop. */\n  @Prop({ mutable: true }) selected: string[] = [];\n\n  /** nano-dropdown config options you can pass to the nested dropdown component */\n  @Prop()\n  get dropDownConfig() {\n    return this._dropDownConfig;\n  }\n  set dropDownConfig(ddc: Partial<Dropdown>) {\n    this._dropDownConfig = { ...this._dropDownConfig, ...ddc };\n  }\n  private _dropDownConfig: Partial<Dropdown> = {\n    skidding: -1,\n  };\n\n  /** Provide an option list.\n   * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using this prop */\n  @Prop() options?: OptionInterface[] = [];\n\n  /** A selector to a HTMLInputElement */\n  @Prop() input?: string | HTMLInputElement;\n\n  /** Tweaks the datalist behaviour and linked control semantics and behaviour.\n   * e.g. 'select' will make the linked input control `readonly`.\n   */\n  @Prop() type: 'select' | 'selctMulti' | 'input' = 'input';\n\n  /** return all the active options currently within the datalist. Can be useful for validation */\n  @Prop()\n  get activeOptions() {\n    return this.allOptEles;\n  }\n\n  /** Force datalist open */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  @Watch('open')\n  openWatcher() {\n    writeTask(() => {\n      this.nanoDropdown.open = this.open;\n      this.connectedInput.setAttribute('aria-expanded', this.open.toString());\n    });\n  }\n\n  /** Use this option to disable to default filtering. This is useful if filtering happens\n   * externally via another method (e.g. via ajax)\n   */\n  @Prop() disableFilter = false;\n\n  /** Activate / deactivate the datalist control */\n  @Prop() disabled = false;\n\n  // State change watchers\n\n  @Watch('input')\n  async watchInputChange() {\n    let nanoInput;\n    if ((nanoInput = this.host.closest('nano-input'))) {\n      this.isNanoInput = true;\n      this.connectedInput = await nanoInput.getInputElement();\n    } else if (\n      this.input &&\n      typeof this.input === 'string' &&\n      (nanoInput = document.querySelector(this.input))\n    ) {\n      this.isNanoInput = false;\n      this.connectedInput = nanoInput;\n    } else if (this.input instanceof HTMLElement) {\n      this.connectedInput = this.input;\n    }\n  }\n\n  @Watch('options')\n  manageSlotChangeListener() {\n    if (!this.host) return;\n\n    // we're not using `options` - setup new MO\n    if ((!this.options || !this.options.length) && !this.mo) {\n      if (Build.isBrowser) {\n        const mo = (this.mo = new MutationObserver(() =>\n          this.processSlottedContent()\n        ));\n        mo.observe(this.host, { childList: true, subtree: true });\n      }\n      this.processSlottedContent();\n      return;\n    }\n\n    // we're using `options` - trash current MO\n    if (this.options?.length) {\n      if (!!this.mo) {\n        this.mo.disconnect();\n        this.mo = undefined;\n      }\n\n      // add imperative `options`\n      writeTask(() => {\n        this.allOptEles = this.options.flatMap((option, i) => {\n          if (option.value || option.label) {\n            const opt = Object.assign(document.createElement('nano-option'), {\n              label: option.label,\n              value: option.value,\n              ariaPosinset: i,\n              ariaSetsize: this.options.length,\n              selected: option.selected,\n              id: this.listId + '-option-' + i,\n              textContent: option.label ? option.label : option.value,\n              slot: 'internal-opts',\n            });\n            this.host.append(opt);\n            return opt;\n          }\n        });\n\n        if (this.connectedInput?.value.length && this.type !== 'select') {\n          this.inputChange();\n        } else this.actvOptEles = [...this.allOptEles];\n      });\n    }\n    // forceUpdate(this.host);\n  }\n\n  @Watch('type')\n  @Watch('connectedInput')\n  watchTypeChange() {\n    if (!this.connectedInput) return;\n\n    let dwConfig: Partial<Dropdown> = { closeOnSelect: false };\n    let autocompleteType: 'list' | 'both' = 'both';\n    let readonly = false;\n\n    switch (this.type) {\n      case 'input':\n        dwConfig = { closeOnSelect: true };\n        break;\n      case 'select':\n        autocompleteType = 'list';\n        readonly = true;\n        dwConfig = { closeOnSelect: true, placement: 'center' };\n        break;\n    }\n\n    if (!this.isNanoInput) {\n      dwConfig.tetherTo = this.connectedInput;\n    }\n\n    this.dropDownConfig = { ...this.dropDownConfig, ...dwConfig };\n    this.connectedInput.setAttribute('aria-autocomplete', autocompleteType);\n    this.connectedInput.readOnly = readonly;\n  }\n\n  @Watch('connectedInput')\n  manageInputEvents(newInput?: HTMLInputElement, oldInput?: HTMLInputElement) {\n    if (!!oldInput) {\n      const nanoInput = oldInput.closest('nano-input');\n      if (nanoInput) {\n        nanoInput.removeEventListener('nanoChange', this.inputChange);\n      }\n      oldInput.removeEventListener('change', this.inputChange);\n      oldInput.removeEventListener('click', this.inputClick);\n      oldInput.removeEventListener('keydown', this.inputKeydown);\n      oldInput.removeEventListener('input', this.inputChange);\n\n      this.inputLabel = null;\n\n      writeTask(() => {\n        oldInput.removeAttribute('role');\n        oldInput.removeAttribute('aria-expanded');\n        oldInput.removeAttribute('aria-controls');\n        oldInput.removeAttribute('aria-owns');\n        oldInput.removeAttribute('aria-haspopup');\n        oldInput.removeAttribute('aria-autocomplete');\n        oldInput.removeAttribute('autocomplete');\n      });\n    }\n    if (!!newInput) {\n      const nanoInput = newInput.closest('nano-input');\n      if (nanoInput) {\n        nanoInput.addEventListener('nanoChange', this.inputChange);\n      }\n      newInput.addEventListener('change', this.inputChange);\n      newInput.addEventListener('click', this.inputClick);\n      newInput.addEventListener('keydown', this.inputKeydown);\n      newInput.addEventListener('input', this.inputChange);\n      this.listId = this.host.id || this.listId;\n\n      this.inputLabel = newInput?.labels?.item(0) || findLabel(newInput);\n\n      writeTask(() => {\n        this.host.id = this.listId;\n        newInput.setAttribute('role', 'combobox');\n        newInput.setAttribute('aria-expanded', 'false');\n        newInput.setAttribute('aria-controls', this.listId);\n        newInput.setAttribute('aria-owns', this.listId);\n        newInput.setAttribute('aria-haspopup', 'listbox');\n        newInput.setAttribute('autocomplete', 'off');\n      });\n    }\n  }\n\n  @Watch('selected')\n  @Watch('actvOptEles')\n  watchActvOptChange() {\n    let c = 0;\n    const val = this.connectedInput?.value || '';\n    const optIds = [];\n\n    writeTask(() => {\n      this.allOptEles.forEach((opt, i) => {\n        if (this.actvOptEles.includes(opt)) {\n          c++;\n          opt.setAttribute('aria-posinset', c + '');\n          opt.setAttribute('aria-setsize', this.actvOptEles.length + '');\n          opt.hidden = false;\n          this.isSelected(opt, val);\n        } else {\n          opt.removeAttribute('aria-posinset');\n          opt.removeAttribute('aria-setsize');\n          opt.hidden = true;\n          opt.selected = false;\n        }\n        opt.id = this.listId + '-option-' + i;\n        optIds.push(opt.id);\n      });\n      this.optionIds = optIds;\n    });\n  }\n\n  @Watch('actvOptEles')\n  @Watch('hasNoResult')\n  manageCanOpen() {\n    if (this.actvOptEles.length || this.hasNoResult) this.canOpen = true;\n    else this.canOpen = false;\n  }\n\n  /**\n   * Opens the dropdown if it can, it should and there are items to display.\n   */\n  @Watch('shouldOpen')\n  @Watch('canOpen')\n  manageDropdownDisplay() {\n    if (this.shouldOpen && this.canOpen && !this.disabled) this.open = true;\n    if (!this.shouldOpen || !this.canOpen) this.open = false;\n    this.openWatcher();\n  }\n\n  @Watch('actvOptEles')\n  fireActiveOptsEvent() {\n    this.nanoOptionsUpdated.emit(this.actvOptEles);\n  }\n\n  // Events\n\n  /** Fired when an item is selected. */\n  @Event() nanoSelect: EventEmitter<HTMLNanoOptionElement>;\n\n  /** Fired when a currently selected item is reselected. */\n  @Event() nanoDeselect: EventEmitter<HTMLNanoOptionElement>;\n\n  /** Fired when active options change */\n  @Event() nanoOptionsUpdated: EventEmitter<HTMLNanoOptionElement[]>;\n\n  // Private logic\n\n  private isSelected(opt: HTMLNanoOptionElement, val: string) {\n    if (val === opt.value || this.selected.includes(opt.value)) {\n      opt.selected = true;\n    } else opt.selected = false;\n  }\n\n  private get dropwdownOpen() {\n    if (!this.nanoDropdown || !this.open) return false;\n    return true;\n  }\n\n  private get exactMatch() {\n    return this.allOptEles.find(\n      (opt) => this.connectedInput.value === opt.value\n    );\n  }\n\n  /** reflect value back to the connected input unless the event is cancelled */\n  private changeInputValue(opt: HTMLNanoOptionElement) {\n    let nanoSelected;\n\n    if (this.selected.includes(opt.value)) {\n      // deselect option\n      this.selected = this.selected.filter((val) => val !== opt.value);\n      nanoSelected = this.nanoDeselect.emit(opt);\n    } else {\n      // select new option\n      this.selected = [...this.selected];\n      nanoSelected = this.nanoSelect.emit(opt);\n    }\n\n    if (!nanoSelected.defaultPrevented) {\n      if (this.connectedInput) this.connectedInput.value = opt.value;\n\n      const event = new window.Event('change');\n      this.connectedInput?.dispatchEvent(event);\n    }\n  }\n\n  // a new option has been picked\n  private optSelected = (e: NanoMenuCustomEvent<HTMLNanoOptionElement>) => {\n    e.stopPropagation();\n    this.changeInputValue(e.detail);\n    raf(() => this.inputChange());\n\n    if (this.type !== 'selctMulti') this.shouldOpen = false;\n  };\n\n  // this is for type=\"select\" only.\n  // Filter options that start with text - aggregates letters (as opposed to getting the value from input)\n  private setOptStartsWith() {\n    const attrFind = (toFind: string) =>\n      toFind.toLowerCase().substring(0, this.typeToSelect.length) ===\n      this.typeToSelect;\n\n    const foundEle = this.allOptEles.find(\n      (opt) =>\n        opt.value.trim().length > 0 &&\n        !opt.disabled &&\n        (attrFind(opt.textContent) ||\n          attrFind(opt.value) ||\n          attrFind(opt.label) ||\n          attrFind(opt.filterMeta))\n    );\n    if (foundEle) this.changeInputValue(foundEle);\n  }\n\n  // Event handlers\n\n  private processSlottedContent() {\n    raf(() => {\n      this.allOptEles = Array.from(this.host.querySelectorAll('nano-option'));\n      this.hasNoResult = !!this.host.querySelector('[slot=\"no-result\"]');\n\n      if (this.connectedInput?.value.length && this.type !== 'select') {\n        this.inputChange();\n      } else this.actvOptEles = this.allOptEles;\n    });\n  }\n\n  // sets focus immediately on open when 'select' - mirroring native behaviour\n  private handleShow = async () => {\n    if (this.shouldFocus) {\n      this.shouldFocus = false;\n      this.listBox.setFocus();\n    } else if (this.type === 'select') this.listBox.showActiveElement();\n  };\n\n  private handleHide = () => {\n    this.open = false;\n    const activeElement = getActiveElement();\n    if (\n      activeElement === document.body ||\n      activeElement.closest(this.host.tagName.toLowerCase())\n    ) {\n      this.connectedInput.focus();\n    }\n  };\n\n  // any changes to the connected input value will filter the list of active options\n  private inputChange() {\n    if (this.disableFilter) {\n      this.actvOptEles = this.allOptEles;\n      return;\n    }\n\n    const val = this.connectedInput.value;\n    const valStr = val.trim().toLowerCase();\n\n    let exactMatch = false;\n    const activeEles = [];\n    const attrFind = (toFind: string) =>\n      toFind.toLowerCase().indexOf(valStr) > -1;\n\n    this.allOptEles.forEach((opt) => {\n      if (\n        (val === opt.value || val === opt.label) &&\n        this.type !== 'selctMulti'\n      ) {\n        opt.selected = true;\n        exactMatch = true;\n      } else this.isSelected(opt, val);\n    });\n\n    this.allOptEles.forEach((opt) => {\n      if (!valStr.length || exactMatch) {\n        activeEles.push(opt);\n      } else if (\n        opt.value.trim().length > 0 &&\n        !opt.disabled &&\n        (attrFind(opt.textContent) ||\n          attrFind(opt.value) ||\n          attrFind(opt.label) ||\n          attrFind(opt.filterMeta))\n      ) {\n        activeEles.push(opt);\n      }\n    });\n\n    this.isFiltered = valStr.length && !exactMatch;\n    this.actvOptEles = activeEles;\n  }\n\n  private inputClick = () => {\n    this.shouldOpen = true;\n    // open dropdown if possible\n    this.manageDropdownDisplay();\n  };\n\n  private inputKeydown = (e: KeyboardEvent) => {\n    const ignoreKeys = [\n      'Shift',\n      'ArrowRight',\n      'ArrowLeft',\n      'Escape',\n      'Enter',\n      'Tab',\n    ];\n    if (ignoreKeys.includes(e.key)) {\n      if (e.key === 'Tab') this.shouldOpen = false;\n      return;\n    }\n\n    // When select, mirror native select behaviour. Search on closed list\n    if (\n      this.type === 'select' &&\n      !['ArrowDown', 'ArrowUp'].includes(e.key) &&\n      (e.key !== ' ' || this.typeToSelectTimeout)\n    ) {\n      if (e.key === ' ' || /^[a-z0-9]+$/i.test(e.key)) {\n        clearTimeout(this.typeToSelectTimeout);\n        this.typeToSelectTimeout = window.setTimeout(() => {\n          this.typeToSelect = '';\n          this.typeToSelectTimeout = 0;\n        }, 750);\n        this.typeToSelect += e.key;\n        this.setOptStartsWith();\n      }\n      return;\n    }\n\n    this.shouldOpen = true;\n    // open dropdown if possible\n    this.manageDropdownDisplay();\n    if (['ArrowDown', 'ArrowUp'].includes(e.key)) {\n      e.preventDefault();\n      this.shouldFocus = true;\n    }\n  };\n\n  // handles key down on options. Either 'picks'\n  // an option or passes event back to input for search / filter\n  private optionKeyDown = (\n    e: KeyboardEvent & { target: HTMLNanoOptionElement }\n  ) => {\n    const ignoreKeys = [\n      'Shift',\n      'ArrowUp',\n      'ArrowDown',\n      'Escape',\n      'Enter',\n      'Tab',\n      'Space',\n      'PageUp',\n      'PageDown',\n      'Home',\n      'End',\n      ' ',\n    ];\n    if (ignoreKeys.includes(e.key)) {\n      if (e.key === 'Escape') this.connectedInput.focus();\n      return;\n    }\n\n    const deleteKeys = ['Delete', 'Backspace'];\n    // this passes whatever's typed back to our input control\n    if (\n      this.type !== 'select' &&\n      (!this.exactMatch || deleteKeys.includes(e.key))\n    ) {\n      this.connectedInput.focus();\n    }\n  };\n\n  // Component lifecycle\n\n  connectedCallback() {\n    this.watchInputChange();\n  }\n\n  componentDidLoad() {\n    this.manageSlotChangeListener();\n    this.openWatcher();\n  }\n\n  componentDidRender(): void {\n    setTimeout(() => {\n      if (!this.connectedInput)\n        console.warn(\n          'no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop',\n          this.host\n        );\n    }, 500);\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"listbox\"\n        aria-owns={this.optionIds.join(' ')}\n        aria-label=\"Select options from the list below\"\n      >\n        <nano-dropdown\n          {...this.dropDownConfig}\n          ref={(el) => (this.nanoDropdown = el)}\n          dialogTitle=\"Select options from the list below\"\n          class={{\n            dlist__dropdown: true,\n            'dlist--isfiltered': this.isFiltered,\n          }}\n          onNanoAfterShow={this.handleShow}\n          onNanoAfterHide={this.handleHide}\n        >\n          <nano-menu\n            hidden={!this.actvOptEles.length}\n            type=\"listbox\"\n            label={this.inputLabel ? this.inputLabel.textContent : undefined}\n            class={{\n              dlist__menu: true,\n              'dlist__menu--open': this.dropwdownOpen,\n            }}\n            tabIndex={-1}\n            onNanoSelect={this.optSelected}\n            onKeyDown={this.optionKeyDown}\n            ref={(el) => (this.listBox = el)}\n          >\n            <slot name=\"list-top\" />\n            {!this.options.length && <slot />}\n            {!!this.options.length && <slot name=\"internal-opts\" />}\n            <slot name=\"list-bottom\" />\n          </nano-menu>\n          <nano-menu\n            type=\"listbox\"\n            label=\"No results found\"\n            hidden={!!this.actvOptEles.length}\n            class={{\n              dlist__menu: true,\n              'dlist__menu--open': this.dropwdownOpen,\n            }}\n          >\n            <slot name=\"no-result\" />\n          </nano-menu>\n          {!!this.actvOptEles && (\n            <div aria-live=\"polite\" role=\"status\" class=\"dlist__status\">\n              {this.actvOptEles.length} result\n              {this.actvOptEles.length > 1 ? 's' : ''} available.\n            </div>\n          )}\n        </nano-dropdown>\n      </Host>\n    );\n  }\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --padding-start: padding at the start of nav-items (left r2l / right l2r). Defaults to '10px'\n   * @prop --padding-end: padding at the end of nav-items (right r2l / left l2r). Defaults to '10px'\n   * @prop --padding-top: padding at the top of nav-items. Defaults to '10px'\n   * @prop --padding-bottom: padding at the bottom of nav-items. Defaults to '10px'\n\n   * @prop --secondary-padding-top: padding at the top of nested nav-items. Defaults to 0\n   * @prop --secondary-padding-bottom: padding at the bottom of nested nav-items. Defaults to 0\n\n   * @prop --bg-color-hover: bg hover color of nav-items. Defaults to #{map.get($colors, blue--faded)};\n   * @prop --bg-color-focus: bg focus color of nav-items. Defaults to #{map.get($colors, blue--faded)};\n   * @prop --bg-color-selected: bg selected color of nav-items. Defaults to #{map.get($colors, blue--faded)};\n\n   * @prop --color-hover: text hover color of nav-items. Defaults to #{map.get($colors, blue)}\n   * @prop --color-selected: text selected color of nav-items. Defaults to #{map.get($colors, blue)}\n   * @prop --color-focus: text focus color of nav-items. Defaults to #{map.get($colors, blue)}\n\n   * @prop --focus-outline: the focus style of nav-items. Defaults to 'none'\n   * @prop --font-size: default font-size for all items. Defaults .9em;\n  */\n\n  --padding-start: #{$spacing-medium};\n  --padding-end: #{$spacing-medium};\n  --padding-top: #{$spacing-small};\n  --padding-bottom: #{$spacing-small};\n  --secondary-padding-top: 0;\n  --secondary-padding-bottom: 0;\n  --bg-color-hover: #{map.get($colors, blue--faded)};\n  --bg-color-focus: #{map.get($colors, blue--faded)};\n  --bg-color-selected: #{map.get($colors, blue--faded)};\n  --color-hover: #{map.get($colors, blue)};\n  --color-selected: #{map.get($colors, blue)};\n  --color-focus: #{map.get($colors, blue)};\n  --focus-outline: none;\n  --font-size: 0.9em;\n\n  display: block;\n}\n\n.menu {\n  font-size: var(--font-size, 0.9em);\n  overscroll-behavior: none;\n  min-width: var(--width);\n  position: relative;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)) {\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: var(--padding-top) var(--padding-bottom);\n  display: block;\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  Method,\n  h,\n  Host,\n  Element,\n  Prop,\n  Listen,\n} from '@stencil/core';\nimport {\n  getTextContent,\n  getDirectChildren,\n  getActiveElement,\n} from '../../utils';\n\ntype ValidElement = HTMLNanoNavItemElement | HTMLNanoOptionElement;\ntype NNI = HTMLNanoNavItemElement;\n\n/**\n * Menu element. Commonly wrapped by `nano-dropdown` with `nano-option` and `nano-nav-item` elements nested.\n * Manages focus state / active.\n * @slot - The menu's content; `nano-option`, `nano-nav-item` elements as well as <hr> and more.\n */\n@Component({\n  tag: 'nano-menu',\n  styleUrl: 'menu.scss',\n  shadow: true,\n})\nexport class Menu {\n  private ignoreMouseEvents = false;\n  private ignoreMouseTimeout: any;\n  private menu: HTMLElement;\n  private typeToSelect = '';\n  private typeToSelectTimeout: any;\n\n  @Element() private el: HTMLNanoMenuElement;\n\n  // Public API\n\n  /** get the focus state of the menu @readonly */\n  @Prop()\n  get hasFocus() {\n    return this._hasFocus;\n  }\n  private _hasFocus = false;\n\n  /** changes the role of the underlying control - sometimes required for semantics */\n  @Prop() type: 'menu' | 'listbox' = 'menu';\n\n  /** an accessible label */\n  @Prop() label: string;\n\n  // Events\n\n  /** Emitted when the menu gains focus. */\n  @Event() nanoFocus: EventEmitter;\n\n  /** Emitted when the menu loses focus. */\n  @Event() nanoBlur: EventEmitter;\n\n  /** Emitted when a menu item is selected. */\n  @Event() nanoSelect: EventEmitter<\n    HTMLNanoOptionElement | HTMLNanoNavItemElement\n  >;\n\n  // Public Methods\n\n  /** Sets focus on the menu. */\n  @Method()\n  async setFocus() {\n    if (this.menu?.focus) this.menu.focus({ preventScroll: true });\n  }\n\n  /** Removes focus from the menu. */\n  @Method()\n  async removeFocus() {\n    if (this.menu?.blur) this.menu.blur();\n  }\n\n  /** Sets the current active item */\n  @Method()\n  async showActiveElement() {\n    if (this.selectedItem)\n      this.selectedItem.scrollIntoView({ block: 'nearest' });\n  }\n\n  /** Removes any active item's state */\n  @Method()\n  async resetActiveItem() {\n    this.getItems\n      .filter((i) => i.tagName.toLowerCase() === 'nano-option')\n      .map((i) => i.setAttribute('tabindex', '-1'));\n  }\n\n  // Private methods\n\n  get getItems() {\n    let items: ValidElement[];\n    const opened = this.el.querySelectorAll('nano-nav-item.secondary-open');\n    if (opened.length) {\n      const ctx = opened[opened.length - 1] as HTMLNanoNavItemElement;\n      items = Array.from(ctx.querySelectorAll('nano-nav-item, nano-option'));\n    } else {\n      items = getDirectChildren(\n        this.el,\n        'nano-nav-item, nano-option',\n        'slot'\n      ) as ValidElement[];\n    }\n    return items.filter((el) => !el.disabled && !el.hidden);\n  }\n\n  get activeItem() {\n    const activeElement = getActiveElement();\n    return this.getItems.find(\n      (i) =>\n        i.getAttribute('tabindex') === '0' ||\n        i === activeElement ||\n        i.classList.contains('has-focus')\n    );\n  }\n\n  get selectedItem() {\n    return this.getItems.find((i) => i.selected);\n  }\n\n  private async setActiveFocusItem(item?: ValidElement, focus = true) {\n    const items = this.getItems;\n    const activeItem =\n      !item || item.disabled ? items.find((i) => i.selected) || items[0] : item;\n\n    items\n      .filter((i) => i.tagName.toLowerCase() === 'nano-option')\n      .map((i: HTMLNanoOptionElement) =>\n        i.setAttribute('tabindex', i === activeItem ? '0' : '-1')\n      );\n\n    if (!focus) return;\n\n    if (activeItem) {\n      (activeItem as NNI).setFocus\n        ? (activeItem as NNI).setFocus()\n        : activeItem.focus();\n    } else this.menu.focus();\n  }\n\n  // Event Handlers\n\n  @Listen('mousedown', { target: 'body' })\n  @Listen('keydown')\n  handleBlur(e: KeyboardEvent | MouseEvent) {\n    if (!this.hasFocus) return;\n\n    const kev = e as KeyboardEvent;\n    let found: boolean;\n\n    if (kev.key) {\n      if (kev.key !== 'Tab') return;\n      found =\n        getActiveElement() &&\n        getActiveElement().closest(this.el.tagName.toLowerCase()) === this.el;\n    } else found = !!e.composedPath().find((el) => el === this.el);\n\n    if (!found) {\n      this.resetActiveItem();\n      this._hasFocus = false;\n      this.nanoBlur.emit();\n    }\n  }\n\n  private handleFocus = () => {\n    this.setActiveFocusItem(this.selectedItem || this.getItems[0]);\n\n    this._hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item = target.closest('nano-nav-item');\n\n    if (item && !item.disabled) {\n      this.nanoSelect.emit(item);\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // When keying through the menu, if the mouse happens to be hovering over a menu item and the menu scrolls, the\n    // mouseout/mouseover event will fire causing the selection to be different than what the user expects. This gives\n    // us a way to temporarily ignore mouse events while the user is interacting with a keyboard.\n    clearTimeout(this.ignoreMouseTimeout);\n    this.ignoreMouseTimeout = setTimeout(\n      () => (this.ignoreMouseEvents = false),\n      500\n    );\n    this.ignoreMouseEvents = true;\n\n    // Make a selection when pressing enter\n    switch (event.key) {\n      case ' ':\n        if (this.activeItem) this.activeItem.click();\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n      case 'PageDown':\n      case 'PageUp':\n      case 'Home':\n      case 'End':\n        const items = this.getItems;\n        const selectedItem = this.activeItem;\n        let index = items.indexOf(selectedItem);\n\n        if (items.length) {\n          event.preventDefault();\n\n          if (event.key === 'ArrowDown') {\n            index++;\n          } else if (event.key === 'ArrowUp') {\n            index--;\n          } else if (event.key === 'Home' || event.key === 'PageUp') {\n            index = 0;\n          } else if (event.key === 'End' || event.key === 'PageDown') {\n            index = items.length - 1;\n          }\n\n          if (index < 0) index = items.length - 1;\n          if (index > items.length - 1) index = 0;\n\n          this.setActiveFocusItem(items[index]);\n          if (items[index]) items[index].scrollIntoView({ block: 'nearest' });\n          return;\n        }\n        break;\n    }\n\n    // Handle type-to-search behavior when non-control characters are entered\n    if (event.key === ' ' || /^[a-z0-9]+$/i.test(event.key)) {\n      clearTimeout(this.typeToSelectTimeout);\n      this.typeToSelectTimeout = setTimeout(\n        () => (this.typeToSelect = ''),\n        750\n      );\n      this.typeToSelect += event.key;\n\n      const items = this.getItems;\n      for (const item of items) {\n        const slot = item.shadowRoot.querySelector(\n          'slot:not([name])'\n        ) as HTMLSlotElement;\n        const label = getTextContent(slot).toLowerCase().trim();\n        if (\n          label.substring(0, this.typeToSelect.length) === this.typeToSelect\n        ) {\n          this.setActiveFocusItem(item);\n          break;\n        }\n      }\n    }\n  };\n\n  private handleMouseOver = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item =\n      target.closest('nano-nav-item') || target.closest('nano-option');\n\n    if (item && !this.ignoreMouseEvents) {\n      this.setActiveFocusItem(item);\n    }\n  };\n\n  // Component Lifecycle\n\n  render() {\n    return (\n      <Host>\n        <div\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseOver={this.handleMouseOver}\n          onFocus={this.handleFocus}\n          aria-label={this.label ? this.label : undefined}\n          role={this.type}\n          ref={(el) => (this.menu = el)}\n          part=\"base\"\n          class={{\n            menu: true,\n            ['menu--' + this.type]: true,\n            'menu--has-focus': this.hasFocus,\n          }}\n          tabIndex={-1}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --padding-top: Defaults to #{$spacing-small};\n   * @prop --padding-bottom: Defaults to #{$spacing-small};\n   * @prop --padding-start: Defaults to #{$spacing-small};\n   * @prop --padding-end: Defaults to #{$spacing-small};\n\n   * @prop --bg: default background. Defaults to none;\n   * @prop --bg-selected: background when selected. Defaults to #{$select-opt-selected};\n   * @prop --bg-focus: background when focused. Defaults to var(--nano-color-base, #{nano-color(primary, tint)});\n   * @prop --bg-disabled: background when disabled. Defaults to none;\n\n   * @prop --color: default text color. Defaults to var(--input-text-color, #{$input-text-color});\n   * @prop --color-selected: text color when selected. Defaults to var(--nano-color-base, #{nano-color(primary, base)});\n   * @prop --color-focus: text color when focused. Defaults to var(--nano-color-base, #{nano-color(primary, contrast)});\n   * @prop --color-disabled: text color when disabled. Defaults to #{map.get($colors, palegrey)};\n\n    * @prop --opt-icon-size: Sizes all icons within the option. Defaults to 1.4em;\n  */\n\n  --bg: none;\n  --bg-selected: #{$select-opt-selected};\n  --bg-focus: var(--nano-color-base, #{nano-color(primary, tint)});\n  --bg-disabled: none;\n  --color: var(--input-text-color, #{$input-text-color});\n  --color-selected: var(--nano-color-base, #{nano-color(primary, base)});\n  --color-focus: var(--nano-color-contrast, #{nano-color(primary, contrast)});\n  --color-disabled: #{map.get($colors, palegrey)};\n  --opt-icon-size: 1.6em;\n\n  display: block;\n  color: var(--color);\n  overflow: hidden;\n  font-size: 14px;\n  font-size: #{'clamp(12px, .9em, 16px)'};\n}\n\n:host(:focus) {\n  outline: none;\n}\n\n.option {\n  $self: &;\n\n  position: relative;\n  user-select: none;\n  cursor: pointer;\n  display: flex;\n  align-items: stretch;\n  width: 100%;\n  background: var(--bg);\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: var(--padding-top) var(--padding-bottom);\n\n  // focus\n  :host(:focus) &:not(.option--disabled),\n  :host &.option--selected {\n    outline: none;\n    background: var(--bg-selected);\n    color: var(--color-selected);\n  }\n\n  :host(:focus) &:not(.option--disabled) {\n    background: var(--bg-focus);\n    color: var(--color-focus);\n  }\n\n  // disabled\n  &.option--disabled {\n    outline: none;\n    color: var(--color-disabled);\n    cursor: not-allowed;\n    background: var(--bg-disabled);\n  }\n\n  // no value\n  &.option--novalue {\n    font-style: italic;\n    opacity: 0.7;\n  }\n\n  &__label {\n    flex: 1 1 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  &__start {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n\n    ::slotted(nano-icon) {\n      font-size: var(--opt-icon-size);\n    }\n\n    ::slotted(:last-child) {\n      margin-inline-end: 0.5em;\n    }\n  }\n\n  &__end {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n\n    ::slotted(nano-icon) {\n      font-size: var(--opt-icon-size);\n    }\n\n    ::slotted(:first-child) {\n      margin-inline-start: 0.5em;\n    }\n  }\n\n  &__check {\n    visibility: hidden;\n    display: flex;\n    position: absolute;\n    inset-inline-start: 0.6em;\n    inset-block-start: calc(50% - 0.6em);\n    align-items: center;\n    font-size: 0.9em;\n\n    #{$self}--selected:not(#{$self}--novalue) & {\n      visibility: visible;\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  h,\n  Host,\n  State,\n  Watch,\n  Element,\n  Listen,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { OptionInterface } from '../../interface';\nimport { debounce, getDirectChildren } from '../../utils';\n\nlet optIds = 0;\n\n/**\n * Select options to be used with [nano-select](/story/nano-components-select) or [nano-datalist](/story/nano-components-select)\n *\n * @slot - main label. Defaults to `label` or `value` prop\n * @slot checked-icon - icon to indicated checked / selected state. Defaults to fontawesome light/check\n * @slot start - suitable for an icon or content displayed at the start of the main label\n * @slot end - suitable for an icon or content displayed at the end of the main label\n */\n@Component({\n  tag: 'nano-option',\n  styleUrl: 'option.scss',\n  shadow: true,\n})\nexport class Option implements OptionInterface {\n  private optId = `nano-option-${optIds++}`;\n  @Element() host: HTMLNanoOptionElement;\n  @State() hasFocus = false;\n\n  constructor() {\n    this.handleClick = debounce(this.handleClick.bind(this), 5);\n  }\n\n  // Public API\n\n  /**\n   * Value of the option\n   */\n  @Prop({ mutable: true, reflect: true }) value: string = '';\n\n  @Watch('value')\n  valueChanged() {\n    if (!this.value || !this.value.length) this.value = this.labelContent;\n  }\n\n  /**\n   * Label of the option\n   */\n  @Prop({ mutable: true, reflect: true }) label: string = '';\n\n  @Watch('label')\n  labelChanged() {\n    if (!this.label || !this.label.length)\n      this.label = this.labelContent.length ? this.labelContent : this.value;\n  }\n\n  /**\n   * Whether this option is selected\n   */\n  @Prop({ reflect: true }) selected: boolean = false;\n\n  /**\n   * Whether this option should be disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** You can add extra meta for this option. When displayed in a list, users\n   * search / filter via extra related terms. Another usecase is 'endonyms'\n   */\n  @Prop() filterMeta: string = '';\n\n  /** Fired when an option is selected */\n  @Event() nanoSelect!: EventEmitter<HTMLNanoOptionElement>;\n\n  // Event handlers\n\n  // stop scrolling on select\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    if (e.key !== ' ' && e.key !== 'Enter') return;\n    e.preventDefault();\n    this.nanoSelect.emit(this.host);\n  }\n\n  private handleClick() {\n    if (this.disabled) return;\n    this.nanoSelect.emit(this.host);\n  }\n\n  // Private logic\n\n  private get labelContent() {\n    return getDirectChildren(this.host, '*:not([slot])', false)\n      .map((el) => el.textContent)\n      .join(' ')\n      .trim();\n  }\n\n  // Component lifecycle\n\n  componentWillLoad() {\n    this.valueChanged();\n    this.labelChanged();\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"option\"\n        aria-selected={this.selected ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n      >\n        <div\n          onMouseDown={this.handleClick}\n          id={this.optId}\n          class={{\n            option: true,\n            'option--selected': this.selected,\n            'option--disabled': this.disabled,\n            'option--novalue': !this.value,\n          }}\n        >\n          <div part=\"check-icon\" class=\"option__check\">\n            <slot name=\"check-icon\">\n              <nano-icon name=\"light/check\" aria-hidden=\"true\" />\n            </slot>\n          </div>\n          <div part=\"start\" class=\"option__start\">\n            <slot name=\"start\"></slot>\n          </div>\n          <div part=\"label\" class=\"option__label\">\n            <slot>{this.label || this.value}</slot>\n          </div>\n          <div part=\"end\" class=\"option__end\">\n            <slot name=\"end\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-7f5e58b5.system.entry.js

@@ -1,5 +0,0 @@
-var __awaiter=this&&this.__awaiter||function(e,t,n,a){function i(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,s){function o(e){try{l(a.next(e))}catch(t){s(t)}}function r(e){try{l(a["throw"](e))}catch(t){s(t)}}function l(e){e.done?n(e.value):i(e.value).then(o,r)}l((a=a.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(s[0]&1)throw s[1];return s[1]},trys:[],ops:[]},a,i,s,o;return o={next:r(0),throw:r(1),return:r(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function r(e){return function(t){return l([e,t])}}function l(o){if(a)throw new TypeError("Generator is already executing.");while(n)try{if(a=1,i&&(s=o[0]&2?i["return"]:o[0]?i["throw"]||((s=i["return"])&&s.call(i),0):i.next)&&!(s=s.call(i,o[1])).done)return s;if(i=0,s)o=[o[0]&2,s.value];switch(o[0]){case 0:case 1:s=o;break;case 4:n.label++;return{value:o[1],done:false};case 5:n.label++;i=o[1];o=[0];continue;case 7:o=n.ops.pop();n.trys.pop();continue;default:if(!(s=n.trys,s=s.length>0&&s[s.length-1])&&(o[0]===6||o[0]===2)){n=0;continue}if(o[0]===3&&(!s||o[1]>s[0]&&o[1]<s[3])){n.label=o[1];break}if(o[0]===6&&n.label<s[1]){n.label=s[1];s=o;break}if(s&&n.label<s[2]){n.label=s[2];n.ops.push(o);break}if(s[2])n.ops.pop();n.trys.pop();continue}o=t.call(e,n)}catch(r){o=[6,r];i=0}finally{a=s=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};var __spreadArray=this&&this.__spreadArray||function(e,t,n){if(n||arguments.length===2)for(var a=0,i=t.length,s;a<i;a++){if(s||!(a in t)){if(!s)s=Array.prototype.slice.call(t,0,a);s[a]=t[a]}}return e.concat(s||Array.prototype.slice.call(t))};
-/*!
- * Web Components for Nanopore digital Web Apps
- */System.register(["./p-f0e912f3.system.js","./p-6b5760b1.system.js","./p-08f7855e.system.js","./p-1e62746a.system.js","./p-a504d182.system.js","./p-e03f327b.system.js","./p-9edbf25d.system.js"],(function(e,t){"use strict";var n,a,i,s,o,r,l,c,h,u,d,p,m;return{setters:[function(e){n=e.r;a=e.c;i=e.i;s=e.f;o=e.h;r=e.l;l=e.e;c=e.g},function(e){h=e.a},function(e){u=e.d},function(e){d=e.C},function(e){p=e.d},function(e){m=e.c},function(){}],execute:function(){var b=undefined&&undefined.__rest||function(e,t){var n={};for(var a in e)if(Object.prototype.hasOwnProperty.call(e,a)&&t.indexOf(a)<0)n[a]=e[a];if(e!=null&&typeof Object.getOwnPropertySymbols==="function")for(var i=0,a=Object.getOwnPropertySymbols(e);i<a.length;i++){if(t.indexOf(a[i])<0&&Object.prototype.propertyIsEnumerable.call(e,a[i]))n[a[i]]=e[a[i]]}return n};function g(e,t){if(t===void 0){t={}}return __awaiter(this,void 0,void 0,(function(){var n,a,i,s,o,r,l,c,h,u;return __generator(this,(function(d){switch(d.label){case 0:n=t.body,a=b(t,["body"]);i={Accept:"application/json, text/plain, */*","Access-Control-Allow-Origin":"*","Content-Type":"application/json",Cache:"no-cache"};s=Object.assign(Object.assign({method:n?"POST":"GET",credentials:"include",keepalive:true,mode:"cors"},a),{headers:Object.assign(Object.assign({},i),a.headers)});if(n){s.body=JSON.stringify(n)}o=setTimeout((function(){}),0);if(window.AbortController){r=new AbortController;l=a.timeout,c=l===void 0?500:l;o=setTimeout((function(){return r.abort()}),c);s.signal=r.signal}return[4,fetch(e,s)];case 1:h=d.sent();clearTimeout(o);if(!h.ok)return[3,3];return[4,h.json()];case 2:return[2,d.sent()];case 3:return[4,h.text()];case 4:u=d.sent();return[2,new Error(u)]}}))}))}var f=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--padding:12px;--padding-top:var(--padding);--padding-end:var(--padding);--padding-bottom:var(--padding);--padding-start:var(--padding);--bar-background:#005c75;--bar-text-color:white;--bar-color-shade:rgb(19, 89, 111);--bar-color-tint:rgb(19, 89, 111);--bar-color-focus:#90c6e7;--menu-background:#001a21;--menu-text-color:white;--menu-dropdown-bg:#196c82;--menu-dropdown-color:white;display:block;position:relative;line-height:1.5;height:100%}:host *{-webkit-box-sizing:inherit;box-sizing:inherit}.global-nav{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;font-size:0.88em;z-index:var(--nano-layer-index-menubar, 10)}.global-nav button{background:none;color:inherit;border:none;padding:0}.global-nav .icon-btn{position:relative;background:none;color:inherit;border:none;-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}.global-nav .icon-btn nano-icon{width:18px;height:18px}.global-nav ::slotted(nano-nav-item[slot=icon]){--padding-top:9px;--padding-bottom:9px;--padding-start:7px;--padding-end:7px;--display:flex;font-size:18px}.global-nav a{color:inherit;text-decoration:none;white-space:nowrap}.global-nav .nav-links_title{margin:8px 0 3px}.global-nav .nav-links ul{margin:0;padding:0}.global-nav .nav-links li{list-style:none}.global-nav .login-btn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:0.94em}.global-nav .menu-btn{padding:9px var(--padding) 9px var(--padding)}.gn-menu{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:-1;display:none;-webkit-transition:z-index 0.01s ease 0.2s;transition:z-index 0.01s ease 0.2s;height:100vh;width:100vw;overflow-y:auto}:host(.threshold-4) .gn-menu{position:absolute;width:calc(100vw - 20px)}.gn-menu.menu-full-screen{width:100vw !important}.gn-menu_wrap{max-width:92vw;width:335px;background:var(--menu-background);color:var(--menu-text-color);padding:var(--padding) 0;-webkit-box-shadow:0 0 36px 0 rgba(0, 0, 0, 0.8);box-shadow:0 0 36px 0 rgba(0, 0, 0, 0.8);position:relative;pointer-events:all;-webkit-margin-after:36px;margin-block-end:36px;opacity:0;outline:none;-webkit-transition:opacity 0.2s ease, -webkit-transform 0.2s ease;transition:opacity 0.2s ease, -webkit-transform 0.2s ease;transition:transform 0.2s ease, opacity 0.2s ease;transition:transform 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease}.gn-menu_wrap.has-promotion{padding:var(--padding) 0 0}.gn-menu.open{z-index:var(--nano-layer-index-dropdown, 300);-webkit-transition:z-index 0.01s ease;transition:z-index 0.01s ease}.gn-menu.open .gn-menu_wrap{opacity:1;-webkit-transform:translate3d(0, 0, 0) !important;transform:translate3d(0, 0, 0) !important;-webkit-transition:opacity 0.2s ease 0.01s, -webkit-transform 0.2s ease 0.01s;transition:opacity 0.2s ease 0.01s, -webkit-transform 0.2s ease 0.01s;transition:transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s;transition:transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s, -webkit-transform 0.2s ease 0.01s}.gn-menu_actions{-webkit-padding-end:calc(var(--padding) / 2);padding-inline-end:calc(var(--padding) / 2);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.gn-menu_actions-counter{background:#d0021b;color:#fff;position:absolute;inset-block-end:4px;inset-inline:auto 0;font-size:9px;height:14px;line-height:14px;width:auto;min-width:14px;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;text-indent:0}.gn-menu .content-wrap{position:relative;overflow:hidden;-webkit-transition:0.2s ease min-height;transition:0.2s ease min-height;min-height:190px}.gn-menu .content--sub{padding:var(--padding) 0 var(--padding) 7px}.gn-menu .menu-btn{-webkit-margin-end:auto;margin-inline-end:auto}.gn-menu .nav-links{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.gn-menu .nav-links ::slotted(nano-nav-item),.gn-menu .nav-links nano-nav-item{--icon-size:14px;--display:inline-block;--secondary-bg-color:#001a21;--padding-top:10px;--padding-bottom:10px;--padding-end:calc(var(--padding) * 2);--padding-start:calc(var(--padding) + 3px);--color:white;--color-hover:#90c6e7;--bg-color-hover:transparent;--bg-color-focus:#002530;--focus-outline:none;font-size:0.99em;width:100%}.gn-menu .nav-links .user-nav{--bg-color:#193037;--padding-top:9px;--padding-bottom:9px;font-weight:bold;margin:5px 0 0}.gn-menu .nav-links .user-nav ::slotted(nano-nav-item),.gn-menu .nav-links .user-nav nano-nav-item{font-weight:500;--bg-color:transparent}.gn-menu .nav-links_title{margin:0 var(--padding) 4px;-webkit-border-after:1px solid #33484d;border-block-end:1px solid #33484d;-webkit-padding-after:8px;padding-block-end:8px;font-size:0.86em;text-transform:uppercase;color:#90c6e7;letter-spacing:1px;font-weight:700}.gn-menu .nav-links-wrap{margin:18px 0}.gn-menu .nav-links-wrap:last-child{-webkit-margin-after:0;margin-block-end:0}.gn-menu .nav-links .back-btn{-webkit-border-before:1px solid #33484d;border-block-start:1px solid #33484d;-webkit-border-after:1px solid #33484d;border-block-end:1px solid #33484d;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:10px 11px 10px 0;width:100%;font-size:12px;text-transform:uppercase;color:#90c6e7;letter-spacing:1px;font-weight:700}.gn-menu .nav-links .back-btn nano-icon{-webkit-margin-end:10px;margin-inline-end:10px;font-size:12px;color:white}.gn-menu .nav-links--sub{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.gn-menu .nav-links--sub ::slotted(nano-nav-item),.gn-menu .nav-links--sub nano-nav-item{--border-bottom:none;--padding-end:var(--padding);--padding-start:var(--padding);--padding-top:8px;--padding-bottom:8px;margin:0;width:50%;line-height:1.8}.gn-menu .nav-links .content{padding:8px var(--padding)}.gn-menu .login-btn{padding-inline:7px var(--padding);padding-block:9px}.gn-menu .login-btn nano-icon{-webkit-margin-start:10px;margin-inline-start:10px}.gn-menu .logout-btn{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.gn-menu .logout-btn a{padding:0 5px}.sticker-trigger{background:var(--bar-background);width:100%;z-index:calc(var(--nano-layer-index-menubar, 10) + 1)}.bars{color:var(--bar-text-color);z-index:var(--nano-layer-index-menubar, 10);position:relative;max-width:100%;min-width:100%;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:0.2s ease box-shadow;transition:0.2s ease box-shadow}[stuck] .bars{-webkit-box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15)}.bars::before{content:"";width:100%;height:100%;z-index:-1;background:var(--bar-background);position:absolute}.bars .search-widget{-webkit-margin-start:11px;margin-inline-start:11px;-webkit-margin-end:auto;margin-inline-end:auto;position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;max-width:45vw;min-width:269px;max-height:36px}.bars .search-inputs{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0}.bars .search-inputs input[type=submit]{display:none}.bars .search-autocomplete{position:absolute;inset-block-start:calc(100% - 2px);width:100%;inset-inline-start:0;background:white;border:2px solid var(--bar-color-tint);border-radius:0 0 5px 5px;color:#4a4a4a;font-size:0.85em;-webkit-padding-before:calc(var(--padding) / 2);padding-block-start:calc(var(--padding) / 2);-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-after:1px;padding-block-end:1px;-webkit-padding-start:0;padding-inline-start:0;z-index:1}.bars .search-autocomplete-hit{-webkit-padding-before:calc(var(--padding) / 4);padding-block-start:calc(var(--padding) / 4);-webkit-padding-after:calc(var(--padding) / 4);padding-block-end:calc(var(--padding) / 4);-webkit-padding-start:var(--padding);padding-inline-start:var(--padding);-webkit-padding-end:var(--padding);padding-inline-end:var(--padding);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;text-align:start;line-height:1.5;cursor:pointer}.bars .search-autocomplete-hit-scope{font-size:0.76em;color:#a7b0b3;font-weight:600}.bars .search-autocomplete-hit:hover,.bars .search-autocomplete-hit:focus{background-color:#e4e6e8}.bars .search-autocomplete-hit .search__highlight,.bars .search-autocomplete-hit em{font-weight:bold;font-style:normal}.bars .search-autocomplete-hit--no-result:hover,.bars .search-autocomplete-hit--no-result:focus{background:none !important}.bars .search-autocomplete-foot{margin:7px 0 0}.bars .search-autocomplete-submit{background:none;border:none;-ms-flex-item-align:normal;-ms-grid-row-align:normal;align-self:normal;padding:9px var(--padding);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#007495;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;width:100%;text-decoration:underline;-webkit-border-before:1px solid #e8eaea;border-block-start:1px solid #e8eaea}.bars .search-autocomplete-submit:hover,.bars .search-autocomplete-submit:focus{background-color:#e4e6e8}.bars .search-input{--input-border-style:solid 1px rgb(85, 140, 157);--input-border-style--focus:solid 1px var(--bar-color-focus, #90c6e7);--input-border-width:1px;font-size:0.9em}.bars nano-select.search-input{--input-bg-color:var(--bar-color-tint, rgb(88, 140, 161));--input-text-color:inherit;--input-border-radius:5px 0 0 5px;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;width:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;inset-inline-start:1px}:host([dir=rtl]) .bars nano-select.search-input{--input-border-radius:0 5px 5px 0}:host(:not(.ready)) .bars nano-select.search-input{overflow:hidden;max-height:1em}.bars nano-select.search-input .down-arrow{font-size:0.65em}.bars nano-input.search-input{--input-text-color:inherit;--input-bg-color:var(--bar-color-shade, rgb(40, 110, 133));--clear-btn-color:#4a4a4a;--input-border-radius:0 5px 5px 0;--placeholder-color:white;width:206px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1}:host([dir=rtl]) .bars nano-input.search-input{--input-border-radius:5px 0 0 5px}:host(:not(.ready)) .bars nano-input.search-input{overflow:hidden;max-height:1em}.bars nano-input.search-input.has-value{--input-bg-color:#fff;--input-text-color:#4a4a4a}.bars nano-input.search-input.has-value .search-icon{color:#4a4a4a}.bars nano-input.search-input .search-icon{background:none;color:white;padding:0 8px;display:none}.bars nano-input.search-input .search-icon--show{display:-webkit-box;display:-ms-flexbox;display:flex}.bars nano-input.search-input .search-icon--loader{-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.bars nano-input.search-input .search-icon nano-icon{height:1.4em}.main-bar{width:100%;padding-inline:0 var(--padding);padding-block:var(--padding);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;overflow-x:hidden}.main-bar:focus{outline:none}:host(.ready) .main-bar{overflow-x:visible}.main-bar>*,.main-bar ::slotted(*){-webkit-transition:opacity 0.2s ease;transition:opacity 0.2s ease}:host(:not(.ready)) .main-bar>*,:host(:not(.ready)) .main-bar ::slotted(*){opacity:0 !important}:host(.ready) .main-bar>*,:host(.ready) .main-bar ::slotted(*){opacity:1}:host(.resizing) .main-bar>*,:host(.resizing) .main-bar ::slotted(*){opacity:0 !important}.main-bar>*{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.main-bar>* ::slotted(nano-nav-item[slot=icon]){-webkit-margin-start:11px;margin-inline-start:11px}.main-bar>* ::slotted(nano-nav-item),.main-bar>* nano-nav-item{--color-hover:#e4e6e8;--secondary-bg-color:var(--menu-dropdown-bg);--secondary-color:var(--menu-dropdown-color);--bg-color-open:var(--bar-background);text-decoration:none !important}.main-bar .icon-btn{-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0;-webkit-margin-start:6px;margin-inline-start:6px}:host(.threshold-2) .main-bar .icon-btn{-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0;-webkit-margin-start:11px;margin-inline-start:11px}.main-bar .menu-btn.icon-btn{margin:0 !important;-webkit-border-end:1.5px solid var(--bar-color-shade);border-inline-end:1.5px solid var(--bar-color-shade)}.main-bar .user-links{position:relative}.main-bar .user-links .icon-btn{-webkit-padding-end:0;padding-inline-end:0;font-size:0.93em;font-weight:500}.main-bar .user-links .icon-btn nano-icon{-webkit-margin-start:5px;margin-inline-start:5px;width:16px;height:16px;-webkit-transform-origin:center;transform-origin:center;-webkit-transition:color 0.2s ease, -webkit-transform 0.2s ease;transition:color 0.2s ease, -webkit-transform 0.2s ease;transition:transform 0.2s ease, color 0.2s ease;transition:transform 0.2s ease, color 0.2s ease, -webkit-transform 0.2s ease}.main-bar .user-links .icon-btn.open nano-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg);color:#007495}.main-bar .user-links-panel{display:none;position:absolute;border-radius:4px 0 4px 4px;-webkit-box-shadow:0 1px 5px 0 rgba(0, 0, 0, 0.4);box-shadow:0 1px 5px 0 rgba(0, 0, 0, 0.4);background-color:#568c9d;opacity:0;-webkit-transform:translate3d(0, 24px, 0);transform:translate3d(0, 24px, 0);-webkit-transition:opacity 0.2s ease, -webkit-transform 0.2s ease;transition:opacity 0.2s ease, -webkit-transform 0.2s ease;transition:transform 0.2s ease, opacity 0.2s ease;transition:transform 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease;inset-inline-end:0;font-size:0.85em;min-width:250px;z-index:1}.main-bar .user-links-panel:focus{outline:none}.main-bar .user-links-panel.show{opacity:1;-webkit-transform:translate3d(0, 4px, 0);transform:translate3d(0, 4px, 0)}.main-bar .user-links-panel-content{padding:0 18px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.main-bar .user-links-panel-content a{padding:11px 0;-webkit-border-after:#669dac 1px solid;border-block-end:#669dac 1px solid}.main-bar .user-links-panel-content a:hover,.main-bar .user-links-panel-content a:focus{color:#455556}.main-bar .user-links-panel-content a:last-child{-webkit-border-after:none;border-block-end:none}.main-bar .user-links-panel-foot{background-color:#aac5cd;border-radius:0 0 4px 4px;padding:var(--padding);color:#455556;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:500;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.main-bar .user-links-panel-foot a:hover{text-decoration:underline}.main-bar .logo{height:34px;width:auto;min-width:196px}:host(:not(.threshold-1)) .main-bar .logo{height:30px}.main-bar .logo-link{-webkit-margin-end:auto;margin-inline-end:auto;-webkit-margin-start:0;margin-inline-start:0;padding-inline:11px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:none}.main-bar .nav-links{font-size:0.75rem;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}.main-bar .nav-links ul{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}.main-bar .nav-links ::slotted(nano-nav-item),.main-bar .nav-links nano-nav-item{--padding-top:7px;--padding-bottom:7px;--padding-end:2px;--padding-start:2px;--margin:0 8px}.main-bar .nav-links--main{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;letter-spacing:0.33px;font-weight:600;font-stretch:expanded;font-size:0.8125rem}.main-bar .nav-links--main ::slotted(nano-nav-item){--color:#fff;--padding-end:3px;--padding-start:0}.main-bar .nav-links--sub{--color:#e2e2e2;-webkit-margin-start:6px;margin-inline-start:6px;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.main-bar .login-btn{display:inline-block;border-radius:4px;background-color:#17bb75;color:#fff;padding:3px 10px;position:relative;inset-inline-start:auto;inset-block-end:auto;margin-inline:11px 0}.main-bar .measure-ele{min-width:1px;display:block;margin:0;padding:0}.search-bar{height:0;overflow:hidden;-webkit-transition:0.2s ease height;transition:0.2s ease height;padding:0 var(--padding);outline:none;max-width:45em;-webkit-margin-start:auto;margin-inline-start:auto}.search-bar .search-widget{margin:0;overflow:inherit;max-width:none;max-height:none;padding:0 0 var(--padding)}.search-bar .search-inputs{padding:0 0;margin:0 0}.search-bar .search-autocomplete{inset-block-start:calc(100% - (var(--padding) + 1px))}.site-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-transition:min-height 0.2s ease;transition:min-height 0.2s ease;min-height:calc(100% - 61px);position:relative;z-index:auto;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.mask{opacity:0;background:rgba(0, 0, 0, 0.3);position:fixed;inset-inline:0;inset-block-start:0;height:100vh;z-index:-1;-webkit-transition:opacity 0.2s ease, visibility 0.01s ease 0.2s, z-index 0.01s ease 0.2s, -webkit-transform 0.2s ease;transition:opacity 0.2s ease, visibility 0.01s ease 0.2s, z-index 0.01s ease 0.2s, -webkit-transform 0.2s ease;transition:transform 0.2s ease, opacity 0.2s ease, visibility 0.01s ease 0.2s, z-index 0.01s ease 0.2s;transition:transform 0.2s ease, opacity 0.2s ease, visibility 0.01s ease 0.2s, z-index 0.01s ease 0.2s, -webkit-transform 0.2s ease;visibility:hidden}.mask.open{opacity:1;-webkit-transition:z-index 0.01s ease, visibility 0.01s ease, opacity 0.2s ease 0.01s, -webkit-transform 0.2s ease 0.01s;transition:z-index 0.01s ease, visibility 0.01s ease, opacity 0.2s ease 0.01s, -webkit-transform 0.2s ease 0.01s;transition:z-index 0.01s ease, visibility 0.01s ease, transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s;transition:z-index 0.01s ease, visibility 0.01s ease, transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s, -webkit-transform 0.2s ease 0.01s;z-index:3;visibility:visible}';var v={search:0,about:1,main:2,login:3,icon:4};var x=e("nano_global_nav",function(){function e(e){var t=this;n(this,e);this.nanoIsReady=a(this,"nanoIsReady",7);this.nanoSearchResult=a(this,"nanoSearchResult",7);this.nanoSearchError=a(this,"nanoSearchError",7);this.nanoSearchReset=a(this,"nanoSearchReset",7);this.currSize=0;this.thresholdsGoingUp=false;this.THRESHOLDLIMIT=Object.keys(v).length;this.autocompleteEles=[];this.currAIndex=-1;this.isLoggedIn=false;this.myAccData=null;this.aboutNavItms=[];this.siteNavItms=[];this.loggedInNavItms=[];this.hasLoggedinSlot=false;this.hasSiteSlot=false;this.hasPromotionSlot=false;this.aboutSlotLen=0;this.iconSlotLen=0;this.mainSlotLen=0;this.overflowSlotLen=0;this.searchSlotLen=0;this.internalSearchIndeces=[];this.thresholdReady=false;this.remoteDataReady=false;this.ready=false;this.isResizing=false;this.threshold=this.THRESHOLDLIMIT;this.modalOpen=false;this.modalIsOpen=false;this.searchBarShown=false;this.scrollingUp=true;this.searchLoading=false;this.showAutocomplete=false;this.secondaryMenuOpen=false;this.userMenuOpen=false;this.menuFullScreen=false;this.searchValInternal="";this.env="prod";this.ssoRedirect=encodeURIComponent(window.location.href);this.getMyAccountData=true;this.activeMyAccountSections=null;this.showSearch=true;this.showLogo=true;this.logoUrl=location.protocol+"//"+location.host;this.searchIndeces=[];this.myAccountUser=null;this.searchValue="";this.searchIndex="all_prod_en";this.cartCount=0;this.msgCount=0;this.cartUrl=null;this.msgUrl=null;this.setResizingState=function(e){if(e===void 0){e=false}if(typeof t.debounceSetResizingState==="undefined"){t.debounceSetResizingState=p(t.setResizingState,600)}if(e){t.isResizing=true;t.debounceSetResizingState()}else{t.isResizing=false;t.thresholdsGoingUp=false}};this.onMenuBtnKeyDown=function(e){switch(e.key){case"Enter":case" ":t.modalOpen?t.menuClose(e,true):t.menuOpen();break}};this.onMenuBtnClick=function(e){t.menuClose(e,true)};this.menuOpen=function(e){if(e)e.preventDefault();t.menuDiv.style.display="block";t.modalOpen=true;t.modalIsOpen=true;t.menuWrapDiv.addEventListener("focusout",t.menuClose);t.menuWrapDiv.focus({preventScroll:true});if(t.threshold<2||t.menuWrapDiv.scrollHeight>window.innerHeight){document.body.style.overflow="hidden";t.menuFullScreen=true}else document.body.style.overflowX="hidden"};this.onMenuHidden=function(){t.menuDiv.removeEventListener("transitionend",t.onMenuHidden);t.menuWrapDiv.removeEventListener("focusout",t.menuClose);document.body.style.overflow="";t.menuDiv.style.display="none";t.modalIsOpen=false;t.menuFullScreen=false;setTimeout((function(){if(document.activeElement===document.body&&t.menuBtn)t.mainBarDiv.focus({preventScroll:true})}),50)};this.menuClose=function(e,n){if(n===void 0){n=false}if(!n){var a=e;if(a&&a.relatedTarget&&m("#global-nav-menu",a.relatedTarget))return;if(a&&a.relatedTarget&&a.relatedTarget.closest("#global-nav-menu"))return;if(a&&a.relatedTarget&&a.relatedTarget.closest('[slot="promotion"]'))return;if(t.secondaryMenuOpen)return}t.modalOpen=false;t.menuDiv.addEventListener("transitionend",t.onMenuHidden)};this.subMenuClose=function(e){e.preventDefault();e.target.closest("nano-nav-item").open=false};this.onUserBtnClick=function(e){e.preventDefault();t.userMenuOpen=!t.userMenuOpen};this.onUserBtnKeyDown=function(e){switch(e.key){case"Enter":case" ":t.userMenuOpen=!t.userMenuOpen;break}};this.onUserMenuBlur=function(e){if(!e.relatedTarget){t.userMenuOpen=false;return}if(!!e.relatedTarget.closest(".user-links-panel"))return false;t.userMenuOpen=false};this.onSearchBtnClick=function(e){e.preventDefault();if(!t.searchBarShown)t.searchbarShow();else t.searchbarHide()};this.onSearchBtnKeyDown=function(e){switch(e.key){case"Enter":case" ":t.searchBarShown?t.searchbarHide():t.searchbarShow();break}};this.onSearchBarShown=function(){t.searchBarEl.removeEventListener("transitionend",t.onSearchBarShown);if(t.searchInput)t.searchInput.setFocus();t.searchBarEl.style.overflow="visible"};this.searchbarHide=function(e){if(e&&e.relatedTarget&&e.relatedTarget.closest("#global-nav-search-bar"))return;t.showAutocomplete=false;if(t.searchValInternal.length&&e)return;t.searchBarEl.addEventListener("transitionend",t.onSearchBarHidden);t.searchBarEl.style.overflow="hidden";t.searchBarEl.style.height="0px"};this.onSearchBarHidden=function(){t.searchBarEl.removeEventListener("transitionend",t.onSearchBarHidden);t.searchBarEl.style.display="none";t.searchBarShown=false};this.onSearchInput=function(e){t.searchValInternal=t.searchInput.value;if(!t.isSearchValSet()){t.searchLoading=false;return}if(e.detail.type==="input"){t.showAutocomplete=false;t.searchLoading=true}};this.onSearchChange=function(e){return __awaiter(t,void 0,void 0,(function(){var t,n,a,i;return __generator(this,(function(s){switch(s.label){case 0:this.searchValInternal=this.searchValue=e?e.detail.value:this.searchValInternal;this.showAutocomplete=false;this.autocompleteResults=null;if(!this.isSearchValSet()){if(!this.searchValInternal.length){this.nanoSearchReset.emit()}this.searchLoading=false;return[2]}if(!this.currentIndex)this.currentSelectedIndex();s.label=1;case 1:s.trys.push([1,3,,4]);t=this;n=this.processSearchResults;return[4,this.currentIndex.alogliaIndex.search(this.searchValInternal,{attributesToSnippet:["body:5","title:8"],hitsPerPage:5,filters:"created > "+Math.floor((Date.now()-631152e5)/1e3)})];case 2:t.autocompleteResults=n.apply(this,[s.sent()]);return[3,4];case 3:a=s.sent();console.error(a);return[3,4];case 4:this.scopeSearch=null;i=this;return[4,this.onSearchSubmit(null,false)];case 5:i.scopeSearch=s.sent();this.searchLoading=false;this.showAutocompleteResults();return[2]}}))}))};this.onSearchSubmit=function(e,n){if(n===void 0){n=true}return __awaiter(t,void 0,void 0,(function(){var t,a,i,s;var o=this;return __generator(this,(function(r){switch(r.label){case 0:if(e)e.preventDefault();if(!this.isSearchValSet())return[2];this.searchLoading=true;this.algoliaSearchResults=null;if(!this.currentIndex)this.currentSelectedIndex();t=this.internalSearchIndeces.map((function(e){return{indexName:e.index,query:o.searchValInternal,facets:e.filters,hitsPerPage:10,filters:"created > "+Math.floor((Date.now()-631152e5)/1e3)}}));r.label=1;case 1:r.trys.push([1,3,,4]);a=this;i=this.processSearchResults;return[4,this.algoliaClient.multipleQueries(t)];case 2:a.algoliaSearchResults=i.apply(this,[r.sent()]);return[3,4];case 3:s=r.sent();this.nanoSearchError.emit(s);return[3,4];case 4:this.searchLoading=false;if(!this.algoliaSearchResults)return[2];this.algoliaSearchResults.results.map((function(e,t){e.indexName=o.internalSearchIndeces[t].name;e.selected=o.currentIndex.name===o.internalSearchIndeces[t].name;e.domain=o.currentIndex.domain||null;e.domains=o.myAccData.domains||null;e.allGroup=!!o.internalSearchIndeces[t].allGroup;e.filters=o.internalSearchIndeces[t].filters}));if(n){this.nanoSearchResult.emit({results:this.algoliaSearchResults.results,client:{apiKey:this.searchApiKey,appId:this.searchAppId}});this.showAutocomplete=false}return[2,this.algoliaSearchResults]}}))}))};this.onSearchIndexChange=function(e){return __awaiter(t,void 0,void 0,(function(){var t,n,a;return __generator(this,(function(i){switch(i.label){case 0:t=e;n=e;if(!this.currentIndex)this.currentSelectedIndex();if(t.detail&&t.detail.value.length)n=t.detail.value;if(!n||!n.length)return[2];if(this.currentIndex.index===n)return[2];a=this.internalSearchIndeces.find((function(e){return e.index===n}));if(!a||!a.alogliaIndex)return[2];this.searchIndex=a.index;if(!this.isSearchValSet())return[3,2];return[4,this.onSearchChange()];case 1:i.sent();i.label=2;case 2:return[2]}}))}))};this.switchIndexSubmit=function(e){return __awaiter(t,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:if(!this.isSearchValSet())return[3,2];return[4,this.onSearchIndexChange(e)];case 1:t.sent();this.onSearchSubmit();return[3,3];case 2:this.onSearchIndexChange(e);t.label=3;case 3:return[2]}}))}))};this.onAutocompleteBlur=function(e){if(!t.showAutocomplete||!t.autocompleteResults)return;if(e&&e.target&&e.target.closest(".search-widget"))return;t.showAutocomplete=false};this.showAutocompleteResults=function(){if(!t.autocompleteResults||!t.autocompleteResults.hits)return;t.showAutocomplete=true};this.onAutocompleteInteract=function(e){if(!t.showAutocomplete||!t.autocompleteResults)return;var n=t.currAIndex;switch(e.key){case"Tab":setTimeout((function(){if(!t.el.shadowRoot.activeElement||!t.el.shadowRoot.activeElement.closest(".search-widget")){t.showAutocomplete=false;return}else{var e=t.autocompleteEles.find((function(e,n){if(e===t.el.shadowRoot.activeElement){t.currAIndex=n;return true}}));if(e)t.setActiveElement(e);else t.currAIndex=-1}}));break;case"ArrowDown":case"ArrowUp":if(e.key==="ArrowDown")n++;else if(e.key==="ArrowUp")n--;var a=t.autocompleteEles[n];if(a||n<0||n>t.autocompleteEles.length-1)e.preventDefault();if(a){t.setActiveElement(a);t.currAIndex=n}else if(n<0){t.searchInput.setFocus();t.currAIndex=-1}break;case"Enter":case" ":if(t.autocompleteEles[t.currAIndex]){t.autocompleteEles[t.currAIndex].click()}break}}}e.prototype.submitSearch=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.onSearchSubmit();this.showAutocomplete=false;return[2]}))}))};e.prototype.getMyAccData=function(){return __awaiter(this,void 0,void 0,(function(){var e,n,a,i,s;var o=this;return __generator(this,(function(r){switch(r.label){case 0:if(!this.getMyAccountData||this.myAccData){this.remoteDataReady=true;return[2]}e=this.ssoDataUrl;if(!e){switch(this.env){case"dev":e="https://myaccount-dev.nanoporetech.com/";break;case"test":e="https://myaccount-test.nanoporetech.com/";break;default:e="https://myaccount.nanoporetech.com/";break}}n={timeout:5e3};r.label=1;case 1:r.trys.push([1,6,,7]);if(!(this.env==="local"))return[3,3];a=this;return[4,t.import("./p-755ca2d6.system.js")];case 2:a.myAccData=r.sent();return[3,5];case 3:i=this;return[4,g(e+"nav_bar_data.json",n)];case 4:i.myAccData=r.sent();r.label=5;case 5:if(this.myAccData.user.id){this.isLoggedIn=true;this.myAccountUser=this.myAccData.user}this.processMyAccLinks();this.processMyAccData();setTimeout((function(){return o.remoteDataReady=true}),300);return[3,7];case 6:s=r.sent();console.error(s);this.remoteDataReady=true;return[3,7];case 7:return[2]}}))}))};e.prototype.currentSelectedIndex=function(){var e=this;if(!this.internalSearchIndeces.length){return}var t=this.internalSearchIndeces.find((function(t){return t.index===e.searchIndex}));if(!t){this.currentIndex=this.internalSearchIndeces[0];console.error("index not found");return}this.currentIndex=t;return t};e.prototype.changeInternalSearchVal=function(){if(this.searchValInternal!==this.searchValue)this.searchValue=this.searchValInternal};e.prototype.initAlgoliaClient=function(){if(!this.searchAppId||!this.searchApiKey)return;this.algoliaClient=h(this.searchAppId,this.searchApiKey);this.addAlgoliaIndeces()};e.prototype.addIndeces=function(){this.internalSearchIndeces=__spreadArray(__spreadArray([],this.internalSearchIndeces,true),this.searchIndeces,true)};e.prototype.addAlgoliaIndeces=function(){var e=this;if(!this.algoliaClient||!this.internalSearchIndeces.length)return;this.internalSearchIndeces.forEach((function(t){t.alogliaIndex=e.algoliaClient.initIndex(t.index)}));if(!this.searchIndex)this.searchIndex=this.internalSearchIndeces[0].index};e.prototype.thresholdChange=function(e,t){if(e>t){this.thresholdsGoingUp=true;this.setResizingState(true)}};e.prototype.ratioChange=function(){var e=this;if(this.intersectRatio<1&&this.threshold>0){if(this.thresholdsGoingUp)this.setResizingState(true);this.threshold--;setTimeout((function(){return e.ratioChange()}),500)}else{this.thresholdReady=true;this.siteContent.style.minHeight="calc(100% - ".concat(this.barsDiv.clientHeight+1,"px)");var t,n;i((function(){t=__spreadArray(__spreadArray([],Array.from(e.el.querySelectorAll('nano-nav-item[slot="site"]')),true),Array.from(e.el.querySelectorAll('nano-nav-item[slot="overflow"]')),true);n=[];if(e.threshold<e.THRESHOLDLIMIT-v.icon)t.push.apply(t,Array.from(e.el.querySelectorAll('nano-nav-item[slot="icon"]')));else n.push.apply(n,Array.from(e.el.querySelectorAll('nano-nav-item[slot="icon"]')));if(e.threshold<e.THRESHOLDLIMIT-v.login)t.push.apply(t,Array.from(e.el.querySelectorAll('nano-nav-item[slot="loggedin"]')));else n.push.apply(n,Array.from(e.el.querySelectorAll('nano-nav-item[slot="loggedin"]')));if(e.threshold<e.THRESHOLDLIMIT-v.main)t.push.apply(t,Array.from(e.el.querySelectorAll('nano-nav-item[slot="main"]')));else n.push.apply(n,Array.from(e.el.querySelectorAll('nano-nav-item[slot="main"]')));if(e.threshold<e.THRESHOLDLIMIT-v.about)t.push.apply(t,Array.from(e.el.querySelectorAll('nano-nav-item[slot="about"]')));else n.push.apply(n,Array.from(e.el.querySelectorAll('nano-nav-item[slot="about"]')))}));s((function(){t.forEach((function(e){e.classList.add("nano-global-nav-menu");e.classList.remove("nano-global-nav-bar")}));n.forEach((function(e){e.classList.remove("nano-global-nav-menu");e.classList.add("nano-global-nav-bar")}))}))}};e.prototype.assessReady=function(){if(this.thresholdReady&&this.remoteDataReady){this.ready=true}};e.prototype.remoteReady=function(){this.attachIO()};e.prototype.isReady=function(){this.nanoIsReady.emit()};e.prototype.setupAutocompleteBlur=function(){if(this.showAutocomplete){this.el.shadowRoot.addEventListener("click",this.onAutocompleteBlur)}else{this.el.shadowRoot.removeEventListener("click",this.onAutocompleteBlur)}};e.prototype.slotChange=function(){this.threshold=this.THRESHOLDLIMIT};e.prototype.thresholdClasses=function(){var e=[];var t=0;for(t;t<this.threshold;t++)e.push("threshold-"+(t+1));return e};e.prototype.onWindowResize=function(){if(this.threshold<this.THRESHOLDLIMIT&&window.innerWidth>this.currSize){this.threshold=this.THRESHOLDLIMIT}this.currSize=window.innerWidth;this.searchBarShown=false};e.prototype.secondaryOpen=function(e){if(!e.detail.secondaryMenu)return;e.stopPropagation();this.secondaryMenuOpen=true;this.menuContentDiv.style.minHeight=e.detail.secondaryMenu.scrollHeight+"px"};e.prototype.secondaryClose=function(e){if(!e.detail.secondaryMenu)return;e.stopPropagation();this.secondaryMenuOpen=false;this.menuContentDiv.style.minHeight=""};e.prototype.handleUserMenu=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return[4,u(this.userLinkPanel,"show",this.userMenuOpen)];case 1:e.sent();if(this.userMenuOpen){this.userLinkPanel.focus();this.userLinkPanel.addEventListener("focusout",this.onUserMenuBlur)}else{this.userLinkPanel.removeEventListener("focusout",this.onUserMenuBlur);this.el.focus()}return[2]}}))}))};e.prototype.searchbarShow=function(){var e=this;this.searchBarShown=true;this.searchBarEl.addEventListener("transitionend",this.onSearchBarShown);this.searchBarEl.style.display="block";setTimeout((function(){e.searchBarEl.style.height=e.searchBarEl.querySelector(".search-widget").scrollHeight+"px"}),50)};e.prototype.autocompleteSnippet=function(e){var t=["title"];if(e._snippetResult){var n=t.find((function(t){return e._snippetResult[t]&&e._snippetResult[t].matchLevel!=="none"}));if(n){if(n!=="title")return(e.title.length>15?e.title.substring(0,15)+" ...":e.title)+" "+e._snippetResult[n].value;else return e._snippetResult["title"].value}}return e.title};e.prototype.isSearchValSet=function(){if(this.searchValInternal.length<3)return false;return true};e.prototype.resetHitFocus=function(){this.currAIndex=-1};e.prototype.setActiveElement=function(e){this.autocompleteEles.map((function(e){return e.setAttribute("aria-selected","false")}));e.focus({preventScroll:true});e.setAttribute("aria-selected","true")};e.prototype.assessSlottedContent=function(){var e=this;i((function(){e.hasSiteSlot=!!e.el.querySelectorAll('[slot="site"]').length;e.hasLoggedinSlot=!!e.el.querySelectorAll('[slot="loggedin"]').length;e.hasPromotionSlot=!!e.el.querySelectorAll('[slot="promotion"]').length;e.aboutSlotLen=e.el.querySelectorAll('[slot="about"]').length;e.iconSlotLen=e.el.querySelectorAll('[slot="icon"]').length;e.mainSlotLen=e.el.querySelectorAll('[slot="main"]').length;e.overflowSlotLen=e.el.querySelectorAll('[slot="overflow"]').length;e.searchSlotLen=e.el.querySelectorAll('[slot="search"]').length}))};e.prototype.attachIO=function(){var e=this;if(this.io)return;var t=this.el.shadowRoot.querySelector(".global-nav .main-bar");if(typeof window!=="undefined"&&window.IntersectionObserver&&!!t){var n=this.io=new window.IntersectionObserver((function(t){e.intersectRatio=t.slice(-1)[0].intersectionRatio}),{root:t,threshold:1});n.observe(t.querySelector(".measure-ele"))}};e.prototype.componentDidLoad=function(){{this.debounceResize=p(this.onWindowResize.bind(this),300);window.addEventListener("resize",this.debounceResize);this.currSize=window.innerWidth}this.initAlgoliaClient();this.addAlgoliaIndeces();if(this.remoteDataReady)this.attachIO()};e.prototype.componentWillLoad=function(){var e=this;d.init(this,["searchIndex","searchValue"],"url-hash","gns");if(typeof window!=="undefined"&&window.MutationObserver){var t=this.mo=new MutationObserver((function(){e.assessSlottedContent()}));t.observe(this.el,{childList:true,subtree:false})}this.assessSlottedContent()};e.prototype.disconnectedCallback=function(){if(this.io){this.io.disconnect();this.io=undefined}if(this.mo){this.mo.disconnect();this.mo=undefined}window.removeEventListener("resize",this.debounceResize)};e.prototype.connectedCallback=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.getMyAccData();return[2]}))}))};e.prototype.autocompleteList=function(){var e=this;var t;if(this.showAutocomplete&&this.scrollingUp){var n=0;var a=0;var i=function(t,n){return n.index!==e.currentIndex.index?t+n.hits.length:t};var s=function(t,n){return n.index===e.currentIndex.index?t+n.hits.length:t};if(this.scopeSearch){a=this.scopeSearch.results.reduce(i,0);n=this.scopeSearch.results.reduce(s,0)}if(this.autocompleteResults&&this.autocompleteResults.hits.length||a&&!n){var r=0;t=o("div",null,!n&&o("div",{class:"search-autocomplete-hit search-autocomplete-hit--no-result"},"No results matching '",this.searchValInternal,"' were found in"," ",o("strong",null,this.currentIndex.name),". Try another phrase."),this.autocompleteResults&&[this.autocompleteResults.hits.map((function(t,n){return o("a",{role:"option",ref:function(t){return e.autocompleteEles.push(t)},tabindex:"-1",id:"autocomplete-hit-"+n,href:t.url,class:"search-autocomplete-hit",innerHTML:e.autocompleteSnippet(t)})}))],(!n||this.currentIndex.allGroup)&&this.scopeSearch&&this.scopeSearch.results&&[this.scopeSearch.results.map((function(t,n){if(!t.hits.length||t.index===e.currentIndex.index||r>1)return;r++;return o("button",{role:"option",ref:function(t){return e.autocompleteEles.push(t)},tabindex:"-1",id:"autocomplete-scope-"+n,class:"search-autocomplete-hit",onClick:function(){return e.switchIndexSubmit(t.index)},onMouseDown:function(){return e.switchIndexSubmit(t.index)}},'"',e.searchValInternal,'"'," ",o("div",{class:"search-autocomplete-hit-scope"},"in ",t.indexName))}))],!!n&&o("div",{class:"search-autocomplete-foot"},o("button",{role:"option",class:"search-autocomplete-submit",ref:function(t){return e.autocompleteEles.push(t)},id:"autocomplete-foot",onClick:this.onSearchSubmit,onMouseDown:this.onSearchSubmit},"View all results")))}else if(!n){t=o("div",{class:"search-autocomplete-hit search-autocomplete-hit--no-result"},"No results matching '",this.searchValInternal,"' were found. Try another phrase.")}}return o("div",{class:"search-autocomplete",role:"listbox",id:"autocomplete-results","aria-expanded":this.showAutocomplete?"true":"false",hidden:!this.showAutocomplete,onKeyDown:this.onAutocompleteInteract},t)};e.prototype.searchWidget=function(){var e=this;return[o("form",{class:"search-inputs",onSubmit:this.onSearchSubmit,id:"global-nav-search"},o("nano-select",{class:"search-input",label:"Which area of content would you like to search?",hideLabel:true,showInlineError:false,value:this.searchIndex,onNanoChange:this.onSearchIndexChange,mask:true},this.internalSearchIndeces.map((function(t){return o("nano-option",{selected:t.index===e.searchIndex,value:t.index},t.name||t.index)})),o("nano-icon",{name:"solid/caret-down",class:"down-arrow",slot:"down-arrow"})),o("nano-input",{class:"search-input",label:"What would you like to search for?","aria-label":"What would you like to search for?",hideLabel:true,showInlineError:false,"clear-input":true,placeholder:"Search...",type:"text",ref:function(t){return e.searchInput=t},onNanoChange:this.onSearchChange,onNanoInput:this.onSearchInput,onKeyDown:this.onAutocompleteInteract,debounce:500,"aria-autocomplete":"list","aria-activedescendant":this.autocompleteEles[this.currAIndex]?this.autocompleteEles[this.currAIndex].id:false,"aria-controls":"autocomplete-results",onNanoFocus:this.showAutocompleteResults,value:this.searchValue,role:"textbox"},o("button",{class:{"search-icon":true,"search-icon--search":true,"search-icon--show":!this.searchValInternal.length},slot:"end",onMouseDown:function(t){e.searchValInternal=e.searchInput.value;e.onSearchSubmit(t,true)}},o("nano-icon",{name:"light/search"})),o("span",{class:{"search-icon":true,"search-icon--loader":true,"search-icon--show":this.searchLoading},slot:"end"},o("nano-icon",{name:"light/spinner-third"}))),o("input",{type:"submit"}))]};e.prototype.render=function(){var e;var t=this;this.autocompleteEles=[];var n=this.el.ownerDocument.dir==="rtl";var a=this.searchWidget();a.push(this.autocompleteList());return o(l,{class:(e={},e[this.thresholdClasses().join(" ")]=true,e.ready=this.ready,e["search-bar-shown"]=this.searchBarShown&&this.scrollingUp,e["search-auto-complete-shown"]=this.showAutocomplete&&this.scrollingUp,e["modal-open"]=this.modalIsOpen,e.resizing=this.isResizing,e),dir:n?"rtl":null},o("div",{class:{"global-nav":true,"scrolling-down":!this.scrollingUp}},o("nav",{id:"global-nav-menu",class:{"gn-menu":true,open:this.modalOpen,"has-promotion":this.hasPromotionSlot,"menu-full-screen":this.menuFullScreen,"secondary-open":this.secondaryMenuOpen},"aria-expanded":this.modalOpen?"true":"false",ref:function(e){return t.menuDiv=e}},o("div",{class:"gn-menu_wrap",ref:function(e){return t.menuWrapDiv=e},tabindex:"-1"},o("div",{class:"gn-menu_actions"},o("button",{class:"menu-btn icon-btn icon-btn",onMouseDown:this.onMenuBtnClick,onKeyDown:this.onMenuBtnKeyDown},this.threshold<this.THRESHOLDLIMIT-3&&o("nano-icon",{name:"light/times","aria-label":"close menu"}),this.threshold>=this.THRESHOLDLIMIT-3&&o("nano-icon",{name:"light/bars","aria-label":"close menu"})),this.threshold<this.THRESHOLDLIMIT-v.icon&&[!!this.iconSlotLen&&o("slot",{name:"icon"}),this.myAccData&&(!this.activeMyAccountSections||this.activeMyAccountSections.includes("icons"))&&[this.msgUrl&&o("a",{href:this.msgUrl,class:"icon-btn"},o("nano-icon",{name:"light/bell"}),this.msgCount>0&&o("span",{class:"gn-menu_actions-counter"},this.msgCount)),this.cartUrl&&o("a",{href:this.cartUrl,class:"icon-btn"},o("nano-icon",{name:"light/shopping-cart"}),this.cartCount>0&&o("span",{class:"gn-menu_actions-counter"},this.cartCount))]],this.myAccData&&this.myAccData.urls.login&&o("a",{href:this.myAccData.urls.login+this.ssoRedirect,class:"login-btn"},"Login / Register"," ",o("nano-icon",{name:"solid/chevron-right"}))),o("div",{class:"content-wrap",ref:function(e){return t.menuContentDiv=e}},o("div",{class:"content"},o("nav",{class:"nav-links nav-links--main"},o("slot",{name:"overflow"}),this.threshold<this.THRESHOLDLIMIT-v.main&&!!this.mainSlotLen&&o("slot",{name:"main"})),((!!this.aboutSlotLen||!!this.aboutNavItms.length)&&this.threshold<this.THRESHOLDLIMIT-v.about||this.hasSiteSlot||!!this.siteNavItms.length)&&o("div",null,(!!this.aboutSlotLen||!!this.aboutNavItms.length)&&this.threshold<this.THRESHOLDLIMIT-v.about&&[(this.threshold>=this.THRESHOLDLIMIT-(v.about+1)||this.mainSlotLen<2)&&this.overflowSlotLen<2&&o("div",{class:"nav-links-wrap"},!!this.aboutNavItms.length&&o("h4",{class:"nav-links_title"},"About"),o("nav",{class:"nav-links nav-links--sub","aria-label":"About the company links"},o("slot",{name:"about"}),this.aboutNavItms.map((function(e){return o("nano-nav-item",{class:"nano-global-nav nano-global-nav-menu"},o("a",{href:e.address,target:e.target},e.title))})))),(this.threshold<this.THRESHOLDLIMIT-(v.about+1)&&this.mainSlotLen>=2||this.overflowSlotLen>=2)&&o("nav",{class:"nav-links","aria-label":"About the company links"},!this.aboutNavItms.length&&o("slot",{name:"about"}),!!this.aboutNavItms.length&&o("nano-nav-item",{class:"nano-global-nav nano-global-nav-menu"},"Company",o("nano-icon",{slot:"icon-end",name:"solid/chevron-right"}),o("div",{slot:"secondary"},o("div",{class:"content"},o("button",{class:"back-btn",onClick:this.subMenuClose},o("nano-icon",{slot:"icon-end",name:"solid/chevron-left","aria-label":"go back"}),"Company"),o("slot",{name:"about"}),o("div",{class:"content--sub"},this.aboutNavItms.map((function(e){return o("nano-nav-item",{class:"nano-global-nav nano-global-nav-menu"},o("a",{href:e.address,target:e.target},e.title))})))))))],(this.hasSiteSlot||!!this.siteNavItms.length)&&[(this.threshold>=this.THRESHOLDLIMIT-2||this.mainSlotLen<2)&&this.overflowSlotLen<2&&o("div",{class:"nav-links-wrap"},o("h4",{class:"nav-links_title"},"Sites"),o("nav",{class:"nav-links nav-links--sub","aria-label":"Different company site links"},o("slot",{name:"site"}),this.siteNavItms.map((function(e){return o("nano-nav-item",{class:"nano-global-nav nano-global-nav-menu"},o("a",{href:e.address,target:e.target},e.title))})))),(this.threshold<this.THRESHOLDLIMIT-2&&this.mainSlotLen>=2||this.overflowSlotLen>=2)&&o("nav",{class:"nav-links","aria-label":"Different company site links"},o("nano-nav-item",{class:"nano-global-nav nano-global-nav-menu"},"Sites",o("nano-icon",{slot:"icon-end",name:"solid/chevron-right"}),o("div",{slot:"secondary"},o("div",{class:"content"},o("button",{class:"back-btn",onClick:this.subMenuClose},o("nano-icon",{slot:"icon-end",name:"solid/chevron-left","aria-label":"go back"}),"Sites"),o("div",{class:"content--sub"},o("slot",{name:"site"}),this.siteNavItms.map((function(e){return o("nano-nav-item",{class:"nano-global-nav nano-global-nav-menu"},o("a",{href:e.address,target:e.target},e.title))})))))))])),this.isLoggedIn&&this.threshold<this.THRESHOLDLIMIT-v.login&&(this.loggedInNavItms.length||this.hasLoggedinSlot)&&o("nav",{class:"nav-links","aria-label":"Your user account links"},o("nano-nav-item",{class:"nano-global-nav user-nav nano-global-nav-menu"},this.myAccountUser.name,o("nano-icon",{slot:"icon-end",name:"solid/chevron-right"}),o("div",{slot:"secondary"},o("div",{class:"content"},o("button",{class:"back-btn",onClick:this.subMenuClose},o("nano-icon",{slot:"icon-end",name:"solid/chevron-left","aria-label":"go back"}),this.myAccountUser.name),o("div",{class:"content--sub"},o("slot",{name:"loggedin"}),this.loggedInNavItms.map((function(e){return o("nano-nav-item",{class:"nano-global-nav nano-global-nav-menu"},o("a",{href:e.address,target:e.target},e.title))})),o("nano-nav-item",{class:"nano-global-nav nano-global-nav-menu"},o("a",{href:this.myAccData.urls.forgot_password+this.ssoRedirect},"Change Password"))))))),o("slot",{name:"promotion"}),this.myAccData&&this.myAccData.urls.logout&&o("div",{class:"login-btn logout-btn"},o("a",{href:this.myAccData.urls.logout+this.ssoRedirect},"Logout"))))),o("nano-sticker",{"auto-resize":"false","break-point-max":"800",quietMode:{h:600,w:800}},o("div",{class:"bars",ref:function(e){return t.barsDiv=e}},o("nav",{class:"main-bar","aria-label":"Main site navigation",tabindex:"-1",ref:function(e){return t.mainBarDiv=e}},(this.hasPromotionSlot||!!this.overflowSlotLen||(this.myAccData||!!this.iconSlotLen)&&this.threshold<this.THRESHOLDLIMIT-v.icon||this.isLoggedIn&&(!!this.loggedInNavItms.length||this.hasLoggedinSlot)&&this.threshold<this.THRESHOLDLIMIT-v.login||!!this.mainSlotLen&&this.threshold<this.THRESHOLDLIMIT-v.main||(!!this.aboutSlotLen||!!this.aboutNavItms.length)&&this.threshold<this.THRESHOLDLIMIT-v.about||this.hasSiteSlot||!!this.siteNavItms.length)&&o("button",{class:"menu-btn icon-btn",onMouseDown:this.menuOpen,onKeyDown:this.onMenuBtnKeyDown,"aria-expanded":this.modalOpen?"true":"false","aria-controls":"global-nav-menu",ref:function(e){return t.menuBtn=e}},o("nano-icon",{name:"light/bars","aria-label":"open menu"})),this.showLogo&&o("a",{href:this.logoUrl,class:"logo-link"},o("img",{src:r("./assets/ont-logo.svg"),alt:"Oxford Nanopore Technologies Logo",class:"logo"})),!this.showLogo&&o("div",{class:"logo-link"},o("slot",{name:"logo"})),o("div",{class:"nav-links nav-links--main"},o("slot",{name:"main"})),this.threshold>=this.THRESHOLDLIMIT-v.search&&[this.showSearch&&!!this.internalSearchIndeces.length&&o("div",{class:"search-widget",role:"combobox","aria-owns":"autocomplete-results","aria-expanded":this.showAutocomplete&&this.autocompleteResults?"true":"false"},a),(!this.showSearch||!this.myAccData)&&!!this.searchSlotLen&&o("slot",{name:"search"})],(!!this.aboutSlotLen||!!this.aboutNavItms.length)&&this.threshold>=this.THRESHOLDLIMIT-v.about&&o("nav",{class:"nav-links nav-links--sub","aria-label":"About the company. Links"},o("slot",{name:"about"}),this.aboutNavItms.map((function(e){return o("nano-nav-item",{class:"nano-global-nav nano-global-nav-bar"},o("a",{href:e.address,target:e.target},e.title))}))),this.threshold<this.THRESHOLDLIMIT-v.search&&(this.showSearch&&!!this.internalSearchIndeces.length||!!this.searchSlotLen)&&o("button",{class:"icon-btn","aria-controls":"global-nav-search-bar","aria-expanded":this.searchBarShown?"true":"false",onMouseDown:this.onSearchBtnClick,onKeyDown:this.onSearchBtnKeyDown},o("nano-icon",{name:"light/search"})),this.threshold>=this.THRESHOLDLIMIT-v.icon&&[!!this.iconSlotLen&&o("slot",{name:"icon"}),this.myAccData&&(!this.activeMyAccountSections||this.activeMyAccountSections.includes("icons"))&&[this.msgUrl&&o("a",{href:this.msgUrl,class:"icon-btn"},o("nano-icon",{name:"light/bell"}),this.msgCount>0&&o("span",{class:"gn-menu_actions-counter"},this.msgCount)),this.cartUrl&&o("a",{href:this.cartUrl,class:"icon-btn"},o("nano-icon",{name:"light/shopping-cart"}),this.cartCount>0&&o("span",{class:"gn-menu_actions-counter"},this.cartCount))]],this.myAccData&&(!this.activeMyAccountSections||this.activeMyAccountSections.includes("loggedin"))&&this.threshold>=this.THRESHOLDLIMIT-v.login&&[this.myAccData.urls.login&&o("a",{href:this.myAccData.urls.login+this.ssoRedirect,class:"login-btn"},"Login / Register"),this.myAccountUser&&o("div",{class:"user-links"},o("button",{class:{"icon-btn":true,"user-links-btn":true,open:this.userMenuOpen},onMouseDown:this.onUserBtnClick,onKeyDown:this.onUserBtnKeyDown}," ",this.myAccountUser.name,o("nano-icon",{name:"solid/caret-down"})),o("div",{class:"user-links-panel",tabindex:"-1",ref:function(e){return t.userLinkPanel=e}},o("div",{class:"user-links-panel-content"},this.loggedInNavItms.map((function(e){return o("a",{href:e.address,target:e.target},e.title)}))),o("div",{class:"user-links-panel-foot"},o("a",{href:this.myAccData.urls.forgot_password+this.ssoRedirect},"Change Password"),o("a",{href:this.myAccData.urls.logout+this.ssoRedirect},"Logout"))))],o("span",{class:"measure-ele"})),this.threshold<this.THRESHOLDLIMIT-v.search&&o("div",{id:"global-nav-search-bar",class:{"search-bar":true,show:this.searchBarShown},"aria-expanded":this.searchBarShown?"true":"false",role:"region",tabindex:"-1",ref:function(e){return t.searchBarEl=e}},o("div",{class:"search-widget"},this.showSearch&&!!this.internalSearchIndeces.length&&o("div",null,a),(!this.showSearch||!this.myAccData)&&!!this.searchSlotLen&&o("slot",{name:"search"}))))),(this.threshold<this.THRESHOLDLIMIT-3||this.menuFullScreen)&&o("div",{class:{mask:true,open:this.modalOpen},onClick:this.menuClose,onTouchEnd:this.menuClose})),o("div",{class:"site-content",ref:function(e){return t.siteContent=e}},o("slot",null)))};e.prototype.domainFor=function(e){if(!this.myAccData)return"";var t=this.myAccData.domains.find((function(t){return t.origin===e}));return t?t.domain:""};e.prototype.processSearchResults=function(e){var t=this;var n=e;var a=e;if(n.results){n.results.forEach((function(e,a){n.results[a]=t.processSearchResults(e)}));return n}else{a.hits.map((function(e){if(e.url&&!e.url.match(/^http/))e.url=location.protocol+"//"+t.domainFor(e.origin)+e.url}));return a}};e.prototype.processMyAccData=function(){if(!this.myAccData||!this.myAccData.search.indeces.length)return;if(this.myAccData.search.api_key)this.searchApiKey=this.myAccData.search.api_key;if(this.myAccData.search.app_id)this.searchAppId=this.myAccData.search.app_id;if(this.myAccData.cart.count)this.cartCount=this.myAccData.cart.count;if(this.myAccData.notifications.count)this.msgCount=this.myAccData.notifications.count;if(!this.searchAppId||!this.searchApiKey)return;this.internalSearchIndeces=__spreadArray(__spreadArray([],this.myAccData.search.indeces,true),this.searchIndeces,true);if(this.myAccData.urls.cart&&!this.cartUrl)this.cartUrl=this.myAccData.urls.cart;if(this.myAccData.urls.messages&&!this.msgUrl)this.msgUrl=this.myAccData.urls.messages};e.prototype.processMyAccLinks=function(){var e=this;if(!this.myAccData.links||!this.myAccData.links.length)return;this.myAccData.links.forEach((function(t){switch(t.area){case"left-side-logged-in":case"left-side-logged-out":if(e.activeMyAccountSections&&!e.activeMyAccountSections.includes("sites"))break;if(e.isLoggedIn&&t.area==="left-side-logged-in")e.siteNavItms.push(t);else if(!e.isLoggedIn&&t.area==="left-side-logged-out")e.siteNavItms.push(t);break;case"right-side-logged-in":case"right-side-logged-out":if(e.activeMyAccountSections&&!e.activeMyAccountSections.includes("about"))break;if(e.isLoggedIn&&t.area==="right-side-logged-in")e.aboutNavItms.push(t);else if(!e.isLoggedIn&&t.area==="right-side-logged-out")e.aboutNavItms.push(t);break;case"profile-panel-list":if(e.activeMyAccountSections&&!e.activeMyAccountSections.includes("loggedin"))break;e.loggedInNavItms.push(t);break}}))};Object.defineProperty(e,"assetsDirs",{get:function(){return["assets"]},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"el",{get:function(){return c(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{env:["getMyAccData"],ssoDataUrl:["getMyAccData"],searchIndex:["currentSelectedIndex"],searchValInternal:["changeInternalSearchVal"],searchApiKey:["initAlgoliaClient"],searchAppId:["initAlgoliaClient"],searchIndeces:["addIndeces"],internalSearchIndeces:["addAlgoliaIndeces"],threshold:["thresholdChange"],intersectRatio:["ratioChange"],thresholdReady:["assessReady"],remoteDataReady:["assessReady","remoteReady"],ready:["isReady"],showAutocomplete:["setupAutocompleteBlur","resetHitFocus"],aboutSlotLen:["slotChange"],iconSlotLen:["slotChange"],mainSlotLen:["slotChange"],overflowSlotLen:["slotChange"],searchSlotLen:["slotChange"],userMenuOpen:["handleUserMenu"]}},enumerable:false,configurable:true});return e}());x.style=f}}}));
-//# sourceMappingURL=p-7f5e58b5.system.entry.js.map