@nanoporetech-digital/components 2.5.0 → 2.8.0

package/dist/nano-components/p-9d35768b.entry.js.map

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/form-control/form-control.tsx"],"names":["renderLabel","label","hasLabelSlot","controlId","labelId","floatLabel","placeholder","hideLabel","hasValue","rtl","showCharCount","maxlength","charCount","h","class","htmlFor","id","name","form-ctrl__label","visually-hide","FormControlWrap","props","children","moreId","type","hasHelperSlot","showInlineError","errorMessage","Object","assign","has-label","has-float-label","form-ctrl__input","form-ctrl__textarea","FormControl","clearControl","onClearText","readonly","disabled","control","ref","endSlot","endValueSlot","startSlot","clickThrough","setFocus","el","tabindex","onTouchStart","onMouseDown","onClick"],"mappings":";;;oCAuCA,MAAMA,EAAc,EAClBC,MAAAA,EACAC,aAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,YAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,IAAAA,EACAC,cAAAA,EACAC,UAAAA,EACAC,UAAAA,MAEA,IAAKX,IAAUC,EAAc,OAC7B,GAAIG,EAAY,CACd,OACEQ,EAAA,QAAA,CAAOC,MAAM,yBAAyBC,QAASZ,EAAWa,GAAIZ,GAC3DH,GAASA,GACRA,GAASC,GAAgBW,EAAA,OAAA,CAAMI,KAAK,eAGrC,CACL,OACEJ,EAAA,QAAA,CACEC,MAAO,CAAEI,mBAAoB,KAAMC,gBAAiBZ,GACpDQ,QAASZ,EACTa,GAAIZ,GAEJS,EAAA,MAAA,CAAKC,MAAM,yBACRR,GAAeE,GAAYC,GAC1BI,EAAA,OAAA,CAAMC,MAAM,gCAAgCR,SAE9CO,EAAA,OAAA,CAAMC,MAAM,wBACTb,GAASA,GACRA,GAASC,GAAgBW,EAAA,OAAA,CAAMI,KAAK,WAEvCX,GAAeE,IAAaC,GAC3BI,EAAA,OAAA,CAAMC,MAAM,sCAAmCR,IAGlDI,GACCG,EAAA,OAAA,CAAMC,MAAM,8BACTH,EACGA,EAAYC,EAAY,QACxBA,EAAY,wBAQfQ,EAA6D,CACxEC,EACAC,KAEA,MAAMb,IACJA,EAAGJ,WACHA,EAAUJ,MACVA,EAAKsB,OACLA,EAAMC,KACNA,EAAIC,cACJA,EAAaC,gBACbA,EAAeC,aACfA,GACEN,EAEJ,MAAO,EACJhB,EAAaL,EAAW4B,OAAAC,OAAA,GAAMR,IAAW,GAC1CR,EAAA,MAAA,CACEC,MAAO,CACLgB,YAAa7B,IAAU,OAASI,EAChC0B,kBAAmB9B,IAAU,MAAQI,EACrCI,IAAAA,EACAuB,mBAAoB,KACpBC,sBAAuBT,IAAS,aAGjCnB,GAAcL,EAAW4B,OAAAC,OAAAD,OAAAC,OAAA,GAAMR,GAAK,CAAEZ,IAAAA,KACtCa,GAEHI,GAAmBD,EACjBZ,EAAA,MAAA,CAAKC,MAAM,kBAAkBE,GAAIO,KAC5BG,EACDb,EAAA,MAAA,CAAKC,MAAM,oBAAoBa,GAAmB,GAIpDd,EAAA,MAAA,CAAKC,MAAM,qBACTD,EAAA,OAAA,CAAMI,KAAK,aAET,WAOCiB,EAAqD,CAChEb,EACAC,KAEA,MAAMa,aACJA,EAAYC,YACZA,EAAWC,SACXA,EAAQC,SACRA,EAAQC,QACRA,EAAOC,IACPA,EAAGC,QACHA,EAAOC,aACPA,EAAYC,UACZA,GACEtB,EACJ,MAAMuB,EAAe,KACnBL,EAAQM,YAGV,OACEhC,EAAA,MAAA,CACEC,MAAM,wBACN0B,IAAMM,IACJ,GAAIN,EAAKA,EAAIM,KAGfjC,EAAA,OAAA,CAAMC,MAAM,yBACVD,EAAA,OAAA,CAAMI,KAAK,UACV0B,GAEFrB,EACAa,IAAiBE,IAAaC,GAC7BzB,EAAA,SAAA,CACEW,KAAK,SACLV,MAAM,4BACNiC,SAAS,KACTC,aAAcZ,EACda,YAAab,GAEbvB,EAAA,YAAA,CAAWI,KAAK,iBAGpBJ,EAAA,OAAA,CAAMC,MAAM,4BAA4BoC,QAASN,GAC/C/B,EAAA,OAAA,CAAMI,KAAK,cACVyB,GAEH7B,EAAA,OAAA,CAAMC,MAAM,uBACVD,EAAA,OAAA,CAAMI,KAAK,QACVwB","sourcesContent":["import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport { TextFieldTypes } from '../../interface';\n\ninterface FormControlWrapProps {\n  rtl: boolean;\n  floatLabel: boolean;\n  labelId: string;\n  label: string;\n  moreId: string;\n  type?: TextFieldTypes;\n  showInlineError: boolean;\n  hasHelperSlot: boolean;\n  errorMessage: string;\n  controlId: string;\n  hasLabelSlot: boolean;\n  hideLabel: boolean;\n  placeholder: string;\n  hasValue: boolean;\n  showCharCount?: boolean;\n  maxlength?: number;\n  charCount?: number;\n}\n\ninterface FormControlProps {\n  clearControl: boolean;\n  onClearText?: () => void;\n  readonly: boolean;\n  disabled: boolean;\n  control: HTMLNanoInputElement | HTMLNanoSelectElement;\n  ref?: (elm?: HTMLElement) => void;\n  endSlot?: VNode;\n  endValueSlot?: VNode;\n  startSlot?: VNode;\n}\n\ninterface LabelProps extends FormControlWrapProps {\n  rtl: boolean;\n}\n\nconst renderLabel = ({\n  label,\n  hasLabelSlot,\n  controlId,\n  labelId,\n  floatLabel,\n  placeholder,\n  hideLabel,\n  hasValue,\n  rtl,\n  showCharCount,\n  maxlength,\n  charCount,\n}: LabelProps) => {\n  if (!label && !hasLabelSlot) return;\n  if (floatLabel) {\n    return (\n      <label class=\"form-ctrl__float-label\" htmlFor={controlId} id={labelId}>\n        {label && label}\n        {!label && hasLabelSlot && <slot name=\"label\" />}\n      </label>\n    );\n  } else {\n    return (\n      <label\n        class={{ 'form-ctrl__label': true, 'visually-hide': hideLabel }}\n        htmlFor={controlId}\n        id={labelId}\n      >\n        <div class=\"form-ctrl__label-wrap\">\n          {placeholder && hasValue && rtl && (\n            <span class=\"form-ctrl__label-placeholder\">{placeholder} / </span>\n          )}\n          <span class=\"form-ctrl__labeltext\">\n            {label && label}\n            {!label && hasLabelSlot && <slot name=\"label\" />}\n          </span>\n          {placeholder && hasValue && !rtl && (\n            <span class=\"form-ctrl__label-placeholder\"> / {placeholder}</span>\n          )}\n        </div>\n        {showCharCount && (\n          <span class=\"form-ctrl__label-charcount\">\n            {maxlength\n              ? maxlength - charCount + ' left'\n              : charCount + ' characters'}\n          </span>\n        )}\n      </label>\n    );\n  }\n};\n\nexport const FormControlWrap: FunctionalComponent<FormControlWrapProps> = (\n  props: FormControlWrapProps,\n  children\n) => {\n  const {\n    rtl,\n    floatLabel,\n    label,\n    moreId,\n    type,\n    hasHelperSlot,\n    showInlineError,\n    errorMessage,\n  } = props;\n\n  return [\n    !floatLabel ? renderLabel({ ...props }) : '',\n    <div\n      class={{\n        'has-label': label !== null && !floatLabel,\n        'has-float-label': label !== null && floatLabel,\n        rtl,\n        'form-ctrl__input': true,\n        'form-ctrl__textarea': type === 'textarea',\n      }}\n    >\n      {floatLabel && renderLabel({ ...props, rtl })}\n      {children}\n    </div>,\n    showInlineError || hasHelperSlot ? (\n      <div class=\"form-ctrl__more\" id={moreId}>\n        {!!showInlineError ? (\n          <div class=\"form-ctrl__error\">{errorMessage}</div>\n        ) : (\n          ''\n        )}\n        <div class=\"form-ctrl__helper\">\n          <slot name=\"helper\" />\n        </div>\n      </div>\n    ) : (\n      ''\n    ),\n  ];\n};\n\nexport const FormControl: FunctionalComponent<FormControlProps> = (\n  props: FormControlProps,\n  children\n) => {\n  const {\n    clearControl,\n    onClearText,\n    readonly,\n    disabled,\n    control,\n    ref,\n    endSlot,\n    endValueSlot,\n    startSlot,\n  } = props;\n  const clickThrough = () => {\n    control.setFocus();\n  };\n\n  return (\n    <div\n      class=\"form-ctrl__input-wrap\"\n      ref={(el) => {\n        if (ref) ref(el);\n      }}\n    >\n      <span class=\"form-ctrl__slot-start\">\n        <slot name=\"start\" />\n        {startSlot}\n      </span>\n      {children}\n      {clearControl && !readonly && !disabled && (\n        <button\n          type=\"button\"\n          class=\"icon form-ctrl__clear-btn\"\n          tabindex=\"-1\"\n          onTouchStart={onClearText}\n          onMouseDown={onClearText}\n        >\n          <nano-icon name=\"light/times\"></nano-icon>\n        </button>\n      )}\n      <span class=\"form-ctrl__slot-value-end\" onClick={clickThrough}>\n        <slot name=\"value-end\" />\n        {endValueSlot}\n      </span>\n      <span class=\"form-ctrl__slot-end\">\n        <slot name=\"end\" />\n        {endSlot}\n      </span>\n    </div>\n  );\n};\n"]}

package/dist/nano-components/p-af7abf5e.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,c as n,h as i,e as a,g as e}from"./p-ab5813a7.js";import{r as o}from"./p-289aa03f.js";import{F as r,a as s}from"./p-aaef7cc7.js";import{a as l}from"./p-1da5f8df.js";import{c as p}from"./p-b619500f.js";import{c}from"./p-d99437a6.js";const h='.sc-nano-input-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-input,*.sc-nano-input::before,*.sc-nano-input::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-input{display:none !important}[disabled].sc-nano-input-h:not([disabled=false]){opacity:0.5}label.sc-nano-input,.form-ctrl__more.sc-nano-input,.form-ctrl__error.sc-nano-input,.form-ctrl__helper.sc-nano-input{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}label.visually-hide.sc-nano-input,.form-ctrl__more.visually-hide.sc-nano-input,.form-ctrl__error.visually-hide.sc-nano-input,.form-ctrl__helper.visually-hide.sc-nano-input{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.form-ctrl__float-label.sc-nano-input{padding-top:0;padding-bottom:0;-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);color:var(--label-color);position:absolute;font-size:1.15em;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transform-origin:top left;transform-origin:top left;top:50%;-webkit-transition:0.125s ease-in;transition:0.125s ease-in;opacity:1}.has-focus.sc-nano-input-h .form-ctrl__float-label.sc-nano-input,.has-value.sc-nano-input-h .form-ctrl__float-label.sc-nano-input{-webkit-transform:translateY(-110%);transform:translateY(-110%);font-size:0.8em;opacity:0.7}.form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input{top:50%}.has-focus.sc-nano-input-h .form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input{top:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.has-value.sc-nano-input-h .form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input{top:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.form-ctrl__label.sc-nano-input{color:var(--label-color);font-size:var(--label-font-size);padding-bottom:var(--padding-bottom);line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex}.form-ctrl__label.sc-nano-input .form-ctrl__label-wrap.sc-nano-input{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input{margin-left:unset;margin-right:unset;margin-top:0;-webkit-margin-end:5px;margin-inline-end:5px;margin-bottom:0;-webkit-margin-start:0;margin-inline-start:0;opacity:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-transition:0.3s ease opacity;transition:0.3s ease opacity;font-size:0.9em}.form-ctrl__label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input{margin-left:unset;margin-right:unset;margin-top:0;-webkit-margin-end:0;margin-inline-end:0;margin-bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;font-size:0.9em;opacity:0.5}.has-value.sc-nano-input-h .form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input{opacity:0.5}.has-focus.sc-nano-input-h .form-ctrl__label.sc-nano-input{color:var(--label-color--focus)}.is-invalid.sc-nano-input-h .form-ctrl__label.sc-nano-input{color:var(--label-color--invalid)}.has-float-label.sc-nano-input .select__multi-input.sc-nano-input,.has-float-label.sc-nano-input .select__native-input.sc-nano-input,.has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input{opacity:0;-webkit-transition:opacity 0.125s ease-in;transition:opacity 0.125s ease-in}.has-focus.sc-nano-input-h .has-float-label.sc-nano-input .select__multi-input.sc-nano-input,.has-value.sc-nano-input-h .has-float-label.sc-nano-input .select__multi-input.sc-nano-input,.has-focus.sc-nano-input-h .has-float-label.sc-nano-input .select__native-input.sc-nano-input,.has-value.sc-nano-input-h .has-float-label.sc-nano-input .select__native-input.sc-nano-input,.has-focus.sc-nano-input-h .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input,.has-value.sc-nano-input-h .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input{opacity:1}.form-ctrl__more.sc-nano-input{height:1em;position:relative;margin-left:unset;margin-right:unset;margin-top:4px;-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:3px;margin-inline-start:3px;margin-bottom:var(--padding-bottom)}.form-ctrl__helper.sc-nano-input,.form-ctrl__error.sc-nano-input{top:0;left:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;transition:0.3s ease-out opacity}.form-ctrl__helper.sc-nano-input{font-style:italic;color:var(--help-msg-color)}[show-inline-error].sc-nano-input-h:not([show-inline-error=false]).is-invalid .form-ctrl__helper.sc-nano-input{opacity:0}.form-ctrl__error.sc-nano-input{opacity:0;color:var(--invalid-msg-color);font-stretch:condensed}.is-invalid.sc-nano-input-h .form-ctrl__error.sc-nano-input{opacity:1}.form-ctrl__input.sc-nano-input{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;border-radius:var(--input-border-radius);width:100%;padding-top:0 !important;padding-bottom:0 !important;padding-left:0 !important;padding-right:0 !important;position:relative;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;background:var(--input-bg-color);border:var(--input-border-style);border-width:var(--input-border-width);font-size:var(--input-font-size);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.has-focus.sc-nano-input-h .form-ctrl__input.sc-nano-input{background:var(--input-bg-color--focus);border:var(--input-border-style--focus);border-width:var(--input-border-width);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.is-invalid.sc-nano-input-h .form-ctrl__input.sc-nano-input{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid);border-width:var(--input-border-width);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.is-invalid.has-focus.sc-nano-input-h .form-ctrl__input.sc-nano-input{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid-focus);border-width:var(--input-border-width);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.form-ctrl__input-wrap.sc-nano-input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-flex:1;-ms-flex:1;flex:1}.form-ctrl__clear-btn.sc-nano-input,.form-ctrl__slot-end.sc-nano-input,.form-ctrl__slot-start.sc-nano-input,.form-ctrl__slot-value-end.sc-nano-input{--nano-icon-size:1.4em;margin-top:0;margin-bottom:0;margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0;margin-inline-end:0;font-size:1em;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:auto}.has-float-label.sc-nano-input .form-ctrl__slot-start.sc-nano-input{display:none}.form-ctrl__slot-start.sc-nano-input-s>*,.form-ctrl__slot-start .sc-nano-input-s>*,.form-ctrl__slot-end.sc-nano-input-s>*,.form-ctrl__slot-end .sc-nano-input-s>*,.form-ctrl__slot-value-end.sc-nano-input-s>*,.form-ctrl__slot-value-end .sc-nano-input-s>*,.form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input{--nano-icon-size:1.4em;padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);font-size:1em;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;z-index:1}.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-input-s>*,[disabled].sc-nano-input-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input{pointer-events:none}.form-ctrl__slot-value-end.sc-nano-input-s>*,.form-ctrl__slot-value-end .sc-nano-input-s>*,.form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input{pointer-events:none}.form-ctrl__clear-btn.sc-nano-input{color:var(--clear-btn-color);padding:0;opacity:0;width:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.is-invalid.sc-nano-input-h .form-ctrl__clear-btn.sc-nano-input{color:var(--clear-btn-color--invalid)}.has-value.sc-nano-input-h .form-ctrl__clear-btn.sc-nano-input{padding-top:0;padding-bottom:0;padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);opacity:1;width:auto}.form-ctrl__clear-btn.sc-nano-input:hover{color:var(--clear-btn-color--hover)}.sc-nano-input-h{--placeholder-color:var(--nano-input-placeholder-color, initial);--placeholder-font-style:var(--nano-input-placeholder-style, initial);--placeholder-font-weight:var(--nano-input-placeholder-weight, initial);--placeholder-opacity:var(--nano-input-placeholder-opacity, 0.5);--padding-top:var(--nano-input-padding-top, var(--nano-input-padding, 8px));--padding-end:var(--nano-input-padding-end, var(--nano-input-padding, 8px));--padding-bottom:var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));--padding-start:var(--nano-input-padding-start, var(--nano-input-padding, 8px));--color-invalid:var(--nano-color-danger-rgb, 239, 65, 53);--color--focus-rgb:var(\n      --nano-color-base-rgb,\n      var(--nano-color-primary-rgb, 0, 116, 149)\n    );--input-font-size:var(--nano-input-font-size, 0.87em);--input-text-color:var(--nano-input-text-color, #4a4a4a);--input-border-width:var(--nano-input-border-width, 1px);--input-border-hint-width:3px;--input-border-color:var(--nano-input-border-color, #e4e6e8);--input-border-radius:var(--nano-input-border-radius, 0);--input-border-style:var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);--input-border-style--invalid:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);--input-border-style--invalid-focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);--input-bg-color:var(--nano-input-background-color, #fff);--input-bg-color--focus:var(--input-bg-color);--input-bg-color--invalid:var(--nano-input-background-color, white);--invalid-msg-color:rgba(var(--color-invalid), 1);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--clear-btn-color:var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));--clear-btn-color--hover:rgba(var(--color--focus-rgb), 1);--clear-btn-color--invalid:rgba(var(--color-invalid), 1);--label-color:var(--nano-input-label-color, "currentColor");--label-color--focus:var(--label-color);--label-color--invalid:var(--nano-input-label-color-invalid, "currentColor");--label-font-size:var(--nano-input-label-color, 1em);--multi-input-value-bg:var(--nano-input-tag-bg, 186, 220, 240);--multi-input-value-text-color:var(--nano-input-tag-color, #455556);--multi-input-value-border:var(--nano-input-tag-color, #badcf0);position:relative;width:100%;padding:0 !important;color:currentColor;display:inline-block}.nano-color.sc-nano-input-h{color:var(--nano-color-base);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5))}.input__native-ctrl.sc-nano-input{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;padding-left:unset;padding-right:unset;padding-top:0;padding-bottom:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);border-radius:var(--input-border-radius);text-overflow:ellipsis;color:var(--input-text-color);display:inline-block;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;resize:none;overflow:hidden;line-height:2.5em;min-height:2.5em}.has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input{line-height:2.1em;min-height:2.1em;padding-top:1.4em}.input__native-ctrl.sc-nano-input::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input::-moz-placeholder{line-height:2.8em;text-overflow:ellipsis}.input__native-ctrl.sc-nano-input:-webkit-autofill{background-color:transparent}.input__native-ctrl.sc-nano-input::-webkit-search-decoration,.input__native-ctrl.sc-nano-input::-webkit-search-cancel-button,.input__native-ctrl.sc-nano-input::-webkit-search-results-button,.input__native-ctrl.sc-nano-input::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.input__native-ctrl.sc-nano-input:invalid{-webkit-box-shadow:none;box-shadow:none}.input__native-ctrl.sc-nano-input::-ms-clear,.input__native-ctrl.sc-nano-input::-ms-reveal{display:none}.input__native-ctrl.input__resizable.sc-nano-input{resize:vertical;overflow:auto}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input{line-height:1.5em;padding-top:var(--padding-top);padding-bottom:0.25em;white-space:pre-wrap}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::-webkit-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::-moz-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input:-ms-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::-ms-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::placeholder{line-height:1.5em}.has-float-label.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input{padding-top:1.7em}[readonly].sc-nano-input-h:not([readonly=false]) .input__native-ctrl.sc-nano-input{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}';let d=0;let u=class{constructor(i){t(this,i);this.nanoInput=n(this,"nanoInput",7);this.nanoChange=n(this,"nanoChange",7);this.nanoBlur=n(this,"nanoBlur",7);this.nanoFocus=n(this,"nanoFocus",7);this.nanoDidLoad=n(this,"nanoDidLoad",7);this.nanoDidUnload=n(this,"nanoDidUnload",7);this.nanoValidate=n(this,"nanoValidate",7);this.inputId=`nano-input-${d++}`;this.didBlurAfterEdit=false;this.rtl=false;this.charCount=0;this.hasRendered=false;this.hasFocus=false;this.hasLabelSlot=false;this.hasHelperSlot=false;this.errorMessage="";this.datalist=null;this._invalid=false;this.autocapitalise="none";this.autocomplete="off";this.autocorrect="off";this.autofocus=false;this.clearInput=false;this.debounce=0;this.disabled=false;this.validateOn="submit";this.showInlineError=true;this.hideLabel=false;this.floatLabel=false;this.name=this.inputId;this.readonly=false;this.required=false;this.spellcheck=false;this.type="text";this.value="";this.resize="auto";this.rows=2;this.showCharCount=false;this.validate=t=>{if(this.validateOn==="submitThenDirty")this.validateOn="dirty";if(!this.nativeInput.validity.valid){if(this.showInlineError){if(t)t.preventDefault();this.errorMessage=this.nativeInput.validationMessage}this._invalid=true}else this._invalid=false;this.nanoValidate.emit({isValid:!this._invalid,errorMessage:this.nativeInput.validationMessage,originalEvent:t})};this.onInput=t=>{const n=t.target;if(n)this.value=n.value||"";this.nanoInput.emit(t)};this.onBlur=()=>{this.hasFocus=false;this.focusChanged();if(this.validateOn==="dirty")this.validate();this.nanoBlur.emit()};this.onFocus=()=>{this.hasFocus=true;this.focusChanged();this.nanoFocus.emit()};this.onKeydown=()=>{if(this.shouldClearOnEdit()){if(this.didBlurAfterEdit&&this.hasValue()){this.clearTextInput()}this.didBlurAfterEdit=false}};this.clearTextInput=t=>{if(this.clearInput&&!this.readonly&&!this.disabled&&t){t.preventDefault();t.stopPropagation()}this.value="";this.nativeInput.value="";const n=new window.Event("change");this.nativeInput.dispatchEvent(n)}}get nativeInputWrap(){return this._nativeInputWrap}set nativeInputWrap(t){if(this._nativeInputWrap===t)return;this._nativeInputWrap=t;this.setDataListOpts()}setDataListOpts(){if(!this.datalist)return;const t=this.datalist.dropDownConfig||{};this.datalist.dropDownConfig=Object.assign(Object.assign({},t),{skidding:-1,tetherTo:this.nativeInputWrap})}get invalid(){return this._invalid}shouldValidate(){if(!this.hasRendered)return;setTimeout((()=>{if(this.validateOn==="dirty")this.validate()}),20)}valueChanged(){this.nanoChange.emit({value:this.value});this.charCount=this.value.length;if(this.type==="textarea"&&this.resize==="auto"){this.nativeInput.style.height="auto";if(this.value.length)this.nativeInput.style.height=this.nativeInput.scrollHeight+"px"}setTimeout((()=>{if(this.validateOn==="dirty")this.validate()}),20)}debounceChanged(){this.nanoChange=l(this.nanoChange,this.debounce)}async reportValidity(t){if(t)this.validate();return{isValid:!this._invalid,errorMessage:this.nativeInput.validationMessage}}async setFocus(){if(this.nativeInput){this.nativeInput.focus();this.nativeInput.click()}}getInputElement(){return Promise.resolve(this.nativeInput)}async showError(t){if(this.nativeInput){this.nativeInput.setCustomValidity(t);this.validate()}}onReset(t){const n=this.form?document.querySelector("#"+this.form):this.el.closest("form");if(!n||t.target!==this.el.closest("form"))return;this.value=""}handleBlur(t){if(!this.hasFocus)return;const n=t;let i;o((()=>{if(n.key){if(n.key!=="Tab")return;i=document.activeElement}else i=t.target;if(p(this.el.tagName.toLowerCase(),i)!==this.el){this.onBlur()}}))}shouldClearOnEdit(){const{type:t,clearOnEdit:n}=this;return n===undefined?t==="password":n}getValue(){return this.value||""}focusChanged(){if(!this.hasFocus&&this.shouldClearOnEdit()&&this.hasValue()){this.didBlurAfterEdit=true}}hasValue(){return this.getValue().length>0}slotChangeObserver(){if(this.mo)this.mo.disconnect();const t=this.mo=new MutationObserver((()=>this.processSlottedContent()));t.observe(this.el,{childList:true,subtree:true})}processSlottedContent(){this.hasLabelSlot=!!this.el.querySelectorAll('[slot="label"]');this.hasHelperSlot=!!this.el.querySelector('[slot="helper"]');this.datalist=this.el.querySelector("nano-datalist:not([slot])");if(!!this.el.querySelector('[slot="inline-button"]')){console.warn("The `inline-button` slot was renamed to `end` in v2 - please update your code",this.el)}if(!!this.el.querySelector('[slot="legacy"]')){console.warn("The `legacy` slot has been removed. Please update your code",this.el)}}connectedCallback(){this.debounceChanged();{this.el.dispatchEvent(new CustomEvent("nanoDidLoad",{detail:this.el}))}}disconnectedCallback(){{document.dispatchEvent(new CustomEvent("nanoDidUnload",{detail:this.el}))}if(this.mo)this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver();this.hasRendered=true;if(this.autofocus)setTimeout((t=>this.setFocus()),300)}componentWillLoad(){this.processSlottedContent()}render(){const t=this.getValue();const n=this.inputId+"-lbl";const e=this.showInlineError||this.hasHelperSlot?this.inputId+"-more":"";this.rtl=this.el.ownerDocument.dir==="rtl";const o=(({el:t,floatLabel:n,label:i,errorMessage:a,type:e,showInlineError:o,hasHelperSlot:r,hasLabelSlot:s,hideLabel:l,placeholder:p,maxlength:c,charCount:h,showCharCount:d,rtl:u})=>({el:t,floatLabel:n,label:i,errorMessage:a,type:e,showInlineError:o,hasHelperSlot:r,hasLabelSlot:s,hideLabel:l,placeholder:p,maxlength:c,charCount:h,showCharCount:d,rtl:u}))(this);const l=Object.assign(Object.assign({},o),{labelId:n,moreId:e,hasValue:this.hasValue(),controlId:this.inputId});const p=(({clearInput:t,readonly:n,disabled:i})=>({clearInput:t,readonly:n,disabled:i,clearControl:this.clearInput}))(this);return i(a,{"aria-disabled":this.disabled?"true":null,dir:this.rtl?"rtl":null,class:Object.assign(Object.assign({},c(this.color)),{"has-value":this.hasValue(),"has-focus":this.hasFocus,"is-invalid":this._invalid})},i(r,Object.assign({},l),i(s,Object.assign({},p,{onClearText:this.clearTextInput,control:this.el,ref:t=>this.nativeInputWrap=t}),this.type!=="textarea"&&i("input",{id:this.inputId,class:"input__native-ctrl",ref:t=>this.nativeInput=t,"aria-labelledby":n+" "+e,disabled:this.disabled,accept:this.accept,autoCapitalize:this.autocapitalise,autoComplete:this.autocomplete,autoCorrect:this.autocorrect,autoFocus:this.autofocus,inputMode:this.inputmode,form:this.form,min:this.min,max:this.max,minLength:this.minlength,maxLength:this.maxlength,multiple:this.multiple,name:this.name,pattern:this.pattern,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,step:this.step,size:this.size,type:this.type,value:t,onInput:this.onInput,onChange:this.onInput,onFocus:this.onFocus,onKeyDown:this.onKeydown,onInvalid:this.validate}),this.type==="textarea"&&i("textarea",{rows:this.floatLabel?1:this.rows,id:this.inputId,class:{"input__native-ctrl":true,input__resizable:this.resize==="true"},ref:t=>this.nativeInput=t,"aria-labelledby":n+" "+e,disabled:this.disabled,autoCapitalize:this.autocapitalise,autoCorrect:this.autocorrect,autoFocus:this.autofocus,inputMode:this.inputmode,form:this.form,minLength:this.minlength,maxLength:this.maxlength,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,value:t,onInput:this.onInput,onChange:this.onInput,onFocus:this.onFocus,onKeyDown:this.onKeydown,onInvalid:this.validate})),i("slot",null)))}get el(){return e(this)}static get watchers(){return{datalist:["setDataListOpts"],minlength:["shouldValidate"],maxlength:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],required:["shouldValidate"],disabled:["shouldValidate"],validateOn:["shouldValidate"],readonly:["shouldValidate"],pattern:["shouldValidate"],inputmode:["shouldValidate"],value:["valueChanged"],debounce:["debounceChanged"]}}};u.style=h;export{u as nano_input};
+//# sourceMappingURL=p-af7abf5e.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/input/input.scss?tag=nano-input&encapsulation=scoped","src/components/input/input.tsx"],"names":["inputCss","inputIds","Input","[object Object]","hostRef","this","inputId","didBlurAfterEdit","rtl","charCount","hasRendered","hasFocus","hasLabelSlot","hasHelperSlot","errorMessage","datalist","_invalid","autocapitalise","autocomplete","autocorrect","autofocus","clearInput","debounce","disabled","validateOn","showInlineError","hideLabel","floatLabel","name","readonly","required","spellcheck","type","value","resize","rows","showCharCount","validate","ev","nativeInput","validity","valid","preventDefault","validationMessage","nanoValidate","emit","isValid","originalEvent","onInput","input","target","nanoInput","onBlur","focusChanged","nanoBlur","onFocus","nanoFocus","onKeydown","shouldClearOnEdit","hasValue","clearTextInput","stopPropagation","event","window","Event","dispatchEvent","nativeInputWrap","_nativeInputWrap","ele","setDataListOpts","currDWConfig","dropDownConfig","Object","assign","skidding","tetherTo","invalid","setTimeout","nanoChange","length","style","height","scrollHeight","debounceEvent","validateFirst","focus","click","Promise","resolve","message","setCustomValidity","e","form","document","querySelector","el","closest","kev","raf","key","activeElement","closestElement","tagName","toLowerCase","clearOnEdit","undefined","getValue","mo","disconnect","MutationObserver","processSlottedContent","observe","childList","subtree","querySelectorAll","console","warn","debounceChanged","CustomEvent","detail","slotChangeObserver","_","setFocus","labelId","moreId","ownerDocument","dir","compWrapOptions","label","placeholder","maxlength","wrapOptions","controlId","controlOptions","clearControl","h","Host","aria-disabled","class","createColorClasses","color","has-value","has-focus","is-invalid","FormControlWrap","FormControl","onClearText","control","ref","id","aria-labelledby","accept","autoCapitalize","autoComplete","autoCorrect","autoFocus","inputMode","inputmode","min","max","minLength","minlength","maxLength","multiple","pattern","readOnly","step","size","onChange","onKeyDown","onInvalid","input__native-ctrl","input__resizable"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../form-control/form-control';\n@import '../form-control/form-control-vars';\n\n:host {\n  @include formControlVars;\n\n  position: relative;\n  width: 100%;\n  padding: 0 !important;\n  color: currentColor;\n  display: inline-block;\n}\n\n:host(.nano-color) {\n  color: current-color(base);\n\n  --input-border-style--focus: #{$input-border-style} var(--nano-color-tint, #{nano-color(primary, tint)});\n}\n\n.input__native-ctrl {\n  @include text-inherit();\n\n  padding-left: unset;\n  padding-right: unset;\n  padding-top: 0;\n  padding-bottom: 0;\n  padding-inline-start: var(--padding-start);\n  padding-inline-end: var(--padding-end);\n  border-radius: var(--input-border-radius);\n  text-overflow: ellipsis;\n  color: var(--input-text-color);\n  display: inline-block;\n  flex: 1;\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\n  appearance: none;\n  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n  line-height: 2.5em;\n  min-height: 2.5em;\n\n  .has-float-label & {\n    line-height: 2.1em;\n    min-height: 2.1em;\n    padding-top: 1.4em;\n  }\n\n  &::placeholder {\n    color: var(--placeholder-color);\n    font-family: inherit;\n    font-style: var(--placeholder-font-style);\n    font-weight: var(--placeholder-font-weight);\n    opacity: var(--placeholder-opacity);\n    line-height: inherit;\n    min-height: inherit;\n  }\n\n  &::-moz-placeholder {\n    line-height: 2.8em;\n    text-overflow: ellipsis;\n  }\n\n  &:-webkit-autofill {\n    background-color: transparent;\n  }\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    appearance: none;\n  }\n\n  &:invalid {\n    box-shadow: none;\n  }\n\n  &::-ms-clear,\n  &::-ms-reveal {\n    display: none;\n  }\n\n  &.input__resizable {\n    resize: vertical;\n    overflow: auto;\n  }\n\n  .form-ctrl__textarea & {\n    line-height: 1.5em;\n    padding-top: var(--padding-top);\n    padding-bottom: 0.25em;\n    white-space: pre-wrap;\n\n    &::placeholder {\n      line-height: 1.5em;\n    }\n  }\n\n  .has-float-label.form-ctrl__textarea & {\n    padding-top: 1.7em;\n  }\n\n  :host([readonly]:not([readonly='false'])) & {\n    user-select: none;\n  }\n}\n","import {\n  Build,\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Listen,\n} from '@stencil/core';\n\nimport {\n  Color,\n  ControlValidity,\n  ControlValidityEventDetail,\n  InputChangeEventDetail,\n  TextFieldTypes,\n} from '../../interface';\nimport {\n  debounceEvent,\n  closestElement,\n  createColorClasses,\n  raf,\n} from '../../utils';\nimport { FormControl, FormControlWrap } from '../form-control/form-control';\n\nlet inputIds = 0;\n\n/**\n * The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input), but works great on desktop devices and integrates with the keyboard on mobile devices.\n\nIt is meant for text type inputs only, such as \"text\", \"password\", \"email\", \"number\", \"search\", \"tel\", and \"url\". It supports all standard text input events including keyup, keydown, keypress, and more.\n * @slot start - suitable for inline action buttons or icons that may add extra contextual information\n * @slot end - suitable for inline action buttons or icons that may add extra contextual information\n * @slot value-start - similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist\n * @slot value-end - similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist\n * @slot label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot helper - helper text to accompany the form field underneath.\n * @slot - can be used with a `nano-datalist`. See the `nano-datalist` docs for more information\n */\n@Component({\n  tag: 'nano-input',\n  styleUrl: 'input.scss',\n  scoped: true,\n})\nexport class Input implements ComponentInterface {\n  private nativeInput?: HTMLInputElement | HTMLTextAreaElement;\n  private inputId = `nano-input-${inputIds++}`;\n  private didBlurAfterEdit = false;\n  private rtl: boolean = false;\n  private mo?: MutationObserver;\n  private charCount = 0;\n  private hasRendered = false;\n\n  // we don't want these rendered eles decorated with @State\n  // because that will cause re-renders. User get/set to set datalist options\n  private _nativeInputWrap: HTMLElement;\n  private get nativeInputWrap() {\n    return this._nativeInputWrap;\n  }\n  private set nativeInputWrap(ele: HTMLElement) {\n    if (this._nativeInputWrap === ele) return;\n    this._nativeInputWrap = ele;\n    this.setDataListOpts();\n  }\n\n  @State() hasFocus = false;\n  @State() hasLabelSlot = false;\n  @State() hasHelperSlot = false;\n  @State() errorMessage: string = '';\n  @State() datalist: HTMLNanoDatalistElement = null;\n\n  @Watch('datalist')\n  setDataListOpts() {\n    if (!this.datalist) return;\n    const currDWConfig = this.datalist.dropDownConfig || {};\n    this.datalist.dropDownConfig = {\n      ...currDWConfig,\n      skidding: -1,\n      tetherTo: this.nativeInputWrap,\n    };\n  }\n\n  @Element() el!: HTMLNanoInputElement;\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n  @State() _invalid = false;\n\n  /**\n   * The color to use from the application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * If the value of the type attribute is `\"file\"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.\n   */\n  @Prop() accept?: string;\n\n  /**\n   * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n   */\n  @Prop() autocapitalise: 'none' | 'sentences' | 'words' | 'characters' =\n    'none';\n\n  /**\n   * Indicates whether the value of the control can be automatically completed by the browser.\n   */\n  @Prop() autocomplete: 'on' | 'off' = 'off';\n\n  /**\n   * Whether auto correction should be enabled when the user is entering/editing the text value.\n   */\n  @Prop() autocorrect: 'on' | 'off' = 'off';\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n   */\n  @Prop() autofocus = false;\n\n  /**\n   * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.\n   */\n  @Prop() clearInput = false;\n\n  /**\n   * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types.\n   */\n  @Prop() clearOnEdit?: boolean;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait to trigger the `nanoChange` event after each keystroke.\n   */\n  @Prop() debounce = 0;\n\n  /**\n   * If `true`, the user cannot interact with the input.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * A hint to the browser for which keyboard to display.\n   * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n   * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n   */\n  @Prop() inputmode?:\n    | 'none'\n    | 'text'\n    | 'tel'\n    | 'url'\n    | 'email'\n    | 'numeric'\n    | 'decimal'\n    | 'search';\n\n  /**\n   * When should the field perform validation\n   */\n  @Prop({ mutable: true }) validateOn: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submit';\n\n  /**\n   * Whether to show validation errors underneath input\n   */\n  @Prop({ reflect: true }) showInlineError = true;\n\n  /**\n   * String to place within a label element. Alternatively you may use a label slot.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Visually hide the label - but make it accessible.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  /**\n   * Enable floating label behaviour. Will disable placeholder if set.\n   */\n  @Prop() floatLabel: boolean = false;\n\n  /**\n   * The maximum value, which must not be less than its minimum (min attribute) value.\n   */\n  @Prop() max?: string;\n\n  /**\n   * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n   */\n  @Prop() maxlength?: number;\n\n  /**\n   * The minimum value, which must not be greater than its maximum (max attribute) value.\n   */\n  @Prop() min?: string;\n\n  /**\n   * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n   */\n  @Prop() minlength?: number;\n\n  /**\n   * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"` or `\"file\"`, otherwise it is ignored.\n   */\n  @Prop() multiple?: boolean;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * Instructional text that shows before the input has a value.\n   */\n  @Prop() placeholder?: string | null;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop({ reflect: true }) readonly = false;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required = false;\n\n  /**\n   * If `true`, the element will have its spelling and grammar checked.\n   */\n  @Prop() spellcheck = false;\n\n  /**\n   * Works with the min and max attributes to limit the increments at which a value can be set.\n   * Possible values are: `\"any\"` or a positive floating point number.\n   */\n  @Prop() step?: string;\n\n  /**\n   * The initial size of the control. This value is in pixels unless the value of the type attribute is `\"text\"` or `\"password\"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.\n   */\n  @Prop() size?: number;\n\n  /**\n   * The type of control to display. The default type is text.\n   */\n  @Prop() type: TextFieldTypes = 'text';\n\n  /**\n   * The form element to associate the select with (its form owner). Must be the id of a form.\n   */\n  @Prop() form?: string | null;\n\n  /**\n   * The value of the input.\n   */\n  @Prop({ mutable: true }) value?: string | null = '';\n\n  /**\n   * relevant to type=\"textarea\". Vertical resizing - enable / disable or make automatic.\n   */\n  @Prop() resize: 'true' | 'false' | 'auto' = 'auto';\n\n  /**\n   * relevant to type=\"textarea\". Default number of rows to show\n   */\n  @Prop() rows = 2;\n\n  /**\n   * relevant to type=\"textarea\".\n   */\n  @Prop() showCharCount = false;\n\n  @Watch('minlength')\n  @Watch('maxlength')\n  @Watch('min')\n  @Watch('max')\n  @Watch('required')\n  @Watch('disabled')\n  @Watch('validateOn')\n  @Watch('readonly')\n  @Watch('pattern')\n  @Watch('inputmode')\n  protected shouldValidate() {\n    if (!this.hasRendered) return;\n    setTimeout(() => {\n      if (this.validateOn === 'dirty') this.validate();\n    }, 20);\n  }\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    this.nanoChange.emit({ value: this.value });\n    this.charCount = this.value.length;\n\n    if (this.type === 'textarea' && this.resize === 'auto') {\n      this.nativeInput.style.height = 'auto';\n      if (this.value.length)\n        this.nativeInput.style.height = this.nativeInput.scrollHeight + 'px';\n    }\n\n    setTimeout(() => {\n      if (this.validateOn === 'dirty') this.validate();\n    }, 20);\n  }\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.nanoChange = debounceEvent(this.nanoChange, this.debounce);\n  }\n\n  /**\n   * Emitted when a keyboard input occurred.\n   */\n  @Event() nanoInput!: EventEmitter<InputEvent>;\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() nanoChange!: EventEmitter<InputChangeEventDetail>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has been created.\n   * @internal\n   */\n  @Event() nanoDidLoad!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has been removed.\n   * @internal\n   */\n  @Event() nanoDidUnload!: EventEmitter<void>;\n\n  /**\n   * Called when validation is performed (which depends on `validateOn`).\n   * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n   */\n  @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `{ isValid: boolean, errorMessage: string }`\n   */\n  @Method()\n  async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n    if (validateFirst) this.validate();\n    return {\n      isValid: !this._invalid,\n      errorMessage: this.nativeInput.validationMessage,\n    };\n  }\n\n  /**\n   * Sets focus on the specified `nano-input`. Use this method instead of the global\n   * `input.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (this.nativeInput) {\n      this.nativeInput.focus();\n      this.nativeInput.click();\n    }\n  }\n\n  /**\n   * Returns the native `<input>` element used under the hood.\n   */\n  @Method()\n  getInputElement(): Promise<HTMLInputElement | HTMLTextAreaElement> {\n    return Promise.resolve(this.nativeInput);\n  }\n\n  /**\n   * Invalidate the field and show a custom error message. To clear the error you will need to re-call this method with an empty string.\n   */\n  @Method()\n  async showError(message: string) {\n    if (this.nativeInput) {\n      this.nativeInput.setCustomValidity(message);\n      this.validate();\n    }\n  }\n\n  @Listen('reset', { target: 'body' })\n  onReset(e) {\n    const form = this.form\n      ? document.querySelector('#' + this.form)\n      : this.el.closest('form');\n    if (!form || e.target !== this.el.closest('form')) return;\n\n    this.value = '';\n  }\n\n  @Listen('mousedown', { target: 'body' })\n  @Listen('keydown')\n  handleBlur(e: KeyboardEvent | MouseEvent) {\n    if (!this.hasFocus) return;\n\n    const kev = e as KeyboardEvent;\n    let target: Element;\n\n    raf(() => {\n      if (kev.key) {\n        if (kev.key !== 'Tab') return;\n        target = document.activeElement;\n      } else target = e.target as Element;\n\n      if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {\n        this.onBlur();\n      }\n    });\n  }\n\n  private shouldClearOnEdit() {\n    const { type, clearOnEdit } = this;\n    return clearOnEdit === undefined ? type === 'password' : clearOnEdit;\n  }\n\n  private getValue(): string {\n    return this.value || '';\n  }\n\n  private validate = (ev?: Event) => {\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n    if (!this.nativeInput.validity.valid) {\n      if (this.showInlineError) {\n        if (ev) ev.preventDefault();\n        this.errorMessage = this.nativeInput.validationMessage;\n      }\n      this._invalid = true;\n    } else this._invalid = false;\n\n    this.nanoValidate.emit({\n      isValid: !this._invalid,\n      errorMessage: this.nativeInput.validationMessage,\n      originalEvent: ev,\n    });\n  };\n\n  private onInput = (ev: InputEvent) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) this.value = input.value || '';\n    this.nanoInput.emit(ev);\n  };\n\n  private onBlur = () => {\n    this.hasFocus = false;\n    this.focusChanged();\n    if (this.validateOn === 'dirty') this.validate();\n    this.nanoBlur.emit();\n  };\n\n  private onFocus = () => {\n    this.hasFocus = true;\n    this.focusChanged();\n    this.nanoFocus.emit();\n  };\n\n  private onKeydown = () => {\n    if (this.shouldClearOnEdit()) {\n      // Did the input value change after it was blurred and edited?\n      if (this.didBlurAfterEdit && this.hasValue()) {\n        // Clear the input\n        this.clearTextInput();\n      }\n\n      // Reset the flag\n      this.didBlurAfterEdit = false;\n    }\n  };\n\n  private clearTextInput = (ev?: Event) => {\n    if (this.clearInput && !this.readonly && !this.disabled && ev) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    }\n\n    this.value = '';\n    this.nativeInput.value = '';\n    const event = new window.Event('change');\n    this.nativeInput.dispatchEvent(event);\n  };\n\n  private focusChanged() {\n    // If clearOnEdit is enabled and the input blurred but has a value, set a flag\n    if (!this.hasFocus && this.shouldClearOnEdit() && this.hasValue()) {\n      this.didBlurAfterEdit = true;\n    }\n  }\n\n  private hasValue(): boolean {\n    return this.getValue().length > 0;\n  }\n\n  private slotChangeObserver() {\n    if (!Build.isBrowser) return;\n\n    if (this.mo) this.mo.disconnect();\n    const mo = (this.mo = new MutationObserver(() =>\n      this.processSlottedContent()\n    ));\n    mo.observe(this.el, { childList: true, subtree: true });\n  }\n\n  private processSlottedContent() {\n    // see if we have label / button content\n    this.hasLabelSlot = !!this.el.querySelectorAll('[slot=\"label\"]');\n    this.hasHelperSlot = !!this.el.querySelector('[slot=\"helper\"]');\n    this.datalist = this.el.querySelector('nano-datalist:not([slot])');\n\n    // breaking change introduced in v2. Rm in v3\n    if (!!this.el.querySelector('[slot=\"inline-button\"]')) {\n      console.warn(\n        'The `inline-button` slot was renamed to `end` in v2 - please update your code',\n        this.el\n      );\n    }\n\n    // breaking change introduced in v2. Rm in v3\n    if (!!this.el.querySelector('[slot=\"legacy\"]')) {\n      console.warn(\n        'The `legacy` slot has been removed. Please update your code',\n        this.el\n      );\n    }\n  }\n\n  connectedCallback() {\n    this.debounceChanged();\n    if (Build.isBrowser) {\n      this.el.dispatchEvent(\n        new CustomEvent('nanoDidLoad', {\n          detail: this.el,\n        })\n      );\n    }\n  }\n\n  disconnectedCallback() {\n    if (Build.isBrowser) {\n      document.dispatchEvent(\n        new CustomEvent('nanoDidUnload', {\n          detail: this.el,\n        })\n      );\n    }\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n    this.hasRendered = true;\n    if (this.autofocus) setTimeout((_) => this.setFocus(), 300);\n  }\n\n  componentWillLoad() {\n    this.processSlottedContent();\n  }\n\n  render() {\n    const value = this.getValue();\n    const labelId = this.inputId + '-lbl';\n    const moreId =\n      this.showInlineError || this.hasHelperSlot ? this.inputId + '-more' : '';\n    this.rtl = (this.el.ownerDocument as Document).dir === 'rtl';\n\n    const compWrapOptions = (({\n      el,\n      floatLabel,\n      label,\n      errorMessage,\n      type,\n      showInlineError,\n      hasHelperSlot,\n      hasLabelSlot,\n      hideLabel,\n      placeholder,\n      maxlength,\n      charCount,\n      showCharCount,\n      rtl,\n    }) => ({\n      el,\n      floatLabel,\n      label,\n      errorMessage,\n      type,\n      showInlineError,\n      hasHelperSlot,\n      hasLabelSlot,\n      hideLabel,\n      placeholder,\n      maxlength,\n      charCount,\n      showCharCount,\n      rtl,\n    }))(this);\n    const wrapOptions = {\n      ...compWrapOptions,\n      labelId,\n      moreId,\n      hasValue: this.hasValue(),\n      controlId: this.inputId,\n    };\n\n    const controlOptions = (({ clearInput, readonly, disabled }) => ({\n      clearInput,\n      readonly,\n      disabled,\n      clearControl: this.clearInput,\n    }))(this);\n\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        dir={this.rtl ? 'rtl' : null}\n        class={{\n          ...createColorClasses(this.color),\n          'has-value': this.hasValue(),\n          'has-focus': this.hasFocus,\n          'is-invalid': this._invalid,\n        }}\n      >\n        <FormControlWrap {...wrapOptions}>\n          <FormControl\n            {...controlOptions}\n            onClearText={this.clearTextInput}\n            control={this.el}\n            ref={(el) => (this.nativeInputWrap = el)}\n          >\n            {this.type !== 'textarea' && (\n              <input\n                id={this.inputId}\n                class=\"input__native-ctrl\"\n                ref={(input) => (this.nativeInput = input)}\n                aria-labelledby={labelId + ' ' + moreId}\n                disabled={this.disabled}\n                accept={this.accept}\n                autoCapitalize={this.autocapitalise}\n                autoComplete={this.autocomplete}\n                autoCorrect={this.autocorrect}\n                autoFocus={this.autofocus}\n                inputMode={this.inputmode}\n                form={this.form}\n                min={this.min}\n                max={this.max}\n                minLength={this.minlength}\n                maxLength={this.maxlength}\n                multiple={this.multiple}\n                name={this.name}\n                pattern={this.pattern}\n                placeholder={this.placeholder}\n                readOnly={this.readonly}\n                required={this.required}\n                spellcheck={this.spellcheck}\n                step={this.step}\n                size={this.size}\n                type={this.type}\n                value={value}\n                onInput={this.onInput}\n                onChange={this.onInput}\n                onFocus={this.onFocus}\n                onKeyDown={this.onKeydown}\n                onInvalid={this.validate}\n              />\n            )}\n            {this.type === 'textarea' && (\n              <textarea\n                rows={this.floatLabel ? 1 : this.rows}\n                id={this.inputId}\n                class={{\n                  'input__native-ctrl': true,\n                  input__resizable: this.resize === 'true',\n                }}\n                ref={(input) => (this.nativeInput = input)}\n                aria-labelledby={labelId + ' ' + moreId}\n                disabled={this.disabled}\n                autoCapitalize={this.autocapitalise}\n                autoCorrect={this.autocorrect}\n                autoFocus={this.autofocus}\n                inputMode={this.inputmode}\n                form={this.form}\n                minLength={this.minlength}\n                maxLength={this.maxlength}\n                name={this.name}\n                placeholder={this.placeholder}\n                readOnly={this.readonly}\n                required={this.required}\n                spellcheck={this.spellcheck}\n                value={value}\n                onInput={this.onInput}\n                onChange={this.onInput}\n                onFocus={this.onFocus}\n                onKeyDown={this.onKeydown}\n                onInvalid={this.validate}\n              ></textarea>\n            )}\n          </FormControl>\n          <slot />\n        </FormControlWrap>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/{p-8de6e276.entry.js → p-b4f8e541.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,c as i,i as s,f as e,h as n,k as a,e as o,g as r}from"./p-ab5813a7.js";import{a as l}from"./p-a77e3fbb.js";import{d as h}from"./p-289aa03f.js";import{C as d}from"./p-5a0095f9.js";import{d as c}from"./p-1da5f8df.js";import{c as p}from"./p-b619500f.js";import"./p-69a3e911.js";var b=undefined&&undefined.__rest||function(t,i){var s={};for(var e in t)if(Object.prototype.hasOwnProperty.call(t,e)&&i.indexOf(e)<0)s[e]=t[e];if(t!=null&&typeof Object.getOwnPropertySymbols==="function")for(var n=0,e=Object.getOwnPropertySymbols(t);n<e.length;n++){if(i.indexOf(e[n])<0&&Object.prototype.propertyIsEnumerable.call(t,e[n]))s[e[n]]=t[e[n]]}return s};async function m(t,i={}){var{body:s}=i,e=b(i,["body"]);const n={Accept:"application/json, text/plain, */*","Access-Control-Allow-Origin":"*","Content-Type":"application/json",Cache:"no-cache"};const a=Object.assign(Object.assign({method:s?"POST":"GET",credentials:"include",keepalive:true,mode:"cors"},e),{headers:Object.assign(Object.assign({},n),e.headers)});if(s){a.body=JSON.stringify(s)}let o=setTimeout((()=>{}),0);if(window.AbortController){const t=new AbortController;const{timeout:i=500}=e;o=setTimeout((()=>t.abort()),i);a.signal=t.signal}const r=await fetch(t,a);clearTimeout(o);if(r.ok){return await r.json()}else{const t=await r.text();return new Error(t)}}const g=':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;top:0;left: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([dir=rtl]) .gn-menu{left:auto;right:0}:host(.threshold-2) .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;margin-bottom: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{padding-right:calc(var(--padding) / 2);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.gn-menu_actions{padding-right:unset;-webkit-padding-end:calc(var(--padding) / 2);padding-inline-end:calc(var(--padding) / 2)}}.gn-menu_actions-counter{background:#d0021b;color:#fff;position:absolute;bottom:4px;right:0;left:auto;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{margin-right:auto}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.gn-menu .menu-btn{margin-right:unset;-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;border-bottom:1px solid #33484d;padding-bottom: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{margin-bottom:0}.gn-menu .nav-links .back-btn{border-top:1px solid #33484d;border-bottom: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{margin-right:10px;font-size:12px;color:white}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.gn-menu .nav-links .back-btn nano-icon{margin-right:unset;-webkit-margin-end:10px;margin-inline-end:10px}}.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-left:7px;padding-right:var(--padding);padding-top:9px;padding-bottom:9px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.gn-menu .login-btn{padding-left:unset;padding-right:unset;-webkit-padding-start:7px;padding-inline-start:7px;-webkit-padding-end:var(--padding);padding-inline-end:var(--padding)}}.gn-menu .login-btn nano-icon{margin-left:10px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.gn-menu .login-btn nano-icon{margin-left:unset;-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{margin-left:11px;margin-right: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}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.bars .search-widget{margin-left:unset;margin-right:unset;-webkit-margin-start:11px;margin-inline-start:11px;-webkit-margin-end:auto;margin-inline-end:auto}}.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;top:calc(100% - 2px);width:100%;left:0;background:white;border:2px solid var(--bar-color-tint);border-radius:0 0 5px 5px;color:#4a4a4a;font-size:0.85em;padding:calc(var(--padding) / 2) 0 1px 0;z-index:1}:host([dir=rtl]) .bars .search-autocomplete{left:auto;right:0}.bars .search-autocomplete-hit{padding:calc(var(--padding) / 4) var(--padding) calc(var(--padding) / 4) var(--padding);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;text-align:left;line-height:1.5;cursor:pointer}:host([dir=rtl]) .bars .search-autocomplete-hit{text-align:right}.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;border-top: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;left: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-left:0;padding-right:var(--padding);padding-top:var(--padding);padding-bottom: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}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-bar{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding);padding-inline-end:var(--padding)}}.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]){margin-left:11px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-bar>* ::slotted(nano-nav-item[slot=icon]){margin-left:unset;-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{margin-left:6px;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-bar .icon-btn{margin-left:unset;-webkit-margin-start:6px;margin-inline-start:6px;}}:host(.threshold-2) .main-bar .icon-btn{margin-left:11px;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.threshold-2) .main-bar .icon-btn{margin-left:unset;-webkit-margin-start:11px;margin-inline-start:11px;}}.main-bar .menu-btn.icon-btn{margin:0 !important}:host(:not([dir=rtl])) .main-bar .menu-btn.icon-btn{border-right:1.5px solid var(--bar-color-shade)}:host([dir=rtl]) .main-bar .menu-btn.icon-btn{border-left:1.5px solid var(--bar-color-shade)}.main-bar .user-links{position:relative}.main-bar .user-links .icon-btn{padding-right:0;font-size:0.93em;font-weight:500}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-bar .user-links .icon-btn{padding-right:unset;-webkit-padding-end:0;padding-inline-end:0}}.main-bar .user-links .icon-btn nano-icon{margin-left: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}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-bar .user-links .icon-btn nano-icon{margin-left:unset;-webkit-margin-start:5px;margin-inline-start:5px;}}.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;right:0;font-size:0.85em;min-width:250px;z-index:1}:host([dir=rtl]) .main-bar .user-links-panel{right:auto;left:0}.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;border-bottom:#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{border-bottom: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{margin-left:0;margin-right:auto;padding-left:11px;padding-right:11px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:none}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-bar .logo-link{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:auto;margin-inline-end:auto}}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-bar .logo-link{padding-left:unset;padding-right:unset;-webkit-padding-start:11px;padding-inline-start:11px;-webkit-padding-end:11px;padding-inline-end:11px}}.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{margin-left:6px;--color:#e2e2e2;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-bar .nav-links--sub{margin-left:unset;-webkit-margin-start:6px;margin-inline-start:6px;}}.main-bar .login-btn{display:inline-block;border-radius:4px;background-color:#17bb75;color:#fff;padding:3px 10px;position:relative;left:auto;bottom:auto;margin-left:11px;margin-right:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-bar .login-btn{margin-left:unset;margin-right:unset;-webkit-margin-start:11px;margin-inline-start:11px;-webkit-margin-end:0;margin-inline-end: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;margin-left:auto}.search-bar .search-widget{margin-left:0;margin-right:0;margin-top:0;margin-bottom: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{top: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;left:0;right:0;top: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}';const u={search:0,about:1,main:2,login:3,icon:4};let f=class{constructor(s){t(this,s);this.nanoIsReady=i(this,"nanoIsReady",7);this.nanoSearchResult=i(this,"nanoSearchResult",7);this.nanoSearchError=i(this,"nanoSearchError",7);this.nanoSearchReset=i(this,"nanoSearchReset",7);this.currSize=0;this.thresholdsGoingUp=false;this.THRESHOLDLIMIT=Object.keys(u).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=(t=false)=>{if(typeof this.debounceSetResizingState==="undefined"){this.debounceSetResizingState=c(this.setResizingState,600)}if(t){this.isResizing=true;this.debounceSetResizingState()}else{this.isResizing=false;this.thresholdsGoingUp=false}};this.onMenuBtnKeyDown=t=>{switch(t.key){case"Enter":case" ":this.modalOpen?this.menuClose(t,true):this.menuOpen();break}};this.onMenuBtnClick=t=>{this.menuClose(t,true)};this.menuOpen=t=>{if(t)t.preventDefault();this.menuDiv.style.display="block";this.modalOpen=true;this.modalIsOpen=true;this.menuWrapDiv.addEventListener("focusout",this.menuClose);this.menuWrapDiv.focus({preventScroll:true});if(this.threshold<2||this.menuWrapDiv.scrollHeight>window.innerHeight){document.body.style.overflow="hidden";this.menuFullScreen=true}else document.body.style.overflowX="hidden"};this.onMenuHidden=()=>{this.menuDiv.removeEventListener("transitionend",this.onMenuHidden);this.menuWrapDiv.removeEventListener("focusout",this.menuClose);document.body.style.overflow="";this.menuDiv.style.display="none";this.modalIsOpen=false;this.menuFullScreen=false;setTimeout((()=>{if(document.activeElement===document.body&&this.menuBtn)this.mainBarDiv.focus({preventScroll:true})}),50)};this.menuClose=(t,i=false)=>{if(!i){let i=t;if(i&&i.relatedTarget&&p("#global-nav-menu",i.relatedTarget))return;if(i&&i.relatedTarget&&i.relatedTarget.closest("#global-nav-menu"))return;if(i&&i.relatedTarget&&i.relatedTarget.closest('[slot="promotion"]'))return;if(this.secondaryMenuOpen)return}this.modalOpen=false;this.menuDiv.addEventListener("transitionend",this.onMenuHidden)};this.subMenuClose=t=>{t.preventDefault();t.target.closest("nano-nav-item").open=false};this.onUserBtnClick=t=>{t.preventDefault();this.userMenuOpen=!this.userMenuOpen};this.onUserBtnKeyDown=t=>{switch(t.key){case"Enter":case" ":this.userMenuOpen=!this.userMenuOpen;break}};this.onUserMenuBlur=t=>{if(!t.relatedTarget){this.userMenuOpen=false;return}if(!!t.relatedTarget.closest(".user-links-panel"))return false;this.userMenuOpen=false};this.onSearchBtnClick=t=>{t.preventDefault();if(!this.searchBarShown)this.searchbarShow();else this.searchbarHide()};this.onSearchBtnKeyDown=t=>{switch(t.key){case"Enter":case" ":this.searchBarShown?this.searchbarHide():this.searchbarShow();break}};this.onSearchBarShown=()=>{this.searchBarEl.removeEventListener("transitionend",this.onSearchBarShown);if(this.searchInput)this.searchInput.setFocus();this.searchBarEl.style.overflow="visible"};this.searchbarHide=t=>{if(t&&t.relatedTarget&&t.relatedTarget.closest("#global-nav-search-bar"))return;this.showAutocomplete=false;if(this.searchValInternal.length&&t)return;this.searchBarEl.addEventListener("transitionend",this.onSearchBarHidden);this.searchBarEl.style.overflow="hidden";this.searchBarEl.style.height="0px"};this.onSearchBarHidden=()=>{this.searchBarEl.removeEventListener("transitionend",this.onSearchBarHidden);this.searchBarEl.style.display="none";this.searchBarShown=false};this.onSearchInput=t=>{this.searchValInternal=this.searchInput.value;if(!this.isSearchValSet()){this.searchLoading=false;return}if(t.detail.type==="input"){this.showAutocomplete=false;this.searchLoading=true}};this.onSearchChange=async t=>{this.searchValInternal=this.searchValue=t?t.detail.value:this.searchValInternal;this.showAutocomplete=false;this.autocompleteResults=null;if(!this.isSearchValSet()){if(!this.searchValInternal.length){this.nanoSearchReset.emit()}this.searchLoading=false;return}if(!this.currentIndex)this.currentSelectedIndex();try{this.autocompleteResults=this.processSearchResults(await this.currentIndex.alogliaIndex.search(this.searchValInternal,{attributesToSnippet:["body:5","title:8"],hitsPerPage:5,filters:"created > "+Math.floor((Date.now()-631152e5)/1e3)}))}catch(i){console.error(i)}this.scopeSearch=null;this.scopeSearch=await this.onSearchSubmit(null,false);this.searchLoading=false;this.showAutocompleteResults()};this.onSearchSubmit=async(t,i=true)=>{if(t)t.preventDefault();if(!this.isSearchValSet())return;this.searchLoading=true;this.algoliaSearchResults=null;if(!this.currentIndex)this.currentSelectedIndex();let s=this.internalSearchIndeces.map((t=>({indexName:t.index,query:this.searchValInternal,facets:t.filters,hitsPerPage:10,filters:"created > "+Math.floor((Date.now()-631152e5)/1e3)})));try{this.algoliaSearchResults=this.processSearchResults(await this.algoliaClient.multipleQueries(s))}catch(e){this.nanoSearchError.emit(e)}this.searchLoading=false;if(!this.algoliaSearchResults)return;this.algoliaSearchResults.results.map(((t,i)=>{t.indexName=this.internalSearchIndeces[i].name;t.selected=this.currentIndex.name===this.internalSearchIndeces[i].name;t.domain=this.currentIndex.domain||null;t.domains=this.myAccData.domains||null;t.allGroup=!!this.internalSearchIndeces[i].allGroup;t.filters=this.internalSearchIndeces[i].filters}));if(i){this.nanoSearchResult.emit({results:this.algoliaSearchResults.results,client:{apiKey:this.searchApiKey,appId:this.searchAppId}});this.showAutocomplete=false}return this.algoliaSearchResults};this.onSearchIndexChange=async t=>{let i=t;let s=t;if(!this.currentIndex)this.currentSelectedIndex();if(i.detail&&i.detail.value.length)s=i.detail.value;if(!s||!s.length)return;if(this.currentIndex.index===s)return;let e=this.internalSearchIndeces.find((t=>t.index===s));if(!e||!e.alogliaIndex)return;this.searchIndex=e.index;if(this.isSearchValSet())await this.onSearchChange()};this.switchIndexSubmit=async t=>{if(this.isSearchValSet()){await this.onSearchIndexChange(t);this.onSearchSubmit()}else this.onSearchIndexChange(t)};this.onAutocompleteBlur=t=>{if(!this.showAutocomplete||!this.autocompleteResults)return;if(t&&t.target&&t.target.closest(".search-widget"))return;this.showAutocomplete=false};this.showAutocompleteResults=()=>{if(!this.autocompleteResults||!this.autocompleteResults.hits)return;this.showAutocomplete=true};this.onAutocompleteInteract=t=>{if(!this.showAutocomplete||!this.autocompleteResults)return;let i=this.currAIndex;switch(t.key){case"Tab":setTimeout((()=>{if(!this.el.shadowRoot.activeElement||!this.el.shadowRoot.activeElement.closest(".search-widget")){this.showAutocomplete=false;return}else{let t=this.autocompleteEles.find(((t,i)=>{if(t===this.el.shadowRoot.activeElement){this.currAIndex=i;return true}}));if(t)this.setActiveElement(t);else this.currAIndex=-1}}));break;case"ArrowDown":case"ArrowUp":if(t.key==="ArrowDown")i++;else if(t.key==="ArrowUp")i--;let s=this.autocompleteEles[i];if(s||i<0||i>this.autocompleteEles.length-1)t.preventDefault();if(s){this.setActiveElement(s);this.currAIndex=i}else if(i<0){this.searchInput.setFocus();this.currAIndex=-1}break;case"Enter":case" ":if(this.autocompleteEles[this.currAIndex]){this.autocompleteEles[this.currAIndex].click()}break}}}async submitSearch(){this.onSearchSubmit();this.showAutocomplete=false;return}currentSelectedIndex(){if(!this.internalSearchIndeces.length){return}let t=this.internalSearchIndeces.find((t=>t.index===this.searchIndex));if(!t){this.currentIndex=this.internalSearchIndeces[0];console.error("index not found");return}this.currentIndex=t;return t}changeInternalSearchVal(){if(this.searchValInternal!==this.searchValue)this.searchValue=this.searchValInternal}initAlgoliaClient(){if(!this.searchAppId||!this.searchApiKey)return;this.algoliaClient=l(this.searchAppId,this.searchApiKey);this.addAlgoliaIndeces()}addIndeces(){this.internalSearchIndeces=[...this.internalSearchIndeces,...this.searchIndeces]}addAlgoliaIndeces(){if(!this.algoliaClient||!this.internalSearchIndeces.length)return;this.internalSearchIndeces.forEach((t=>{t.alogliaIndex=this.algoliaClient.initIndex(t.index)}));if(!this.searchIndex)this.searchIndex=this.internalSearchIndeces[0].index}thresholdChange(t,i){if(t>i){this.thresholdsGoingUp=true;this.setResizingState(true)}}ratioChange(){if(this.intersectRatio<1&&this.threshold>0){if(this.thresholdsGoingUp)this.setResizingState(true);this.threshold--;setTimeout((()=>this.ratioChange()),500)}else{this.thresholdReady=true;this.siteContent.style.minHeight=`calc(100% - ${this.barsDiv.clientHeight+1}px)`;let t,i;s((()=>{t=[...Array.from(this.el.querySelectorAll('nano-nav-item[slot="site"]')),...Array.from(this.el.querySelectorAll('nano-nav-item[slot="overflow"]'))];i=[];if(this.threshold<this.THRESHOLDLIMIT-u.icon)t.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="icon"]')));else i.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="icon"]')));if(this.threshold<this.THRESHOLDLIMIT-u.login)t.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="loggedin"]')));else i.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="loggedin"]')));if(this.threshold<this.THRESHOLDLIMIT-u.main)t.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="main"]')));else i.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="main"]')));if(this.threshold<this.THRESHOLDLIMIT-u.about)t.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="about"]')));else i.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="about"]')))}));e((()=>{t.forEach((t=>{t.classList.add("nano-global-nav-menu");t.classList.remove("nano-global-nav-bar")}));i.forEach((t=>{t.classList.remove("nano-global-nav-menu");t.classList.add("nano-global-nav-bar")}))}))}}assessReady(){if(this.thresholdReady&&this.remoteDataReady){this.ready=true}}remoteReady(){this.attachIO()}isReady(){this.nanoIsReady.emit()}setupAutocompleteBlur(){if(this.showAutocomplete){this.el.shadowRoot.addEventListener("click",this.onAutocompleteBlur)}else{this.el.shadowRoot.removeEventListener("click",this.onAutocompleteBlur)}}slotChange(){this.threshold=this.THRESHOLDLIMIT}thresholdClasses(){let t=[];let i=0;for(i;i<this.threshold;i++)t.push("threshold-"+(i+1));return t}onWindowResize(){if(this.threshold<this.THRESHOLDLIMIT&&window.innerWidth>this.currSize){this.threshold=this.THRESHOLDLIMIT}this.currSize=window.innerWidth;this.searchBarShown=false}secondaryOpen(t){if(!t.detail.secondaryMenu)return;t.stopPropagation();this.secondaryMenuOpen=true;this.menuContentDiv.style.minHeight=t.detail.secondaryMenu.scrollHeight+"px"}secondaryClose(t){if(!t.detail.secondaryMenu)return;t.stopPropagation();this.secondaryMenuOpen=false;this.menuContentDiv.style.minHeight=""}async handleUserMenu(){await h(this.userLinkPanel,"show",this.userMenuOpen);if(this.userMenuOpen){this.userLinkPanel.focus();this.userLinkPanel.addEventListener("focusout",this.onUserMenuBlur)}else{this.userLinkPanel.removeEventListener("focusout",this.onUserMenuBlur);this.el.focus()}}searchbarShow(){this.searchBarShown=true;this.searchBarEl.addEventListener("transitionend",this.onSearchBarShown);this.searchBarEl.style.display="block";setTimeout((()=>{this.searchBarEl.style.height=this.searchBarEl.querySelector(".search-widget").scrollHeight+"px"}),50)}autocompleteSnippet(t){let i=["title"];if(t._snippetResult){let s=i.find((i=>t._snippetResult[i]&&t._snippetResult[i].matchLevel!=="none"));if(s){if(s!=="title")return(t.title.length>15?t.title.substring(0,15)+" ...":t.title)+" "+t._snippetResult[s].value;else return t._snippetResult["title"].value}}return t.title}isSearchValSet(){if(this.searchValInternal.length<3)return false;return true}resetHitFocus(){this.currAIndex=-1}setActiveElement(t){this.autocompleteEles.map((t=>t.setAttribute("aria-selected","false")));t.focus({preventScroll:true});t.setAttribute("aria-selected","true")}assessSlottedContent(){s((()=>{this.hasSiteSlot=!!this.el.querySelectorAll('[slot="site"]').length;this.hasLoggedinSlot=!!this.el.querySelectorAll('[slot="loggedin"]').length;this.hasPromotionSlot=!!this.el.querySelectorAll('[slot="promotion"]').length;this.aboutSlotLen=this.el.querySelectorAll('[slot="about"]').length;this.iconSlotLen=this.el.querySelectorAll('[slot="icon"]').length;this.mainSlotLen=this.el.querySelectorAll('[slot="main"]').length;this.overflowSlotLen=this.el.querySelectorAll('[slot="overflow"]').length;this.searchSlotLen=this.el.querySelectorAll('[slot="search"]').length}))}attachIO(){if(this.io)return;let t=this.el.shadowRoot.querySelector(".global-nav .main-bar");if(typeof window!=="undefined"&&window.IntersectionObserver&&!!t){const i=this.io=new window.IntersectionObserver((t=>{this.intersectRatio=t.slice(-1)[0].intersectionRatio}),{root:t,threshold:1});i.observe(t.querySelector(".measure-ele"))}}componentDidLoad(){{this.debounceResize=c(this.onWindowResize.bind(this),300);window.addEventListener("resize",this.debounceResize);this.currSize=window.innerWidth}this.initAlgoliaClient();this.addAlgoliaIndeces();if(this.remoteDataReady)this.attachIO()}componentWillLoad(){d.init(this,["searchIndex","searchValue"],"url-hash","gns");if(typeof window!=="undefined"&&window.MutationObserver){const t=this.mo=new MutationObserver((()=>{this.assessSlottedContent()}));t.observe(this.el,{childList:true,subtree:false})}this.assessSlottedContent()}disconnectedCallback(){if(this.io){this.io.disconnect();this.io=undefined}if(this.mo){this.mo.disconnect();this.mo=undefined}window.removeEventListener("resize",this.debounceResize)}async connectedCallback(){this.getMyAccData()}autocompleteList(){let t;if(this.showAutocomplete&&this.scrollingUp){let i=0;let s=0;let e=(t,i)=>i.index!==this.currentIndex.index?t+i.hits.length:t;let a=(t,i)=>i.index===this.currentIndex.index?t+i.hits.length:t;if(this.scopeSearch){s=this.scopeSearch.results.reduce(e,0);i=this.scopeSearch.results.reduce(a,0)}if(this.autocompleteResults&&this.autocompleteResults.hits.length||s&&!i){let s=0;t=n("div",null,!i&&n("div",{class:"search-autocomplete-hit search-autocomplete-hit--no-result"},"No results matching '",this.searchValInternal,"' were found in"," ",n("strong",null,this.currentIndex.name),". Try another phrase."),this.autocompleteResults&&[this.autocompleteResults.hits.map(((t,i)=>n("a",{role:"option",ref:t=>this.autocompleteEles.push(t),tabindex:"-1",id:"autocomplete-hit-"+i,href:t.url,class:"search-autocomplete-hit",innerHTML:this.autocompleteSnippet(t)})))],(!i||this.currentIndex.allGroup)&&this.scopeSearch&&this.scopeSearch.results&&[this.scopeSearch.results.map(((t,i)=>{if(!t.hits.length||t.index===this.currentIndex.index||s>1)return;s++;return n("button",{role:"option",ref:t=>this.autocompleteEles.push(t),tabindex:"-1",id:"autocomplete-scope-"+i,class:"search-autocomplete-hit",onClick:()=>this.switchIndexSubmit(t.index),onMouseDown:()=>this.switchIndexSubmit(t.index)},'"',this.searchValInternal,'"'," ",n("div",{class:"search-autocomplete-hit-scope"},"in ",t.indexName))}))],!!i&&n("div",{class:"search-autocomplete-foot"},n("button",{role:"option",class:"search-autocomplete-submit",ref:t=>this.autocompleteEles.push(t),id:"autocomplete-foot",onClick:this.onSearchSubmit,onMouseDown:this.onSearchSubmit},"View all results")))}else if(!i){t=n("div",{class:"search-autocomplete-hit search-autocomplete-hit--no-result"},"No results matching '",this.searchValInternal,"' were found. Try another phrase.")}}return n("div",{class:"search-autocomplete",role:"listbox",id:"autocomplete-results","aria-expanded":this.showAutocomplete?"true":"false",hidden:!this.showAutocomplete,onKeyDown:this.onAutocompleteInteract},t)}searchWidget(){return[n("form",{class:"search-inputs",onSubmit:this.onSearchSubmit,id:"global-nav-search"},n("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((t=>n("nano-option",{selected:t.index===this.searchIndex,value:t.index},t.name||t.index))),n("nano-icon",{name:"solid/caret-down",class:"down-arrow",slot:"down-arrow"})),n("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:t=>this.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"},n("button",{class:{"search-icon":true,"search-icon--search":true,"search-icon--show":!this.searchValInternal.length},slot:"end",onMouseDown:t=>{this.searchValInternal=this.searchInput.value;this.onSearchSubmit(t,true)}},n("nano-icon",{name:"light/search"})),n("span",{class:{"search-icon":true,"search-icon--loader":true,"search-icon--show":this.searchLoading},slot:"end"},n("nano-icon",{name:"light/spinner-third"}))),n("input",{type:"submit"}))]}render(){this.autocompleteEles=[];let t=this.el.ownerDocument.dir==="rtl";let i=this.searchWidget();i.push(this.autocompleteList());return n(o,{class:{[this.thresholdClasses().join(" ")]:true,ready:this.ready,"search-bar-shown":this.searchBarShown&&this.scrollingUp,"search-auto-complete-shown":this.showAutocomplete&&this.scrollingUp,"modal-open":this.modalIsOpen,resizing:this.isResizing},dir:t?"rtl":null},n("div",{class:{"global-nav":true,"scrolling-down":!this.scrollingUp}},n("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:t=>this.menuDiv=t},n("div",{class:"gn-menu_wrap",ref:t=>this.menuWrapDiv=t,tabindex:"-1"},n("div",{class:"gn-menu_actions"},n("button",{class:"menu-btn icon-btn icon-btn",onMouseDown:this.onMenuBtnClick,onKeyDown:this.onMenuBtnKeyDown},this.threshold<this.THRESHOLDLIMIT-3&&n("nano-icon",{name:"light/times","aria-label":"close menu"}),this.threshold>=this.THRESHOLDLIMIT-3&&n("nano-icon",{name:"light/bars","aria-label":"close menu"})),this.threshold<this.THRESHOLDLIMIT-u.icon&&[!!this.iconSlotLen&&n("slot",{name:"icon"}),this.myAccData&&(!this.activeMyAccountSections||this.activeMyAccountSections.includes("icons"))&&[this.msgUrl&&n("a",{href:this.msgUrl,class:"icon-btn"},n("nano-icon",{name:"light/bell"}),this.msgCount>0&&n("span",{class:"gn-menu_actions-counter"},this.msgCount)),this.cartUrl&&n("a",{href:this.cartUrl,class:"icon-btn"},n("nano-icon",{name:"light/shopping-cart"}),this.cartCount>0&&n("span",{class:"gn-menu_actions-counter"},this.cartCount))]],this.myAccData&&this.myAccData.urls.login&&n("a",{href:this.myAccData.urls.login+this.ssoRedirect,class:"login-btn"},"Login / Register"," ",n("nano-icon",{name:"solid/chevron-right"}))),n("div",{class:"content-wrap",ref:t=>this.menuContentDiv=t},n("div",{class:"content"},n("nav",{class:"nav-links nav-links--main"},n("slot",{name:"overflow"}),this.threshold<this.THRESHOLDLIMIT-u.main&&!!this.mainSlotLen&&n("slot",{name:"main"})),((!!this.aboutSlotLen||!!this.aboutNavItms.length)&&this.threshold<this.THRESHOLDLIMIT-u.about||this.hasSiteSlot||!!this.siteNavItms.length)&&n("div",null,(!!this.aboutSlotLen||!!this.aboutNavItms.length)&&this.threshold<this.THRESHOLDLIMIT-u.about&&[(this.threshold>=this.THRESHOLDLIMIT-(u.about+1)||this.mainSlotLen<2)&&this.overflowSlotLen<2&&n("div",{class:"nav-links-wrap"},!!this.aboutNavItms.length&&n("h4",{class:"nav-links_title"},"About"),n("nav",{class:"nav-links nav-links--sub","aria-label":"About the company links"},n("slot",{name:"about"}),this.aboutNavItms.map((t=>n("nano-nav-item",{class:"nano-global-nav nano-global-nav-menu"},n("a",{href:t.address,target:t.target},t.title)))))),(this.threshold<this.THRESHOLDLIMIT-(u.about+1)&&this.mainSlotLen>=2||this.overflowSlotLen>=2)&&n("nav",{class:"nav-links","aria-label":"About the company links"},!this.aboutNavItms.length&&n("slot",{name:"about"}),!!this.aboutNavItms.length&&n("nano-nav-item",{class:"nano-global-nav nano-global-nav-menu"},"Company",n("nano-icon",{slot:"icon-end",name:"solid/chevron-right"}),n("div",{slot:"secondary"},n("div",{class:"content"},n("button",{class:"back-btn",onClick:this.subMenuClose},n("nano-icon",{slot:"icon-end",name:"solid/chevron-left","aria-label":"go back"}),"Company"),n("slot",{name:"about"}),n("div",{class:"content--sub"},this.aboutNavItms.map((t=>n("nano-nav-item",{class:"nano-global-nav nano-global-nav-menu"},n("a",{href:t.address,target:t.target},t.title)))))))))],(this.hasSiteSlot||!!this.siteNavItms.length)&&[(this.threshold>=this.THRESHOLDLIMIT-2||this.mainSlotLen<2)&&this.overflowSlotLen<2&&n("div",{class:"nav-links-wrap"},n("h4",{class:"nav-links_title"},"Sites"),n("nav",{class:"nav-links nav-links--sub","aria-label":"Different company site links"},n("slot",{name:"site"}),this.siteNavItms.map((t=>n("nano-nav-item",{class:"nano-global-nav nano-global-nav-menu"},n("a",{href:t.address,target:t.target},t.title)))))),(this.threshold<this.THRESHOLDLIMIT-2&&this.mainSlotLen>=2||this.overflowSlotLen>=2)&&n("nav",{class:"nav-links","aria-label":"Different company site links"},n("nano-nav-item",{class:"nano-global-nav nano-global-nav-menu"},"Sites",n("nano-icon",{slot:"icon-end",name:"solid/chevron-right"}),n("div",{slot:"secondary"},n("div",{class:"content"},n("button",{class:"back-btn",onClick:this.subMenuClose},n("nano-icon",{slot:"icon-end",name:"solid/chevron-left","aria-label":"go back"}),"Sites"),n("div",{class:"content--sub"},n("slot",{name:"site"}),this.siteNavItms.map((t=>n("nano-nav-item",{class:"nano-global-nav nano-global-nav-menu"},n("a",{href:t.address,target:t.target},t.title)))))))))])),this.isLoggedIn&&this.threshold<this.THRESHOLDLIMIT-u.login&&(this.loggedInNavItms.length||this.hasLoggedinSlot)&&n("nav",{class:"nav-links","aria-label":"Your user account links"},n("nano-nav-item",{class:"nano-global-nav user-nav nano-global-nav-menu"},this.myAccountUser.name,n("nano-icon",{slot:"icon-end",name:"solid/chevron-right"}),n("div",{slot:"secondary"},n("div",{class:"content"},n("button",{class:"back-btn",onClick:this.subMenuClose},n("nano-icon",{slot:"icon-end",name:"solid/chevron-left","aria-label":"go back"}),this.myAccountUser.name),n("div",{class:"content--sub"},n("slot",{name:"loggedin"}),this.loggedInNavItms.map((t=>n("nano-nav-item",{class:"nano-global-nav nano-global-nav-menu"},n("a",{href:t.address,target:t.target},t.title)))),n("nano-nav-item",{class:"nano-global-nav nano-global-nav-menu"},n("a",{href:this.myAccData.urls.forgot_password+this.ssoRedirect},"Change Password"))))))),n("slot",{name:"promotion"}),this.myAccData&&this.myAccData.urls.logout&&n("div",{class:"login-btn logout-btn"},n("a",{href:this.myAccData.urls.logout+this.ssoRedirect},"Logout"))))),n("nano-sticker",{"auto-resize":"false","break-point-max":"800",quietMode:{h:600,w:800}},n("div",{class:"bars",ref:t=>this.barsDiv=t},n("nav",{class:"main-bar","aria-label":"Main site navigation",tabindex:"-1",ref:t=>this.mainBarDiv=t},(this.hasPromotionSlot||!!this.overflowSlotLen||(this.myAccData||!!this.iconSlotLen)&&this.threshold<this.THRESHOLDLIMIT-u.icon||this.isLoggedIn&&(!!this.loggedInNavItms.length||this.hasLoggedinSlot)&&this.threshold<this.THRESHOLDLIMIT-u.login||!!this.mainSlotLen&&this.threshold<this.THRESHOLDLIMIT-u.main||(!!this.aboutSlotLen||!!this.aboutNavItms.length)&&this.threshold<this.THRESHOLDLIMIT-u.about||this.hasSiteSlot||!!this.siteNavItms.length)&&n("button",{class:"menu-btn icon-btn",onMouseDown:this.menuOpen,onKeyDown:this.onMenuBtnKeyDown,"aria-expanded":this.modalOpen?"true":"false","aria-controls":"global-nav-menu",ref:t=>this.menuBtn=t},n("nano-icon",{name:"light/bars","aria-label":"open menu"})),this.showLogo&&n("a",{href:this.logoUrl,class:"logo-link"},n("img",{src:a(`./assets/ont-logo.svg`),alt:"Oxford Nanopore Technologies Logo",class:"logo"})),!this.showLogo&&n("div",{class:"logo-link"},n("slot",{name:"logo"})),n("div",{class:"nav-links nav-links--main"},n("slot",{name:"main"})),this.threshold>=this.THRESHOLDLIMIT-u.search&&[this.showSearch&&!!this.internalSearchIndeces.length&&n("div",{class:"search-widget",role:"combobox","aria-owns":"autocomplete-results","aria-expanded":this.showAutocomplete&&this.autocompleteResults?"true":"false"},i),(!this.showSearch||!this.myAccData)&&!!this.searchSlotLen&&n("slot",{name:"search"})],this.threshold>=this.THRESHOLDLIMIT-u.about&&n("nav",{class:"nav-links nav-links--sub","aria-label":"About the company links"},(!!this.aboutSlotLen||!!this.aboutNavItms.length)&&this.threshold>=this.THRESHOLDLIMIT-u.about&&[n("slot",{name:"about"}),this.aboutNavItms.map((t=>n("nano-nav-item",{class:"nano-global-nav nano-global-nav-bar"},n("a",{href:t.address,target:t.target},t.title))))]),this.threshold<this.THRESHOLDLIMIT-u.search&&(this.showSearch&&!!this.internalSearchIndeces.length||!!this.searchSlotLen)&&n("button",{class:"icon-btn","aria-controls":"global-nav-search-bar","aria-expanded":this.searchBarShown?"true":"false",onMouseDown:this.onSearchBtnClick,onKeyDown:this.onSearchBtnKeyDown},n("nano-icon",{name:"light/search"})),this.threshold>=this.THRESHOLDLIMIT-u.icon&&[!!this.iconSlotLen&&n("slot",{name:"icon"}),this.myAccData&&(!this.activeMyAccountSections||this.activeMyAccountSections.includes("icons"))&&[this.msgUrl&&n("a",{href:this.msgUrl,class:"icon-btn"},n("nano-icon",{name:"light/bell"}),this.msgCount>0&&n("span",{class:"gn-menu_actions-counter"},this.msgCount)),this.cartUrl&&n("a",{href:this.cartUrl,class:"icon-btn"},n("nano-icon",{name:"light/shopping-cart"}),this.cartCount>0&&n("span",{class:"gn-menu_actions-counter"},this.cartCount))]],this.myAccData&&this.threshold>=this.THRESHOLDLIMIT-u.login&&[this.myAccData.urls.login&&n("a",{href:this.myAccData.urls.login+this.ssoRedirect,class:"login-btn"},"Login / Register"),this.myAccountUser&&n("div",{class:"user-links"},n("button",{class:{"icon-btn":true,"user-links-btn":true,open:this.userMenuOpen},onMouseDown:this.onUserBtnClick,onKeyDown:this.onUserBtnKeyDown}," ",this.myAccountUser.name,n("nano-icon",{name:"solid/caret-down"})),n("div",{class:"user-links-panel",tabindex:"-1",ref:t=>this.userLinkPanel=t},n("div",{class:"user-links-panel-content"},this.loggedInNavItms.map((t=>n("a",{href:t.address,target:t.target},t.title)))),n("div",{class:"user-links-panel-foot"},n("a",{href:this.myAccData.urls.forgot_password+this.ssoRedirect},"Change Password"),n("a",{href:this.myAccData.urls.logout+this.ssoRedirect},"Logout"))))],n("span",{class:"measure-ele"})),this.threshold<this.THRESHOLDLIMIT-u.search&&n("div",{id:"global-nav-search-bar",class:{"search-bar":true,show:this.searchBarShown},"aria-expanded":this.searchBarShown?"true":"false",role:"region",tabindex:"-1",ref:t=>this.searchBarEl=t},n("div",{class:"search-widget"},this.showSearch&&!!this.internalSearchIndeces.length&&n("div",null,i),(!this.showSearch||!this.myAccData)&&!!this.searchSlotLen&&n("slot",{name:"search"}))))),(this.threshold<this.THRESHOLDLIMIT-3||this.menuFullScreen)&&n("div",{class:{mask:true,open:this.modalOpen},onClick:this.menuClose,onTouchEnd:this.menuClose})),n("div",{class:"site-content",ref:t=>this.siteContent=t},n("slot",null)))}domainFor(t){if(!this.myAccData)return"";let i=this.myAccData.domains.find((i=>i.origin===t));return i?i.domain:""}processSearchResults(t){let i=t;let s=t;if(i.results){i.results.forEach(((t,s)=>{i.results[s]=this.processSearchResults(t)}));return i}else{s.hits.map((t=>{if(t.url&&!t.url.match(/^http/))t.url=location.protocol+"//"+this.domainFor(t.origin)+t.url}));return s}}async getMyAccData(){if(!this.getMyAccountData||this.myAccData){this.remoteDataReady=true;return}let t;switch(this.env){case"dev":t="https://myaccount-dev.nanoporetech.com/";break;case"test":t="https://myaccount-test.nanoporetech.com/";break;default:t="https://myaccount.nanoporetech.com/";break}var i={timeout:5e3};try{if(this.env==="local"){this.myAccData=await __sc_import_nano_components("./p-41d26683.js")}else{this.myAccData=await m(t+"nav_bar_data.json",i)}if(this.myAccData.user.id){this.isLoggedIn=true;this.myAccountUser=this.myAccData.user}this.processMyAccLinks();this.processMyAccData();setTimeout((()=>this.remoteDataReady=true),300)}catch(s){console.error(s);this.remoteDataReady=true}}processMyAccData(){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=[...this.myAccData.search.indeces,...this.searchIndeces];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}processMyAccLinks(){if(!this.myAccData.links||!this.myAccData.links.length)return;this.myAccData.links.forEach((t=>{switch(t.area){case"left-side-logged-in":case"left-side-logged-out":if(this.activeMyAccountSections&&!this.activeMyAccountSections.includes("sites"))break;if(this.isLoggedIn&&t.area==="left-side-logged-in")this.siteNavItms.push(t);else if(!this.isLoggedIn&&t.area==="left-side-logged-out")this.siteNavItms.push(t);break;case"right-side-logged-in":case"right-side-logged-out":if(this.activeMyAccountSections&&!this.activeMyAccountSections.includes("about"))break;if(this.isLoggedIn&&t.area==="right-side-logged-in")this.aboutNavItms.push(t);else if(!this.isLoggedIn&&t.area==="right-side-logged-out")this.aboutNavItms.push(t);break;case"profile-panel-list":if(this.activeMyAccountSections&&!this.activeMyAccountSections.includes("loggedin"))break;this.loggedInNavItms.push(t);break}}))}static get assetsDirs(){return["assets"]}get el(){return r(this)}static get watchers(){return{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"]}}};f.style=g;export{f as nano_global_nav};
-//# sourceMappingURL=p-8de6e276.entry.js.map
+import{r as t,c as i,i as s,f as e,h as n,k as a,e as o,g as r}from"./p-ab5813a7.js";import{a as l}from"./p-a77e3fbb.js";import{d as h}from"./p-289aa03f.js";import{C as d}from"./p-5a0095f9.js";import{d as c}from"./p-1da5f8df.js";import{c as p}from"./p-b619500f.js";import"./p-69a3e911.js";var b=undefined&&undefined.__rest||function(t,i){var s={};for(var e in t)if(Object.prototype.hasOwnProperty.call(t,e)&&i.indexOf(e)<0)s[e]=t[e];if(t!=null&&typeof Object.getOwnPropertySymbols==="function")for(var n=0,e=Object.getOwnPropertySymbols(t);n<e.length;n++){if(i.indexOf(e[n])<0&&Object.prototype.propertyIsEnumerable.call(t,e[n]))s[e[n]]=t[e[n]]}return s};async function m(t,i={}){var{body:s}=i,e=b(i,["body"]);const n={Accept:"application/json, text/plain, */*","Access-Control-Allow-Origin":"*","Content-Type":"application/json",Cache:"no-cache"};const a=Object.assign(Object.assign({method:s?"POST":"GET",credentials:"include",keepalive:true,mode:"cors"},e),{headers:Object.assign(Object.assign({},n),e.headers)});if(s){a.body=JSON.stringify(s)}let o=setTimeout((()=>{}),0);if(window.AbortController){const t=new AbortController;const{timeout:i=500}=e;o=setTimeout((()=>t.abort()),i);a.signal=t.signal}const r=await fetch(t,a);clearTimeout(o);if(r.ok){return await r.json()}else{const t=await r.text();return new Error(t)}}const g=':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;top:0;left: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([dir=rtl]) .gn-menu{left:auto;right:0}:host(.threshold-2) .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;margin-bottom: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{padding-right:calc(var(--padding) / 2);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.gn-menu_actions{padding-right:unset;-webkit-padding-end:calc(var(--padding) / 2);padding-inline-end:calc(var(--padding) / 2)}}.gn-menu_actions-counter{background:#d0021b;color:#fff;position:absolute;bottom:4px;right:0;left:auto;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{margin-right:auto}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.gn-menu .menu-btn{margin-right:unset;-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;border-bottom:1px solid #33484d;padding-bottom: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{margin-bottom:0}.gn-menu .nav-links .back-btn{border-top:1px solid #33484d;border-bottom: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{margin-right:10px;font-size:12px;color:white}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.gn-menu .nav-links .back-btn nano-icon{margin-right:unset;-webkit-margin-end:10px;margin-inline-end:10px}}.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-left:7px;padding-right:var(--padding);padding-top:9px;padding-bottom:9px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.gn-menu .login-btn{padding-left:unset;padding-right:unset;-webkit-padding-start:7px;padding-inline-start:7px;-webkit-padding-end:var(--padding);padding-inline-end:var(--padding)}}.gn-menu .login-btn nano-icon{margin-left:10px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.gn-menu .login-btn nano-icon{margin-left:unset;-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{margin-left:11px;margin-right: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}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.bars .search-widget{margin-left:unset;margin-right:unset;-webkit-margin-start:11px;margin-inline-start:11px;-webkit-margin-end:auto;margin-inline-end:auto}}.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;top:calc(100% - 2px);width:100%;left:0;background:white;border:2px solid var(--bar-color-tint);border-radius:0 0 5px 5px;color:#4a4a4a;font-size:0.85em;padding:calc(var(--padding) / 2) 0 1px 0;z-index:1}:host([dir=rtl]) .bars .search-autocomplete{left:auto;right:0}.bars .search-autocomplete-hit{padding:calc(var(--padding) / 4) var(--padding) calc(var(--padding) / 4) var(--padding);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;text-align:left;line-height:1.5;cursor:pointer}:host([dir=rtl]) .bars .search-autocomplete-hit{text-align:right}.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;border-top: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;left: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-left:0;padding-right:var(--padding);padding-top:var(--padding);padding-bottom: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}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-bar{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding);padding-inline-end:var(--padding)}}.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]){margin-left:11px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-bar>* ::slotted(nano-nav-item[slot=icon]){margin-left:unset;-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{margin-left:6px;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-bar .icon-btn{margin-left:unset;-webkit-margin-start:6px;margin-inline-start:6px;}}:host(.threshold-2) .main-bar .icon-btn{margin-left:11px;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.threshold-2) .main-bar .icon-btn{margin-left:unset;-webkit-margin-start:11px;margin-inline-start:11px;}}.main-bar .menu-btn.icon-btn{margin:0 !important}:host(:not([dir=rtl])) .main-bar .menu-btn.icon-btn{border-right:1.5px solid var(--bar-color-shade)}:host([dir=rtl]) .main-bar .menu-btn.icon-btn{border-left:1.5px solid var(--bar-color-shade)}.main-bar .user-links{position:relative}.main-bar .user-links .icon-btn{padding-right:0;font-size:0.93em;font-weight:500}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-bar .user-links .icon-btn{padding-right:unset;-webkit-padding-end:0;padding-inline-end:0}}.main-bar .user-links .icon-btn nano-icon{margin-left: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}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-bar .user-links .icon-btn nano-icon{margin-left:unset;-webkit-margin-start:5px;margin-inline-start:5px;}}.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;right:0;font-size:0.85em;min-width:250px;z-index:1}:host([dir=rtl]) .main-bar .user-links-panel{right:auto;left:0}.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;border-bottom:#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{border-bottom: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{margin-left:0;margin-right:auto;padding-left:11px;padding-right:11px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:none}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-bar .logo-link{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:auto;margin-inline-end:auto}}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-bar .logo-link{padding-left:unset;padding-right:unset;-webkit-padding-start:11px;padding-inline-start:11px;-webkit-padding-end:11px;padding-inline-end:11px}}.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{margin-left:6px;--color:#e2e2e2;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-bar .nav-links--sub{margin-left:unset;-webkit-margin-start:6px;margin-inline-start:6px;}}.main-bar .login-btn{display:inline-block;border-radius:4px;background-color:#17bb75;color:#fff;padding:3px 10px;position:relative;left:auto;bottom:auto;margin-left:11px;margin-right:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-bar .login-btn{margin-left:unset;margin-right:unset;-webkit-margin-start:11px;margin-inline-start:11px;-webkit-margin-end:0;margin-inline-end: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;margin-left:auto}.search-bar .search-widget{margin-left:0;margin-right:0;margin-top:0;margin-bottom: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{top: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;left:0;right:0;top: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}';const u={search:0,about:1,main:2,login:3,icon:4};let f=class{constructor(s){t(this,s);this.nanoIsReady=i(this,"nanoIsReady",7);this.nanoSearchResult=i(this,"nanoSearchResult",7);this.nanoSearchError=i(this,"nanoSearchError",7);this.nanoSearchReset=i(this,"nanoSearchReset",7);this.currSize=0;this.thresholdsGoingUp=false;this.THRESHOLDLIMIT=Object.keys(u).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=(t=false)=>{if(typeof this.debounceSetResizingState==="undefined"){this.debounceSetResizingState=c(this.setResizingState,600)}if(t){this.isResizing=true;this.debounceSetResizingState()}else{this.isResizing=false;this.thresholdsGoingUp=false}};this.onMenuBtnKeyDown=t=>{switch(t.key){case"Enter":case" ":this.modalOpen?this.menuClose(t,true):this.menuOpen();break}};this.onMenuBtnClick=t=>{this.menuClose(t,true)};this.menuOpen=t=>{if(t)t.preventDefault();this.menuDiv.style.display="block";this.modalOpen=true;this.modalIsOpen=true;this.menuWrapDiv.addEventListener("focusout",this.menuClose);this.menuWrapDiv.focus({preventScroll:true});if(this.threshold<2||this.menuWrapDiv.scrollHeight>window.innerHeight){document.body.style.overflow="hidden";this.menuFullScreen=true}else document.body.style.overflowX="hidden"};this.onMenuHidden=()=>{this.menuDiv.removeEventListener("transitionend",this.onMenuHidden);this.menuWrapDiv.removeEventListener("focusout",this.menuClose);document.body.style.overflow="";this.menuDiv.style.display="none";this.modalIsOpen=false;this.menuFullScreen=false;setTimeout((()=>{if(document.activeElement===document.body&&this.menuBtn)this.mainBarDiv.focus({preventScroll:true})}),50)};this.menuClose=(t,i=false)=>{if(!i){let i=t;if(i&&i.relatedTarget&&p("#global-nav-menu",i.relatedTarget))return;if(i&&i.relatedTarget&&i.relatedTarget.closest("#global-nav-menu"))return;if(i&&i.relatedTarget&&i.relatedTarget.closest('[slot="promotion"]'))return;if(this.secondaryMenuOpen)return}this.modalOpen=false;this.menuDiv.addEventListener("transitionend",this.onMenuHidden)};this.subMenuClose=t=>{t.preventDefault();t.target.closest("nano-nav-item").open=false};this.onUserBtnClick=t=>{t.preventDefault();this.userMenuOpen=!this.userMenuOpen};this.onUserBtnKeyDown=t=>{switch(t.key){case"Enter":case" ":this.userMenuOpen=!this.userMenuOpen;break}};this.onUserMenuBlur=t=>{if(!t.relatedTarget){this.userMenuOpen=false;return}if(!!t.relatedTarget.closest(".user-links-panel"))return false;this.userMenuOpen=false};this.onSearchBtnClick=t=>{t.preventDefault();if(!this.searchBarShown)this.searchbarShow();else this.searchbarHide()};this.onSearchBtnKeyDown=t=>{switch(t.key){case"Enter":case" ":this.searchBarShown?this.searchbarHide():this.searchbarShow();break}};this.onSearchBarShown=()=>{this.searchBarEl.removeEventListener("transitionend",this.onSearchBarShown);if(this.searchInput)this.searchInput.setFocus();this.searchBarEl.style.overflow="visible"};this.searchbarHide=t=>{if(t&&t.relatedTarget&&t.relatedTarget.closest("#global-nav-search-bar"))return;this.showAutocomplete=false;if(this.searchValInternal.length&&t)return;this.searchBarEl.addEventListener("transitionend",this.onSearchBarHidden);this.searchBarEl.style.overflow="hidden";this.searchBarEl.style.height="0px"};this.onSearchBarHidden=()=>{this.searchBarEl.removeEventListener("transitionend",this.onSearchBarHidden);this.searchBarEl.style.display="none";this.searchBarShown=false};this.onSearchInput=t=>{this.searchValInternal=this.searchInput.value;if(!this.isSearchValSet()){this.searchLoading=false;return}if(t.detail.type==="input"){this.showAutocomplete=false;this.searchLoading=true}};this.onSearchChange=async t=>{this.searchValInternal=this.searchValue=t?t.detail.value:this.searchValInternal;this.showAutocomplete=false;this.autocompleteResults=null;if(!this.isSearchValSet()){if(!this.searchValInternal.length){this.nanoSearchReset.emit()}this.searchLoading=false;return}if(!this.currentIndex)this.currentSelectedIndex();try{this.autocompleteResults=this.processSearchResults(await this.currentIndex.alogliaIndex.search(this.searchValInternal,{attributesToSnippet:["body:5","title:8"],hitsPerPage:5,filters:"created > "+Math.floor((Date.now()-631152e5)/1e3)}))}catch(i){console.error(i)}this.scopeSearch=null;this.scopeSearch=await this.onSearchSubmit(null,false);this.searchLoading=false;this.showAutocompleteResults()};this.onSearchSubmit=async(t,i=true)=>{if(t)t.preventDefault();if(!this.isSearchValSet())return;this.searchLoading=true;this.algoliaSearchResults=null;if(!this.currentIndex)this.currentSelectedIndex();let s=this.internalSearchIndeces.map((t=>({indexName:t.index,query:this.searchValInternal,facets:t.filters,hitsPerPage:10,filters:"created > "+Math.floor((Date.now()-631152e5)/1e3)})));try{this.algoliaSearchResults=this.processSearchResults(await this.algoliaClient.multipleQueries(s))}catch(e){this.nanoSearchError.emit(e)}this.searchLoading=false;if(!this.algoliaSearchResults)return;this.algoliaSearchResults.results.map(((t,i)=>{t.indexName=this.internalSearchIndeces[i].name;t.selected=this.currentIndex.name===this.internalSearchIndeces[i].name;t.domain=this.currentIndex.domain||null;t.domains=this.myAccData.domains||null;t.allGroup=!!this.internalSearchIndeces[i].allGroup;t.filters=this.internalSearchIndeces[i].filters}));if(i){this.nanoSearchResult.emit({results:this.algoliaSearchResults.results,client:{apiKey:this.searchApiKey,appId:this.searchAppId}});this.showAutocomplete=false}return this.algoliaSearchResults};this.onSearchIndexChange=async t=>{let i=t;let s=t;if(!this.currentIndex)this.currentSelectedIndex();if(i.detail&&i.detail.value.length)s=i.detail.value;if(!s||!s.length)return;if(this.currentIndex.index===s)return;let e=this.internalSearchIndeces.find((t=>t.index===s));if(!e||!e.alogliaIndex)return;this.searchIndex=e.index;if(this.isSearchValSet())await this.onSearchChange()};this.switchIndexSubmit=async t=>{if(this.isSearchValSet()){await this.onSearchIndexChange(t);this.onSearchSubmit()}else this.onSearchIndexChange(t)};this.onAutocompleteBlur=t=>{if(!this.showAutocomplete||!this.autocompleteResults)return;if(t&&t.target&&t.target.closest(".search-widget"))return;this.showAutocomplete=false};this.showAutocompleteResults=()=>{if(!this.autocompleteResults||!this.autocompleteResults.hits)return;this.showAutocomplete=true};this.onAutocompleteInteract=t=>{if(!this.showAutocomplete||!this.autocompleteResults)return;let i=this.currAIndex;switch(t.key){case"Tab":setTimeout((()=>{if(!this.el.shadowRoot.activeElement||!this.el.shadowRoot.activeElement.closest(".search-widget")){this.showAutocomplete=false;return}else{let t=this.autocompleteEles.find(((t,i)=>{if(t===this.el.shadowRoot.activeElement){this.currAIndex=i;return true}}));if(t)this.setActiveElement(t);else this.currAIndex=-1}}));break;case"ArrowDown":case"ArrowUp":if(t.key==="ArrowDown")i++;else if(t.key==="ArrowUp")i--;let s=this.autocompleteEles[i];if(s||i<0||i>this.autocompleteEles.length-1)t.preventDefault();if(s){this.setActiveElement(s);this.currAIndex=i}else if(i<0){this.searchInput.setFocus();this.currAIndex=-1}break;case"Enter":case" ":if(this.autocompleteEles[this.currAIndex]){this.autocompleteEles[this.currAIndex].click()}break}}}async submitSearch(){this.onSearchSubmit();this.showAutocomplete=false;return}async getMyAccData(){if(!this.getMyAccountData||this.myAccData){this.remoteDataReady=true;return}let t=this.ssoDataUrl;if(!t){switch(this.env){case"dev":t="https://myaccount-dev.nanoporetech.com/";break;case"test":t="https://myaccount-test.nanoporetech.com/";break;default:t="https://myaccount.nanoporetech.com/";break}}var i={timeout:5e3};try{if(this.env==="local"){this.myAccData=await __sc_import_nano_components("./p-41d26683.js")}else{this.myAccData=await m(t+"nav_bar_data.json",i)}if(this.myAccData.user.id){this.isLoggedIn=true;this.myAccountUser=this.myAccData.user}this.processMyAccLinks();this.processMyAccData();setTimeout((()=>this.remoteDataReady=true),300)}catch(s){console.error(s);this.remoteDataReady=true}}currentSelectedIndex(){if(!this.internalSearchIndeces.length){return}let t=this.internalSearchIndeces.find((t=>t.index===this.searchIndex));if(!t){this.currentIndex=this.internalSearchIndeces[0];console.error("index not found");return}this.currentIndex=t;return t}changeInternalSearchVal(){if(this.searchValInternal!==this.searchValue)this.searchValue=this.searchValInternal}initAlgoliaClient(){if(!this.searchAppId||!this.searchApiKey)return;this.algoliaClient=l(this.searchAppId,this.searchApiKey);this.addAlgoliaIndeces()}addIndeces(){this.internalSearchIndeces=[...this.internalSearchIndeces,...this.searchIndeces]}addAlgoliaIndeces(){if(!this.algoliaClient||!this.internalSearchIndeces.length)return;this.internalSearchIndeces.forEach((t=>{t.alogliaIndex=this.algoliaClient.initIndex(t.index)}));if(!this.searchIndex)this.searchIndex=this.internalSearchIndeces[0].index}thresholdChange(t,i){if(t>i){this.thresholdsGoingUp=true;this.setResizingState(true)}}ratioChange(){if(this.intersectRatio<1&&this.threshold>0){if(this.thresholdsGoingUp)this.setResizingState(true);this.threshold--;setTimeout((()=>this.ratioChange()),500)}else{this.thresholdReady=true;this.siteContent.style.minHeight=`calc(100% - ${this.barsDiv.clientHeight+1}px)`;let t,i;s((()=>{t=[...Array.from(this.el.querySelectorAll('nano-nav-item[slot="site"]')),...Array.from(this.el.querySelectorAll('nano-nav-item[slot="overflow"]'))];i=[];if(this.threshold<this.THRESHOLDLIMIT-u.icon)t.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="icon"]')));else i.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="icon"]')));if(this.threshold<this.THRESHOLDLIMIT-u.login)t.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="loggedin"]')));else i.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="loggedin"]')));if(this.threshold<this.THRESHOLDLIMIT-u.main)t.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="main"]')));else i.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="main"]')));if(this.threshold<this.THRESHOLDLIMIT-u.about)t.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="about"]')));else i.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="about"]')))}));e((()=>{t.forEach((t=>{t.classList.add("nano-global-nav-menu");t.classList.remove("nano-global-nav-bar")}));i.forEach((t=>{t.classList.remove("nano-global-nav-menu");t.classList.add("nano-global-nav-bar")}))}))}}assessReady(){if(this.thresholdReady&&this.remoteDataReady){this.ready=true}}remoteReady(){this.attachIO()}isReady(){this.nanoIsReady.emit()}setupAutocompleteBlur(){if(this.showAutocomplete){this.el.shadowRoot.addEventListener("click",this.onAutocompleteBlur)}else{this.el.shadowRoot.removeEventListener("click",this.onAutocompleteBlur)}}slotChange(){this.threshold=this.THRESHOLDLIMIT}thresholdClasses(){let t=[];let i=0;for(i;i<this.threshold;i++)t.push("threshold-"+(i+1));return t}onWindowResize(){if(this.threshold<this.THRESHOLDLIMIT&&window.innerWidth>this.currSize){this.threshold=this.THRESHOLDLIMIT}this.currSize=window.innerWidth;this.searchBarShown=false}secondaryOpen(t){if(!t.detail.secondaryMenu)return;t.stopPropagation();this.secondaryMenuOpen=true;this.menuContentDiv.style.minHeight=t.detail.secondaryMenu.scrollHeight+"px"}secondaryClose(t){if(!t.detail.secondaryMenu)return;t.stopPropagation();this.secondaryMenuOpen=false;this.menuContentDiv.style.minHeight=""}async handleUserMenu(){await h(this.userLinkPanel,"show",this.userMenuOpen);if(this.userMenuOpen){this.userLinkPanel.focus();this.userLinkPanel.addEventListener("focusout",this.onUserMenuBlur)}else{this.userLinkPanel.removeEventListener("focusout",this.onUserMenuBlur);this.el.focus()}}searchbarShow(){this.searchBarShown=true;this.searchBarEl.addEventListener("transitionend",this.onSearchBarShown);this.searchBarEl.style.display="block";setTimeout((()=>{this.searchBarEl.style.height=this.searchBarEl.querySelector(".search-widget").scrollHeight+"px"}),50)}autocompleteSnippet(t){let i=["title"];if(t._snippetResult){let s=i.find((i=>t._snippetResult[i]&&t._snippetResult[i].matchLevel!=="none"));if(s){if(s!=="title")return(t.title.length>15?t.title.substring(0,15)+" ...":t.title)+" "+t._snippetResult[s].value;else return t._snippetResult["title"].value}}return t.title}isSearchValSet(){if(this.searchValInternal.length<3)return false;return true}resetHitFocus(){this.currAIndex=-1}setActiveElement(t){this.autocompleteEles.map((t=>t.setAttribute("aria-selected","false")));t.focus({preventScroll:true});t.setAttribute("aria-selected","true")}assessSlottedContent(){s((()=>{this.hasSiteSlot=!!this.el.querySelectorAll('[slot="site"]').length;this.hasLoggedinSlot=!!this.el.querySelectorAll('[slot="loggedin"]').length;this.hasPromotionSlot=!!this.el.querySelectorAll('[slot="promotion"]').length;this.aboutSlotLen=this.el.querySelectorAll('[slot="about"]').length;this.iconSlotLen=this.el.querySelectorAll('[slot="icon"]').length;this.mainSlotLen=this.el.querySelectorAll('[slot="main"]').length;this.overflowSlotLen=this.el.querySelectorAll('[slot="overflow"]').length;this.searchSlotLen=this.el.querySelectorAll('[slot="search"]').length}))}attachIO(){if(this.io)return;let t=this.el.shadowRoot.querySelector(".global-nav .main-bar");if(typeof window!=="undefined"&&window.IntersectionObserver&&!!t){const i=this.io=new window.IntersectionObserver((t=>{this.intersectRatio=t.slice(-1)[0].intersectionRatio}),{root:t,threshold:1});i.observe(t.querySelector(".measure-ele"))}}componentDidLoad(){{this.debounceResize=c(this.onWindowResize.bind(this),300);window.addEventListener("resize",this.debounceResize);this.currSize=window.innerWidth}this.initAlgoliaClient();this.addAlgoliaIndeces();if(this.remoteDataReady)this.attachIO()}componentWillLoad(){d.init(this,["searchIndex","searchValue"],"url-hash","gns");if(typeof window!=="undefined"&&window.MutationObserver){const t=this.mo=new MutationObserver((()=>{this.assessSlottedContent()}));t.observe(this.el,{childList:true,subtree:false})}this.assessSlottedContent()}disconnectedCallback(){if(this.io){this.io.disconnect();this.io=undefined}if(this.mo){this.mo.disconnect();this.mo=undefined}window.removeEventListener("resize",this.debounceResize)}async connectedCallback(){this.getMyAccData()}autocompleteList(){let t;if(this.showAutocomplete&&this.scrollingUp){let i=0;let s=0;let e=(t,i)=>i.index!==this.currentIndex.index?t+i.hits.length:t;let a=(t,i)=>i.index===this.currentIndex.index?t+i.hits.length:t;if(this.scopeSearch){s=this.scopeSearch.results.reduce(e,0);i=this.scopeSearch.results.reduce(a,0)}if(this.autocompleteResults&&this.autocompleteResults.hits.length||s&&!i){let s=0;t=n("div",null,!i&&n("div",{class:"search-autocomplete-hit search-autocomplete-hit--no-result"},"No results matching '",this.searchValInternal,"' were found in"," ",n("strong",null,this.currentIndex.name),". Try another phrase."),this.autocompleteResults&&[this.autocompleteResults.hits.map(((t,i)=>n("a",{role:"option",ref:t=>this.autocompleteEles.push(t),tabindex:"-1",id:"autocomplete-hit-"+i,href:t.url,class:"search-autocomplete-hit",innerHTML:this.autocompleteSnippet(t)})))],(!i||this.currentIndex.allGroup)&&this.scopeSearch&&this.scopeSearch.results&&[this.scopeSearch.results.map(((t,i)=>{if(!t.hits.length||t.index===this.currentIndex.index||s>1)return;s++;return n("button",{role:"option",ref:t=>this.autocompleteEles.push(t),tabindex:"-1",id:"autocomplete-scope-"+i,class:"search-autocomplete-hit",onClick:()=>this.switchIndexSubmit(t.index),onMouseDown:()=>this.switchIndexSubmit(t.index)},'"',this.searchValInternal,'"'," ",n("div",{class:"search-autocomplete-hit-scope"},"in ",t.indexName))}))],!!i&&n("div",{class:"search-autocomplete-foot"},n("button",{role:"option",class:"search-autocomplete-submit",ref:t=>this.autocompleteEles.push(t),id:"autocomplete-foot",onClick:this.onSearchSubmit,onMouseDown:this.onSearchSubmit},"View all results")))}else if(!i){t=n("div",{class:"search-autocomplete-hit search-autocomplete-hit--no-result"},"No results matching '",this.searchValInternal,"' were found. Try another phrase.")}}return n("div",{class:"search-autocomplete",role:"listbox",id:"autocomplete-results","aria-expanded":this.showAutocomplete?"true":"false",hidden:!this.showAutocomplete,onKeyDown:this.onAutocompleteInteract},t)}searchWidget(){return[n("form",{class:"search-inputs",onSubmit:this.onSearchSubmit,id:"global-nav-search"},n("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((t=>n("nano-option",{selected:t.index===this.searchIndex,value:t.index},t.name||t.index))),n("nano-icon",{name:"solid/caret-down",class:"down-arrow",slot:"down-arrow"})),n("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:t=>this.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"},n("button",{class:{"search-icon":true,"search-icon--search":true,"search-icon--show":!this.searchValInternal.length},slot:"end",onMouseDown:t=>{this.searchValInternal=this.searchInput.value;this.onSearchSubmit(t,true)}},n("nano-icon",{name:"light/search"})),n("span",{class:{"search-icon":true,"search-icon--loader":true,"search-icon--show":this.searchLoading},slot:"end"},n("nano-icon",{name:"light/spinner-third"}))),n("input",{type:"submit"}))]}render(){this.autocompleteEles=[];let t=this.el.ownerDocument.dir==="rtl";let i=this.searchWidget();i.push(this.autocompleteList());return n(o,{class:{[this.thresholdClasses().join(" ")]:true,ready:this.ready,"search-bar-shown":this.searchBarShown&&this.scrollingUp,"search-auto-complete-shown":this.showAutocomplete&&this.scrollingUp,"modal-open":this.modalIsOpen,resizing:this.isResizing},dir:t?"rtl":null},n("div",{class:{"global-nav":true,"scrolling-down":!this.scrollingUp}},n("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:t=>this.menuDiv=t},n("div",{class:"gn-menu_wrap",ref:t=>this.menuWrapDiv=t,tabindex:"-1"},n("div",{class:"gn-menu_actions"},n("button",{class:"menu-btn icon-btn icon-btn",onMouseDown:this.onMenuBtnClick,onKeyDown:this.onMenuBtnKeyDown},this.threshold<this.THRESHOLDLIMIT-3&&n("nano-icon",{name:"light/times","aria-label":"close menu"}),this.threshold>=this.THRESHOLDLIMIT-3&&n("nano-icon",{name:"light/bars","aria-label":"close menu"})),this.threshold<this.THRESHOLDLIMIT-u.icon&&[!!this.iconSlotLen&&n("slot",{name:"icon"}),this.myAccData&&(!this.activeMyAccountSections||this.activeMyAccountSections.includes("icons"))&&[this.msgUrl&&n("a",{href:this.msgUrl,class:"icon-btn"},n("nano-icon",{name:"light/bell"}),this.msgCount>0&&n("span",{class:"gn-menu_actions-counter"},this.msgCount)),this.cartUrl&&n("a",{href:this.cartUrl,class:"icon-btn"},n("nano-icon",{name:"light/shopping-cart"}),this.cartCount>0&&n("span",{class:"gn-menu_actions-counter"},this.cartCount))]],this.myAccData&&this.myAccData.urls.login&&n("a",{href:this.myAccData.urls.login+this.ssoRedirect,class:"login-btn"},"Login / Register"," ",n("nano-icon",{name:"solid/chevron-right"}))),n("div",{class:"content-wrap",ref:t=>this.menuContentDiv=t},n("div",{class:"content"},n("nav",{class:"nav-links nav-links--main"},n("slot",{name:"overflow"}),this.threshold<this.THRESHOLDLIMIT-u.main&&!!this.mainSlotLen&&n("slot",{name:"main"})),((!!this.aboutSlotLen||!!this.aboutNavItms.length)&&this.threshold<this.THRESHOLDLIMIT-u.about||this.hasSiteSlot||!!this.siteNavItms.length)&&n("div",null,(!!this.aboutSlotLen||!!this.aboutNavItms.length)&&this.threshold<this.THRESHOLDLIMIT-u.about&&[(this.threshold>=this.THRESHOLDLIMIT-(u.about+1)||this.mainSlotLen<2)&&this.overflowSlotLen<2&&n("div",{class:"nav-links-wrap"},!!this.aboutNavItms.length&&n("h4",{class:"nav-links_title"},"About"),n("nav",{class:"nav-links nav-links--sub","aria-label":"About the company links"},n("slot",{name:"about"}),this.aboutNavItms.map((t=>n("nano-nav-item",{class:"nano-global-nav nano-global-nav-menu"},n("a",{href:t.address,target:t.target},t.title)))))),(this.threshold<this.THRESHOLDLIMIT-(u.about+1)&&this.mainSlotLen>=2||this.overflowSlotLen>=2)&&n("nav",{class:"nav-links","aria-label":"About the company links"},!this.aboutNavItms.length&&n("slot",{name:"about"}),!!this.aboutNavItms.length&&n("nano-nav-item",{class:"nano-global-nav nano-global-nav-menu"},"Company",n("nano-icon",{slot:"icon-end",name:"solid/chevron-right"}),n("div",{slot:"secondary"},n("div",{class:"content"},n("button",{class:"back-btn",onClick:this.subMenuClose},n("nano-icon",{slot:"icon-end",name:"solid/chevron-left","aria-label":"go back"}),"Company"),n("slot",{name:"about"}),n("div",{class:"content--sub"},this.aboutNavItms.map((t=>n("nano-nav-item",{class:"nano-global-nav nano-global-nav-menu"},n("a",{href:t.address,target:t.target},t.title)))))))))],(this.hasSiteSlot||!!this.siteNavItms.length)&&[(this.threshold>=this.THRESHOLDLIMIT-2||this.mainSlotLen<2)&&this.overflowSlotLen<2&&n("div",{class:"nav-links-wrap"},n("h4",{class:"nav-links_title"},"Sites"),n("nav",{class:"nav-links nav-links--sub","aria-label":"Different company site links"},n("slot",{name:"site"}),this.siteNavItms.map((t=>n("nano-nav-item",{class:"nano-global-nav nano-global-nav-menu"},n("a",{href:t.address,target:t.target},t.title)))))),(this.threshold<this.THRESHOLDLIMIT-2&&this.mainSlotLen>=2||this.overflowSlotLen>=2)&&n("nav",{class:"nav-links","aria-label":"Different company site links"},n("nano-nav-item",{class:"nano-global-nav nano-global-nav-menu"},"Sites",n("nano-icon",{slot:"icon-end",name:"solid/chevron-right"}),n("div",{slot:"secondary"},n("div",{class:"content"},n("button",{class:"back-btn",onClick:this.subMenuClose},n("nano-icon",{slot:"icon-end",name:"solid/chevron-left","aria-label":"go back"}),"Sites"),n("div",{class:"content--sub"},n("slot",{name:"site"}),this.siteNavItms.map((t=>n("nano-nav-item",{class:"nano-global-nav nano-global-nav-menu"},n("a",{href:t.address,target:t.target},t.title)))))))))])),this.isLoggedIn&&this.threshold<this.THRESHOLDLIMIT-u.login&&(this.loggedInNavItms.length||this.hasLoggedinSlot)&&n("nav",{class:"nav-links","aria-label":"Your user account links"},n("nano-nav-item",{class:"nano-global-nav user-nav nano-global-nav-menu"},this.myAccountUser.name,n("nano-icon",{slot:"icon-end",name:"solid/chevron-right"}),n("div",{slot:"secondary"},n("div",{class:"content"},n("button",{class:"back-btn",onClick:this.subMenuClose},n("nano-icon",{slot:"icon-end",name:"solid/chevron-left","aria-label":"go back"}),this.myAccountUser.name),n("div",{class:"content--sub"},n("slot",{name:"loggedin"}),this.loggedInNavItms.map((t=>n("nano-nav-item",{class:"nano-global-nav nano-global-nav-menu"},n("a",{href:t.address,target:t.target},t.title)))),n("nano-nav-item",{class:"nano-global-nav nano-global-nav-menu"},n("a",{href:this.myAccData.urls.forgot_password+this.ssoRedirect},"Change Password"))))))),n("slot",{name:"promotion"}),this.myAccData&&this.myAccData.urls.logout&&n("div",{class:"login-btn logout-btn"},n("a",{href:this.myAccData.urls.logout+this.ssoRedirect},"Logout"))))),n("nano-sticker",{"auto-resize":"false","break-point-max":"800",quietMode:{h:600,w:800}},n("div",{class:"bars",ref:t=>this.barsDiv=t},n("nav",{class:"main-bar","aria-label":"Main site navigation",tabindex:"-1",ref:t=>this.mainBarDiv=t},(this.hasPromotionSlot||!!this.overflowSlotLen||(this.myAccData||!!this.iconSlotLen)&&this.threshold<this.THRESHOLDLIMIT-u.icon||this.isLoggedIn&&(!!this.loggedInNavItms.length||this.hasLoggedinSlot)&&this.threshold<this.THRESHOLDLIMIT-u.login||!!this.mainSlotLen&&this.threshold<this.THRESHOLDLIMIT-u.main||(!!this.aboutSlotLen||!!this.aboutNavItms.length)&&this.threshold<this.THRESHOLDLIMIT-u.about||this.hasSiteSlot||!!this.siteNavItms.length)&&n("button",{class:"menu-btn icon-btn",onMouseDown:this.menuOpen,onKeyDown:this.onMenuBtnKeyDown,"aria-expanded":this.modalOpen?"true":"false","aria-controls":"global-nav-menu",ref:t=>this.menuBtn=t},n("nano-icon",{name:"light/bars","aria-label":"open menu"})),this.showLogo&&n("a",{href:this.logoUrl,class:"logo-link"},n("img",{src:a(`./assets/ont-logo.svg`),alt:"Oxford Nanopore Technologies Logo",class:"logo"})),!this.showLogo&&n("div",{class:"logo-link"},n("slot",{name:"logo"})),n("div",{class:"nav-links nav-links--main"},n("slot",{name:"main"})),this.threshold>=this.THRESHOLDLIMIT-u.search&&[this.showSearch&&!!this.internalSearchIndeces.length&&n("div",{class:"search-widget",role:"combobox","aria-owns":"autocomplete-results","aria-expanded":this.showAutocomplete&&this.autocompleteResults?"true":"false"},i),(!this.showSearch||!this.myAccData)&&!!this.searchSlotLen&&n("slot",{name:"search"})],(!!this.aboutSlotLen||!!this.aboutNavItms.length)&&this.threshold>=this.THRESHOLDLIMIT-u.about&&n("nav",{class:"nav-links nav-links--sub","aria-label":"About the company. Links"},n("slot",{name:"about"}),this.aboutNavItms.map((t=>n("nano-nav-item",{class:"nano-global-nav nano-global-nav-bar"},n("a",{href:t.address,target:t.target},t.title))))),this.threshold<this.THRESHOLDLIMIT-u.search&&(this.showSearch&&!!this.internalSearchIndeces.length||!!this.searchSlotLen)&&n("button",{class:"icon-btn","aria-controls":"global-nav-search-bar","aria-expanded":this.searchBarShown?"true":"false",onMouseDown:this.onSearchBtnClick,onKeyDown:this.onSearchBtnKeyDown},n("nano-icon",{name:"light/search"})),this.threshold>=this.THRESHOLDLIMIT-u.icon&&[!!this.iconSlotLen&&n("slot",{name:"icon"}),this.myAccData&&(!this.activeMyAccountSections||this.activeMyAccountSections.includes("icons"))&&[this.msgUrl&&n("a",{href:this.msgUrl,class:"icon-btn"},n("nano-icon",{name:"light/bell"}),this.msgCount>0&&n("span",{class:"gn-menu_actions-counter"},this.msgCount)),this.cartUrl&&n("a",{href:this.cartUrl,class:"icon-btn"},n("nano-icon",{name:"light/shopping-cart"}),this.cartCount>0&&n("span",{class:"gn-menu_actions-counter"},this.cartCount))]],this.myAccData&&(!this.activeMyAccountSections||this.activeMyAccountSections.includes("loggedin"))&&this.threshold>=this.THRESHOLDLIMIT-u.login&&[this.myAccData.urls.login&&n("a",{href:this.myAccData.urls.login+this.ssoRedirect,class:"login-btn"},"Login / Register"),this.myAccountUser&&n("div",{class:"user-links"},n("button",{class:{"icon-btn":true,"user-links-btn":true,open:this.userMenuOpen},onMouseDown:this.onUserBtnClick,onKeyDown:this.onUserBtnKeyDown}," ",this.myAccountUser.name,n("nano-icon",{name:"solid/caret-down"})),n("div",{class:"user-links-panel",tabindex:"-1",ref:t=>this.userLinkPanel=t},n("div",{class:"user-links-panel-content"},this.loggedInNavItms.map((t=>n("a",{href:t.address,target:t.target},t.title)))),n("div",{class:"user-links-panel-foot"},n("a",{href:this.myAccData.urls.forgot_password+this.ssoRedirect},"Change Password"),n("a",{href:this.myAccData.urls.logout+this.ssoRedirect},"Logout"))))],n("span",{class:"measure-ele"})),this.threshold<this.THRESHOLDLIMIT-u.search&&n("div",{id:"global-nav-search-bar",class:{"search-bar":true,show:this.searchBarShown},"aria-expanded":this.searchBarShown?"true":"false",role:"region",tabindex:"-1",ref:t=>this.searchBarEl=t},n("div",{class:"search-widget"},this.showSearch&&!!this.internalSearchIndeces.length&&n("div",null,i),(!this.showSearch||!this.myAccData)&&!!this.searchSlotLen&&n("slot",{name:"search"}))))),(this.threshold<this.THRESHOLDLIMIT-3||this.menuFullScreen)&&n("div",{class:{mask:true,open:this.modalOpen},onClick:this.menuClose,onTouchEnd:this.menuClose})),n("div",{class:"site-content",ref:t=>this.siteContent=t},n("slot",null)))}domainFor(t){if(!this.myAccData)return"";let i=this.myAccData.domains.find((i=>i.origin===t));return i?i.domain:""}processSearchResults(t){let i=t;let s=t;if(i.results){i.results.forEach(((t,s)=>{i.results[s]=this.processSearchResults(t)}));return i}else{s.hits.map((t=>{if(t.url&&!t.url.match(/^http/))t.url=location.protocol+"//"+this.domainFor(t.origin)+t.url}));return s}}processMyAccData(){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=[...this.myAccData.search.indeces,...this.searchIndeces];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}processMyAccLinks(){if(!this.myAccData.links||!this.myAccData.links.length)return;this.myAccData.links.forEach((t=>{switch(t.area){case"left-side-logged-in":case"left-side-logged-out":if(this.activeMyAccountSections&&!this.activeMyAccountSections.includes("sites"))break;if(this.isLoggedIn&&t.area==="left-side-logged-in")this.siteNavItms.push(t);else if(!this.isLoggedIn&&t.area==="left-side-logged-out")this.siteNavItms.push(t);break;case"right-side-logged-in":case"right-side-logged-out":if(this.activeMyAccountSections&&!this.activeMyAccountSections.includes("about"))break;if(this.isLoggedIn&&t.area==="right-side-logged-in")this.aboutNavItms.push(t);else if(!this.isLoggedIn&&t.area==="right-side-logged-out")this.aboutNavItms.push(t);break;case"profile-panel-list":if(this.activeMyAccountSections&&!this.activeMyAccountSections.includes("loggedin"))break;this.loggedInNavItms.push(t);break}}))}static get assetsDirs(){return["assets"]}get el(){return r(this)}static get watchers(){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"]}}};f.style=g;export{f as nano_global_nav};
+//# sourceMappingURL=p-b4f8e541.entry.js.map