@nanoporetech-digital/components 2.9.0 → 2.11.0

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/tooltip/tooltip.scss?tag=nano-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"names":["tooltipCss","id","Tooltip","[object Object]","hostRef","this","componentId","isVisible","content","placement","disabled","distance","open","skidding","trigger","handleBlur","hasTrigger","hide","handleClick","show","handleFocus","handleKeyDown","event","key","stopPropagation","handleMouseOver","handleMouseOut","handleSlotChange","target","getTarget","handleTTSlotChange","contentDiv","host","querySelector","shadowRoot","getElementById","Array","from","querySelectorAll","filter","elm","forEach","appendChild","_target","newTarget","removeAttribute","setAttribute","slShow","nanoShow","emit","defaultPrevented","popover","slHide","nanoHide","children","find","el","tagName","toLowerCase","getAttribute","Error","triggerType","triggers","split","includes","setOptions","transitionElement","tooltip","onAfterHide","nanoAfterHide","onAfterShow","nanoAfterShow","Popover","tooltipPositioner","syncOptions","ele","slot","hidden","destroy","h","Host","onKeyDown","onMouseOver","onMouseOut","onBlur","onFocus","onClick","onSlotchange","ref","class","part","tooltip--open","role","aria-hidden","name","data-popper-arrow"],"mappings":";;;4HAAA,MAAMA,EAAa,4zHCanB,IAAIC,EAAK,MAYIC,EAAO,MALpBC,YAAAC,6KAMUC,KAAAC,YAAc,aAAaL,IAC3BI,KAAAE,UAAY,MAoBZF,KAAAG,QAAU,GAMVH,KAAAI,UAYS,MAGTJ,KAAAK,SAAW,MAGXL,KAAAM,SAAW,GAGqBN,KAAAO,KAAO,MAGvCP,KAAAQ,SAAW,EAOXR,KAAAS,QAAkB,cAgGlBT,KAAAU,WAAa,KACnB,GAAIV,KAAKW,WAAW,SAAU,CAC5BX,KAAKY,SAIDZ,KAAAa,YAAc,KACpB,GAAIb,KAAKW,WAAW,SAAU,CAC5BX,KAAKO,KAAOP,KAAKY,OAASZ,KAAKc,SAI3Bd,KAAAe,YAAc,KACpB,GAAIf,KAAKW,WAAW,SAAU,CAC5BX,KAAKc,SAIDd,KAAAgB,cAAiBC,IAEvB,GAAIjB,KAAKO,MAAQU,EAAMC,MAAQ,SAAU,CACvCD,EAAME,kBACNnB,KAAKY,SAIDZ,KAAAoB,gBAAkB,KACxB,GAAIpB,KAAKW,WAAW,SAAU,CAC5BX,KAAKc,SAIDd,KAAAqB,eAAiB,KACvB,GAAIrB,KAAKW,WAAW,SAAU,CAC5BX,KAAKY,SAIDZ,KAAAsB,iBAAmB,KACzBtB,KAAKuB,OAASvB,KAAKwB,aAGbxB,KAAAyB,mBAAqB,KAC3B,MAAMC,EACJ1B,KAAK2B,KAAKC,cAAc,QAAQ5B,KAAKC,kBACrCD,KAAK2B,KAAKE,WAAWC,eAAe9B,KAAKC,aAC3C8B,MAAMC,KAAKhC,KAAK2B,KAAKM,iBAAiB,qBACnCC,QAAQC,GAAQA,IAAQT,IACxBU,SAASD,IACRT,EAAWW,YAAYF,OApM7BZ,aACE,OAAOvB,KAAKsC,QAEdf,WAAmBgB,GACjB,GAAIA,IAAcvC,KAAKsC,SAAWtC,KAAKsC,QAAS,CAC9CtC,KAAKsC,QAAQE,gBAAgB,oBAE/BD,EAAUE,aAAa,mBAAoBzC,KAAKC,aAChDD,KAAKsC,QAAUC,EA8CjBzC,mBACEE,KAAKO,KAAOP,KAAKc,OAASd,KAAKY,OAqBjCd,aAEE,GAAIE,KAAKE,UAAW,CAClB,OAGF,MAAMwC,EAAS1C,KAAK2C,SAASC,OAC7B,GAAIF,EAAOG,iBAAkB,CAC3B7C,KAAKO,KAAO,MACZ,OAGFP,KAAKE,UAAY,KACjBF,KAAKO,KAAO,KACZP,KAAK8C,QAAQhC,OAKfhB,aAEE,IAAKE,KAAKE,UAAW,CACnB,OAGF,MAAM6C,EAAS/C,KAAKgD,SAASJ,OAC7B,GAAIG,EAAOF,iBAAkB,CAC3B7C,KAAKO,KAAO,KACZ,OAGFP,KAAKE,UAAY,MACjBF,KAAKO,KAAO,MACZP,KAAK8C,QAAQlC,OAKPd,YAEN,MAAMyB,EAAS,IAAIQ,MAAMC,KAAKhC,KAAK2B,KAAKsB,WAAWC,MAChDC,GACCA,EAAGC,QAAQC,gBAAkB,SAC7BF,EAAGG,aAAa,UAAY,YAGhC,IAAK/B,EAAQ,CACX,MAAM,IAAIgC,MAAM,uDAGlB,OAAOhC,EAGDzB,WAAW0D,GACjB,MAAMC,EAAWzD,KAAKS,QAAQiD,MAAM,KACpC,OAAOD,EAASE,SAASH,GAGnB1D,cACNE,KAAK8C,QAAQc,WAAW,CACtBxD,UAAWJ,KAAKI,UAChBE,SAAUN,KAAKM,SACfE,SAAUR,KAAKQ,SACfqD,kBAAmB7D,KAAK8D,QACxBC,YAAa,IAAM/D,KAAKgE,cAAcpB,OACtCqB,YAAa,IAAMjE,KAAKkE,cAActB,SA6D1C9C,mBACEE,KAAKuB,OAASvB,KAAKwB,YACnBxB,KAAK8C,QAAU,IAAIqB,EAAQnE,KAAKuB,OAAQvB,KAAKoE,mBAC7CpE,KAAKqE,cAEL,MAAMC,EAAMtE,KAAK2B,KAAKE,WAAWC,eAAe9B,KAAKC,aACrDqE,EAAIC,KAAO,UACXvE,KAAK2B,KAAKU,YAAYiC,GACtBtE,KAAKyB,qBAGLzB,KAAKoE,kBAAkBI,QAAUxE,KAAKO,KACtC,GAAIP,KAAKO,KAAM,CACbP,KAAKc,QAIThB,qBACEE,KAAKqE,cAGPvE,uBACEE,KAAK8C,QAAQ2B,UAGf3E,SACE,OACE4E,EAACC,EAAI,CACHC,UAAW5E,KAAKgB,cAChB6D,YAAa7E,KAAKoB,gBAClB0D,WAAY9E,KAAKqB,eACjB0D,OAAQ/E,KAAKU,WACbsE,QAAShF,KAAKe,YACdkE,QAASjF,KAAKa,aAEd6D,EAAA,OAAA,CAAMQ,aAAclF,KAAKsB,oBAEvBtB,KAAKK,UACLqE,EAAA,MAAA,CACES,IAAMhC,GAAQnD,KAAKoE,kBAAoBjB,EACvCiC,MAAM,sBAENV,EAAA,MAAA,CACEW,KAAK,OACLF,IAAMhC,GAAQnD,KAAK8D,QAAUX,EAC7BiC,MAAO,CACLtB,QAAS,KACTwB,gBAAiBtF,KAAKO,MAExBgF,KAAK,UAASC,cACDxF,KAAKO,KAAO,QAAU,QAEnCmE,EAAA,OAAA,CAAMe,KAAK,UAAUP,aAAclF,KAAKyB,oBACtCiD,EAAA,MAAA,CAAK9E,GAAII,KAAKC,aAAcD,KAAKG,UAEnCuE,EAAA,MAAA,CAAKU,MAAM,gBAAeM,oBAAA","sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n/**\n * @prop --hide-delay: The amount of time to wait before hiding the tooltip.\n * @prop --hide-duration: The amount of time the hide transition takes to complete.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --show-delay: The amount of time to wait before showing the tooltip.\n * @prop --show-duration: The amount of time the show transition takes to complete.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n */\n:host {\n  --max-width: 20rem;\n  --hide-delay: 0s;\n  --hide-duration: 0.125s;\n  --hide-timing-function: ease;\n  --show-delay: 0.125s;\n  --show-duration: 0.125s;\n  --show-timing-function: ease;\n\n  /* autoprefixer: ignore next */\n  display: contents;\n}\n\n.tooltip {\n  $self: &;\n\n  max-width: var(--max-width);\n  border-radius: #{$tooltip-border-radius};\n  background-color: black;\n  font-size: #{$tooltip-fontsize};\n  line-height: 1.5;\n  color: white;\n  opacity: 0;\n  padding: #{$tooltip-padding};\n  transform: translateY(10px) translateZ(0);\n  transform-origin: bottom;\n  transition-property: opacity, transform;\n  transition-delay: var(--hide-delay);\n  transition-duration: var(--hide-duration);\n  transition-timing-function: var(--hide-timing-function);\n  white-space: normal;\n\n  &-arrow {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    color: black;\n    transition: 0.2s ease transform;\n  }\n\n  &-positioner {\n    position: absolute;\n    z-index: #{$layer-index-tooltip};\n    pointer-events: none;\n\n    &[data-popper-placement^='top'] #{$self} {\n      transform-origin: bottom;\n      transform: translateY(-10px) translateZ(0);\n    }\n\n    &[data-popper-placement^='bottom'] #{$self} {\n      transform-origin: top;\n    }\n\n    &[data-popper-placement^='left'] #{$self} {\n      transform-origin: right;\n    }\n\n    &[data-popper-placement^='right'] #{$self} {\n      transform-origin: left;\n    }\n\n    &.popover-visible #{$self} {\n      opacity: 1;\n      transform: none;\n      transition-delay: var(--show-delay);\n      transition-duration: var(--show-duration);\n      transition-timing-function: var(--show-timing-function);\n    }\n\n    // Arrow + bottom\n    &[data-popper-placement^='bottom'] #{$self}-arrow {\n      bottom: 100%;\n      left: calc(50% - #{$tooltip-arrow-size});\n      border-bottom: #{$tooltip-arrow-size} solid;\n      border-left: #{$tooltip-arrow-size} solid transparent;\n      border-right: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='bottom-start'] #{$self}-arrow {\n      left: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='bottom-end'] #{$self}-arrow {\n      right: #{$tooltip-arrow-offset};\n      left: auto;\n    }\n\n    // Arrow + top\n    &[data-popper-placement^='top'] #{$self}-arrow {\n      top: 100%;\n      left: calc(50% - #{$tooltip-arrow-size});\n      border-top: #{$tooltip-arrow-size} solid;\n      border-left: #{$tooltip-arrow-size} solid transparent;\n      border-right: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='top-start'] #{$self}-arrow {\n      left: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='top-end'] #{$self}-arrow {\n      right: #{$tooltip-arrow-offset};\n      left: auto;\n    }\n\n    // Arrow + left\n    &[data-popper-placement^='left'] #{$self}-arrow {\n      top: calc(50% - #{$tooltip-arrow-size});\n      left: 100%;\n      border-left: #{$tooltip-arrow-size} solid;\n      border-top: #{$tooltip-arrow-size} solid transparent;\n      border-bottom: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='left-start'] #{$self}-arrow {\n      top: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='left-end'] #{$self}-arrow {\n      top: auto;\n      bottom: #{$tooltip-arrow-offset};\n    }\n\n    // Arrow + right\n    &[data-popper-placement^='right'] #{$self}-arrow {\n      top: calc(50% - #{$tooltip-arrow-size});\n      right: 100%;\n      border-right: #{$tooltip-arrow-size} solid;\n      border-top: #{$tooltip-arrow-size} solid transparent;\n      border-bottom: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='right-start'] #{$self}-arrow {\n      top: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='right-end'] #{$self}-arrow {\n      top: auto;\n      bottom: #{$tooltip-arrow-offset};\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  Watch,\n  h,\n} from '@stencil/core';\nimport Popover from '../../utils/popover';\n\nlet id = 0;\n\n/**\n * Tooltips display additional information based on a specific action.\n * @slot - The tooltip's target element. Only the first element will be used as the target.\n * @slot content - The tooltip's content. Alternatively, you can use the content prop.\n */\n@Component({\n  tag: 'nano-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true,\n})\nexport class Tooltip {\n  private componentId = `tooltip-${++id}`;\n  private isVisible = false;\n  private popover: Popover;\n  private tooltipPositioner: HTMLElement;\n  private tooltip: any;\n\n  private _target: HTMLElement;\n  private get target() {\n    return this._target;\n  }\n  private set target(newTarget) {\n    if (newTarget !== this._target && this._target) {\n      this._target.removeAttribute('aria-describedby');\n    }\n    newTarget.setAttribute('aria-describedby', this.componentId);\n    this._target = newTarget;\n  }\n\n  @Element() host: HTMLNanoTooltipElement;\n\n  /** The tooltip's content. Alternatively, you can use the content slot. */\n  @Prop() content = '';\n\n  /**\n   * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n   * inside of the viewport.\n   */\n  @Prop() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /** Set to true to disable the tooltip so it won't show when triggered. */\n  @Prop() disabled = false;\n\n  /** The distance in pixels from which to offset the tooltip away from its target. */\n  @Prop() distance = 10;\n\n  /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The distance in pixels from which to offset the tooltip along its target. */\n  @Prop() skidding = 0;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger: string = 'hover focus';\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  // Events\n\n  /** Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the tooltip has shown and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the tooltip has hidden and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  // Public methods\n\n  /** Shows the tooltip. */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible) {\n      return;\n    }\n\n    const slShow = this.nanoShow.emit();\n    if (slShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.isVisible = true;\n    this.open = true;\n    this.popover.show();\n  }\n\n  /** Hides the tooltip. */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible) {\n      return;\n    }\n\n    const slHide = this.nanoHide.emit();\n    if (slHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.isVisible = false;\n    this.open = false;\n    this.popover.hide();\n  }\n\n  // Private methods\n\n  private getTarget() {\n    // Get the first child that isn't a <style> or content slot\n    const target = [...Array.from(this.host.children)].find(\n      (el) =>\n        el.tagName.toLowerCase() !== 'style' &&\n        el.getAttribute('slot') !== 'content'\n    ) as HTMLElement;\n\n    if (!target) {\n      throw new Error('Invalid tooltip target: no child element was found.');\n    }\n\n    return target;\n  }\n\n  private hasTrigger(triggerType: string) {\n    const triggers = this.trigger.split(' ');\n    return triggers.includes(triggerType);\n  }\n\n  private syncOptions() {\n    this.popover.setOptions({\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.tooltip,\n      onAfterHide: () => this.nanoAfterHide.emit(),\n      onAfterShow: () => this.nanoAfterShow.emit(),\n    });\n  }\n\n  // Event Handlers\n\n  private handleBlur = () => {\n    if (this.hasTrigger('focus')) {\n      this.hide();\n    }\n  };\n\n  private handleClick = () => {\n    if (this.hasTrigger('click')) {\n      this.open ? this.hide() : this.show();\n    }\n  };\n\n  private handleFocus = () => {\n    if (this.hasTrigger('focus')) {\n      this.show();\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Pressing escape when the target element has focus should dismiss the tooltip\n    if (this.open && event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n    }\n  };\n\n  private handleMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      this.show();\n    }\n  };\n\n  private handleMouseOut = () => {\n    if (this.hasTrigger('hover')) {\n      this.hide();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.target = this.getTarget();\n  };\n\n  private handleTTSlotChange = () => {\n    const contentDiv =\n      this.host.querySelector(`[id=\"${this.componentId}\"]`) ||\n      this.host.shadowRoot.getElementById(this.componentId);\n    Array.from(this.host.querySelectorAll('[slot=\"content\"]'))\n      .filter((elm) => elm !== contentDiv)\n      .forEach((elm) => {\n        contentDiv.appendChild(elm);\n      });\n  };\n\n  // Stencil hooks\n\n  componentDidLoad() {\n    this.target = this.getTarget();\n    this.popover = new Popover(this.target, this.tooltipPositioner);\n    this.syncOptions();\n\n    const ele = this.host.shadowRoot.getElementById(this.componentId);\n    ele.slot = 'content';\n    this.host.appendChild(ele);\n    this.handleTTSlotChange();\n\n    // Show on init if open\n    this.tooltipPositioner.hidden = !this.open;\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  componentDidUpdate() {\n    this.syncOptions();\n  }\n\n  disconnectedCallback() {\n    this.popover.destroy();\n  }\n\n  render() {\n    return (\n      <Host\n        onKeyDown={this.handleKeyDown}\n        onMouseOver={this.handleMouseOver}\n        onMouseOut={this.handleMouseOut}\n        onBlur={this.handleBlur}\n        onFocus={this.handleFocus}\n        onClick={this.handleClick}\n      >\n        <slot onSlotchange={this.handleSlotChange} />\n\n        {!this.disabled && (\n          <div\n            ref={(el) => (this.tooltipPositioner = el)}\n            class=\"tooltip-positioner\"\n          >\n            <div\n              part=\"base\"\n              ref={(el) => (this.tooltip = el)}\n              class={{\n                tooltip: true,\n                'tooltip--open': this.open,\n              }}\n              role=\"tooltip\"\n              aria-hidden={this.open ? 'false' : 'true'}\n            >\n              <slot name=\"content\" onSlotchange={this.handleTTSlotChange}>\n                <div id={this.componentId}>{this.content}</div>\n              </slot>\n              <div class=\"tooltip-arrow\" data-popper-arrow></div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-1f99d776.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as e,h as t,e as n,g as a}from"./p-ab5813a7.js";import{i}from"./p-debd9efc.js";import{r as s}from"./p-289aa03f.js";const r=':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{display:block;-webkit-box-flex:1;-ms-flex:1 1 100%;flex:1 1 100%}.main-search{display:-webkit-box;display:-ms-flexbox;display:flex;background:white;font-size:14px;min-height:calc(100vh - 63px);-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.main-search__wrap{display:contents;height:100%}.main-search ul{margin:0;padding:0;list-style:none}.main-search li{margin:0;padding:0}.main-search button:not(.result__tags-tag){-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:none;position:relative;top:-2px}.main-search .icon-button{color:inherit;-ms-flex-item-align:normal;-ms-grid-row-align:normal;align-self:normal;padding:9px 7px;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.main-search__topbar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:1em}.main-search__topbar::after{content:"";width:calc(100% - 30px);left:30px;position:relative;border-bottom:1px solid #e5eef1;padding-top:0.9em}.main-search__applied-filters{border:solid 1px #e4e6e8;text-transform:uppercase;border-radius:3px;font-weight:bold;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:0.9;padding:5px 5px 0 5px;letter-spacing:2px;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:0.5rem}.main-search__applied-filters span{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}:host(.small) .main-search__applied-filters{display:none}.main-search__applied-nofilter{margin-left:0;margin-right:5px;margin-top:0;margin-bottom:3px;padding-left:7px;padding-right:7px;padding-top:10px;padding-bottom:10px;font-size:12px;color:rgba(69, 85, 86, 0.85)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-nofilter{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:5px;margin-inline-end:5px}}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-nofilter{padding-left:unset;padding-right:unset;-webkit-padding-start:7px;padding-inline-start:7px;-webkit-padding-end:7px;padding-inline-end:7px}}.main-search__applied-filter{padding-left:8px;padding-right:2px;padding-top:5px;padding-bottom:3px;margin-left:0;margin-right:5px;margin-top:0;margin-bottom:5px;color:#455556;font-size:11px;border-radius:2px;border:solid 1px rgba(0, 132, 169, 0.5);background-color:rgba(0, 132, 169, 0.2);line-height:1}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-filter{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:2px;padding-inline-end:2px}}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-filter{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:5px;margin-inline-end:5px}}.main-search__applied-filter .icon-button{padding-left:10px;padding-right:4px;padding-top:2px;padding-bottom:1px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-filter .icon-button{padding-left:unset;padding-right:unset;-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:4px;padding-inline-end:4px}}.main-search__applied-filter .icon-button nano-icon{pointer-events:none}.main-search .topbar__bkbtn{position:relative;left:-7px}:host(.small) .main-search .topbar__query{display:none}.main-search .topbar__filtering{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:1em;margin-right:0;margin-top:0;margin-bottom:0;-webkit-box-flex:1;-ms-flex:1;flex:1}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search .topbar__filtering{margin-left:unset;margin-right:unset;-webkit-margin-start:1em;margin-inline-start:1em;-webkit-margin-end:0;margin-inline-end:0}}.main-search .topbar__order{min-width:175px;max-width:200px;margin-left:auto;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search .topbar__order{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:0;margin-inline-end:0}}:host(.small) .main-search .topbar__order{max-width:300px}.main-search .topbar nano-select{opacity:1;-webkit-transition:0.1s ease opacity;transition:0.1s ease opacity}.main-search .topbar nano-select:not(.hydrated){opacity:0}.main-search .topbar__show-filters{margin-left:0.5em;margin-right:0;margin-top:0;margin-bottom:0;text-transform:uppercase;display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search .topbar__show-filters{margin-left:unset;margin-right:unset;-webkit-margin-start:0.5em;margin-inline-start:0.5em;-webkit-margin-end:0;margin-inline-end:0}}.main-search .topbar__show-filters nano-icon{font-size:20px}:host(.small) .main-search .topbar__show-filters{display:-webkit-box;display:-ms-flexbox;display:flex}.main-search .topbar__filter-count{width:12px;height:12px;-webkit-box-shadow:inset 0 3px 4px 0 rgba(0, 0, 0, 0.2);box-shadow:inset 0 3px 4px 0 rgba(0, 0, 0, 0.2);border:solid 1px #005c76;background-color:#005c76;color:white;font-size:7px;border-radius:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;line-height:1;margin-bottom:3px}.main-search__results{font-size:14px;padding:1em 40px;color:rgba(69, 85, 86, 0.85);width:70%;height:100%}@media (max-width: 576px){.main-search__results{padding:1em 20px}}:host(.small) .main-search__results{width:100%}.main-search__filters{outline:none;padding-left:0;padding-right:40px;padding-top:1.8em;padding-bottom:1em;-webkit-box-flex:1;-ms-flex:1 1 30%;flex:1 1 30%;-webkit-box-sizing:border-box;box-sizing:border-box}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__filters{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:40px;padding-inline-end:40px}}@media (max-width: 576px){.main-search__filters{padding-right:20px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__filters{padding-right:unset;-webkit-padding-end:20px;padding-inline-end:20px}}}:host(:not(.small)) .main-search__filters{max-width:350px;min-width:220px}.filters{color:#455556;background:white;font-size:14px}:host(.small) .filters{position:fixed;width:0;height:0;z-index:10;top:0;right:0;-webkit-transition:all 0s ease 0.5s;transition:all 0s ease 0.5s;background:none}:host(.small) .filters.show{height:100vh;width:100vw;-webkit-transition:all 0s ease 0s;transition:all 0s ease 0s}:host(.small) .filters.show::after{opacity:1}:host(.small) .filters::after{content:"";background:rgba(0, 0, 0, 0.5);position:absolute;left:0;top:0;right:0;bottom:0;z-index:-1;opacity:0;-webkit-transition:0.1s ease opacity;transition:0.1s ease opacity}.filters__close-filters{display:none !important;font-size:1.4em}:host(.small) .filters__close-filters{display:inline-block !important;margin-left:auto;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.small) .filters__close-filters{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:0;margin-inline-end:0}}:host(.small) .filters-wrap{position:absolute;top:0;right:0;background:#f7f6f6;-webkit-transform:translateX(100%);transform:translateX(100%);width:300px;min-width:200px;max-width:80vw;-webkit-transition:-webkit-transform 0.3s ease;transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease;transition:transform 0.3s ease, -webkit-transform 0.3s ease;padding:1em;color:black;overflow:auto;height:100vh}:host(.small) .filters.show .filters-wrap{-webkit-transform:translateX(0%);transform:translateX(0%);-webkit-box-shadow:-3px -3px 7px rgba(0, 0, 0, 0.1);box-shadow:-3px -3px 7px rgba(0, 0, 0, 0.1)}.filters ul{margin:0;padding:0;list-style:none}.filters li{margin:0;padding:0}.filters nano-details{--padding:0.8em;margin:0.8em 0}.filters nano-details strong[slot]{display:block;padding-left:calc(20px - 0.8em)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.filters nano-details strong[slot]{padding-left:unset;-webkit-padding-start:calc(20px - 0.8em);padding-inline-start:calc(20px - 0.8em);}}.filters nano-details nano-icon[slot=icon-end]{padding-left:calc(20px - 0.8em);padding-right:calc(20px - 0.8em)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.filters nano-details nano-icon[slot=icon-end]{padding-left:unset;padding-right:unset;-webkit-padding-start:calc(20px - 0.8em);padding-inline-start:calc(20px - 0.8em);-webkit-padding-end:calc(20px - 0.8em);padding-inline-end:calc(20px - 0.8em)}}.filters li:last-child .filter-label{margin-bottom:0}.filters .filter-label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;margin:0.5em 0;line-height:1.4;z-index:0}.filters .filter-label::before{margin-left:0;margin-right:1em;margin-top:0;margin-bottom:0;content:"";border:1px solid #007495;background:#fff;border-radius:3px;height:1em;width:1em;min-width:1em;min-height:1em;display:inline-block}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.filters .filter-label::before{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:1em;margin-inline-end:1em}}.filters .filter-label::after{background-image:url("data:image/svg+xml;charset=utf-8,<svg%20xmlns=\'http://www.w3.org/2000/svg\'%20viewBox=\'0%200%20512%20512\'><path%20fill=\'%23ffffff\'%20d=\'M173.898%20439.404l-166.4-166.4c-9.997-9.997-9.997-26.206%200-36.204l36.203-36.204c9.997-9.998%2026.207-9.998%2036.204%200L192%20312.69%20432.095%2072.596c9.997-9.997%2026.207-9.997%2036.204%200l36.203%2036.204c9.997%209.997%209.997%2026.206%200%2036.204l-294.4%20294.401c-9.998%209.997-26.207%209.997-36.204-.001z\'/></svg>");content:"";height:0.7em;width:0.7em;position:absolute;left:2px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:1;display:block;background-size:100%;background-position:center center;background-repeat:no-repeat}:host([dir=rtl]) .filters .filter-label::after{right:1px;left:auto}.filters .filter-cb{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.filters .filter-cb:checked+.filter-label::before{background:#245a6f}.filters .filter-cb:focus+.filter-label::before{-webkit-box-shadow:0 0 0 1px rgba(0, 0, 0, 0.7);box-shadow:0 0 0 1px rgba(0, 0, 0, 0.7)}.filters-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.filters-reset{color:#007495;font-size:12px;text-decoration:underline;margin-left:auto;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.filters-reset{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:0;margin-inline-end:0}}:host(.small) .filters-reset{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.filters-title{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;text-transform:uppercase;color:rgba(69, 85, 86, 0.85);font-weight:bold;font-size:14px}:host(.small) .filters-title{display:none}.result{text-decoration:none;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding-bottom:14px;border-bottom:1px solid #90c6e7}.result *{word-wrap:break-word;word-break:break-word}.result__title{margin:1em 0 0.5em 0;width:70%;display:-webkit-box;display:-ms-flexbox;display:flex}.result__title a{color:#0084a9;font-size:14px;line-height:1.43;text-decoration:none;font-weight:600}.result__title nano-icon{margin-left:0;margin-right:0.5em;margin-top:0;margin-bottom:0;min-width:20px;min-height:20px;opacity:0.8}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.result__title nano-icon{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0.5em;margin-inline-end:0.5em}}@media (max-width: 992px){.result__title{width:100%}}.result__body{color:#455556;font-size:13px;width:70%;text-decoration:none}@media (max-width: 992px){.result__body{width:100%}}.result__pdf{display:inline-block;-webkit-margin-start:0.5rem;margin-inline-start:0.5rem;color:#b5aea7}.result__meta{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;color:#455556;font-size:11px;line-height:13px;width:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.result__meta>*{margin-top:0.5rem}.result__meta>*:not(:last-child){-webkit-padding-end:0;padding-inline-end:0}.result__meta>*:not(:last-child)::after{content:"";height:1rem;width:1px;background:#90c6e7;display:inline-block;-webkit-margin-start:0.7rem;margin-inline-start:0.7rem;-webkit-margin-end:0.7rem;margin-inline-end:0.7rem}@media (max-width: 576px){.result__meta>*:not(:last-child)::after{display:none}}@media (max-width: 576px){.result__meta{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column;flex-flow:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}}.result__tags{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap}@media (max-width: 576px){.result__tags{-webkit-padding-start:0;padding-inline-start:0}}.result__tags-tag{color:#455556;display:inline-block;font-size:0.4375rem;letter-spacing:1.4px;background:#fff;border-radius:2px;text-transform:uppercase;padding:0 4px 1px 5px;font-weight:600;margin:3px 0.25rem 0.25rem 0;border:1px solid #b5aea7;white-space:nowrap;line-height:13px}.result__type{font-weight:600;text-transform:capitalize;white-space:nowrap;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.result__date{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#455556}.result__source{color:#455556;-webkit-padding-end:0.75rem;padding-inline-end:0.75rem}.result__authors{font-size:12px;color:#455556;margin-bottom:0.25rem;text-decoration:none;width:70%}.result__buttons{width:70%;margin-bottom:0.5rem}.result__buttons-button{background-color:#007495;color:#fff;padding:5px 8px 1px;border-radius:4px;display:inline-block;font-size:11px;text-decoration:none;border:none}.result__promo{width:70%;margin-bottom:0.5rem;text-decoration:none;color:#455556}.result__promo-box{width:300px;background-color:#e3eef1;padding:12px 12px 8px 4px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row nowrap;flex-flow:row nowrap;margin-top:1rem}.result__promo-bigdate{-webkit-box-flex:0;-ms-flex:0 1 60px;flex:0 1 60px;text-align:center;font-weight:600;color:#007495;text-transform:uppercase;line-height:1.25;letter-spacing:1.5px}@media (max-width: 992px){.result__promo-bigdate{width:100%}}.result__promo-bigdate span{color:#455556;display:block}.result__promo-bigdate~div{-webkit-padding-start:1rem;padding-inline-start:1rem;-webkit-border-start:1px solid #c5dbe1;border-inline-start:1px solid #c5dbe1}.result__promo-date{font-size:12px}.result__promo-venue{font-size:12px}.result__promo nano-icon{color:#007495;position:relative;top:1px;-webkit-padding-end:2px;padding-inline-end:2px}.result__image{display:block;background-size:cover;background-repeat:no-repeat;background-position:center;border-radius:4px;position:relative;width:100%;height:150px;margin-bottom:0.5rem}@media (min-width: 576px){.result__image{width:142px;height:80px}}.result__image nano-icon{position:absolute;top:calc(50% - 0.75rem);left:calc(50% - 0.75rem);font-size:1.5rem;color:#0084a9;--primary-color:#fff;--secondary-color:#0084a9;--primary-opacity:1}@media (max-width: 576px){.result__image nano-icon{font-size:3rem;top:calc(50% - 1.5rem);left:calc(50% - 1.5rem)}}.result__video-body{width:70%;text-decoration:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap}@media (max-width: 992px){.result__video-body{width:100%}}@media (max-width: 576px){.result__video-body{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column;flex-flow:column}}.result__video-body .result__body{-webkit-padding-start:1rem;padding-inline-start:1rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-bottom:0;-webkit-box-flex:1;-ms-flex:1;flex:1}@media (max-width: 576px){.result__video-body .result__body{-webkit-padding-start:0;padding-inline-start:0}}.result__video-body .result__body p{display:inline;margin:0}.result__video-body .result__body u,.result__video-body .result__body li,.result__video-body .result__body a{text-decoration:none}.result__video-body .result__body .result__meta{margin-top:0.5rem}.result__video-body .result__body .result__description{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}.search-empty{padding:3rem 0;text-align:center;border-top:1px solid #e5eef1}.search-empty h2{color:#455556;font-size:1.125rem;margin-bottom:0.5rem}.search-empty-icon{font-size:7rem;--icon-color:#e4e6e8;margin-bottom:2rem}.search__highlight{background:#fbffbf;font-style:normal}';let l=class{constructor(t){e(this,t);this.tagClick=e=>{e.preventDefault();let t=e.target.dataset.value;t=t==="publication"?"publications":t;t=t.toLowerCase();const n=this.algoliaEle.querySelector('nano-algolia-filter[filter-name="tags"]');if(n.value.indexOf(t)===-1){n.value=n.value?[...n.value,t]:[t]}}}handleAlgoliaCredsChange(){if(!this.apiKey||!this.appId||!this.algoliaEle)return;this.algoliaEle.apiKey=this.apiKey;this.algoliaEle.appId=this.appId}handleAlgoliaIndexChange(){if(!this.index||!this.algoliaEle)return;this.algoliaEle.searchIndex=this.index}handleGlobalNavReset(e){if(e.target.tagName!=="NANO-GLOBAL-NAV")return;this.algoliaResultsEle=null;this.goback()}handleGlobalNavSearch(e){if(e.target.tagName!=="NANO-GLOBAL-NAV")return;const{detail:{results:t,client:n}}=e;const a=t.find((e=>e.selected));this.apiKey=n.apiKey;this.appId=n.appId;this.index={name:a.indexName,index:a.index,domain:a.domain,filters:a.filters};this.algoliaEle.query=a.query}handleReorder(e){if(e.composedPath().find((e=>e.classList&&e.classList.contains("indexchange")))&&!!this.algoliaResultsEle){this.changeOrder(e)}}attachListeners(e){if(!e.composedPath().find((e=>e.id&&e.id==="main-search")))return;this.algoliaResultsEle=this.algoliaEle.querySelector("#main-search-results");this.attachResultListeners();this.algoliaEle.querySelectorAll(".filters-reset").forEach((e=>{e.addEventListener("click",(()=>{this.removeAllFilters()}))}));this.algoliaEle.querySelectorAll(".close-filters").forEach((e=>{e.addEventListener("click",(()=>{this.closefilters()}))}));let t=this.algoliaEle.querySelector(".filters-wrap");if(t){t.addEventListener("click",(e=>{e.stopPropagation()}))}this.filtersDiv=this.algoliaEle.querySelector("#main-search-filters")}attachResultListeners(e){if(e&&e.composedPath().find((e=>e===this.algoliaEle))){this.algoliaResultsEle=this.algoliaEle.querySelector("nano-algolia-results")}if(!this.algoliaResultsEle)return;let t=this.algoliaResultsEle;t.querySelectorAll(".remove-filter").forEach((e=>{e.addEventListener("click",(e=>{let t=e.target;this.removeFilter(t.dataset.filter,t.dataset.filterVal)}))}));t.querySelectorAll(".back-btn").forEach((e=>{e.addEventListener("click",(()=>{this.goback()}))}));t.querySelectorAll(".topbar__show-filters").forEach((e=>{this.openFilterBtn=e;e.addEventListener("click",(()=>{this.filtersDiv.tabIndex=-1;this.filtersDiv.classList.add("show");this.filtersDiv.setAttribute("aria-expanded","true");document.body.style.overflow="hidden";setTimeout((()=>this.filtersDiv.focus()),20)}))}));const n=Array.from(t.querySelectorAll(".result__tags-tag"));n.forEach((e=>{e.removeEventListener("click",this.tagClick);e.addEventListener("click",this.tagClick)}))}changeOrder(e){this.algoliaEle.replicaIndex=e.detail.value}goback(){this.removeAllFilters();this.algoliaEle.showResults=false;this.algoliaEle.query=""}removeFilter(e,t){this.algoliaEle.removeFilters(e,t)}removeAllFilters(){this.algoliaEle.removeFilters()}closefilters(){if(!this.filtersDiv)return;this.filtersDiv.tabIndex=null;this.filtersDiv.classList.remove("show");this.filtersDiv.setAttribute("aria-expanded","false");document.body.style.overflow="";setTimeout((()=>this.openFilterBtn.focus()),20)}componentDidLoad(){this.ro=new i((e=>{for(const t of e){if(!t.contentRect.width)return;this.currentWidth=t.contentRect.width}}));this.ro.observe(this.el);this.algoliaEle.filters=["created > "+Math.floor((Date.now()-631152e5)/1e3)]}render(){return t(n,{class:{small:this.currentWidth<677},dir:this.el.ownerDocument.dir==="rtl"?"rtl":false},t("nano-algolia",{"store-id":"searchq","store-method":"url-hash-push",class:"main-search__wrap sc-nano-global-search-results",ref:e=>s((()=>this.algoliaEle=e)),id:"main-search"},t("script",{type:"text/template",slot:"template"},`<div class="main-search sc-nano-global-search-results">\n              <nano-algolia-results id="main-search-results" class="main-search__results sc-nano-global-search-results" infinite-scroll>\n                <script type="text/template" slot="start-template">\n                  <div class="sc-nano-global-search-results main-search__topbar topbar">\n                    <button class="sc-nano-global-search-results topbar__bkbtn back-btn icon-button">\n                      <nano-icon class="sc-nano-global-search-results" name="light/chevron-left" size="small"></nano-icon>\n                    </button>\n                    <div>\n                      <em class="sc-nano-global-search-results topbar__query">'{{ it.query }}' - </em> <strong>{{ it.totalHitsWithFilters }}</strong> Results\n                    </div>\n\n                    <div class="sc-nano-global-search-results topbar__filtering">\n                      {{ @if (it.results.length) }}\n\n                      {{ @if (it.indexName === 'All') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--www indexchange" value="{{ it.index }}" hide-label="true" label="Sort order" show-inline-error="false">\n                          <nano-option value="all_prod_en">Sort by: Most relevant</nano-option>\n                          <nano-option value="all_prod_en_date_desc">Sort by: Newest</nano-option>\n                          <nano-option value="all_prod_en_date_asc">Sort by: Oldest</nano-option>\n                          <nano-option value="all_prod_en_activity_date_desc">Sort by: Recent activity</nano-option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'www') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--www indexchange" value="{{ it.index }}" hide-label="true" label="Sort order" show-inline-error="false">\n                          <nano-option value="cws_english_en">Sort by: Most relevant</nano-option>\n                          <nano-option value="cws_english_en_date_desc">Sort by: Newest</nano-option>\n                          <nano-option value="cws_english_en_date_asc">Sort by: Oldest</nano-option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Resources') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--www indexchange" value="{{ it.index }}" hide-label="true" label="Sort order" show-inline-error="false">\n                          <nano-option value="cws_english_resources_en">Sort by: Most relevant</nano-option>\n                          <nano-option value="cws_english_resources_en_featured_desc">Sort by: Newest</nano-option>\n                          <nano-option value="cws_english_resources_en_featured_asc">Sort by: Oldest</nano-option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Store') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--www indexchange" value="{{ it.index }}" hide-label="true" label="Sort order" show-inline-error="false">\n                          <nano-option value="store_prod">Sort by: Most relevant</nano-option>\n                          <nano-option value="store_prod_date_desc">Sort by: Newest</nano-option>\n                          <nano-option value="store_prod_date_asc">Sort by: Oldest</nano-option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Community') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--community indexchange" value="{{ it.index }}" hide-label="true" label="Sort order" show-inline-error="false">\n                          <nano-option value="community_prod">Sort by: Most relevant</nano-option>\n                          <nano-option value="community_prod_date_desc">Sort by: Newest</nano-option>\n                          <nano-option value="community_prod_date_asc">Sort by: Oldest</nano-option>\n                          <nano-option value="community_prod_activity_date_desc">Sort by: Recent activity</nano-option>\n                        </nano-select>\n                        {{ /if }}\n                      {{ /if }}\n\n                      <button class="sc-nano-global-search-results topbar__show-filters filters-title" aria-controls="main-search-filters">\n                        {{ @if (it.appliedFilters && it.appliedFilters.length > 0) }}\n                          <span class="sc-nano-global-search-results topbar__filter-count">\n                            {{ (it.appliedFilters.reduce(function(a, b) { return a + (b.values ? b.values.length : 0) }, 0)) }}\n                          </span>\n                        {{ /if }}\n                        <nano-icon class="sc-nano-global-search-results" name="light/filter"></nano-icon>\n                      </button>\n                    </div>\n                  </div>\n\n                  {{ @if (it.results.length) }}\n                    <div class="sc-nano-global-search-results main-search__applied-filters">\n                      {{ @if (it.appliedFilters) }}\n                        {{ @each(it.appliedFilters) => filterObj }}\n                          {{ @each(filterObj.values) => filterVal }}\n                            <span class="sc-nano-global-search-results main-search__applied-filter">\n                              {{ filterVal | public_name }}\n                              <button class="sc-nano-global-search-results icon-button remove-filter" data-filter="{{ filterObj.name }}" data-filter-val="{{ filterVal }}">\n                                <nano-icon class="sc-nano-global-search-results" name="light/times"></nano-icon>\n                              </button>\n                            </span>\n                          {{ /each }}\n                        {{ /each }}\n                      {{ #else }}\n                        <span class="sc-nano-global-search-results main-search__applied-nofilter">&nbsp;</span>\n                      {{ /if }}\n                    </div>\n                  {{ /if }}\n                <\/script>\n\n                <script type="text/template" slot="result-template">\n                  \x3c!-- START NO CONTENT --\x3e\n                  {{ @if ((!it.results || !it.results.length)) }}\n                    <div class="search-empty">\n                      <nano-icon name="light/search" class="search-empty-icon"></nano-icon>\n                      <h2>No matches found...</h2>\n                      <p>Please try a different search query.</p>\n                    </div>\n                  {{ /if }}\n                  \x3c!-- END NO CONTENT --\x3e\n                  {{ @if (it.totalHitsWithFilters > 0) }}\n                    {{ @each(it.results) => result }}\n                      {{ contentType = result.content_type ? result.content_type : result.type }}\n                      <li class="sc-nano-global-search-results">\n                        <div class="sc-nano-global-search-results result">\n                          <h4 class="sc-nano-global-search-results result__title" data-icon-set="{{(iconSet = false)}}">\n                            <a href="{{ result.url | abs_url(it, result) }}">\n                            {{ result._snippetResult.title.value | safe }}\n                            {{ @if (contentType === 'technical_document' || contentType === 'literature' || contentType === 'white_paper' || contentType === 'protocol') }}\n                              <span class="sc-nano-global-search-results result__pdf">PDF</span>\n                            {{ /if }}\n                            </a>\n                          </h4>\n                          {{ @if (result.authors) }}\n                            {{ @if (typeof result.authors === 'string') }}\n                              <a class="sc-nano-global-search-results result__authors" href="{{ result.url | abs_url(it, result) }}">Authors: {{ result.authors | trim_to(50) }}</a>\n                            {{ #else }}\n                              <a class="sc-nano-global-search-results result__authors" href="{{ result.url | abs_url(it, result) }}">\n                                {{ @each(result.authors) => author, index }}\n                                  \x3c!-- {{ @if(index == 0)}} --\x3e\n                                    Athors: {{ author | trim_to(60) }}\n                                  \x3c!-- {{ /if }} --\x3e\n                                {{ /each }}\n                              </a>\n                            {{ /if }}\n                          {{ /if }}\n                          {{ @if (contentType === 'video' || contentType === 'lc_lightning_talk' ) }}\n                            {{ @if (result.name) }}\n                              <a class="sc-nano-global-search-results result__authors" href="{{ result.url | abs_url(it, result) }}">Speaker: {{ result.name | trim_to(50) }}</a>\n                            {{ /if }}\n                            <a class="sc-nano-global-search-results result__video-body" href="{{ result.url | abs_url(it, result) }}">\n                              {{ @if (result.image) }}\n                                <div class="sc-nano-global-search-results result__image" style="background-image: url('{{ result.image | abs_url(it, result) }}')">\n                                  <nano-icon class="sc-nano-global-search-results" name="duotone/play-circle"></nano-icon>\n                                </div>\n                              {{ /if }}\n                              <div class="sc-nano-global-search-results result__body">\n                                <div class="sc-nano-global-search-results result__description">\n                                  {{ @if (result.description) }}\n                                    {{ result._snippetResult.description.value | safe }}\n                                  {{ /if }}\n                                </div>\n                              </div>\n                              <div class="sc-nano-global-search-results result__meta">\n                                {{ @if (result.type || result.content_type) }}\n                                  <div class="sc-nano-global-search-results result__type">\n                                  {{ @if (contentType === 'lc_lightning_talk') }}\n                                    Presentation\n                                  {{ #else }}\n                                    {{ contentType }}\n                                  {{ /if }}\n                                  </div>\n                                {{ /if }}\n                                {{ @if (result.tags) }}\n                                  <div class="sc-nano-global-search-results result__tags">\n                                    {{ @if (typeof result.tags === 'string') }}\n                                      <button data-value="{{ result.tags | lowercase }}" class="sc-nano-global-search-results result__tags-tag">{{ result.tags }}</button>\n                                    {{ #else }}\n                                      {{ @each(result.tags) => tag, index }}\n                                        {{ @if(index < 5)}}\n                                          {{ @if (tag !== "No video" && tag !== "Resources" && tag !== "Video") }}\n                                            <button data-value="{{ tag | lowercase }}" class="sc-nano-global-search-results result__tags-tag">{{ tag }}</button>\n                                          {{ /if }}\n                                        {{ /if }}\n                                      {{ /each }}\n                                    {{ /if }}\n                                  </div>\n                                {{ /if }}\n                                {{ @if (result.source) }}\n                                  <div class="sc-nano-global-search-results result__source">Source: {{ result.source }}</div>\n                                {{ /if }}\n                              </div>\n                            </a>\n                          {{ /if }}\n                          {{ @if (result.body) }}\n                            <a class="sc-nano-global-search-results result__body" href="{{ result.url | abs_url(it, result) }}">{{ result._snippetResult.body.value | safe }}</a>\n                          {{ /if }}\n                          {{ @if (contentType === 'product' }}\n                            <div class="sc-nano-global-search-results result__buttons">\n                              <a class="sc-nano-global-search-results result__buttons-button" href="{{ result.url | abs_url(it, result) }}">View product</a>\n                            </div>\n                          {{ /if }}\n                          {{ @if (contentType === 'event') }}\n                            <a class="sc-nano-global-search-results result__promo" href="{{ result.url | abs_url(it, result) }}">\n                              <div class="sc-nano-global-search-results result__promo-box">\n                                <div class="sc-nano-global-search-results result__promo-bigdate">\n                                  {{ result.start_date | date_long({year: undefined, month: 'short', day: undefined}) }}\n                                  <span>{{ result.start_date | date_long({year: undefined, month: undefined, day: 'numeric'}) }}</span>\n                                </div>\n                                <div>\n                                  <div class="sc-nano-global-search-results result__promo-date">\n                                    <nano-icon class="sc-nano-global-search-results" name="light/calendar-alt"></nano-icon>\n                                    {{ @if (result.end_date) }}\n                                      {{ @if (result.end_date !== result.start_date) }}\n                                        {{ result.start_date | date_long({weekday: 'short', day: 'numeric', month: 'short'}) }} - {{ result.end_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}\n                                      {{ #else }}\n                                        {{ result.start_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}\n                                      {{ /if }}\n                                    {{ #else }}\n                                      {{ @if (result.start_date) }}\n                                        {{ result.start_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}\n                                      {{ /if }}\n                                    {{ /if }}\n                                  </div>\n                                  <div class="sc-nano-global-search-results result__promo-venue">\n                                    <nano-icon class="sc-nano-global-search-results" name="light/map-marker-alt"></nano-icon>\n                                    Venue\n                                  </div>\n                                </div>\n                              </div>\n                            </a>\n                          {{ /if }}\n                          {{ @if (contentType !== 'lc_lightning_talk' && contentType !== 'video') }}\n                            <div class="sc-nano-global-search-results result__meta">\n                              {{ @if (result.type || result.content_type) }}\n                                <div class="sc-nano-global-search-results result__type">\n                                {{ @if (contentType === 'news_item') }}\n                                  News\n                                {{ #elif (contentType === 'static_page' || contentType === 'bespoke') }}\n                                  Page\n                                {{ #elif (contentType === 'case_study') }}\n                                  Case study\n                                {{ #elif (contentType === 'lc_poster') }}\n                                  Poster\n                                {{ #elif (contentType === 'nanopore_live') }}\n                                  Live stream\n                                {{ #elif (contentType === 'data_release') }}\n                                  Data release\n                                {{ #elif (contentType === 'research_area') }}\n                                  Research area\n                                {{ #elif (contentType === 'white_paper') }}\n                                  White paper\n                                {{ #elif (contentType === 'technical_document') }}\n                                  Technical document\n                                {{ #elif (contentType === 'info_sheet') }}\n                                  Info sheet\n                                {{ #elif (contentType === 'lc_home' || contentType === 'lc_venue') }}\n                                  London Calling\n                                {{ #else }}\n                                  {{ contentType }}\n                                {{ /if }}\n                                </div>\n                              {{ /if }}\n                              {{ @if (contentType !== 'event') }}\n                                {{ @if (result.updated) }}\n                                  <div class="sc-nano-global-search-results result__date">{{ result.updated | date_long({year: 'numeric', month: 'short', day: 'numeric'}) }}</div>\n                                {{ #else }}\n                                  {{ @if (result.created) }}\n                                    <div class="sc-nano-global-search-results result__date">{{ result.created | date_long({year: 'numeric', month: 'short', day: 'numeric'}) }}</div>\n                                  {{ /if }}\n                                {{ /if }}\n                              {{ /if }}\n                              {{ @if (result.tags) }}\n                                <div class="sc-nano-global-search-results result__tags">\n                                  {{ @if (typeof result.tags === 'string') }}\n                                    {{ @if (result.tags !== "Resources" && result.tags !== "Tools" && result.tags !== "Publications" && result.tags !== "Case studies") }}\n                                      <button data-value="{{ result.tags | lowercase }}" class="sc-nano-global-search-results result__tags-tag">{{ result.tags }}</button>\n                                    {{ /if }}\n                                  {{ #else }}\n                                    {{ @each(result.tags) => tag, index }}\n                                      {{ @if(index < 5)}}\n                                        {{ @if (tag !== "Resources" && tag !== "Tools" && tag !== "Publications" && tag !== "Case studies") }}\n                                          <button data-value="{{ tag | lowercase }}" class="sc-nano-global-search-results result__tags-tag">{{ tag }}</button>\n                                        {{ /if }}\n                                      {{ /if }}\n                                    {{ /each }}\n                                  {{ /if }}\n                                </div>\n                              {{ /if }}\n                              {{ @if (result.source) }}\n                                <div class="sc-nano-global-search-results result__source">Source: {{ result.source }}</div>\n                              {{ /if }}\n                            </div>\n                          {{ /if }}\n                        </div>\n                      </li>\n                    {{ /each }}\n                  {{ /if }}\n                <\/script>\n\n                <div slot="start-output"></div>\n                <ul slot="result-output" class="sc-nano-global-search-results"></ul>\n              </nano-algolia-results>\n\n              {{ @if(Object.keys(it.origFilters).length) }}\n                <div class="sc-nano-global-search-results main-search__filters filters close-filters" id="main-search-filters">\n                  <div class="sc-nano-global-search-results filters-wrap">\n                    {{ @if(it.totalHits) }}\n                      <div class="sc-nano-global-search-results filters-header">\n                        <strong class="sc-nano-global-search-results filters-title">Filters</strong>\n                        <button class="sc-nano-global-search-results filters-reset">Reset</button>\n                        <button class="sc-nano-global-search-results filters__close-filters close-filters icon-button" aria-controls="main-search-filters">\n                          <nano-icon class="sc-nano-global-search-results" name="light/times"></nano-icon>\n                        </button>\n                      </div>\n                    {{ /if }}\n\n                    <div>\n                      {{ @if(it.origFilters['type']) }}\n                        <nano-details class="sc-nano-global-search-results" open={true} icon-rotation="180">\n                          <strong slot="label">Type</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf1" store-method="url-hash-push" filter-name="type">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                <input class="sc-nano-global-search-results filter-cb" type="checkbox" value="{{ filter }}" id="type-{{ filter }}-{{x}}" />\n                                <label class="sc-nano-global-search-results filter-label" for="type-{{ filter }}-{{x}}">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['channel']) }}\n                        <nano-details open={true} icon-rotation="180">\n                          <strong slot="label">Channels</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf2" store-method="url-hash-push" filter-name="channel">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter }}" id="channel-{{ filter }}-{{x}}" />\n                                <label class="filter-label sc-nano-global-search-results" for="channel-{{ filter }}-{{x}}">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['authors']) }}\n                        <nano-details open={true} icon-rotation="180">\n                          <strong slot="label">Authors</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf3" store-method="url-hash-push" filter-name="authors">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter }}" id="authors-{{ filter }}-{{x}}" />\n                                <label class="filter-label sc-nano-global-search-results" for="authors-{{ filter }}-{{x}}">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['categories_without_path']) }}\n                        <nano-details open={true} icon-rotation="180">\n                          <strong slot="label">Category</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf4" store-method="url-hash-push" filter-name="categories_without_path">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                {{ @if(!filter.match(/publication/)) }}\n                                  <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                  <input class="sc-nano-global-search-results filter-cb" type="checkbox" value="{{ filter }}" id="cwp-{{ filter }}-{{x}}" />\n                                  <label class="sc-nano-global-search-results filter-label" for="cwp-{{ filter }}-{{x}}">\n                                    <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                  </label></li>\n                                {{ /if }}\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['tags']) }}\n                        <nano-details open={true} icon-rotation="180">\n                          <strong slot="label">Tags</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf5" store-method="url-hash-push" filter-name="tags">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter | lowercase }}" id="tags-{{ filter }}-{{x}}" />\n                                <label class="filter-label sc-nano-global-search-results" for="tags-{{ filter }}-{{x}}">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n                    </div>\n                  </div>\n                </div>\n              {{ /if }}\n            </div>`),t("div",{slot:"output"}),t("slot",null)))}get el(){return a(this)}static get watchers(){return{algoliaEle:["handleAlgoliaCredsChange","handleAlgoliaIndexChange"],apiKey:["handleAlgoliaCredsChange"],appId:["handleAlgoliaCredsChange"],index:["handleAlgoliaIndexChange"]}}};l.style=r;export{l as nano_global_search_results};
-//# sourceMappingURL=p-1f99d776.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/global-search-results/global-search-results.scss?tag=nano-global-search-results&encapsulation=shadow","src/components/global-search-results/global-search-results.tsx"],"names":["globalSearchResultsCss","GlobalSearchResults","[object Object]","hostRef","this","tagClick","e","preventDefault","tagVal","target","dataset","value","toLowerCase","filter","algoliaEle","querySelector","indexOf","apiKey","appId","index","searchIndex","tagName","algoliaResultsEle","goback","detail","results","client","result","find","selected","name","indexName","domain","filters","query","composedPath","ele","classList","contains","changeOrder","id","attachResultListeners","querySelectorAll","forEach","item","addEventListener","removeAllFilters","closefilters","filterWrap","stopPropagation","filtersDiv","el","resultEle","clickEv","removeFilter","filterVal","openFilterBtn","tabIndex","add","setAttribute","document","body","style","overflow","setTimeout","focus","tags","Array","from","tag","removeEventListener","ev","replicaIndex","showResults","facet","removeFilters","remove","ro","ResizeObserver","entries","entry","contentRect","width","currentWidth","observe","Math","floor","Date","now","h","Host","class","small","dir","ownerDocument","store-id","store-method","ref","raf","type","slot"],"mappings":";;;4HAAA,MAAMA,EAAyB,8glBC4BlBC,EAAmB,MALhCC,YAAAC,aA2JUC,KAAAC,SAAYC,IAClBA,EAAEC,iBACF,IAAIC,EAASF,EAAEG,OAAOC,QAAQC,MAC9BH,EAASA,IAAW,cAAgB,eAAiBA,EACrDA,EAASA,EAAOI,cAEhB,MAAMC,EAAuCT,KAAKU,WAAWC,cAC3D,2CAEF,GAAIF,EAAOF,MAAMK,QAAQR,MAAa,EAAG,CACvCK,EAAOF,MAAQE,EAAOF,MAAQ,IAAIE,EAAOF,MAAOH,GAAU,CAACA,KA/I/DN,2BACE,IAAKE,KAAKa,SAAWb,KAAKc,QAAUd,KAAKU,WAAY,OACrDV,KAAKU,WAAWG,OAASb,KAAKa,OAC9Bb,KAAKU,WAAWI,MAAQd,KAAKc,MAK/BhB,2BACE,IAAKE,KAAKe,QAAUf,KAAKU,WAAY,OACrCV,KAAKU,WAAWM,YAAchB,KAAKe,MAIrCjB,qBAAqBI,GACnB,GAAIA,EAAEG,OAAOY,UAAY,kBAAmB,OAC5CjB,KAAKkB,kBAAoB,KACzBlB,KAAKmB,SAIPrB,sBAAsBI,GACpB,GAAIA,EAAEG,OAAOY,UAAY,kBAAmB,OAC5C,MACEG,QAAQC,QAAEA,EAAOC,OAAEA,IACjBpB,EACJ,MAAMqB,EAASF,EAAQG,MAAMD,GAAWA,EAAOE,WAE/CzB,KAAKa,OAASS,EAAOT,OACrBb,KAAKc,MAAQQ,EAAOR,MACpBd,KAAKe,MAAQ,CACXW,KAAMH,EAAOI,UACbZ,MAAOQ,EAAOR,MACda,OAAQL,EAAOK,OACfC,QAASN,EAAOM,SAElB7B,KAAKU,WAAWoB,MAAQP,EAAOO,MAIjChC,cAAcI,GACZ,GACEA,EACG6B,eACAP,MACEQ,GACCA,EAAIC,WAAaD,EAAIC,UAAUC,SAAS,oBAE5ClC,KAAKkB,kBACP,CACAlB,KAAKmC,YAAYjC,IAKrBJ,gBAAgBI,GACd,IACGA,EACE6B,eACAP,MAAMQ,GAAqBA,EAAII,IAAMJ,EAAII,KAAO,gBAEnD,OAEFpC,KAAKkB,kBAAoBlB,KAAKU,WAAWC,cACvC,wBAIFX,KAAKqC,wBAELrC,KAAKU,WAAW4B,iBAAiB,kBAAkBC,SAASC,IAC1DA,EAAKC,iBAAiB,SAAS,KAC7BzC,KAAK0C,yBAIT1C,KAAKU,WAAW4B,iBAAiB,kBAAkBC,SAASC,IAC1DA,EAAKC,iBAAiB,SAAS,KAC7BzC,KAAK2C,qBAIT,IAAIC,EAAa5C,KAAKU,WAAWC,cAAc,iBAC/C,GAAIiC,EAAY,CACdA,EAAWH,iBAAiB,SAAUvC,IACpCA,EAAE2C,qBAIN7C,KAAK8C,WAAa9C,KAAKU,WAAWC,cAAc,wBAIlDb,sBAAsBI,GACpB,GAAIA,GAAKA,EAAE6B,eAAeP,MAAMuB,GAAOA,IAAO/C,KAAKU,aAAa,CAC9DV,KAAKkB,kBAAoBlB,KAAKU,WAAWC,cACvC,wBAGJ,IAAKX,KAAKkB,kBAAmB,OAC7B,IAAI8B,EAAYhD,KAAKkB,kBAErB8B,EAAUV,iBAAiB,kBAAkBC,SAASC,IACpDA,EAAKC,iBAAiB,SAAUQ,IAC9B,IAAIxC,EAASwC,EAAQ5C,OACrBL,KAAKkD,aAAazC,EAAOH,QAAQG,OAAQA,EAAOH,QAAQ6C,iBAI5DH,EAAUV,iBAAiB,aAAaC,SAASC,IAC/CA,EAAKC,iBAAiB,SAAS,KAC7BzC,KAAKmB,eAIT6B,EAAUV,iBAAiB,yBAAyBC,SAASC,IAC3DxC,KAAKoD,cAAgBZ,EACrBA,EAAKC,iBAAiB,SAAS,KAC7BzC,KAAK8C,WAAWO,UAAY,EAC5BrD,KAAK8C,WAAWb,UAAUqB,IAAI,QAC9BtD,KAAK8C,WAAWS,aAAa,gBAAiB,QAC9CC,SAASC,KAAKC,MAAMC,SAAW,SAC/BC,YAAW,IAAM5D,KAAK8C,WAAWe,SAAS,UAI9C,MAAMC,EAAOC,MAAMC,KAAKhB,EAAUV,iBAAiB,sBACnDwB,EAAKvB,SAAS0B,IACZA,EAAIC,oBAAoB,QAASlE,KAAKC,UACtCgE,EAAIxB,iBAAiB,QAASzC,KAAKC,aAkB/BH,YAAYqE,GAClBnE,KAAKU,WAAW0D,aAAeD,EAAG/C,OAAOb,MAGnCT,SACNE,KAAK0C,mBACL1C,KAAKU,WAAW2D,YAAc,MAC9BrE,KAAKU,WAAWoB,MAAQ,GAGlBhC,aAAawE,EAAO7D,GAC1BT,KAAKU,WAAW6D,cAAcD,EAAO7D,GAG/BX,mBACNE,KAAKU,WAAW6D,gBAGVzE,eACN,IAAKE,KAAK8C,WAAY,OACtB9C,KAAK8C,WAAWO,SAAW,KAC3BrD,KAAK8C,WAAWb,UAAUuC,OAAO,QACjCxE,KAAK8C,WAAWS,aAAa,gBAAiB,SAC9CC,SAASC,KAAKC,MAAMC,SAAW,GAC/BC,YAAW,IAAM5D,KAAKoD,cAAcS,SAAS,IAG/C/D,mBACEE,KAAKyE,GAAK,IAAIC,GAAgBC,IAC5B,IAAK,MAAMC,KAASD,EAAS,CAC3B,IAAKC,EAAMC,YAAYC,MAAO,OAC9B9E,KAAK+E,aAAeH,EAAMC,YAAYC,UAG1C9E,KAAKyE,GAAGO,QAAQhF,KAAK+C,IACrB/C,KAAKU,WAAWmB,QAAU,CACxB,aAAeoD,KAAKC,OAAOC,KAAKC,MAAQ,UAAe,MAI3DtF,SACE,OACEuF,EAACC,EAAI,CACHC,MAAO,CAAEC,MAAOxF,KAAK+E,aAAe,KACpCU,IAAMzF,KAAK+C,GAAG2C,cAA2BD,MAAQ,MAAQ,MAAQ,OAEjEJ,EAAA,eAAA,CAAAM,WACW,UAASC,eACL,gBACbL,MAAM,kDACNM,IAAM7D,GAAQ8D,GAAI,IAAO9F,KAAKU,WAAasB,IAC3CI,GAAG,eAEHiD,EAAA,SAAA,CAAQU,KAAK,gBAAgBC,KAAK,YAC/B,494BAwZHX,EAAA,MAAA,CAAKW,KAAK,WACVX,EAAA,OAAA","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n\n:host {\n  display: block;\n  flex: 1 1 100%;\n}\n\n.main-search {\n  display: flex;\n  background: white;\n  font-size: 14px;\n  min-height: calc(100vh - 63px);\n  justify-content: space-between;\n\n  &__wrap {\n    /* autoprefixer: ignore next */\n    display: contents;\n    height: 100%;\n  }\n\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  li {\n    margin: 0;\n    padding: 0;\n  }\n\n  button:not(.result__tags-tag) {\n    appearance: none;\n    border: none;\n    background: none;\n    position: relative;\n    top: -2px;\n  }\n\n  .icon-button {\n    color: inherit;\n    align-self: normal;\n    padding: 9px 7px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n  }\n\n  &__topbar {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    margin-bottom: 1em;\n\n    &::after {\n      content: '';\n      width: calc(100% - 30px);\n      left: 30px;\n      position: relative;\n      border-bottom: 1px solid #e5eef1;\n      padding-top: 0.9em;\n    }\n  }\n\n  &__applied-filters {\n    border: solid 1px map.get($colors, lightgrey);\n    text-transform: uppercase;\n    border-radius: 3px;\n    font-weight: bold;\n    display: flex;\n    align-items: center;\n    line-height: 0.9;\n    padding: 5px 5px 0 5px;\n    letter-spacing: 2px;\n    flex-wrap: wrap;\n    margin-bottom: 0.5rem;\n\n    span {\n      display: flex;\n      align-items: center;\n    }\n\n    :host(.small) & {\n      display: none;\n    }\n  }\n\n  &__applied-nofilter {\n    @include margin(0, 5px, 3px, 0);\n    @include padding(10px, 7px, 10px, 7px);\n\n    font-size: 12px;\n    color: rgba(69, 85, 86, 0.85);\n  }\n\n  &__applied-filter {\n    @include padding(5px, 2px, 3px, 8px);\n    @include margin(0, 5px, 5px, 0);\n\n    color: map.get($colors, darkgrey);\n    font-size: 11px;\n    border-radius: 2px;\n    border: solid 1px rgba(0, 132, 169, 0.5);\n    background-color: rgba(0, 132, 169, 0.2);\n    line-height: 1;\n\n    .icon-button {\n      @include padding(2px, 4px, 1px, 10px);\n\n      nano-icon {\n        pointer-events: none;\n      }\n    }\n  }\n\n  .topbar {\n    &__bkbtn {\n      position: relative;\n      left: -7px;\n    }\n\n    &__query {\n      :host(.small) & {\n        display: none;\n      }\n    }\n\n    &__filtering {\n      display: flex;\n      align-items: center;\n\n      @include margin(0, 0, 0, 1em);\n\n      flex: 1;\n    }\n\n    &__order {\n      min-width: 175px;\n      max-width: 200px;\n\n      @include margin(0, 0, 0, auto);\n\n      // @include media-breakpoint-down('sm') {\n      //   max-width: 300px;\n      // }\n\n      :host(.small) & {\n        max-width: 300px;\n      }\n    }\n\n    nano-select {\n      opacity: 1;\n      transition: 0.1s ease opacity;\n\n      &:not(.hydrated) {\n        opacity: 0;\n      }\n    }\n\n    &__show-filters {\n      @include margin(0, 0, 0, 0.5em);\n\n      text-transform: uppercase;\n      display: none;\n      flex-direction: column;\n      align-items: center;\n\n      nano-icon {\n        font-size: 20px;\n      }\n\n      // @include media-breakpoint-down('sm') {\n      //   display: flex;\n      // }\n\n      :host(.small) & {\n        display: flex;\n      }\n    }\n\n    &__filter-count {\n      width: 12px;\n      height: 12px;\n      box-shadow: inset 0 3px 4px 0 rgba(0, 0, 0, 0.2);\n      border: solid 1px #005c76;\n      background-color: #005c76;\n      color: white;\n      font-size: 7px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 1;\n      margin-bottom: 3px;\n    }\n  }\n\n  &__results {\n    font-size: 14px;\n    padding: 1em 40px;\n    color: rgba(69, 85, 86, 0.85);\n    width: 70%;\n    height: 100%;\n\n    @include media-breakpoint-down('sm') {\n      padding: 1em 20px;\n    }\n\n    :host(.small) & {\n      width: 100%;\n    }\n  }\n\n  &__filters {\n    outline: none;\n\n    @include padding(1.8em, 40px, 1em, 0);\n\n    @include media-breakpoint-down('sm') {\n      @include padding(null, 20px, null, null);\n    }\n\n    flex: 1 1 30%;\n    box-sizing: border-box;\n\n    :host(:not(.small)) & {\n      max-width: 350px;\n      min-width: 220px;\n    }\n  }\n}\n\n.filters {\n  color: map.get($colors, darkgrey);\n  background: white;\n  font-size: 14px;\n\n  :host(.small) & {\n    position: fixed;\n    width: 0;\n    height: 0;\n    z-index: 10;\n    top: 0;\n    right: 0;\n    transition: all 0s ease 0.5s;\n    background: none;\n\n    &.show {\n      height: 100vh;\n      width: 100vw;\n      transition: all 0s ease 0s;\n\n      &::after {\n        opacity: 1;\n      }\n    }\n\n    &::after {\n      content: '';\n      background: rgba(0, 0, 0, 0.5);\n      position: absolute;\n      left: 0;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      z-index: -1;\n      opacity: 0;\n      transition: 0.1s ease opacity;\n    }\n  }\n\n  &__close-filters {\n    display: none !important;\n    font-size: 1.4em;\n\n    :host(.small) & {\n      display: inline-block !important;\n\n      @include margin(0, 0, 0, auto);\n    }\n  }\n\n  &-wrap {\n    :host(.small) & {\n      position: absolute;\n      top: 0;\n      right: 0;\n      background: rgb(247, 246, 246);\n      transform: translateX(100%);\n      width: 300px;\n      min-width: 200px;\n      max-width: 80vw;\n      transition: transform 0.3s ease;\n      padding: 1em;\n      color: black;\n      overflow: auto;\n      height: 100vh;\n    }\n  }\n\n  &.show {\n    .filters-wrap {\n      :host(.small) & {\n        transform: translateX(0%);\n        box-shadow: -3px -3px 7px rgba(0, 0, 0, 0.1);\n      }\n    }\n  }\n\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  li {\n    margin: 0;\n    padding: 0;\n  }\n\n  nano-details {\n    --padding: 0.8em;\n\n    margin: 0.8em 0;\n\n    strong[slot] {\n      display: block;\n\n      @include padding(null, null, null, calc(20px - 0.8em));\n    }\n\n    nano-icon[slot='icon-end'] {\n      @include padding(null, calc(20px - 0.8em), null, calc(20px - 0.8em));\n    }\n  }\n\n  li:last-child .filter-label {\n    margin-bottom: 0;\n  }\n\n  .filter-label {\n    display: flex;\n    align-items: center;\n    position: relative;\n    margin: 0.5em 0;\n    line-height: 1.4;\n    z-index: 0;\n\n    &::before {\n      @include margin(0, 1em, 0, 0);\n\n      content: '';\n      border: 1px solid map.get($colors, blue);\n      background: map.get($colors, white);\n      border-radius: 3px;\n      height: 1em;\n      width: 1em;\n      min-width: 1em;\n      min-height: 1em;\n      display: inline-block;\n    }\n\n    &::after {\n      @include svg-background-image(\n        \"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='#ffffff' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/></svg>\"\n      );\n\n      content: '';\n      height: 0.7em;\n      width: 0.7em;\n      position: absolute;\n      left: 2px;\n      top: 50%;\n      transform: translateY(-50%);\n      z-index: 1;\n      display: block;\n      background-size: 100%;\n      background-position: center center;\n      background-repeat: no-repeat;\n\n      @include rtl-host() {\n        right: 1px;\n        left: auto;\n      }\n    }\n  }\n\n  .filter-cb {\n    @include visually-hide;\n\n    &:checked + .filter-label {\n      &::before {\n        background: map.get($colors, blue--darker);\n      }\n    }\n\n    &:focus + .filter-label {\n      &::before {\n        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7);\n      }\n    }\n  }\n\n  &-header {\n    display: flex;\n    align-items: center;\n  }\n\n  &-reset {\n    color: map.get($colors, blue);\n    font-size: 12px;\n    text-decoration: underline;\n\n    @include margin(0, 0, 0, auto);\n\n    :host(.small) & {\n      @include margin(0, 0, 0, 0);\n    }\n  }\n\n  &-title {\n    @include margin(0, 0, 0, 0);\n\n    text-transform: uppercase;\n    color: rgba(69, 85, 86, 0.85);\n    font-weight: bold;\n    font-size: 14px;\n\n    :host(.small) & {\n      display: none;\n    }\n  }\n}\n\n.result {\n  text-decoration: none;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n  padding-bottom: 14px;\n  border-bottom: 1px solid map.get($colors, lightblue);\n\n  * {\n    word-wrap: break-word;\n    word-break: break-word;\n  }\n\n  &__title {\n    margin: 1em 0 0.5em 0;\n    width: 70%;\n    display: flex;\n\n    a {\n      color: lighten(map.get($colors, blue), 4%);\n      font-size: 14px;\n      line-height: 1.43;\n      text-decoration: none;\n      font-weight: 600;\n    }\n\n    nano-icon {\n      @include margin(0, 0.5em, 0, 0);\n\n      min-width: 20px;\n      min-height: 20px;\n      opacity: 0.8;\n    }\n\n    @include media-breakpoint-down('lg') {\n      width: 100%;\n    }\n  }\n\n  &__body {\n    color: map.get($colors, darkgrey);\n    font-size: 13px;\n    width: 70%;\n    text-decoration: none;\n\n    @include media-breakpoint-down('lg') {\n      width: 100%;\n    }\n  }\n\n  &__pdf {\n    display: inline-block;\n    margin-inline-start: 0.5rem;\n    color: map.get($colors, palegrey);\n  }\n\n  &__meta {\n    display: flex;\n    flex-flow: row wrap;\n    color: map.get($colors, darkgrey);\n    font-size: 11px;\n    line-height: 13px;\n    width: 100%;\n    align-items: center;\n\n    > * {\n      margin-top: 0.5rem;\n\n      &:not(:last-child) {\n        padding-inline-end: 0;\n\n        &::after {\n          content: '';\n          height: 1rem;\n          width: 1px;\n          background: #90c6e7;\n          display: inline-block;\n          margin-inline-start: 0.7rem;\n          margin-inline-end: 0.7rem;\n\n          @include media-breakpoint-down('sm') {\n            display: none;\n          }\n        }\n      }\n    }\n\n    @include media-breakpoint-down('sm') {\n      flex-flow: column;\n      align-items: flex-start;\n    }\n  }\n\n  &__tags {\n    display: flex;\n    flex-flow: row wrap;\n\n    @include media-breakpoint-down('sm') {\n      padding-inline-start: 0;\n    }\n\n    &-tag {\n      color: map.get($colors, darkgrey);\n      display: inline-block;\n      font-size: 0.4375rem;\n      letter-spacing: 1.4px;\n      background: #fff;\n      border-radius: 2px;\n      text-transform: uppercase;\n      padding: 0 4px 1px 5px;\n      font-weight: 600;\n      margin: 3px 0.25rem 0.25rem 0;\n      border: 1px solid #b5aea7;\n      white-space: nowrap;\n      line-height: 13px;\n    }\n  }\n\n  &__type {\n    font-weight: 600;\n    text-transform: capitalize;\n    white-space: nowrap;\n    display: flex;\n    align-items: center;\n  }\n\n  &__date {\n    display: flex;\n    align-items: center;\n    color: map.get($colors, darkgrey);\n  }\n\n  &__source {\n    color: map.get($colors, darkgrey);\n    padding-inline-end: 0.75rem;\n  }\n\n  &__authors {\n    font-size: 12px;\n    color: map.get($colors, darkgrey);\n    margin-bottom: 0.25rem;\n    text-decoration: none;\n    width: 70%;\n  }\n\n  &__buttons {\n    width: 70%;\n    margin-bottom: 0.5rem;\n\n    &-button {\n      background-color: map.get($colors, blue);\n      color: #fff;\n      padding: 5px 8px 1px;\n      border-radius: 4px;\n      display: inline-block;\n      font-size: 11px;\n      text-decoration: none;\n      border: none;\n    }\n  }\n\n  &__promo {\n    width: 70%;\n    margin-bottom: 0.5rem;\n    text-decoration: none;\n    color: map.get($colors, darkgrey);\n\n    &-box {\n      width: 300px;\n      background-color: #e3eef1;\n      padding: 12px 12px 8px 4px;\n      display: flex;\n      flex-flow: row nowrap;\n      margin-top: 1rem;\n    }\n\n    &-bigdate {\n      flex: 0 1 60px;\n      text-align: center;\n      font-weight: 600;\n      color: map.get($colors, blue);\n      text-transform: uppercase;\n      line-height: 1.25;\n      letter-spacing: 1.5px;\n\n      @include media-breakpoint-down('lg') {\n        width: 100%;\n      }\n\n      span {\n        color: map.get($colors, darkgrey);\n        display: block;\n      }\n\n      & ~ div {\n        padding-inline-start: 1rem;\n        border-inline-start: 1px solid #c5dbe1;\n      }\n    }\n\n    &-date {\n      font-size: 12px;\n    }\n\n    &-venue {\n      font-size: 12px;\n    }\n\n    nano-icon {\n      color: map.get($colors, blue);\n      position: relative;\n      top: 1px;\n      padding-inline-end: 2px;\n    }\n  }\n\n  &__image {\n    display: block;\n    background-size: cover;\n    background-repeat: no-repeat;\n    background-position: center;\n    border-radius: 4px;\n    position: relative;\n    width: 100%;\n    height: 150px;\n    margin-bottom: 0.5rem;\n\n    @include media-breakpoint-up('sm') {\n      width: 142px;\n      height: 80px;\n    }\n\n    nano-icon {\n      position: absolute;\n      top: calc(50% - 0.75rem);\n      left: calc(50% - 0.75rem);\n      font-size: 1.5rem;\n      color: #0084a9;\n\n      --primary-color: #fff;\n      --secondary-color: #0084a9;\n      --primary-opacity: 1;\n\n      @include media-breakpoint-down('sm') {\n        font-size: 3rem;\n        top: calc(50% - 1.5rem);\n        left: calc(50% - 1.5rem);\n      }\n    }\n  }\n\n  &__video {\n    &-body {\n      width: 70%;\n      text-decoration: none;\n      display: flex;\n      flex-flow: row wrap;\n\n      @include media-breakpoint-down('lg') {\n        width: 100%;\n      }\n\n      @include media-breakpoint-down('sm') {\n        flex-flow: column;\n      }\n\n      .result__body {\n        padding-inline-start: 1rem;\n        display: flex;\n        flex-direction: column;\n        margin-bottom: 0;\n        flex: 1;\n\n        @include media-breakpoint-down('sm') {\n          padding-inline-start: 0;\n        }\n\n        p {\n          display: inline;\n          margin: 0;\n        }\n\n        u,\n        li,\n        a {\n          text-decoration: none;\n        }\n\n        .result__meta {\n          margin-top: 0.5rem;\n        }\n\n        .result__description {\n          flex: 1 0 auto;\n        }\n      }\n    }\n  }\n}\n\n.search-empty {\n  padding: 3rem 0;\n  text-align: center;\n  border-top: 1px solid #e5eef1;\n\n  h2 {\n    color: #455556;\n    font-size: 1.125rem;\n    margin-bottom: 0.5rem;\n  }\n\n  &-icon {\n    font-size: 7rem;\n\n    --icon-color: #e4e6e8;\n\n    margin-bottom: 2rem;\n  }\n}\n\n.search__highlight {\n  background: #fbffbf;\n  font-style: normal;\n}\n","import {\n  Component,\n  h,\n  Host,\n  Element,\n  State,\n  ComponentInterface,\n  Watch,\n  Listen,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport { AloliaSearchResultDetail } from '../../interface';\nimport { SearchIndex } from '../../interface';\nimport { raf } from '../../utils';\n\n/**\n * Nanopore Global Search results component\n * to be used in conjunction with [Globla-Nav](/story/nano-compounds-global-nav).\n * A shortcut / helper which combines algolia components.\n * There should only be one <nano-global-search-results> per page\n * and should be a direct child of <nano-global-nav>\n */\n@Component({\n  tag: 'nano-global-search-results',\n  styleUrl: 'global-search-results.scss',\n  shadow: true,\n})\nexport class GlobalSearchResults implements ComponentInterface {\n  private algoliaResultsEle: HTMLNanoAlgoliaResultsElement;\n  private filtersDiv: HTMLElement;\n  private openFilterBtn: HTMLButtonElement;\n  private ro: ResizeObserver;\n\n  @State() algoliaEle: HTMLNanoAlgoliaElement;\n  @State() currentWidth: number;\n  @State() apiKey: string;\n  @State() appId: string;\n  @State() index: SearchIndex;\n\n  @Element() private el: HTMLNanoGlobalSearchResultsElement;\n\n  @Watch('algoliaEle')\n  @Watch('apiKey')\n  @Watch('appId')\n  handleAlgoliaCredsChange() {\n    if (!this.apiKey || !this.appId || !this.algoliaEle) return;\n    this.algoliaEle.apiKey = this.apiKey;\n    this.algoliaEle.appId = this.appId;\n  }\n\n  @Watch('algoliaEle')\n  @Watch('index')\n  handleAlgoliaIndexChange() {\n    if (!this.index || !this.algoliaEle) return;\n    this.algoliaEle.searchIndex = this.index;\n  }\n\n  @Listen('nanoSearchReset', { target: 'body' })\n  handleGlobalNavReset(e: CustomEvent & { target: HTMLElement }) {\n    if (e.target.tagName !== 'NANO-GLOBAL-NAV') return;\n    this.algoliaResultsEle = null;\n    this.goback();\n  }\n\n  @Listen('nanoSearchResult', { target: 'body' })\n  handleGlobalNavSearch(e: CustomEvent & { target: HTMLElement }) {\n    if (e.target.tagName !== 'NANO-GLOBAL-NAV') return;\n    const {\n      detail: { results, client },\n    } = e as { detail: AloliaSearchResultDetail };\n    const result = results.find((result) => result.selected);\n\n    this.apiKey = client.apiKey;\n    this.appId = client.appId;\n    this.index = {\n      name: result.indexName,\n      index: result.index,\n      domain: result.domain,\n      filters: result.filters,\n    };\n    this.algoliaEle.query = result.query;\n  }\n\n  @Listen('nanoChange')\n  handleReorder(e: CustomEvent & { target: HTMLNanoSelectElement }) {\n    if (\n      e\n        .composedPath()\n        .find(\n          (ele: HTMLElement) =>\n            ele.classList && ele.classList.contains('indexchange')\n        ) &&\n      !!this.algoliaResultsEle\n    ) {\n      this.changeOrder(e);\n    }\n  }\n\n  @Listen('nanoResultsShown')\n  attachListeners(e: CustomEvent & { target: HTMLElement }) {\n    if (\n      !e\n        .composedPath()\n        .find((ele: HTMLElement) => ele.id && ele.id === 'main-search')\n    )\n      return;\n\n    this.algoliaResultsEle = this.algoliaEle.querySelector(\n      '#main-search-results'\n    );\n\n    // add results listeners\n    this.attachResultListeners();\n\n    this.algoliaEle.querySelectorAll('.filters-reset').forEach((item) => {\n      item.addEventListener('click', () => {\n        this.removeAllFilters();\n      });\n    });\n\n    this.algoliaEle.querySelectorAll('.close-filters').forEach((item) => {\n      item.addEventListener('click', () => {\n        this.closefilters();\n      });\n    });\n\n    let filterWrap = this.algoliaEle.querySelector('.filters-wrap');\n    if (filterWrap) {\n      filterWrap.addEventListener('click', (e) => {\n        e.stopPropagation();\n      });\n    }\n\n    this.filtersDiv = this.algoliaEle.querySelector('#main-search-filters');\n  }\n\n  @Listen('nanoNewResults', { target: 'body' })\n  attachResultListeners(e?: CustomEvent & { target: HTMLElement }) {\n    if (e && e.composedPath().find((el) => el === this.algoliaEle)) {\n      this.algoliaResultsEle = this.algoliaEle.querySelector(\n        'nano-algolia-results'\n      );\n    }\n    if (!this.algoliaResultsEle) return;\n    let resultEle = this.algoliaResultsEle;\n\n    resultEle.querySelectorAll('.remove-filter').forEach((item) => {\n      item.addEventListener('click', (clickEv: MouseEvent) => {\n        let filter = clickEv.target as HTMLElement;\n        this.removeFilter(filter.dataset.filter, filter.dataset.filterVal);\n      });\n    });\n\n    resultEle.querySelectorAll('.back-btn').forEach((item) => {\n      item.addEventListener('click', () => {\n        this.goback();\n      });\n    });\n\n    resultEle.querySelectorAll('.topbar__show-filters').forEach((item) => {\n      this.openFilterBtn = item as HTMLButtonElement;\n      item.addEventListener('click', () => {\n        this.filtersDiv.tabIndex = -1;\n        this.filtersDiv.classList.add('show');\n        this.filtersDiv.setAttribute('aria-expanded', 'true');\n        document.body.style.overflow = 'hidden';\n        setTimeout(() => this.filtersDiv.focus(), 20);\n      });\n    });\n\n    const tags = Array.from(resultEle.querySelectorAll('.result__tags-tag'));\n    tags.forEach((tag) => {\n      tag.removeEventListener('click', this.tagClick);\n      tag.addEventListener('click', this.tagClick);\n    });\n  }\n\n  private tagClick = (e: MouseEvent & { target: HTMLElement }) => {\n    e.preventDefault();\n    let tagVal = e.target.dataset.value;\n    tagVal = tagVal === 'publication' ? 'publications' : tagVal;\n    tagVal = tagVal.toLowerCase();\n\n    const filter: HTMLNanoAlgoliaFilterElement = this.algoliaEle.querySelector(\n      'nano-algolia-filter[filter-name=\"tags\"]'\n    );\n    if (filter.value.indexOf(tagVal) === -1) {\n      filter.value = filter.value ? [...filter.value, tagVal] : [tagVal];\n    }\n  };\n\n  private changeOrder(ev) {\n    this.algoliaEle.replicaIndex = ev.detail.value;\n  }\n\n  private goback() {\n    this.removeAllFilters();\n    this.algoliaEle.showResults = false;\n    this.algoliaEle.query = '';\n  }\n\n  private removeFilter(facet, filter) {\n    this.algoliaEle.removeFilters(facet, filter);\n  }\n\n  private removeAllFilters() {\n    this.algoliaEle.removeFilters();\n  }\n\n  private closefilters() {\n    if (!this.filtersDiv) return;\n    this.filtersDiv.tabIndex = null;\n    this.filtersDiv.classList.remove('show');\n    this.filtersDiv.setAttribute('aria-expanded', 'false');\n    document.body.style.overflow = '';\n    setTimeout(() => this.openFilterBtn.focus(), 20);\n  }\n\n  componentDidLoad() {\n    this.ro = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        if (!entry.contentRect.width) return;\n        this.currentWidth = entry.contentRect.width;\n      }\n    });\n    this.ro.observe(this.el);\n    this.algoliaEle.filters = [\n      'created > ' + Math.floor((Date.now() - 63115200000) / 1000),\n    ]; // only get last 2 years\n  }\n\n  render() {\n    return (\n      <Host\n        class={{ small: this.currentWidth < 677 }}\n        dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : false}\n      >\n        <nano-algolia\n          store-id=\"searchq\"\n          store-method=\"url-hash-push\"\n          class=\"main-search__wrap sc-nano-global-search-results\"\n          ref={(ele) => raf(() => (this.algoliaEle = ele))}\n          id=\"main-search\"\n        >\n          <script type=\"text/template\" slot=\"template\">\n            {`<div class=\"main-search sc-nano-global-search-results\">\n              <nano-algolia-results id=\"main-search-results\" class=\"main-search__results sc-nano-global-search-results\" infinite-scroll>\n                <script type=\"text/template\" slot=\"start-template\">\n                  <div class=\"sc-nano-global-search-results main-search__topbar topbar\">\n                    <button class=\"sc-nano-global-search-results topbar__bkbtn back-btn icon-button\">\n                      <nano-icon class=\"sc-nano-global-search-results\" name=\"light/chevron-left\" size=\"small\"></nano-icon>\n                    </button>\n                    <div>\n                      <em class=\"sc-nano-global-search-results topbar__query\">'{{ it.query }}' - </em> <strong>{{ it.totalHitsWithFilters }}</strong> Results\n                    </div>\n\n                    <div class=\"sc-nano-global-search-results topbar__filtering\">\n                      {{ @if (it.results.length) }}\n\n                      {{ @if (it.indexName === 'All') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n                          <nano-option value=\"all_prod_en\">Sort by: Most relevant</nano-option>\n                          <nano-option value=\"all_prod_en_date_desc\">Sort by: Newest</nano-option>\n                          <nano-option value=\"all_prod_en_date_asc\">Sort by: Oldest</nano-option>\n                          <nano-option value=\"all_prod_en_activity_date_desc\">Sort by: Recent activity</nano-option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'www') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n                          <nano-option value=\"cws_english_en\">Sort by: Most relevant</nano-option>\n                          <nano-option value=\"cws_english_en_date_desc\">Sort by: Newest</nano-option>\n                          <nano-option value=\"cws_english_en_date_asc\">Sort by: Oldest</nano-option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Resources') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n                          <nano-option value=\"cws_english_resources_en\">Sort by: Most relevant</nano-option>\n                          <nano-option value=\"cws_english_resources_en_featured_desc\">Sort by: Newest</nano-option>\n                          <nano-option value=\"cws_english_resources_en_featured_asc\">Sort by: Oldest</nano-option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Store') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n                          <nano-option value=\"store_prod\">Sort by: Most relevant</nano-option>\n                          <nano-option value=\"store_prod_date_desc\">Sort by: Newest</nano-option>\n                          <nano-option value=\"store_prod_date_asc\">Sort by: Oldest</nano-option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Community') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--community indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n                          <nano-option value=\"community_prod\">Sort by: Most relevant</nano-option>\n                          <nano-option value=\"community_prod_date_desc\">Sort by: Newest</nano-option>\n                          <nano-option value=\"community_prod_date_asc\">Sort by: Oldest</nano-option>\n                          <nano-option value=\"community_prod_activity_date_desc\">Sort by: Recent activity</nano-option>\n                        </nano-select>\n                        {{ /if }}\n                      {{ /if }}\n\n                      <button class=\"sc-nano-global-search-results topbar__show-filters filters-title\" aria-controls=\"main-search-filters\">\n                        {{ @if (it.appliedFilters && it.appliedFilters.length > 0) }}\n                          <span class=\"sc-nano-global-search-results topbar__filter-count\">\n                            {{ (it.appliedFilters.reduce(function(a, b) { return a + (b.values ? b.values.length : 0) }, 0)) }}\n                          </span>\n                        {{ /if }}\n                        <nano-icon class=\"sc-nano-global-search-results\" name=\"light/filter\"></nano-icon>\n                      </button>\n                    </div>\n                  </div>\n\n                  {{ @if (it.results.length) }}\n                    <div class=\"sc-nano-global-search-results main-search__applied-filters\">\n                      {{ @if (it.appliedFilters) }}\n                        {{ @each(it.appliedFilters) => filterObj }}\n                          {{ @each(filterObj.values) => filterVal }}\n                            <span class=\"sc-nano-global-search-results main-search__applied-filter\">\n                              {{ filterVal | public_name }}\n                              <button class=\"sc-nano-global-search-results icon-button remove-filter\" data-filter=\"{{ filterObj.name }}\" data-filter-val=\"{{ filterVal }}\">\n                                <nano-icon class=\"sc-nano-global-search-results\" name=\"light/times\"></nano-icon>\n                              </button>\n                            </span>\n                          {{ /each }}\n                        {{ /each }}\n                      {{ #else }}\n                        <span class=\"sc-nano-global-search-results main-search__applied-nofilter\">&nbsp;</span>\n                      {{ /if }}\n                    </div>\n                  {{ /if }}\n                </script>\n\n                <script type=\"text/template\" slot=\"result-template\">\n                  <!-- START NO CONTENT -->\n                  {{ @if ((!it.results || !it.results.length)) }}\n                    <div class=\"search-empty\">\n                      <nano-icon name=\"light/search\" class=\"search-empty-icon\"></nano-icon>\n                      <h2>No matches found...</h2>\n                      <p>Please try a different search query.</p>\n                    </div>\n                  {{ /if }}\n                  <!-- END NO CONTENT -->\n                  {{ @if (it.totalHitsWithFilters > 0) }}\n                    {{ @each(it.results) => result }}\n                      {{ contentType = result.content_type ? result.content_type : result.type }}\n                      <li class=\"sc-nano-global-search-results\">\n                        <div class=\"sc-nano-global-search-results result\">\n                          <h4 class=\"sc-nano-global-search-results result__title\" data-icon-set=\"{{(iconSet = false)}}\">\n                            <a href=\"{{ result.url | abs_url(it, result) }}\">\n                            {{ result._snippetResult.title.value | safe }}\n                            {{ @if (contentType === 'technical_document' || contentType === 'literature' || contentType === 'white_paper' || contentType === 'protocol') }}\n                              <span class=\"sc-nano-global-search-results result__pdf\">PDF</span>\n                            {{ /if }}\n                            </a>\n                          </h4>\n                          {{ @if (result.authors) }}\n                            {{ @if (typeof result.authors === 'string') }}\n                              <a class=\"sc-nano-global-search-results result__authors\" href=\"{{ result.url | abs_url(it, result) }}\">Authors: {{ result.authors | trim_to(50) }}</a>\n                            {{ #else }}\n                              <a class=\"sc-nano-global-search-results result__authors\" href=\"{{ result.url | abs_url(it, result) }}\">\n                                {{ @each(result.authors) => author, index }}\n                                  <!-- {{ @if(index == 0)}} -->\n                                    Athors: {{ author | trim_to(60) }}\n                                  <!-- {{ /if }} -->\n                                {{ /each }}\n                              </a>\n                            {{ /if }}\n                          {{ /if }}\n                          {{ @if (contentType === 'video' || contentType === 'lc_lightning_talk' ) }}\n                            {{ @if (result.name) }}\n                              <a class=\"sc-nano-global-search-results result__authors\" href=\"{{ result.url | abs_url(it, result) }}\">Speaker: {{ result.name | trim_to(50) }}</a>\n                            {{ /if }}\n                            <a class=\"sc-nano-global-search-results result__video-body\" href=\"{{ result.url | abs_url(it, result) }}\">\n                              {{ @if (result.image) }}\n                                <div class=\"sc-nano-global-search-results result__image\" style=\"background-image: url('{{ result.image | abs_url(it, result) }}')\">\n                                  <nano-icon class=\"sc-nano-global-search-results\" name=\"duotone/play-circle\"></nano-icon>\n                                </div>\n                              {{ /if }}\n                              <div class=\"sc-nano-global-search-results result__body\">\n                                <div class=\"sc-nano-global-search-results result__description\">\n                                  {{ @if (result.description) }}\n                                    {{ result._snippetResult.description.value | safe }}\n                                  {{ /if }}\n                                </div>\n                              </div>\n                              <div class=\"sc-nano-global-search-results result__meta\">\n                                {{ @if (result.type || result.content_type) }}\n                                  <div class=\"sc-nano-global-search-results result__type\">\n                                  {{ @if (contentType === 'lc_lightning_talk') }}\n                                    Presentation\n                                  {{ #else }}\n                                    {{ contentType }}\n                                  {{ /if }}\n                                  </div>\n                                {{ /if }}\n                                {{ @if (result.tags) }}\n                                  <div class=\"sc-nano-global-search-results result__tags\">\n                                    {{ @if (typeof result.tags === 'string') }}\n                                      <button data-value=\"{{ result.tags | lowercase }}\" class=\"sc-nano-global-search-results result__tags-tag\">{{ result.tags }}</button>\n                                    {{ #else }}\n                                      {{ @each(result.tags) => tag, index }}\n                                        {{ @if(index < 5)}}\n                                          {{ @if (tag !== \"No video\" && tag !== \"Resources\" && tag !== \"Video\") }}\n                                            <button data-value=\"{{ tag | lowercase }}\" class=\"sc-nano-global-search-results result__tags-tag\">{{ tag }}</button>\n                                          {{ /if }}\n                                        {{ /if }}\n                                      {{ /each }}\n                                    {{ /if }}\n                                  </div>\n                                {{ /if }}\n                                {{ @if (result.source) }}\n                                  <div class=\"sc-nano-global-search-results result__source\">Source: {{ result.source }}</div>\n                                {{ /if }}\n                              </div>\n                            </a>\n                          {{ /if }}\n                          {{ @if (result.body) }}\n                            <a class=\"sc-nano-global-search-results result__body\" href=\"{{ result.url | abs_url(it, result) }}\">{{ result._snippetResult.body.value | safe }}</a>\n                          {{ /if }}\n                          {{ @if (contentType === 'product' }}\n                            <div class=\"sc-nano-global-search-results result__buttons\">\n                              <a class=\"sc-nano-global-search-results result__buttons-button\" href=\"{{ result.url | abs_url(it, result) }}\">View product</a>\n                            </div>\n                          {{ /if }}\n                          {{ @if (contentType === 'event') }}\n                            <a class=\"sc-nano-global-search-results result__promo\" href=\"{{ result.url | abs_url(it, result) }}\">\n                              <div class=\"sc-nano-global-search-results result__promo-box\">\n                                <div class=\"sc-nano-global-search-results result__promo-bigdate\">\n                                  {{ result.start_date | date_long({year: undefined, month: 'short', day: undefined}) }}\n                                  <span>{{ result.start_date | date_long({year: undefined, month: undefined, day: 'numeric'}) }}</span>\n                                </div>\n                                <div>\n                                  <div class=\"sc-nano-global-search-results result__promo-date\">\n                                    <nano-icon class=\"sc-nano-global-search-results\" name=\"light/calendar-alt\"></nano-icon>\n                                    {{ @if (result.end_date) }}\n                                      {{ @if (result.end_date !== result.start_date) }}\n                                        {{ result.start_date | date_long({weekday: 'short', day: 'numeric', month: 'short'}) }} - {{ result.end_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}\n                                      {{ #else }}\n                                        {{ result.start_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}\n                                      {{ /if }}\n                                    {{ #else }}\n                                      {{ @if (result.start_date) }}\n                                        {{ result.start_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}\n                                      {{ /if }}\n                                    {{ /if }}\n                                  </div>\n                                  <div class=\"sc-nano-global-search-results result__promo-venue\">\n                                    <nano-icon class=\"sc-nano-global-search-results\" name=\"light/map-marker-alt\"></nano-icon>\n                                    Venue\n                                  </div>\n                                </div>\n                              </div>\n                            </a>\n                          {{ /if }}\n                          {{ @if (contentType !== 'lc_lightning_talk' && contentType !== 'video') }}\n                            <div class=\"sc-nano-global-search-results result__meta\">\n                              {{ @if (result.type || result.content_type) }}\n                                <div class=\"sc-nano-global-search-results result__type\">\n                                {{ @if (contentType === 'news_item') }}\n                                  News\n                                {{ #elif (contentType === 'static_page' || contentType === 'bespoke') }}\n                                  Page\n                                {{ #elif (contentType === 'case_study') }}\n                                  Case study\n                                {{ #elif (contentType === 'lc_poster') }}\n                                  Poster\n                                {{ #elif (contentType === 'nanopore_live') }}\n                                  Live stream\n                                {{ #elif (contentType === 'data_release') }}\n                                  Data release\n                                {{ #elif (contentType === 'research_area') }}\n                                  Research area\n                                {{ #elif (contentType === 'white_paper') }}\n                                  White paper\n                                {{ #elif (contentType === 'technical_document') }}\n                                  Technical document\n                                {{ #elif (contentType === 'info_sheet') }}\n                                  Info sheet\n                                {{ #elif (contentType === 'lc_home' || contentType === 'lc_venue') }}\n                                  London Calling\n                                {{ #else }}\n                                  {{ contentType }}\n                                {{ /if }}\n                                </div>\n                              {{ /if }}\n                              {{ @if (contentType !== 'event') }}\n                                {{ @if (result.updated) }}\n                                  <div class=\"sc-nano-global-search-results result__date\">{{ result.updated | date_long({year: 'numeric', month: 'short', day: 'numeric'}) }}</div>\n                                {{ #else }}\n                                  {{ @if (result.created) }}\n                                    <div class=\"sc-nano-global-search-results result__date\">{{ result.created | date_long({year: 'numeric', month: 'short', day: 'numeric'}) }}</div>\n                                  {{ /if }}\n                                {{ /if }}\n                              {{ /if }}\n                              {{ @if (result.tags) }}\n                                <div class=\"sc-nano-global-search-results result__tags\">\n                                  {{ @if (typeof result.tags === 'string') }}\n                                    {{ @if (result.tags !== \"Resources\" && result.tags !== \"Tools\" && result.tags !== \"Publications\" && result.tags !== \"Case studies\") }}\n                                      <button data-value=\"{{ result.tags | lowercase }}\" class=\"sc-nano-global-search-results result__tags-tag\">{{ result.tags }}</button>\n                                    {{ /if }}\n                                  {{ #else }}\n                                    {{ @each(result.tags) => tag, index }}\n                                      {{ @if(index < 5)}}\n                                        {{ @if (tag !== \"Resources\" && tag !== \"Tools\" && tag !== \"Publications\" && tag !== \"Case studies\") }}\n                                          <button data-value=\"{{ tag | lowercase }}\" class=\"sc-nano-global-search-results result__tags-tag\">{{ tag }}</button>\n                                        {{ /if }}\n                                      {{ /if }}\n                                    {{ /each }}\n                                  {{ /if }}\n                                </div>\n                              {{ /if }}\n                              {{ @if (result.source) }}\n                                <div class=\"sc-nano-global-search-results result__source\">Source: {{ result.source }}</div>\n                              {{ /if }}\n                            </div>\n                          {{ /if }}\n                        </div>\n                      </li>\n                    {{ /each }}\n                  {{ /if }}\n                </script>\n\n                <div slot=\"start-output\"></div>\n                <ul slot=\"result-output\" class=\"sc-nano-global-search-results\"></ul>\n              </nano-algolia-results>\n\n              {{ @if(Object.keys(it.origFilters).length) }}\n                <div class=\"sc-nano-global-search-results main-search__filters filters close-filters\" id=\"main-search-filters\">\n                  <div class=\"sc-nano-global-search-results filters-wrap\">\n                    {{ @if(it.totalHits) }}\n                      <div class=\"sc-nano-global-search-results filters-header\">\n                        <strong class=\"sc-nano-global-search-results filters-title\">Filters</strong>\n                        <button class=\"sc-nano-global-search-results filters-reset\">Reset</button>\n                        <button class=\"sc-nano-global-search-results filters__close-filters close-filters icon-button\" aria-controls=\"main-search-filters\">\n                          <nano-icon class=\"sc-nano-global-search-results\" name=\"light/times\"></nano-icon>\n                        </button>\n                      </div>\n                    {{ /if }}\n\n                    <div>\n                      {{ @if(it.origFilters['type']) }}\n                        <nano-details class=\"sc-nano-global-search-results\" open={true} icon-rotation=\"180\">\n                          <strong slot=\"label\">Type</strong>\n                          <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n                          <nano-algolia-filter store-id=\"searchf1\" store-method=\"url-hash-push\" filter-name=\"type\">\n                            <script type=\"text/template\" slot=\"filter-template\">\n                              <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n                                <input class=\"sc-nano-global-search-results filter-cb\" type=\"checkbox\" value=\"{{ filter }}\" id=\"type-{{ filter }}-{{x}}\" />\n                                <label class=\"sc-nano-global-search-results filter-label\" for=\"type-{{ filter }}-{{x}}\">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            </script>\n                            <div slot=\"output\"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['channel']) }}\n                        <nano-details open={true} icon-rotation=\"180\">\n                          <strong slot=\"label\">Channels</strong>\n                          <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n                          <nano-algolia-filter store-id=\"searchf2\" store-method=\"url-hash-push\" filter-name=\"channel\">\n                            <script type=\"text/template\" slot=\"filter-template\">\n                              <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n                                <input class=\"filter-cb sc-nano-global-search-results\" type=\"checkbox\" value=\"{{ filter }}\" id=\"channel-{{ filter }}-{{x}}\" />\n                                <label class=\"filter-label sc-nano-global-search-results\" for=\"channel-{{ filter }}-{{x}}\">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            </script>\n                            <div slot=\"output\"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['authors']) }}\n                        <nano-details open={true} icon-rotation=\"180\">\n                          <strong slot=\"label\">Authors</strong>\n                          <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n                          <nano-algolia-filter store-id=\"searchf3\" store-method=\"url-hash-push\" filter-name=\"authors\">\n                            <script type=\"text/template\" slot=\"filter-template\">\n                              <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n                                <input class=\"filter-cb sc-nano-global-search-results\" type=\"checkbox\" value=\"{{ filter }}\" id=\"authors-{{ filter }}-{{x}}\" />\n                                <label class=\"filter-label sc-nano-global-search-results\" for=\"authors-{{ filter }}-{{x}}\">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            </script>\n                            <div slot=\"output\"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['categories_without_path']) }}\n                        <nano-details open={true} icon-rotation=\"180\">\n                          <strong slot=\"label\">Category</strong>\n                          <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n                          <nano-algolia-filter store-id=\"searchf4\" store-method=\"url-hash-push\" filter-name=\"categories_without_path\">\n                            <script type=\"text/template\" slot=\"filter-template\">\n                              <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                {{ @if(!filter.match(/publication/)) }}\n                                  <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n                                  <input class=\"sc-nano-global-search-results filter-cb\" type=\"checkbox\" value=\"{{ filter }}\" id=\"cwp-{{ filter }}-{{x}}\" />\n                                  <label class=\"sc-nano-global-search-results filter-label\" for=\"cwp-{{ filter }}-{{x}}\">\n                                    <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                  </label></li>\n                                {{ /if }}\n                              {{ /foreach }}\n                              </ul>\n                            </script>\n                            <div slot=\"output\"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['tags']) }}\n                        <nano-details open={true} icon-rotation=\"180\">\n                          <strong slot=\"label\">Tags</strong>\n                          <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n                          <nano-algolia-filter store-id=\"searchf5\" store-method=\"url-hash-push\" filter-name=\"tags\">\n                            <script type=\"text/template\" slot=\"filter-template\">\n                              <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n                                <input class=\"filter-cb sc-nano-global-search-results\" type=\"checkbox\" value=\"{{ filter | lowercase }}\" id=\"tags-{{ filter }}-{{x}}\" />\n                                <label class=\"filter-label sc-nano-global-search-results\" for=\"tags-{{ filter }}-{{x}}\">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            </script>\n                            <div slot=\"output\"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n                    </div>\n                  </div>\n                </div>\n              {{ /if }}\n            </div>`}\n          </script>\n          <div slot=\"output\"></div>\n          <slot />\n        </nano-algolia>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-346588cc.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{h as e,r as t,c as a,e as i,g as s}from"./p-ab5813a7.js";import{b as o,D as n,i as d,p as r,d as l,s as c,e as h,f as u,g as b,h as f,j as p,k as _,a as v}from"./p-f66958c1.js";import{c as x}from"./p-d99437a6.js";import{f as g}from"./p-f8f89998.js";var w;(function(e){e[e["Sunday"]=0]="Sunday";e[e["Monday"]=1]="Monday";e[e["Tuesday"]=2]="Tuesday";e[e["Wednesday"]=3]="Wednesday";e[e["Thursday"]=4]="Thursday";e[e["Friday"]=5]="Friday";e[e["Saturday"]=6]="Saturday"})(w||(w={}));function y(e,t){if(e==null||t==null){return false}return e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate()}function m(e,t){var a=new Date(e);a.setDate(a.getDate()+t);return a}function k(e,t=w.Monday){var a=new Date(e);var i=a.getDay();var s=(i<t?7:0)+i-t;a.setDate(a.getDate()-s);return a}function D(e,t=w.Monday){var a=new Date(e);var i=a.getDay();var s=(i<t?-7:0)+6-(i-t);a.setDate(a.getDate()+s);return a}function z(e){return new Date(e.getFullYear(),e.getMonth(),1)}function M(e){return new Date(e.getFullYear(),e.getMonth()+1,0)}function S(e,t,a){return C(e,t,a)===e}function C(e,t,a){const i=e.getTime();if(t&&t instanceof Date&&i<t.getTime()){return t}if(a&&a instanceof Date&&i>a.getTime()){return a}return e}function N(e,t){const a=[];let i=e;while(!y(i,t)){a.push(i);i=m(i,1)}a.push(i);return a}function T(e,t=w.Monday){const a=k(z(e),t);const i=D(M(e),t);return N(a,i)}const F=({focusedDay:t,today:a,day:i,onDaySelect:s,onKeyboardNavigation:o,focusedDayRef:n,inRange:d,disabled:r,isSelected:l})=>{const c=y(i,a);const h=y(i,t);const u=i.getMonth()!==t.getMonth()||r;const b=!d;function f(e){s(e,i)}return e("button",{class:{"duet-date__day":true,"is-outside":b,"is-disabled":u,"is-today":c},tabIndex:h?0:-1,onClick:f,onKeyDown:o,disabled:b,type:"button","aria-pressed":l?"true":"false",ref:e=>{if(h&&e&&n){n(e)}}},e("span",{"aria-hidden":"true"},i.getDate()),e("span",{class:"duet-date__vhidden"},i.toLocaleDateString(undefined,{day:"numeric",month:"long"})))};function j(e,t){const a=[];for(let i=0;i<e.length;i+=t){a.push(e.slice(i,i+t))}return a}function L(e,t,a){return e.map(((i,s)=>{const o=(s+t)%e.length;return a(e[o])}))}const A=({selectedDate:t,focusedDate:a,labelledById:i,localization:s,firstDayOfWeek:o,min:n,max:d,onDateSelect:r,onKeyboardNavigation:l,focusedDayRef:c,onMouseDown:h,onFocusIn:u,isDateDisabled:b})=>{const f=new Date;const p=T(a,o);return e("table",{class:"duet-date__table",role:"grid","aria-labelledby":i,onFocusin:u,onMouseDown:h},e("thead",null,e("tr",null,L(s.dayNames,o,(t=>e("th",{class:"duet-date__table-header",scope:"col"},e("span",{"aria-hidden":"true"},t.substr(0,2)),e("span",{class:"duet-date__vhidden"},t)))))),e("tbody",null,j(p,7).map((i=>e("tr",{class:"duet-date__row"},i.map((i=>e("td",{class:"duet-date__cell",role:"gridcell","aria-selected":y(i,t)?"true":undefined},e(F,{day:i,today:f,focusedDay:a,inRange:S(i,n,d),onDaySelect:r,onKeyboardNavigation:l,focusedDayRef:c,disabled:b(i),isSelected:y(i,t)})))))))))};const Y={buttonLabel:"Choose date",placeholder:"YYYY-MM-DD",selectedDateMessage:"Selected date is",prevMonthLabel:"Previous month",nextMonthLabel:"Next month",monthSelectLabel:"Month",yearSelectLabel:"Year",closeLabel:"Close window",keyboardInstruction:"You can use arrow keys to navigate dates",calendarHeading:"Choose a date",dayNames:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],monthNames:["January","February","March","April","May","June","July","August","September","October","November","December"],monthNamesShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]};const I=':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{--background:var(--nano-layer-bg, #fff);--active-color:var(--nano-color-base, var(--nano-color-primary, #007495));--active-text-color:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    );--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--inactive-color:var(--nano-button-color, #f0efed);display:block;font-size:16px}:host(.nano-color){--active-color:var(--nano-color-base, var(--nano-color-primary, #007495));--active-text-color:var(--nano-color-contrast);--focus-shadow:0 0 0 0.1875rem rgba(var(--nano-color-tint-rgb), 0.56)}.duet-date *,.duet-date *::before,.duet-date *::after{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0}.duet-date{-webkit-box-sizing:border-box;box-sizing:border-box;color:currentColor;display:block;margin:0;position:relative;text-align:left;width:100%}.duet-date__dialog{display:-webkit-box;display:-ms-flexbox;display:flex;top:100%;max-width:100%;width:100%}.duet-date__dialog.is-left{left:auto;right:0;width:auto}.duet-date__dialog-content{background:var(--background);min-width:290px;padding:16px 16px 20px;position:relative;-webkit-transform:none;transform:none;max-width:100%;width:100%}.duet-date__table{border-collapse:collapse;border-spacing:0;font-size:1em;line-height:1.25;text-align:center;width:100%}.duet-date__table-header{font-size:0.75em;font-weight:600;letter-spacing:1px;line-height:1.25;padding-bottom:8px;text-decoration:none;text-transform:uppercase}.duet-date__cell{text-align:center}.duet-date__day{-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;border-radius:50%;cursor:pointer;display:inline-block;font-size:0.875em;font-variant-numeric:tabular-nums;line-height:1.25;position:relative;text-align:center;vertical-align:middle;z-index:1;-webkit-transition:0.15s ease all;transition:0.15s ease all;height:2.5em;width:2.5em}.duet-date__day.is-today{-webkit-box-shadow:0 0 0 1px var(--active-color);box-shadow:0 0 0 1px var(--active-color);position:relative}.duet-date__day:hover::before,.duet-date__day.is-today::before{content:"";background:var(--active-color);border-radius:50%;bottom:0;left:0;opacity:0.16;position:absolute;right:0;top:0}[aria-selected=true] .duet-date__day{background:var(--active-color);color:var(--active-text-color);-webkit-box-shadow:none;box-shadow:none;outline:0}.duet-date__day:active{background:var(--active-color);-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);color:var(--active-text-color)}.duet-date__day:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);outline:0}.duet-date__day.is-disabled{background:transparent;-webkit-box-shadow:none;box-shadow:none;cursor:default;opacity:0.5}.duet-date__day.is-disabled::before{display:none}.duet-date__day.is-outside{background:var(--inactive-color);-webkit-box-shadow:none;box-shadow:none;cursor:default;opacity:0.6;pointer-events:none}.duet-date__day.is-outside::before{display:none}.duet-date__header{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:16px;width:100%}.duet-date__nav{white-space:nowrap}.duet-date__prev,.duet-date__next{background:var(--inactive-color);-moz-appearance:none;-webkit-appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;appearance:none;border:0;border-radius:50%;cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:distribute;justify-content:space-around;margin-left:8px;padding:0;-webkit-transition:background-color 300ms ease;transition:background-color 300ms ease;font-size:0.9em;height:2.2em;width:2.2em}.duet-date__prev:focus,.duet-date__next:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);outline:0}.duet-date__prev:active:focus,.duet-date__next:active:focus{-webkit-box-shadow:none;box-shadow:none}.duet-date__prev:disabled,.duet-date__next:disabled{cursor:default;opacity:0.5}.duet-date__prev nano-icon,.duet-date__next nano-icon{margin:0 auto}.duet-date__select{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin-top:4px;position:relative}.duet-date__select span{margin-right:4px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.duet-date__select span{margin-right:unset;-webkit-margin-end:4px;margin-inline-end:4px}}.duet-date__select select{cursor:pointer;font-size:1em;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:2}.duet-date__select select.focus-visible:focus+.duet-date__select-label{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow)}.duet-date__select-label{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:4px;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.25em;font-weight:600;line-height:1.25;padding:0 4px 0 8px;pointer-events:none;position:relative;width:100%;z-index:1}.duet-date__select-label nano-icon{font-size:0.55em}.duet-date__vhidden{border:0;clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;padding:0;position:absolute;top:0;width:1px}';function O(e,t){var a=[];for(var i=e;i<=t;i++){a.push(i)}return a}let R=class{constructor(e){t(this,e);this.nanoDatePicked=a(this,"nanoDatePicked",7);this.monthSelectId=o("NanoDateMonth");this.yearSelectId=o("NanoDateYear");this.dialogLabelId=o("NanoDateLabel");this.initialTouchX=null;this.initialTouchY=null;this.activeFocus=false;this.focusedDay=new Date;this.selectedDate="";this.min="";this.max="";this.firstDayOfWeek=n.Monday;this.localization=Y;this.isDateDisabled=()=>false;this.isModal=false;this.enableActiveFocus=()=>{this.activeFocus=true};this.disableActiveFocus=()=>{this.activeFocus=false};this.handleTouchStart=e=>{const t=e.changedTouches[0];this.initialTouchX=t.pageX;this.initialTouchY=t.pageY};this.handleTouchMove=e=>{e.preventDefault()};this.handleTouchEnd=e=>{const t=e.changedTouches[0];const a=t.pageX-this.initialTouchX;const i=t.pageY-this.initialTouchY;const s=70;const o=Math.abs(a)>=s&&Math.abs(i)<=s;if(o){this.addMonths(a<0?1:-1)}this.initialTouchY=null;this.initialTouchX=null};this.handleNextMonthClick=e=>{e.preventDefault();this.addMonths(1)};this.handlePreviousMonthClick=e=>{e.preventDefault();this.addMonths(-1)};this.handleKeyboardNavigation=e=>{if(e.key==="Tab"&&!e.shiftKey&&this.isModal){e.preventDefault();let t=this.firstFocusEle||this.firstFocusableElement;t.focus();return}var t=true;switch(e.key){case"ArrowRight":this.addDays(1);break;case"ArrowLeft":this.addDays(-1);break;case"ArrowDown":this.addDays(7);break;case"ArrowUp":this.addDays(-7);break;case"PageUp":if(e.shiftKey){this.addYears(-1)}else{this.addMonths(-1)}break;case"PageDown":if(e.shiftKey){this.addYears(1)}else{this.addMonths(1)}break;case"Home":this.startOfWeek();break;case"End":this.endOfWeek();break;default:t=false}if(t){e.preventDefault();this.enableActiveFocus()}};this.handleDaySelect=(e,t)=>{const a=!this.isDateDisabled(t);const i=d(t,r(this.min),r(this.max));if(!i||!a){return}if(t.getMonth()===this.focusedDay.getMonth()){this.setValue(t)}else{this.setFocusedDay(t)}};this.handleMonthSelect=e=>{this.setMonth(parseInt(e.target.value,10))};this.handleYearSelect=e=>{this.setYear(parseInt(e.target.value,10))};this.processFocusedDayNode=e=>{this.focusedDayNode=e;if(this.activeFocus){setTimeout((()=>e.focus()),0)}}}async setFocus(e=false,t=false){this.setFocusedDay(r(this.selectedDate)||new Date);if(e){setTimeout((e=>this.focusedDayNode.focus()),20);return}clearTimeout(this.focusTimeoutId);this.focusTimeoutId=setTimeout((()=>{if(t)g.force(this.monthSelectNode);this.monthSelectNode.focus()}),20)}handleSelectedDateChange(){this.setFocus(true)}addDays(e){this.setFocusedDay(l(this.focusedDay,e))}addMonths(e){this.setMonth(this.focusedDay.getMonth()+e)}addYears(e){this.setYear(this.focusedDay.getFullYear()+e)}startOfWeek(){this.setFocusedDay(c(this.focusedDay,this.firstDayOfWeek))}endOfWeek(){this.setFocusedDay(h(this.focusedDay,this.firstDayOfWeek))}setMonth(e){const t=u(b(this.focusedDay),e);const a=f(t);const i=u(this.focusedDay,e);this.setFocusedDay(p(i,t,a))}setYear(e){const t=_(b(this.focusedDay),e);const a=f(t);const i=_(this.focusedDay,e);this.setFocusedDay(p(i,t,a))}setFocusedDay(e){this.focusedDay=p(e,r(this.min),r(this.max))}setValue(e){this.selectedDate=v(e);this.nanoDatePicked.emit({value:this.selectedDate,valueAsDate:e})}connectedCallback(){if(this.yearSelectNode)g.observe(this.yearSelectNode);if(this.monthSelectNode)g.observe(this.monthSelectNode)}componentWillLoad(){this.handleSelectedDateChange()}componentDidLoad(){this.connectedCallback()}disconnectedCallback(){g.unobserve(this.yearSelectNode);g.unobserve(this.monthSelectNode)}render(){const t=r(this.selectedDate);const a=(t||this.focusedDay).getFullYear();const s=this.focusedDay.getMonth();const o=this.focusedDay.getFullYear();const n=r(this.min);const l=r(this.max);const c=n!=null&&n.getMonth()===s&&n.getFullYear()===o;const h=l!=null&&l.getMonth()===s&&l.getFullYear()===o;let u=a-10;let p=a+10;if(n)u=n.getFullYear();if(l)p=l.getFullYear();return e(i,{class:Object.assign({},x(this.color))},e("div",{class:"duet-date"},e("div",{class:{"duet-date__dialog":true,"is-active":true},onTouchMove:this.handleTouchMove,onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},e("div",{class:"duet-date__dialog-content"},e("div",{class:"duet-date__vhidden duet-date__instructions","aria-live":"polite"},this.localization.keyboardInstruction),e("div",{class:"duet-date__header",onFocusin:this.disableActiveFocus},e("div",null,e("h2",{id:this.dialogLabelId,class:"duet-date__vhidden","aria-live":"polite"},this.localization.monthNames[s]," ",this.focusedDay.getFullYear()),e("label",{htmlFor:this.monthSelectId,class:"duet-date__vhidden"},this.localization.monthSelectLabel),e("div",{class:"duet-date__select"},e("select",{id:this.monthSelectId,class:"duet-date__select--month",ref:e=>this.firstFocusableElement=this.monthSelectNode=e,onChange:this.handleMonthSelect},this.localization.monthNames.map(((t,a)=>e("option",{key:t,value:a,selected:a===s,disabled:!d(new Date(o,a,1),n?b(n):null,l?f(l):null)},t)))),e("div",{class:"duet-date__select-label","aria-hidden":"true"},e("span",null,this.localization.monthNamesShort[s]),e("nano-icon",{name:"light/chevron-down"}))),e("label",{htmlFor:this.yearSelectId,class:"duet-date__vhidden"},this.localization.yearSelectLabel),e("div",{class:"duet-date__select"},e("select",{id:this.yearSelectId,class:"duet-date__select--year",onChange:this.handleYearSelect,ref:e=>this.yearSelectNode=e},O(u,p).map((t=>e("option",{key:t,selected:t===o},t)))),e("div",{class:"duet-date__select-label","aria-hidden":"true"},e("span",null,this.focusedDay.getFullYear()),e("nano-icon",{name:"light/chevron-down"})))),e("div",{class:"duet-date__nav"},e("button",{class:"duet-date__prev",onClick:this.handlePreviousMonthClick,disabled:c,type:"button"},e("nano-icon",{name:"light/chevron-left"}),e("span",{class:"duet-date__vhidden"},this.localization.prevMonthLabel)),e("button",{class:"duet-date__next",onClick:this.handleNextMonthClick,disabled:h,type:"button"},e("nano-icon",{name:"light/chevron-right"}),e("span",{class:"duet-date__vhidden"},this.localization.nextMonthLabel)))),e("div",null,e(A,{selectedDate:t,focusedDate:this.focusedDay,onDateSelect:this.handleDaySelect,onKeyboardNavigation:this.handleKeyboardNavigation,labelledById:this.dialogLabelId,localization:this.localization,firstDayOfWeek:this.firstDayOfWeek,focusedDayRef:this.processFocusedDayNode,min:n,max:l,isDateDisabled:this.isDateDisabled}))))))}get host(){return s(this)}static get watchers(){return{selectedDate:["handleSelectedDateChange"]}}};R.style=I;export{R as nano_date_picker};
-//# sourceMappingURL=p-346588cc.entry.js.map

package/dist/nano-components/p-39a5280e.system.entry.js

@@ -1,5 +0,0 @@
-var __awaiter=this&&this.__awaiter||function(t,e,n,i){function o(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,s){function a(t){try{l(i.next(t))}catch(e){s(e)}}function r(t){try{l(i["throw"](t))}catch(e){s(e)}}function l(t){t.done?n(t.value):o(t.value).then(a,r)}l((i=i.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(s[0]&1)throw s[1];return s[1]},trys:[],ops:[]},i,o,s,a;return a={next:r(0),throw:r(1),return:r(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function r(t){return function(e){return l([t,e])}}function l(a){if(i)throw new TypeError("Generator is already executing.");while(n)try{if(i=1,o&&(s=a[0]&2?o["return"]:a[0]?o["throw"]||((s=o["return"])&&s.call(o),0):o.next)&&!(s=s.call(o,a[1])).done)return s;if(o=0,s)a=[a[0]&2,s.value];switch(a[0]){case 0:case 1:s=a;break;case 4:n.label++;return{value:a[1],done:false};case 5:n.label++;o=a[1];a=[0];continue;case 7:a=n.ops.pop();n.trys.pop();continue;default:if(!(s=n.trys,s=s.length>0&&s[s.length-1])&&(a[0]===6||a[0]===2)){n=0;continue}if(a[0]===3&&(!s||a[1]>s[0]&&a[1]<s[3])){n.label=a[1];break}if(a[0]===6&&n.label<s[1]){n.label=s[1];s=a;break}if(s&&n.label<s[2]){n.label=s[2];n.ops.push(a);break}if(s[2])n.ops.pop();n.trys.pop();continue}a=e.call(t,n)}catch(r){a=[6,r];o=0}finally{i=s=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};var __spreadArray=this&&this.__spreadArray||function(t,e){for(var n=0,i=e.length,o=t.length;n<i;n++,o++)t[o]=e[n];return t};
-/*!
- * Web Components for Nanopore digital Web Apps
- */System.register(["./p-59b3d24b.system.js","./p-1c216ca4.system.js","./p-ef053a2f.system.js","./p-1d13dbdf.system.js","./p-1f2b5241.system.js","./p-09d2d944.system.js"],(function(t){"use strict";var e,n,i,o,s,a,r,l,u,c,p;return{setters:[function(t){e=t.r;n=t.c;i=t.f;o=t.h;s=t.e;a=t.g},function(t){r=t.r},function(t){l=t.d},function(t){u=t.g},function(t){c=t.g},function(t){p=t.g}],execute:function(){var d=":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-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--padding-start:var(--nano-spacing-xlarge, 24px);--padding-end:var(--nano-spacing-xlarge, 24px);--font-size:0.8em;--color:#b5aea7;color:var(--color)}.dlist--isfiltered ::slotted(*:not(nano-option):not([slot=no-result]):not([slot=list-top]):not([slot=list-bottom])){display:none !important}.dlist__dropdown{--min-width:100%;--overflow:auto}.dlist__status{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}.dlist__menu{--padding-top:inherit;--padding-bottom:inherit;--padding-start:inherit;--padding-end:inherit;--font-size:inherit}";function h(t){var e;if(t.id){e=document.querySelector("label[for='"+t.id+"']")}if(!e){e=t.closest("label")}return e}var f=0;var b=t("nano_datalist",function(){function t(t){var i=this;e(this,t);this.nanoSelect=n(this,"nanoSelect",7);this.nanoDeselect=n(this,"nanoDeselect",7);this.nanoOptionsUpdated=n(this,"nanoOptionsUpdated",7);this.isNanoInput=false;this.typeToSelect="";this.listId="nano-datalist-"+f++;this.isFiltered=false;this.shouldFocus=false;this._allOptEles=[];this.actvOptEles=[];this.canOpen=true;this.optionIds=[];this.selected=[];this._dropDownConfig={skidding:-1};this.options=[];this.type="input";this.open=false;this.disableFilter=false;this.disabled=false;this.optSelected=function(t){t.stopPropagation();i.changeInputValue(t.detail);r((function(){return i.inputChange()}));if(i.type==="select")i.shouldOpen=false};this.handleShow=function(){return __awaiter(i,void 0,void 0,(function(){return __generator(this,(function(t){if(this.shouldFocus){this.shouldFocus=false;this.listBox.setFocus()}else if(this.type==="select")this.listBox.showActiveElement();return[2]}))}))};this.inputClick=function(){i.shouldOpen=true;i.manageDropdownDisplay()};this.inputKeydown=function(t){var e=["Shift","ArrowRight","ArrowLeft","Escape","Enter","Tab"];if(e.includes(t.key)){if(t.key==="Tab")i.shouldOpen=false;return}if(i.type==="select"&&!["ArrowDown","ArrowUp"].includes(t.key)&&(t.key!==" "||i.typeToSelectTimeout)){if(t.key===" "||/^[a-z0-9]+$/i.test(t.key)){clearTimeout(i.typeToSelectTimeout);i.typeToSelectTimeout=window.setTimeout((function(){i.typeToSelect="";i.typeToSelectTimeout=0}),750);i.typeToSelect+=t.key;i.setOptStartsWith()}return}i.shouldOpen=true;i.manageDropdownDisplay();if(["ArrowDown","ArrowUp"].includes(t.key))i.shouldFocus=true};this.optionKeyDown=function(t){var e=["Shift","ArrowUp","ArrowDown","Escape","Enter","Tab","Space","PageUp","PageDown","Home","End"," "];if(e.includes(t.key)){if(t.key==="Escape")i.connectedInput.focus();return}var n=["Delete","Backspace"];if(i.type!=="select"&&(!i.exactMatch||n.includes(t.key))){i.connectedInput.focus()}};this.inputChange=l(this.inputChange.bind(this),50)}Object.defineProperty(t.prototype,"allOptEles",{get:function(){return this._allOptEles},set:function(t){var e=this;var n;this._allOptEles=t;if((n=this.connectedInput)===null||n===void 0?void 0:n.value)return;t.forEach((function(t){if(t.selected&&!e.selected.includes(t.value)){e.changeInputValue(t)}}))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"dropDownConfig",{get:function(){return this._dropDownConfig},set:function(t){this._dropDownConfig=Object.assign(Object.assign({},this._dropDownConfig),t)},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"activeOptions",{get:function(){return this.allOptEles},enumerable:false,configurable:true});t.prototype.openWatcher=function(){var t=this;i((function(){t.nanoDropdown.open=t.open;t.connectedInput.setAttribute("aria-expanded",t.open.toString())}))};t.prototype.watchInputChange=function(){return __awaiter(this,void 0,void 0,(function(){var t,e;return __generator(this,(function(n){switch(n.label){case 0:if(!(t=this.host.closest("nano-input")))return[3,2];this.isNanoInput=true;e=this;return[4,t.getInputElement()];case 1:e.connectedInput=n.sent();return[3,3];case 2:if(this.input&&typeof this.input==="string"&&(t=document.querySelector(this.input))){this.isNanoInput=false;this.connectedInput=t}else if(this.input instanceof HTMLElement){this.connectedInput=this.input}n.label=3;case 3:return[2]}}))}))};t.prototype.manageSlotChangeListener=function(){var t=this;var e;if(!this.host)return;if((!this.options||!this.options.length)&&!this.mo){{var n=this.mo=new MutationObserver((function(){return t.processSlottedContent()}));n.observe(this.host,{childList:true,subtree:true})}this.processSlottedContent();return}if((e=this.options)===null||e===void 0?void 0:e.length){if(!!this.mo){this.mo.disconnect();this.mo=undefined}i((function(){var e;t.allOptEles=t.options.flatMap((function(e,n){if(e.value||e.label){var i=Object.assign(document.createElement("nano-option"),{label:e.label,value:e.value,ariaPosinset:n,ariaSetsize:t.options.length,selected:e.selected,id:t.listId+"-option-"+n,textContent:e.label?e.label:e.value,slot:"internal-opts"});t.host.append(i);return i}}));if(((e=t.connectedInput)===null||e===void 0?void 0:e.value.length)&&t.type!=="select"){t.inputChange()}else t.actvOptEles=__spreadArray([],t.allOptEles)}))}};t.prototype.watchTypeChange=function(){if(!this.connectedInput)return;var t={closeOnSelect:false};var e="both";var n=false;switch(this.type){case"selctMulti":break;case"select":e="list";n=true;t={closeOnSelect:true,placement:"center"};break}if(!this.isNanoInput){t.tetherTo=this.connectedInput}this.dropDownConfig=Object.assign(Object.assign({},this.dropDownConfig),t);this.connectedInput.setAttribute("aria-autocomplete",e);this.connectedInput.readOnly=n};t.prototype.manageInputEvents=function(t,e){var n=this;var o;if(!!e){var s=e.closest("nano-input");if(s){s.removeEventListener("nanoChange",this.inputChange)}e.removeEventListener("change",this.inputChange);e.removeEventListener("click",this.inputClick);e.removeEventListener("keydown",this.inputKeydown);e.removeEventListener("input",this.inputChange);this.inputLabel=null;i((function(){e.removeAttribute("role");e.removeAttribute("aria-expanded");e.removeAttribute("aria-controls");e.removeAttribute("aria-owns");e.removeAttribute("aria-haspopup");e.removeAttribute("aria-autocomplete");e.removeAttribute("autocomplete")}))}if(!!t){var s=t.closest("nano-input");if(s){s.addEventListener("nanoChange",this.inputChange)}t.addEventListener("change",this.inputChange);t.addEventListener("click",this.inputClick);t.addEventListener("keydown",this.inputKeydown);t.addEventListener("input",this.inputChange);this.listId=this.host.id||this.listId;this.inputLabel=((o=t===null||t===void 0?void 0:t.labels)===null||o===void 0?void 0:o.item(0))||h(t);i((function(){n.host.id=n.listId;t.setAttribute("role","combobox");t.setAttribute("aria-expanded","false");t.setAttribute("aria-controls",n.listId);t.setAttribute("aria-owns",n.listId);t.setAttribute("aria-haspopup","listbox");t.setAttribute("autocomplete","off")}))}};t.prototype.watchActvOptChange=function(){var t=this;var e;var n=0;var o=((e=this.connectedInput)===null||e===void 0?void 0:e.value)||"";var s=[];i((function(){t.allOptEles.forEach((function(e,i){if(t.actvOptEles.includes(e)){n++;e.setAttribute("aria-posinset",n+"");e.setAttribute("aria-setsize",t.actvOptEles.length+"");e.hidden=false;t.isSelected(e,o)}else{e.removeAttribute("aria-posinset");e.removeAttribute("aria-setsize");e.hidden=true;e.selected=false}e.id=t.listId+"-option-"+i;s.push(e.id)}));t.optionIds=s}))};t.prototype.manageCanOpen=function(){if(this.actvOptEles.length||this.hasNoResult)this.canOpen=true;else this.canOpen=false};t.prototype.manageDropdownDisplay=function(){if(this.shouldOpen&&this.canOpen&&!this.disabled)this.open=true;if(!this.shouldOpen||!this.canOpen)this.open=false};t.prototype.fireActiveOptsEvent=function(){this.nanoOptionsUpdated.emit(this.actvOptEles)};t.prototype.isSelected=function(t,e){if(e===t.value||this.selected.includes(t.value)){t.selected=true}else t.selected=false};Object.defineProperty(t.prototype,"dropwdownOpen",{get:function(){if(!this.nanoDropdown||!this.open)return false;return true},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"exactMatch",{get:function(){var t=this;return this.allOptEles.find((function(e){return t.connectedInput.value===e.value}))},enumerable:false,configurable:true});t.prototype.changeInputValue=function(t){var e;var n;if(this.selected.includes(t.value)){this.selected=this.selected.filter((function(e){return e!==t.value}));n=this.nanoDeselect.emit(t)}else{this.selected=__spreadArray([],this.selected);n=this.nanoSelect.emit(t)}if(!n.defaultPrevented){if(this.connectedInput)this.connectedInput.value=t.value;var i=new window.Event("change");(e=this.connectedInput)===null||e===void 0?void 0:e.dispatchEvent(i)}};t.prototype.setOptStartsWith=function(){var t=this;var e=function(e){return e.toLowerCase().substring(0,t.typeToSelect.length)===t.typeToSelect};var n=this.allOptEles.find((function(t){return t.value.trim().length>0&&!t.disabled&&(e(t.textContent)||e(t.value)||e(t.label)||e(t.filterMeta))}));if(n)this.changeInputValue(n)};t.prototype.processSlottedContent=function(){var t=this;r((function(){var e;t.allOptEles=Array.from(t.host.querySelectorAll("nano-option"));t.hasNoResult=!!t.host.querySelector('[slot="no-result"]');if(((e=t.connectedInput)===null||e===void 0?void 0:e.value.length)&&t.type!=="select"){t.inputChange()}else t.actvOptEles=t.allOptEles}))};t.prototype.inputChange=function(){var t=this;if(this.disableFilter){this.actvOptEles=this.allOptEles;return}var e=this.connectedInput.value;var n=e.trim().toLowerCase();var i=false;var o=[];var s=function(t){return t.toLowerCase().indexOf(n)>-1};this.allOptEles.forEach((function(n){if((e===n.value||e===n.label)&&t.type!=="selctMulti"){n.selected=true;i=true}else t.isSelected(n,e)}));this.allOptEles.forEach((function(t){if(!n.length||i){o.push(t)}else if(t.value.trim().length>0&&!t.disabled&&(s(t.textContent)||s(t.value)||s(t.label)||s(t.filterMeta))){o.push(t)}}));this.isFiltered=n.length&&!i;this.actvOptEles=o};t.prototype.connectedCallback=function(){this.watchInputChange()};t.prototype.componentDidLoad=function(){this.manageSlotChangeListener();this.openWatcher()};t.prototype.componentDidRender=function(){var t=this;setTimeout((function(){if(!t.connectedInput)console.warn("no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop",t.host)}),500)};t.prototype.render=function(){var t=this;return o(s,{role:"listbox","aria-owns":this.optionIds.join(" "),"aria-label":"Select options from the list below"},o("nano-dropdown",Object.assign({},this.dropDownConfig,{ref:function(e){return t.nanoDropdown=e},dialogTitle:"Select options from the list below",class:{dlist__dropdown:true,"dlist--isfiltered":this.isFiltered},onNanoAfterShow:this.handleShow,onNanoAfterHide:function(e){return t.open=false}}),o("nano-menu",{hidden:!this.actvOptEles.length,type:"listbox",label:this.inputLabel?this.inputLabel.textContent:undefined,class:{dlist__menu:true,"dlist__menu--open":this.dropwdownOpen},tabIndex:-1,onNanoSelect:this.optSelected,onKeyDown:this.optionKeyDown,ref:function(e){return t.listBox=e}},o("slot",{name:"list-top"}),!this.options.length&&o("slot",null),!!this.options.length&&o("slot",{name:"internal-opts"}),o("slot",{name:"list-bottom"})),o("nano-menu",{type:"listbox",label:"No results found",hidden:!!this.actvOptEles.length,class:{dlist__menu:true,"dlist__menu--open":this.dropwdownOpen}},o("slot",{name:"no-result"})),!!this.actvOptEles&&o("div",{"aria-live":"polite",role:"status",class:"dlist__status"},this.actvOptEles.length," result",this.actvOptEles.length>1?"s":""," available.")))};Object.defineProperty(t.prototype,"host",{get:function(){return a(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{open:["openWatcher"],input:["watchInputChange"],options:["manageSlotChangeListener"],type:["watchTypeChange"],connectedInput:["watchTypeChange","manageInputEvents"],selected:["watchActvOptChange"],actvOptEles:["watchActvOptChange","manageCanOpen","fireActiveOptsEvent"],hasNoResult:["manageCanOpen"],shouldOpen:["manageDropdownDisplay"],canOpen:["manageDropdownDisplay"]}},enumerable:false,configurable:true});return t}());b.style=d;var 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-start:var(--nano-spacing-medium, 16px);--padding-end:var(--nano-spacing-medium, 16px);--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--secondary-padding-top:0;--secondary-padding-bottom:0;--bg-color-hover:#f2f7f9;--bg-color-focus:#f2f7f9;--bg-color-selected:#f2f7f9;--color-hover:#007495;--color-selected:#007495;--color-focus:#007495;--focus-outline:none;--font-size:0.9em;display:block}.menu{font-size:var(--font-size, 0.9em);-ms-scroll-chaining:none;overscroll-behavior:none;min-width:var(--width);position:relative}.menu:focus{outline:none}::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)){padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:block}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)){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)}}";var v=!!document.head.attachShadow;var m=t("nano_menu",function(){function t(t){var i=this;e(this,t);this.nanoFocus=n(this,"nanoFocus",7);this.nanoBlur=n(this,"nanoBlur",7);this.nanoSelect=n(this,"nanoSelect",7);this.ignoreMouseEvents=false;this.typeToSelect="";this._hasFocus=false;this.type="menu";this.handleFocus=function(){i.setActiveFocusItem(i.selectedItem||i.getItems[0]);i._hasFocus=true;i.nanoFocus.emit()};this.handleClick=function(t){var e=t.target;var n=e.closest("nano-nav-item");if(n&&!n.disabled){i.nanoSelect.emit(n)}};this.handleKeyDown=function(t){clearTimeout(i.ignoreMouseTimeout);i.ignoreMouseTimeout=setTimeout((function(){return i.ignoreMouseEvents=false}),500);i.ignoreMouseEvents=true;switch(t.key){case" ":if(i.activeItem)i.activeItem.click();break;case"ArrowDown":case"ArrowUp":case"PageDown":case"PageUp":case"Home":case"End":var e=i.getItems;var n=i.activeItem;var o=e.indexOf(n);if(e.length){t.preventDefault();if(t.key==="ArrowDown"){o++}else if(t.key==="ArrowUp"){o--}else if(t.key==="Home"||t.key==="PageUp"){o=0}else if(t.key==="End"||t.key==="PageDown"){o=e.length-1}if(o<0)o=e.length-1;if(o>e.length-1)o=0;i.setActiveFocusItem(e[o]);if(e[o])e[o].scrollIntoView({block:"nearest"});return}break}if(t.key===" "||/^[a-z0-9]+$/i.test(t.key)){clearTimeout(i.typeToSelectTimeout);i.typeToSelectTimeout=setTimeout((function(){return i.typeToSelect=""}),750);i.typeToSelect+=t.key;var e=i.getItems;for(var s=0,a=e;s<a.length;s++){var r=a[s];var l=r.shadowRoot.querySelector("slot:not([name])");var u=c(l).toLowerCase().trim();if(u.substring(0,i.typeToSelect.length)===i.typeToSelect){i.setActiveFocusItem(r);break}}}};this.handleMouseOver=function(t){var e=t.target;var n=e.closest("nano-nav-item")||e.closest("nano-option");if(n&&!i.ignoreMouseEvents){i.setActiveFocusItem(n)}}}Object.defineProperty(t.prototype,"hasFocus",{get:function(){return this._hasFocus},enumerable:false,configurable:true});t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){if((t=this.menu)===null||t===void 0?void 0:t.focus)this.menu.focus({preventScroll:true});return[2]}))}))};t.prototype.removeFocus=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){if((t=this.menu)===null||t===void 0?void 0:t.blur)this.menu.blur();return[2]}))}))};t.prototype.showActiveElement=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(this.selectedItem)this.selectedItem.scrollIntoView({block:"nearest"});return[2]}))}))};t.prototype.resetActiveItem=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.getItems.filter((function(t){return t.tagName.toLowerCase()==="nano-option"})).map((function(t){return t.setAttribute("tabindex","-1")}));return[2]}))}))};Object.defineProperty(t.prototype,"getItems",{get:function(){var t;var e=this.el.querySelectorAll("nano-nav-item.secondary-open");if(e.length){var n=e[e.length-1];t=Array.from(n.querySelectorAll("nano-nav-item, nano-option"))}else{t=u(this.el,"nano-nav-item, nano-option","slot")}return t.filter((function(t){return!t.disabled&&!t.hidden}))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"activeItem",{get:function(){var t=p();return this.getItems.find((function(e){return e.getAttribute("tabindex")==="0"||e===t||e.classList.contains("has-focus")}))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"selectedItem",{get:function(){return this.getItems.find((function(t){return t.selected}))},enumerable:false,configurable:true});t.prototype.setActiveFocusItem=function(t,e){if(e===void 0){e=true}return __awaiter(this,void 0,void 0,(function(){var n,i;return __generator(this,(function(o){n=this.getItems;i=!t||t.disabled?n.find((function(t){return t.selected}))||n[0]:t;n.filter((function(t){return t.tagName.toLowerCase()==="nano-option"})).map((function(t){return t.setAttribute("tabindex",t===i?"0":"-1")}));if(!e)return[2];if(i){i.setFocus?i.setFocus():i.focus()}else this.menu.focus();return[2]}))}))};t.prototype.handleBlur=function(t){var e=this;if(!this.hasFocus)return;var n=t;var i;if(n.key){if(n.key!=="Tab")return;i=p()&&p().closest(this.el.tagName.toLowerCase())===this.el}else i=!!t.composedPath().find((function(t){return t===e.el}));if(!i){this.resetActiveItem();this._hasFocus=false;this.nanoBlur.emit()}};t.prototype.render=function(){var t;var e=this;return o(s,{class:{legacy:!v}},o("div",{onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onFocus:this.handleFocus,"aria-label":this.label?this.label:undefined,role:this.type,ref:function(t){return e.menu=t},part:"base",class:(t={menu:true},t["menu--"+this.type]=true,t["menu--has-focus"]=this.hasFocus,t),tabIndex:-1},o("slot",null)))};Object.defineProperty(t.prototype,"el",{get:function(){return a(this)},enumerable:false,configurable:true});return t}());m.style=g;var y=":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{--bg:none;--bg-selected:var(--nano-select-opt-bg, #f2f7f9);--bg-focus:var(--nano-color-base, var(--nano-color-primary-tint, #2689a5));--bg-disabled:none;--color:var(--input-text-color, var(--nano-input-text-color, #4a4a4a));--color-selected:var(--nano-color-base, var(--nano-color-primary, #007495));--color-focus:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--color-disabled:#b5aea7;--opt-icon-size:1.6em;display:block;color:var(--color);overflow:hidden;font-size:14px;font-size:clamp(12px, .9em, 16px)}:host(:focus){outline:none}.option{position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:100%;background:var(--bg);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.option{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)}}:host(:focus) .option:not(.option--disabled),:host .option.option--selected{outline:none;background:var(--bg-selected);color:var(--color-selected)}:host(:focus) .option:not(.option--disabled){background:var(--bg-focus);color:var(--color-focus)}.option.option--disabled{outline:none;color:var(--color-disabled);cursor:not-allowed;background:var(--bg-disabled)}.option.option--novalue{font-style:italic;opacity:0.7}.option__label{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.option__start{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.option__start ::slotted(nano-icon){font-size:var(--opt-icon-size)}.option__start ::slotted(:last-child){margin-right:0.5em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.option__start ::slotted(:last-child){margin-right:unset;-webkit-margin-end:0.5em;margin-inline-end:0.5em}}.option__end{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.option__end ::slotted(nano-icon){font-size:var(--opt-icon-size)}.option__end ::slotted(:first-child){margin-left:0.5em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.option__end ::slotted(:first-child){margin-left:unset;-webkit-margin-start:0.5em;margin-inline-start:0.5em;}}.option__check{visibility:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;left:0.6em;top:calc(50% - 0.6em);-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:0.9em}.option--selected:not(.option--novalue) .option__check{visibility:visible}";var w=0;var x=t("nano_option",function(){function t(t){e(this,t);this.nanoSelect=n(this,"nanoSelect",7);this.optId="nano-option-"+w++;this.hasFocus=false;this.value="";this.label="";this.selected=false;this.disabled=false;this.filterMeta="";this.handleClick=l(this.handleClick.bind(this),5)}t.prototype.valueChanged=function(){if(!this.value||!this.value.length)this.value=this.labelContent};t.prototype.labelChanged=function(){if(!this.label||!this.label.length)this.label=this.labelContent.length?this.labelContent:this.value};t.prototype.handleKeyDown=function(t){if(t.key!==" "&&t.key!=="Enter")return;t.preventDefault();this.nanoSelect.emit(this.host)};t.prototype.handleClick=function(){if(this.disabled)return;this.nanoSelect.emit(this.host)};Object.defineProperty(t.prototype,"labelContent",{get:function(){return u(this.host,"*:not([slot])",false).map((function(t){return t.textContent})).join(" ").trim()},enumerable:false,configurable:true});t.prototype.componentWillLoad=function(){this.valueChanged();this.labelChanged()};t.prototype.render=function(){return o(s,{role:"option","aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":"false"},o("div",{onMouseDown:this.handleClick,id:this.optId,class:{option:true,"option--selected":this.selected,"option--disabled":this.disabled,"option--novalue":!this.value}},o("div",{part:"check-icon",class:"option__check"},o("slot",{name:"check-icon"},o("nano-icon",{name:"light/check","aria-hidden":"true"}))),o("div",{part:"start",class:"option__start"},o("slot",{name:"start"})),o("div",{part:"label",class:"option__label"},o("slot",null,this.label||this.value)),o("div",{part:"end",class:"option__end"},o("slot",{name:"end"}))))};Object.defineProperty(t.prototype,"host",{get:function(){return a(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{value:["valueChanged"],label:["labelChanged"]}},enumerable:false,configurable:true});return t}());x.style=y}}}));
-//# sourceMappingURL=p-39a5280e.system.entry.js.map