@nanoporetech-digital/components 6.8.3 → 6.8.5

package/dist/nano-components/nano-global-search-results.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["globalSearchResultsCss","filterOldPosts","Math","floor","Date","now","GlobalSearchResults","this","resultClick","e","hit","target","closest","tagName","searchInsight","sendClick","index","algoliaResults","eventName","queryID","objectIDs","dataset","hitId","positions","Number","hitCount","showFiltersClick","filtersDiv","tabIndex","classList","add","setAttribute","document","body","style","overflow","setTimeout","focus","removeFilterClick","removeFilter","filter","filterVal","tagClick","preventDefault","tagVal","value","toLowerCase","algoliaEle","querySelector","indexOf","goback","goBackEvent","nanoSearchGoBack","emit","defaultPrevented","removeAllFilters","query","showResults","handleAlgoliaCredsChange","apiKey","appId","handleAlgoliaIndexChange","searchIndex","handleAlgoliaEleChange","indexName","filters","handleGlobalNavReset","algoliaResultsEle","handleGlobalNavSearch","detail","meta","client","name","indexTitle","domain","replicas","handleReorder","composedPath","find","ele","contains","changeOrder","attachListeners","init","id","attachResultListeners","querySelectorAll","forEach","item","addEventListener","closefilters","filterWrap","stopPropagation","oldResults","toggleOldResults","checked","el","resultEle","removeEventListener","openFilterBtn","tags","Array","from","tag","async","ev","replicaIndex","facet","removeFilters","remove","show","f","startsWith","connectedCallback","componentDidLoad","window","ro","ResizeObserver","entries","entry","contentRect","width","currentWidth","observe","render","h","Host","class","small","dir","ownerDocument","undefined","ref","requestAnimationFrame","slot"],"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"],"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-block-size: calc(100vh - 63px);\n  justify-content: space-between;\n\n  &__wrap {\n    /* autoprefixer: ignore next */\n    display: contents;\n    block-size: 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    inset-block-start: -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-block-end: 1em;\n\n    &::after {\n      content: '';\n      inline-size: calc(100% - 30px);\n      inset-inline-start: 30px;\n      position: relative;\n      border-block-end: 1px solid #e5eef1;\n      padding-block-start: 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;\n    letter-spacing: 2px;\n    flex-wrap: wrap;\n    margin-block-end: 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    margin-inline: 0 5px;\n    margin-block: 0 3px;\n    padding-inline: 7px;\n    padding-block: 10px;\n    font-size: 12px;\n    color: rgb(69 85 86 / 85%);\n  }\n\n  &__applied-filter {\n    padding-inline: 8px 2px;\n    padding-block: 5px 3px;\n    margin-inline: 0 5px;\n    margin-block: 0 5px;\n    color: map.get($colors, darkgrey);\n    font-size: 11px;\n    border-radius: 2px;\n    border: solid 1px rgb(0 132 169 / 50%);\n    background-color: rgb(0 132 169 / 20%);\n    line-height: 1;\n\n    .icon-button {\n      padding-inline: 10px 4px;\n      padding-block: 2px 1px;\n\n      nano-icon {\n        pointer-events: none;\n      }\n    }\n  }\n\n  .topbar {\n    &__bkbtn {\n      position: relative;\n      inset-inline-start: -7px;\n    }\n\n    &__query {\n      :host(.small) & {\n        display: none;\n      }\n    }\n\n    &__filtering {\n      display: flex;\n      align-items: center;\n      margin-block: 0;\n      margin-inline: 1em 0;\n      flex: 1;\n    }\n\n    &__order {\n      min-inline-size: 175px;\n      max-inline-size: 200px;\n      margin-inline-start: auto;\n\n      :host(.small) & {\n        max-inline-size: 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      margin-inline-start: 0.5em;\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      :host(.small) & {\n        display: flex;\n      }\n    }\n\n    &__filter-count {\n      inline-size: 12px;\n      block-size: 12px;\n      box-shadow: inset 0 3px 4px 0 rgb(0 0 0 / 20%);\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-block-end: 3px;\n    }\n  }\n\n  &__results {\n    font-size: 14px;\n    padding: 1em 40px;\n    color: rgb(69 85 86 / 85%);\n    inline-size: 70%;\n    block-size: 100%;\n\n    @include media-breakpoint-down('sm') {\n      padding: 1em 20px;\n    }\n\n    :host(.small) & {\n      inline-size: 100%;\n    }\n  }\n\n  &__filters {\n    outline: none;\n    padding-inline: 0 40px;\n    padding-block: 1.8em 1em;\n\n    @include media-breakpoint-down('sm') {\n      padding-inline-end: 20px;\n    }\n\n    flex: 1 1 30%;\n    box-sizing: border-box;\n\n    :host(:not(.small)) & {\n      max-inline-size: 350px;\n      min-inline-size: 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    inline-size: 0;\n    block-size: 0;\n    z-index: 10;\n    inset-block-start: 0;\n    inset-inline-end: 0;\n    transition: all 0s ease 0.5s;\n    background: none;\n\n    &.show {\n      block-size: 100vh;\n      inline-size: 100vw;\n      transition: all 0s ease 0s;\n\n      &::after {\n        opacity: 1;\n      }\n    }\n\n    &::after {\n      content: '';\n      background: rgb(0 0 0 / 50%);\n      position: absolute;\n      inset: 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      margin-inline: auto 0;\n      margin-block: 0;\n    }\n  }\n\n  &__old-posts {\n    margin-inline-start: 1rem;\n  }\n\n  &-wrap {\n    :host(.small) & {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-end: 0;\n      background: rgb(247 246 246);\n      transform: translateX(100%);\n      inline-size: 300px;\n      min-inline-size: 200px;\n      max-inline-size: 80vw;\n      transition: transform 0.3s ease;\n      padding: 1em;\n      color: black;\n      overflow: auto;\n      block-size: 100vh;\n    }\n  }\n\n  &.show {\n    .filters-wrap {\n      :host(.small) & {\n        transform: translateX(0%);\n        box-shadow: -3px -3px 7px rgb(0 0 0 / 10%);\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      padding-inline-start: calc(20px - 0.8em);\n    }\n\n    nano-icon[slot='icon-end'] {\n      padding-inline: calc(20px - 0.8em) calc(20px - 0.8em);\n    }\n  }\n\n  li:last-child .filter-label {\n    margin-block-end: 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      margin-inline: 0 1em;\n      margin-block: 0;\n      content: '';\n      border: 1px solid map.get($colors, blue);\n      background: map.get($colors, white);\n      border-radius: 3px;\n      block-size: 1em;\n      inline-size: 1em;\n      min-inline-size: 1em;\n      min-block-size: 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      block-size: 0.7em;\n      inline-size: 0.7em;\n      position: absolute;\n      inset-inline-start: 2px;\n      inset-block-start: 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  }\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 rgb(0 0 0 / 70%);\n      }\n    }\n  }\n\n  &-header {\n    display: flex;\n    align-items: center;\n    border-block-end: 1px solid map.get($colors, lightblue);\n    padding-block-end: 0.5rem;\n    margin-block-end: 0.5rem;\n  }\n\n  &-reset {\n    color: map.get($colors, blue);\n    font-size: 12px;\n    text-decoration: underline;\n    margin-inline: auto 0;\n    margin-block: 0;\n\n    :host(.small) & {\n      margin: 0;\n    }\n  }\n\n  &-title {\n    margin: 0;\n    text-transform: uppercase;\n    color: rgb(69 85 86 / 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-flow: row wrap;\n  padding-block-end: 14px;\n  border-block-end: 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;\n    inline-size: 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      margin-inline: 0 0.5em;\n      margin-block: 0;\n      min-inline-size: 20px;\n      min-block-size: 20px;\n      opacity: 0.8;\n    }\n\n    @include media-breakpoint-down('lg') {\n      inline-size: 100%;\n    }\n  }\n\n  &__body {\n    color: map.get($colors, darkgrey);\n    font-size: 13px;\n    inline-size: 70%;\n    text-decoration: none;\n\n    @include media-breakpoint-down('lg') {\n      inline-size: 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    inline-size: 100%;\n    align-items: center;\n\n    > * {\n      margin-block-start: 0.5rem;\n\n      &:not(:last-child) {\n        padding-inline-end: 0;\n\n        &::after {\n          content: '';\n          block-size: 1rem;\n          inline-size: 1px;\n          background: #90c6e7;\n          display: inline-block;\n          margin-inline: 0.7rem 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-block-end: 0.25rem;\n    text-decoration: none;\n    inline-size: 70%;\n  }\n\n  &__buttons {\n    inline-size: 70%;\n    margin-block-end: 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    inline-size: 70%;\n    margin-block-end: 0.5rem;\n    text-decoration: none;\n    color: map.get($colors, darkgrey);\n\n    &-box {\n      inline-size: 300px;\n      background-color: #e3eef1;\n      padding: 12px 12px 8px 4px;\n      display: flex;\n      flex-flow: row nowrap;\n      margin-block-start: 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        inline-size: 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      inset-block-start: 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    inline-size: 100%;\n    block-size: 150px;\n    margin-block-end: 0.5rem;\n\n    @include media-breakpoint-up('sm') {\n      inline-size: 142px;\n      block-size: 80px;\n    }\n\n    nano-icon {\n      position: absolute;\n      inset-block-start: calc(50% - 0.75rem);\n      inset-inline-start: 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        inset-block-start: calc(50% - 1.5rem);\n        inset-inline-start: calc(50% - 1.5rem);\n      }\n    }\n  }\n\n  &__video {\n    &-body {\n      inline-size: 70%;\n      text-decoration: none;\n      display: flex;\n      flex-flow: row wrap;\n\n      @include media-breakpoint-down('lg') {\n        inline-size: 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-block-end: 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-block-start: 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-block-start: 1px solid #e5eef1;\n\n  h2 {\n    color: #455556;\n    font-size: 1.125rem;\n    margin-block-end: 0.5rem;\n  }\n\n  &-icon {\n    font-size: 7rem;\n\n    --icon-color: #e4e6e8;\n\n    margin-block-end: 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  Event,\n  EventEmitter,\n  Method,\n} from '@stencil/core';\nimport searchInsight from '../../utils/search-insights';\nimport type {\n  AloliaSearchResultDetail,\n  IndexResult,\n  NanoAlgoliaResultsCustomEvent,\n  SearchIndex,\n} from '../../interface';\n\nconst filterOldPosts =\n  'created > ' + Math.floor((Date.now() - 63115200000) / 1000);\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() algoliaResults: IndexResult;\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  /** Fired when the user clicks the 'back' button / closes the search panel\n   * Calling `event.preventDefault()` will prevent it from being closed.\n   */\n  @Event() nanoSearchGoBack: EventEmitter;\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  @Watch('algoliaResults')\n  @Watch('algoliaEle')\n  handleAlgoliaEleChange() {\n    if (!this.algoliaEle || !this.algoliaResults) return;\n    if (this.algoliaResults.indexName === 'Community') {\n      this.algoliaEle.filters = [filterOldPosts]; // only get last 2 years\n    }\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    const {\n      detail: { meta, client },\n    } = e as { detail: AloliaSearchResultDetail };\n\n    this.apiKey = client.apiKey;\n    this.appId = client.appId;\n\n    if (e.target.tagName !== 'NANO-GLOBAL-NAV') return;\n\n    this.index = {\n      name: meta.indexTitle,\n      index: meta.index,\n      domain: meta.domain,\n      filters: meta.filters,\n      replicas: meta.replicas,\n    };\n    this.algoliaEle.query = meta.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(\n    e: NanoAlgoliaResultsCustomEvent<{\n      meta: IndexResult;\n      client: { apiKey: string; appId: string };\n    }>\n  ) {\n    searchInsight.init(e.detail.client.appId, e.detail.client.apiKey);\n\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    this.algoliaResults = e.detail.meta;\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    const 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    const oldResults = this.algoliaEle.querySelector('.old-posts');\n    if (oldResults) {\n      oldResults.addEventListener(\n        'change',\n        (e: Event & { target: HTMLInputElement }) => {\n          this.toggleOldResults(e.target.checked);\n        }\n      );\n    }\n  }\n\n  @Listen('nanoNewResults', { target: 'body' })\n  attachResultListeners(e?: NanoAlgoliaResultsCustomEvent<IndexResult>) {\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    const resultEle = this.algoliaResultsEle;\n\n    // wire up hit event listener for analytics\n    this.algoliaResultsEle.removeEventListener('click', this.resultClick);\n    this.algoliaResultsEle.addEventListener('click', this.resultClick);\n\n    // wire up remove filter event listener\n    resultEle.querySelectorAll('.remove-filter').forEach((item) => {\n      item.removeEventListener('click', this.removeFilterClick);\n      item.addEventListener('click', this.removeFilterClick);\n    });\n\n    // wire up the back button event listener\n    resultEle.querySelectorAll('.back-btn').forEach((item) => {\n      item.removeEventListener('click', this.goback);\n      item.addEventListener('click', this.goback);\n    });\n\n    // wire up mobile filter list panel event listener\n    resultEle.querySelectorAll('.topbar__show-filters').forEach((item) => {\n      this.openFilterBtn = item as HTMLButtonElement;\n      item.removeEventListener('click', this.showFiltersClick);\n      item.addEventListener('click', this.showFiltersClick);\n    });\n\n    // wire up tags event listeners\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  /** Manually close the search panel */\n  @Method()\n  async closeSearch() {\n    this.goback();\n  }\n\n  private resultClick = (e: MouseEvent & { target: HTMLElement }) => {\n    const hit = e.target.closest('.result') as HTMLElement;\n    if (e.target.tagName === 'A' && hit) {\n      searchInsight.sendClick({\n        index: this.algoliaResults.index,\n        eventName: 'Global nav full search - search result clicked',\n        queryID: this.algoliaResults.queryID,\n        objectIDs: [hit.dataset.hitId],\n        positions: [Number(hit.dataset.hitCount) + 1],\n      });\n    }\n  };\n\n  private showFiltersClick = () => {\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  private removeFilterClick = (e: MouseEvent & { target: HTMLElement }) => {\n    this.removeFilter(e.target.dataset.filter, e.target.dataset.filterVal);\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    const goBackEvent = this.nanoSearchGoBack.emit();\n    if (goBackEvent.defaultPrevented) return;\n\n    this.removeAllFilters();\n    this.algoliaEle.query = '';\n    this.algoliaEle.showResults = false;\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  private toggleOldResults(show: boolean) {\n    if (show)\n      this.algoliaEle.filters = this.algoliaEle.filters.filter(\n        (f) => !f.startsWith('created > ')\n      );\n    else this.algoliaEle.filters = [...this.algoliaEle.filters, filterOldPosts];\n  }\n\n  connectedCallback(): void {\n    this.handleAlgoliaEleChange();\n  }\n\n  componentDidLoad() {\n    if (!window['ResizeObserver']) return;\n\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  }\n\n  render() {\n    return (\n      <Host\n        class={{ small: this.currentWidth < 677 }}\n        dir={\n          (this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : undefined\n        }\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) => requestAnimationFrame(() => (this.algoliaEle = ele))}\n          id=\"main-search\"\n        >\n          <template slot=\"template\">\n            {\n              /* html */ `<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                        {{ @if (it.searchIndex && it.searchIndex.replicas) }}\n                          <nano-select class=\"sc-nano-global-search-results topbar__order indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n                          {{ @each(it.searchIndex.replicas) => replica }}\n                            <nano-option value=\"{{ replica.index }}\">{{ replica.name }}</nano-option>\n                          {{ /each }}\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\n                  {{ @if (it.totalHitsWithFilters > 0) }}\n                    {{ @each(it.results) => result, resultIndex }}\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\" data-hit-id=\"{{ result.objectID }}\" data-hit-count=\"{{ resultIndex }}\">\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                            {{ @if (result._snippetResult) }}\n                              {{ result._snippetResult.title.value | safe }}\n                            {{ #else }}\n                              {{ result.title | safe }}\n                            {{ /if }}\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                                    Authors: {{ 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) }}\">\n                            {{ @if (result._snippetResult) }}\n                              {{ result._snippetResult.body.value | safe }}\n                            {{ /if }}\n                            </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                      <input class=\"sc-nano-global-search-results filter-cb old-posts filters__old-posts\" type=\"checkbox\" name=\"old-posts\" id=\"old-posts\" value=\"nice\" />\n                      <label class=\"sc-nano-global-search-results filter-label\" for=\"old-posts\">\n                        <span>Include posts older than 2 years</span>\n                      </label>\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            }\n          </template>\n          <div slot=\"output\"></div>\n          <slot />\n        </nano-algolia>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["globalSearchResultsCss","filterOldPosts","Math","floor","Date","now","GlobalSearchResults","this","resultClick","e","hit","target","closest","tagName","searchInsight","sendClick","index","algoliaResults","eventName","queryID","objectIDs","dataset","hitId","positions","Number","hitCount","showFiltersClick","filtersDiv","tabIndex","classList","add","setAttribute","document","body","style","overflow","setTimeout","focus","removeFilterClick","removeFilter","filter","filterVal","tagClick","preventDefault","tagVal","value","toLowerCase","algoliaEle","querySelector","indexOf","goback","goBackEvent","nanoSearchGoBack","emit","defaultPrevented","removeAllFilters","query","undefined","showResults","handleAlgoliaCredsChange","apiKey","appId","handleAlgoliaIndexChange","searchIndex","handleAlgoliaEleChange","indexName","filters","handleGlobalNavReset","algoliaResultsEle","handleGlobalNavSearch","detail","meta","client","name","indexTitle","domain","replicas","handleReorder","composedPath","find","ele","contains","changeOrder","attachListeners","init","id","attachResultListeners","querySelectorAll","forEach","item","addEventListener","closefilters","filterWrap","stopPropagation","oldResults","toggleOldResults","checked","el","resultEle","removeEventListener","openFilterBtn","tags","Array","from","tag","async","ev","replicaIndex","facet","removeFilters","remove","show","f","startsWith","connectedCallback","componentDidLoad","window","ro","ResizeObserver","entries","entry","contentRect","width","currentWidth","observe","render","h","Host","class","small","dir","ownerDocument","ref","requestAnimationFrame","slot"],"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"],"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-block-size: calc(100vh - 63px);\n  justify-content: space-between;\n\n  &__wrap {\n    /* autoprefixer: ignore next */\n    display: contents;\n    block-size: 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    inset-block-start: -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-block-end: 1em;\n\n    &::after {\n      content: '';\n      inline-size: calc(100% - 30px);\n      inset-inline-start: 30px;\n      position: relative;\n      border-block-end: 1px solid #e5eef1;\n      padding-block-start: 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;\n    letter-spacing: 2px;\n    flex-wrap: wrap;\n    margin-block-end: 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    margin-inline: 0 5px;\n    margin-block: 0 3px;\n    padding-inline: 7px;\n    padding-block: 10px;\n    font-size: 12px;\n    color: rgb(69 85 86 / 85%);\n  }\n\n  &__applied-filter {\n    padding-inline: 8px 2px;\n    padding-block: 5px 3px;\n    margin-inline: 0 5px;\n    margin-block: 0 5px;\n    color: map.get($colors, darkgrey);\n    font-size: 11px;\n    border-radius: 2px;\n    border: solid 1px rgb(0 132 169 / 50%);\n    background-color: rgb(0 132 169 / 20%);\n    line-height: 1;\n\n    .icon-button {\n      padding-inline: 10px 4px;\n      padding-block: 2px 1px;\n\n      nano-icon {\n        pointer-events: none;\n      }\n    }\n  }\n\n  .topbar {\n    &__bkbtn {\n      position: relative;\n      inset-inline-start: -7px;\n    }\n\n    &__query {\n      :host(.small) & {\n        display: none;\n      }\n    }\n\n    &__filtering {\n      display: flex;\n      align-items: center;\n      margin-block: 0;\n      margin-inline: 1em 0;\n      flex: 1;\n    }\n\n    &__order {\n      min-inline-size: 175px;\n      max-inline-size: 200px;\n      margin-inline-start: auto;\n\n      :host(.small) & {\n        max-inline-size: 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      margin-inline-start: 0.5em;\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      :host(.small) & {\n        display: flex;\n      }\n    }\n\n    &__filter-count {\n      inline-size: 12px;\n      block-size: 12px;\n      box-shadow: inset 0 3px 4px 0 rgb(0 0 0 / 20%);\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-block-end: 3px;\n    }\n  }\n\n  &__results {\n    font-size: 14px;\n    padding: 1em 40px;\n    color: rgb(69 85 86 / 85%);\n    inline-size: 70%;\n    block-size: 100%;\n\n    @include media-breakpoint-down('sm') {\n      padding: 1em 20px;\n    }\n\n    :host(.small) & {\n      inline-size: 100%;\n    }\n  }\n\n  &__filters {\n    outline: none;\n    padding-inline: 0 40px;\n    padding-block: 1.8em 1em;\n\n    @include media-breakpoint-down('sm') {\n      padding-inline-end: 20px;\n    }\n\n    flex: 1 1 30%;\n    box-sizing: border-box;\n\n    :host(:not(.small)) & {\n      max-inline-size: 350px;\n      min-inline-size: 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    inline-size: 0;\n    block-size: 0;\n    z-index: 10;\n    inset-block-start: 0;\n    inset-inline-end: 0;\n    transition: all 0s ease 0.5s;\n    background: none;\n\n    &.show {\n      block-size: 100vh;\n      inline-size: 100vw;\n      transition: all 0s ease 0s;\n\n      &::after {\n        opacity: 1;\n      }\n    }\n\n    &::after {\n      content: '';\n      background: rgb(0 0 0 / 50%);\n      position: absolute;\n      inset: 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      margin-inline: auto 0;\n      margin-block: 0;\n    }\n  }\n\n  &__old-posts {\n    margin-inline-start: 1rem;\n  }\n\n  &-wrap {\n    :host(.small) & {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-end: 0;\n      background: rgb(247 246 246);\n      transform: translateX(100%);\n      inline-size: 300px;\n      min-inline-size: 200px;\n      max-inline-size: 80vw;\n      transition: transform 0.3s ease;\n      padding: 1em;\n      color: black;\n      overflow: auto;\n      block-size: 100vh;\n    }\n  }\n\n  &.show {\n    .filters-wrap {\n      :host(.small) & {\n        transform: translateX(0%);\n        box-shadow: -3px -3px 7px rgb(0 0 0 / 10%);\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      padding-inline-start: calc(20px - 0.8em);\n    }\n\n    nano-icon[slot='icon-end'] {\n      padding-inline: calc(20px - 0.8em) calc(20px - 0.8em);\n    }\n  }\n\n  li:last-child .filter-label {\n    margin-block-end: 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      margin-inline: 0 1em;\n      margin-block: 0;\n      content: '';\n      border: 1px solid map.get($colors, blue);\n      background: map.get($colors, white);\n      border-radius: 3px;\n      block-size: 1em;\n      inline-size: 1em;\n      min-inline-size: 1em;\n      min-block-size: 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      block-size: 0.7em;\n      inline-size: 0.7em;\n      position: absolute;\n      inset-inline-start: 2px;\n      inset-block-start: 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  }\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 rgb(0 0 0 / 70%);\n      }\n    }\n  }\n\n  &-header {\n    display: flex;\n    align-items: center;\n    border-block-end: 1px solid map.get($colors, lightblue);\n    padding-block-end: 0.5rem;\n    margin-block-end: 0.5rem;\n  }\n\n  &-reset {\n    color: map.get($colors, blue);\n    font-size: 12px;\n    text-decoration: underline;\n    margin-inline: auto 0;\n    margin-block: 0;\n\n    :host(.small) & {\n      margin: 0;\n    }\n  }\n\n  &-title {\n    margin: 0;\n    text-transform: uppercase;\n    color: rgb(69 85 86 / 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-flow: row wrap;\n  padding-block-end: 14px;\n  border-block-end: 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;\n    inline-size: 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      margin-inline: 0 0.5em;\n      margin-block: 0;\n      min-inline-size: 20px;\n      min-block-size: 20px;\n      opacity: 0.8;\n    }\n\n    @include media-breakpoint-down('lg') {\n      inline-size: 100%;\n    }\n  }\n\n  &__body {\n    color: map.get($colors, darkgrey);\n    font-size: 13px;\n    inline-size: 70%;\n    text-decoration: none;\n\n    @include media-breakpoint-down('lg') {\n      inline-size: 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    inline-size: 100%;\n    align-items: center;\n\n    > * {\n      margin-block-start: 0.5rem;\n\n      &:not(:last-child) {\n        padding-inline-end: 0;\n\n        &::after {\n          content: '';\n          block-size: 1rem;\n          inline-size: 1px;\n          background: #90c6e7;\n          display: inline-block;\n          margin-inline: 0.7rem 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-block-end: 0.25rem;\n    text-decoration: none;\n    inline-size: 70%;\n  }\n\n  &__buttons {\n    inline-size: 70%;\n    margin-block-end: 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    inline-size: 70%;\n    margin-block-end: 0.5rem;\n    text-decoration: none;\n    color: map.get($colors, darkgrey);\n\n    &-box {\n      inline-size: 300px;\n      background-color: #e3eef1;\n      padding: 12px 12px 8px 4px;\n      display: flex;\n      flex-flow: row nowrap;\n      margin-block-start: 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        inline-size: 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      inset-block-start: 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    inline-size: 100%;\n    block-size: 150px;\n    margin-block-end: 0.5rem;\n\n    @include media-breakpoint-up('sm') {\n      inline-size: 142px;\n      block-size: 80px;\n    }\n\n    nano-icon {\n      position: absolute;\n      inset-block-start: calc(50% - 0.75rem);\n      inset-inline-start: 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        inset-block-start: calc(50% - 1.5rem);\n        inset-inline-start: calc(50% - 1.5rem);\n      }\n    }\n  }\n\n  &__video {\n    &-body {\n      inline-size: 70%;\n      text-decoration: none;\n      display: flex;\n      flex-flow: row wrap;\n\n      @include media-breakpoint-down('lg') {\n        inline-size: 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-block-end: 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-block-start: 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-block-start: 1px solid #e5eef1;\n\n  h2 {\n    color: #455556;\n    font-size: 1.125rem;\n    margin-block-end: 0.5rem;\n  }\n\n  &-icon {\n    font-size: 7rem;\n\n    --icon-color: #e4e6e8;\n\n    margin-block-end: 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  Event,\n  EventEmitter,\n  Method,\n} from '@stencil/core';\nimport searchInsight from '../../utils/search-insights';\nimport type {\n  AloliaSearchResultDetail,\n  IndexResult,\n  NanoAlgoliaResultsCustomEvent,\n  SearchIndex,\n} from '../../interface';\n\nconst filterOldPosts =\n  'created > ' + Math.floor((Date.now() - 63115200000) / 1000);\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() algoliaResults: IndexResult;\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  /** Fired when the user clicks the 'back' button / closes the search panel\n   * Calling `event.preventDefault()` will prevent it from being closed.\n   */\n  @Event() nanoSearchGoBack: EventEmitter;\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  @Watch('algoliaResults')\n  @Watch('algoliaEle')\n  handleAlgoliaEleChange() {\n    if (!this.algoliaEle || !this.algoliaResults) return;\n    if (this.algoliaResults.indexName === 'Community') {\n      this.algoliaEle.filters = [filterOldPosts]; // only get last 2 years\n    }\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    const {\n      detail: { meta, client },\n    } = e as { detail: AloliaSearchResultDetail };\n\n    this.apiKey = client.apiKey;\n    this.appId = client.appId;\n\n    if (e.target.tagName !== 'NANO-GLOBAL-NAV') return;\n\n    this.index = {\n      name: meta.indexTitle,\n      index: meta.index,\n      domain: meta.domain,\n      filters: meta.filters,\n      replicas: meta.replicas,\n    };\n    this.algoliaEle.query = meta.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(\n    e: NanoAlgoliaResultsCustomEvent<{\n      meta: IndexResult;\n      client: { apiKey: string; appId: string };\n    }>\n  ) {\n    searchInsight.init(e.detail.client.appId, e.detail.client.apiKey);\n\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    this.algoliaResults = e.detail.meta;\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    const 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    const oldResults = this.algoliaEle.querySelector('.old-posts');\n    if (oldResults) {\n      oldResults.addEventListener(\n        'change',\n        (e: Event & { target: HTMLInputElement }) => {\n          this.toggleOldResults(e.target.checked);\n        }\n      );\n    }\n  }\n\n  @Listen('nanoNewResults', { target: 'body' })\n  attachResultListeners(e?: NanoAlgoliaResultsCustomEvent<IndexResult>) {\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    const resultEle = this.algoliaResultsEle;\n\n    // wire up hit event listener for analytics\n    this.algoliaResultsEle.removeEventListener('click', this.resultClick);\n    this.algoliaResultsEle.addEventListener('click', this.resultClick);\n\n    // wire up remove filter event listener\n    resultEle.querySelectorAll('.remove-filter').forEach((item) => {\n      item.removeEventListener('click', this.removeFilterClick);\n      item.addEventListener('click', this.removeFilterClick);\n    });\n\n    // wire up the back button event listener\n    resultEle.querySelectorAll('.back-btn').forEach((item) => {\n      item.removeEventListener('click', this.goback);\n      item.addEventListener('click', this.goback);\n    });\n\n    // wire up mobile filter list panel event listener\n    resultEle.querySelectorAll('.topbar__show-filters').forEach((item) => {\n      this.openFilterBtn = item as HTMLButtonElement;\n      item.removeEventListener('click', this.showFiltersClick);\n      item.addEventListener('click', this.showFiltersClick);\n    });\n\n    // wire up tags event listeners\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  /** Manually close the search panel */\n  @Method()\n  async closeSearch() {\n    this.goback();\n  }\n\n  private resultClick = (e: MouseEvent & { target: HTMLElement }) => {\n    const hit = e.target.closest('.result') as HTMLElement;\n    if (e.target.tagName === 'A' && hit) {\n      searchInsight.sendClick({\n        index: this.algoliaResults.index,\n        eventName: 'Global nav full search - search result clicked',\n        queryID: this.algoliaResults.queryID,\n        objectIDs: [hit.dataset.hitId],\n        positions: [Number(hit.dataset.hitCount) + 1],\n      });\n    }\n  };\n\n  private showFiltersClick = () => {\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  private removeFilterClick = (e: MouseEvent & { target: HTMLElement }) => {\n    this.removeFilter(e.target.dataset.filter, e.target.dataset.filterVal);\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    const goBackEvent = this.nanoSearchGoBack.emit();\n    if (goBackEvent.defaultPrevented) return;\n\n    this.removeAllFilters();\n    this.algoliaEle.query = undefined;\n    this.algoliaEle.showResults = false;\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  private toggleOldResults(show: boolean) {\n    if (show)\n      this.algoliaEle.filters = this.algoliaEle.filters.filter(\n        (f) => !f.startsWith('created > ')\n      );\n    else this.algoliaEle.filters = [...this.algoliaEle.filters, filterOldPosts];\n  }\n\n  connectedCallback(): void {\n    this.handleAlgoliaEleChange();\n  }\n\n  componentDidLoad() {\n    if (!window['ResizeObserver']) return;\n\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  }\n\n  render() {\n    return (\n      <Host\n        class={{ small: this.currentWidth < 677 }}\n        dir={\n          (this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : undefined\n        }\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) => requestAnimationFrame(() => (this.algoliaEle = ele))}\n          id=\"main-search\"\n        >\n          <template slot=\"template\">\n            {\n              /* html */ `<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                        {{ @if (it.searchIndex && it.searchIndex.replicas) }}\n                          <nano-select class=\"sc-nano-global-search-results topbar__order indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n                          {{ @each(it.searchIndex.replicas) => replica }}\n                            <nano-option value=\"{{ replica.index }}\">{{ replica.name }}</nano-option>\n                          {{ /each }}\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\n                  {{ @if (it.totalHitsWithFilters > 0) }}\n                    {{ @each(it.results) => result, resultIndex }}\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\" data-hit-id=\"{{ result.objectID }}\" data-hit-count=\"{{ resultIndex }}\">\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                            {{ @if (result._snippetResult) }}\n                              {{ result._snippetResult.title.value | safe }}\n                            {{ #else }}\n                              {{ result.title | safe }}\n                            {{ /if }}\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                                    Authors: {{ 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) }}\">\n                            {{ @if (result._snippetResult) }}\n                              {{ result._snippetResult.body.value | safe }}\n                            {{ /if }}\n                            </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                      <input class=\"sc-nano-global-search-results filter-cb old-posts filters__old-posts\" type=\"checkbox\" name=\"old-posts\" id=\"old-posts\" value=\"nice\" />\n                      <label class=\"sc-nano-global-search-results filter-label\" for=\"old-posts\">\n                        <span>Include posts older than 2 years</span>\n                      </label>\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            }\n          </template>\n          <div slot=\"output\"></div>\n          <slot />\n        </nano-algolia>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/nano-components/nano-more-less.entry.js

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,h as s,a as e,g as n}from"./index-9695db0a.js";const o=class{constructor(s){t(this,s);this.slottedElements=[];this.show=false;this.childrenSelector=undefined;this.maxToShow=3;this.noHideBtn=false}get children(){let t;if(this.childrenSelector){t=this.host.querySelectorAll(this.childrenSelector)}else{t=this.host.children}return Array.from(t).filter((t=>!t.hasAttribute("slot")))}handleShowHideElements(){this.slottedElements.forEach(((t,s)=>{if(this.show){if(t.style.display==="none"){t.style.display=""}}else{if(s>=this.maxToShow){t.style.display="none"}else{t.style.display=""}}}))}processSlottedContent(){const t=this.children.length!==this.slottedElements.length||!!this.children.filter((t=>!this.slottedElements.includes(t)))?.length;if(t){this.slottedElements=this.children}}handleClick(t){this.show=!this.show}connectedCallback(){this.processSlottedContent()}render(){return s(e,null,s("slot",{onSlotchange:()=>this.processSlottedContent()}),this.slottedElements?.length>this.maxToShow&&[s("div",{style:{display:this.show?"none":"contents"},class:"button-wrapper",part:"button-wrapper button-wrapper--less",onClick:t=>this.handleClick(t)},s("slot",{name:"less"},s("button",{part:"button button--less"},"Show more (+",this.slottedElements.length-this.maxToShow,")"))),!this.noHideBtn?s("div",{style:{display:this.show?"contents":"none"},class:"button-wrapper",part:"button-wrapper button-wrapper--more",onClick:t=>this.handleClick(t)},s("slot",{name:"more"},s("button",{part:"button button--more"},"Show less (-",this.slottedElements.length-this.maxToShow,")"))):""])}get host(){return n(this)}static get watchers(){return{slottedElements:["handleShowHideElements"],maxToShow:["handleShowHideElements"],show:["handleShowHideElements"],childrenSelector:["processSlottedContent"]}}};o.style=":host { display: contents; }";export{o as nano_more_less};
+import{r as t,h as s,a as e,g as n}from"./index-9695db0a.js";const o=class{constructor(s){t(this,s);this.show=false;this.childrenSelector=undefined;this.maxToShow=3;this.noHideBtn=false}get children(){let t;if(this.childrenSelector){t=this.host.querySelectorAll(this.childrenSelector)}else{t=this.host.children}return Array.from(t).filter((t=>!t.hasAttribute("slot")))}handleShowHideElements(){this.children.forEach(((t,s)=>{if(this.show){if(t.style.display==="none"){t.style.display=""}}else{if(s>=this.maxToShow){t.style.display="none"}else{t.style.display=""}}}))}handleClick(t){this.show=!this.show}connectedCallback(){this.handleShowHideElements()}render(){return s(e,null,s("slot",{onSlotchange:()=>this.handleShowHideElements()}),this.children?.length>this.maxToShow&&[s("div",{style:{display:this.show?"none":"contents"},class:"button-wrapper",part:"button-wrapper button-wrapper--less",onClick:t=>this.handleClick(t)},s("slot",{name:"less"},s("button",{part:"button button--less"},"Show more (+",this.children.length-this.maxToShow,")"))),!this.noHideBtn?s("div",{style:{display:this.show?"contents":"none"},class:"button-wrapper",part:"button-wrapper button-wrapper--more",onClick:t=>this.handleClick(t)},s("slot",{name:"more"},s("button",{part:"button button--more"},"Show less (-",this.children.length-this.maxToShow,")"))):""])}get host(){return n(this)}static get watchers(){return{maxToShow:["handleShowHideElements"],show:["handleShowHideElements"],childrenSelector:["handleShowHideElements"]}}};o.style=":host { display: contents; }";export{o as nano_more_less};
 //# sourceMappingURL=nano-more-less.entry.js.map

package/dist/nano-components/nano-more-less.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["Rating","children","this","childrenSelector","host","querySelectorAll","Array","from","filter","ele","hasAttribute","handleShowHideElements","slottedElements","forEach","i","show","style","display","maxToShow","processSlottedContent","diff","length","x","includes","handleClick","_e","connectedCallback","render","h","Host","onSlotchange","class","part","onClick","e","name","noHideBtn"],"sources":["./src/components/more-less/more-less.tsx"],"sourcesContent":["import {\n  Component,\n  Element,\n  Prop,\n  h,\n  ComponentInterface,\n  Host,\n  Watch,\n  State,\n} from '@stencil/core';\n\n/**\n * A simple component to show more or less elements.\n *\n * @slot less - a button displayed when all fewer are shown. When clicked will show elements\n * @slot more - a button displayed when all items are shown. When clicked will hide elements\n * @slot - default slot displaying children elements to show or hide\n *\n * @part button-wrapper - wraps the 'more' / 'less' buttons\n * @part button-wrapper--more - wraps the 'more' button\n * @part button-wrapper--less - wraps the 'less' button\n * @part button - default 'more' / 'less' buttons\n * @part button--more - the default 'more' button\n * @part button--less - the default 'less' button\n */\n@Component({\n  tag: 'nano-more-less',\n  shadow: true,\n  styles: /* css */ `:host { display: contents; }`,\n})\nexport class Rating implements ComponentInterface {\n  @State() slottedElements: HTMLElement[] = [];\n  @Element() host: HTMLNanoMoreLessElement;\n\n  /** The default state. `false` - excess items are hidden. `true` - excess items are shown. */\n  @Prop({ reflect: true, mutable: true }) show = false;\n\n  /** Optional JS selector to target which elements to hide or show */\n  @Prop() childrenSelector: string;\n\n  /** The maximum number of items to show when `show` is true.\n   * Excess items will be hidden. */\n  @Prop() maxToShow = 3;\n\n  /** Only show the 'show more' button */\n  @Prop() noHideBtn = false;\n\n  get children() {\n    let children: NodeListOf<Element> | HTMLCollectionOf<Element>;\n\n    if (this.childrenSelector) {\n      children = this.host.querySelectorAll(this.childrenSelector);\n    } else {\n      children = this.host.children;\n    }\n    return Array.from(children).filter(\n      (ele) => !ele.hasAttribute('slot')\n    ) as HTMLElement[];\n  }\n\n  @Watch('slottedElements')\n  @Watch('maxToShow')\n  @Watch('show')\n  handleShowHideElements() {\n    this.slottedElements.forEach((ele, i) => {\n      if (this.show) {\n        if (ele.style.display === 'none') {\n          ele.style.display = '';\n        }\n      } else {\n        if (i >= this.maxToShow) {\n          ele.style.display = 'none';\n        } else {\n          ele.style.display = '';\n        }\n      }\n    });\n  }\n\n  @Watch('childrenSelector')\n  private processSlottedContent() {\n    const diff =\n      this.children.length !== this.slottedElements.length ||\n      !!this.children.filter((x) => !this.slottedElements.includes(x))?.length;\n    if (diff) {\n      this.slottedElements = this.children;\n    }\n  }\n\n  private handleClick(_e: MouseEvent) {\n    this.show = !this.show;\n  }\n\n  connectedCallback() {\n    this.processSlottedContent();\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot onSlotchange={() => this.processSlottedContent()} />\n        {this.slottedElements?.length > this.maxToShow && [\n          <div\n            style={{ display: this.show ? 'none' : 'contents' }}\n            class=\"button-wrapper\"\n            part=\"button-wrapper button-wrapper--less\"\n            onClick={(e) => this.handleClick(e)}\n          >\n            <slot name=\"less\">\n              <button part=\"button button--less\">\n                Show more (+{this.slottedElements.length - this.maxToShow})\n              </button>\n            </slot>\n          </div>,\n          !this.noHideBtn ? (\n            <div\n              style={{ display: this.show ? 'contents' : 'none' }}\n              class=\"button-wrapper\"\n              part=\"button-wrapper button-wrapper--more\"\n              onClick={(e) => this.handleClick(e)}\n            >\n              <slot name=\"more\">\n                <button part=\"button button--more\">\n                  Show less (-{this.slottedElements.length - this.maxToShow})\n                </button>\n              </slot>\n            </div>\n          ) : (\n            ''\n          ),\n        ]}\n      </Host>\n    );\n  }\n}\n"],"mappings":";;;mEA8BaA,EAAM,M,8CACyB,G,UAIK,M,+CAO3B,E,eAGA,K,CAEhBC,eACF,IAAIA,EAEJ,GAAIC,KAAKC,iBAAkB,CACzBF,EAAWC,KAAKE,KAAKC,iBAAiBH,KAAKC,iB,KACtC,CACLF,EAAWC,KAAKE,KAAKH,Q,CAEvB,OAAOK,MAAMC,KAAKN,GAAUO,QACzBC,IAASA,EAAIC,aAAa,S,CAO/BC,yBACET,KAAKU,gBAAgBC,SAAQ,CAACJ,EAAKK,KACjC,GAAIZ,KAAKa,KAAM,CACb,GAAIN,EAAIO,MAAMC,UAAY,OAAQ,CAChCR,EAAIO,MAAMC,QAAU,E,MAEjB,CACL,GAAIH,GAAKZ,KAAKgB,UAAW,CACvBT,EAAIO,MAAMC,QAAU,M,KACf,CACLR,EAAIO,MAAMC,QAAU,E,MAOpBE,wBACN,MAAMC,EACJlB,KAAKD,SAASoB,SAAWnB,KAAKU,gBAAgBS,UAC5CnB,KAAKD,SAASO,QAAQc,IAAOpB,KAAKU,gBAAgBW,SAASD,MAAKD,OACpE,GAAID,EAAM,CACRlB,KAAKU,gBAAkBV,KAAKD,Q,EAIxBuB,YAAYC,GAClBvB,KAAKa,MAAQb,KAAKa,I,CAGpBW,oBACExB,KAAKiB,uB,CAGPQ,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,QAAME,aAAc,IAAM5B,KAAKiB,0BAC9BjB,KAAKU,iBAAiBS,OAASnB,KAAKgB,WAAa,CAChDU,EAAA,OACEZ,MAAO,CAAEC,QAASf,KAAKa,KAAO,OAAS,YACvCgB,MAAM,iBACNC,KAAK,sCACLC,QAAUC,GAAMhC,KAAKsB,YAAYU,IAEjCN,EAAA,QAAMO,KAAK,QACTP,EAAA,UAAQI,KAAK,uBAAqB,eACnB9B,KAAKU,gBAAgBS,OAASnB,KAAKgB,UAAS,QAI9DhB,KAAKkC,UACJR,EAAA,OACEZ,MAAO,CAAEC,QAASf,KAAKa,KAAO,WAAa,QAC3CgB,MAAM,iBACNC,KAAK,sCACLC,QAAUC,GAAMhC,KAAKsB,YAAYU,IAEjCN,EAAA,QAAMO,KAAK,QACTP,EAAA,UAAQI,KAAK,uBAAqB,eACnB9B,KAAKU,gBAAgBS,OAASnB,KAAKgB,UAAS,OAGzD,I"}
+{"version":3,"names":["Rating","children","this","childrenSelector","host","querySelectorAll","Array","from","filter","ele","hasAttribute","handleShowHideElements","forEach","i","show","style","display","maxToShow","handleClick","_e","connectedCallback","render","h","Host","onSlotchange","length","class","part","onClick","e","name","noHideBtn"],"sources":["./src/components/more-less/more-less.tsx"],"sourcesContent":["import {\n  Component,\n  Element,\n  Prop,\n  h,\n  ComponentInterface,\n  Host,\n  Watch,\n} from '@stencil/core';\n\n/**\n * A simple component to show more or less elements.\n *\n * @slot less - a button displayed when all fewer are shown. When clicked will show elements\n * @slot more - a button displayed when all items are shown. When clicked will hide elements\n * @slot - default slot displaying children elements to show or hide\n *\n * @part button-wrapper - wraps the 'more' / 'less' buttons\n * @part button-wrapper--more - wraps the 'more' button\n * @part button-wrapper--less - wraps the 'less' button\n * @part button - default 'more' / 'less' buttons\n * @part button--more - the default 'more' button\n * @part button--less - the default 'less' button\n */\n@Component({\n  tag: 'nano-more-less',\n  shadow: true,\n  styles: /* css */ `:host { display: contents; }`,\n})\nexport class Rating implements ComponentInterface {\n  @Element() host: HTMLNanoMoreLessElement;\n\n  /** The default state. `false` - excess items are hidden. `true` - excess items are shown. */\n  @Prop({ reflect: true, mutable: true }) show = false;\n\n  /** Optional JS selector to target which elements to hide or show */\n  @Prop() childrenSelector: string;\n\n  /** The maximum number of items to show when `show` is true.\n   * Excess items will be hidden. */\n  @Prop() maxToShow = 3;\n\n  /** Only show the 'show more' button */\n  @Prop() noHideBtn = false;\n\n  get children() {\n    let children: NodeListOf<Element> | HTMLCollectionOf<Element>;\n\n    if (this.childrenSelector) {\n      children = this.host.querySelectorAll(this.childrenSelector);\n    } else {\n      children = this.host.children;\n    }\n    return Array.from(children).filter(\n      (ele) => !ele.hasAttribute('slot')\n    ) as HTMLElement[];\n  }\n\n  @Watch('maxToShow')\n  @Watch('show')\n  @Watch('childrenSelector')\n  handleShowHideElements() {\n    this.children.forEach((ele, i) => {\n      if (this.show) {\n        if (ele.style.display === 'none') {\n          ele.style.display = '';\n        }\n      } else {\n        if (i >= this.maxToShow) {\n          ele.style.display = 'none';\n        } else {\n          ele.style.display = '';\n        }\n      }\n    });\n  }\n\n  private handleClick(_e: MouseEvent) {\n    this.show = !this.show;\n  }\n\n  connectedCallback() {\n    this.handleShowHideElements();\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot onSlotchange={() => this.handleShowHideElements()} />\n        {this.children?.length > this.maxToShow && [\n          <div\n            style={{ display: this.show ? 'none' : 'contents' }}\n            class=\"button-wrapper\"\n            part=\"button-wrapper button-wrapper--less\"\n            onClick={(e) => this.handleClick(e)}\n          >\n            <slot name=\"less\">\n              <button part=\"button button--less\">\n                Show more (+{this.children.length - this.maxToShow})\n              </button>\n            </slot>\n          </div>,\n          !this.noHideBtn ? (\n            <div\n              style={{ display: this.show ? 'contents' : 'none' }}\n              class=\"button-wrapper\"\n              part=\"button-wrapper button-wrapper--more\"\n              onClick={(e) => this.handleClick(e)}\n            >\n              <slot name=\"more\">\n                <button part=\"button button--more\">\n                  Show less (-{this.children.length - this.maxToShow})\n                </button>\n              </slot>\n            </div>\n          ) : (\n            ''\n          ),\n        ]}\n      </Host>\n    );\n  }\n}\n"],"mappings":";;;mEA6BaA,EAAM,M,mCAI8B,M,+CAO3B,E,eAGA,K,CAEhBC,eACF,IAAIA,EAEJ,GAAIC,KAAKC,iBAAkB,CACzBF,EAAWC,KAAKE,KAAKC,iBAAiBH,KAAKC,iB,KACtC,CACLF,EAAWC,KAAKE,KAAKH,Q,CAEvB,OAAOK,MAAMC,KAAKN,GAAUO,QACzBC,IAASA,EAAIC,aAAa,S,CAO/BC,yBACET,KAAKD,SAASW,SAAQ,CAACH,EAAKI,KAC1B,GAAIX,KAAKY,KAAM,CACb,GAAIL,EAAIM,MAAMC,UAAY,OAAQ,CAChCP,EAAIM,MAAMC,QAAU,E,MAEjB,CACL,GAAIH,GAAKX,KAAKe,UAAW,CACvBR,EAAIM,MAAMC,QAAU,M,KACf,CACLP,EAAIM,MAAMC,QAAU,E,MAMpBE,YAAYC,GAClBjB,KAAKY,MAAQZ,KAAKY,I,CAGpBM,oBACElB,KAAKS,wB,CAGPU,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,QAAME,aAAc,IAAMtB,KAAKS,2BAC9BT,KAAKD,UAAUwB,OAASvB,KAAKe,WAAa,CACzCK,EAAA,OACEP,MAAO,CAAEC,QAASd,KAAKY,KAAO,OAAS,YACvCY,MAAM,iBACNC,KAAK,sCACLC,QAAUC,GAAM3B,KAAKgB,YAAYW,IAEjCP,EAAA,QAAMQ,KAAK,QACTR,EAAA,UAAQK,KAAK,uBAAqB,eACnBzB,KAAKD,SAASwB,OAASvB,KAAKe,UAAS,QAIvDf,KAAK6B,UACJT,EAAA,OACEP,MAAO,CAAEC,QAASd,KAAKY,KAAO,WAAa,QAC3CY,MAAM,iBACNC,KAAK,sCACLC,QAAUC,GAAM3B,KAAKgB,YAAYW,IAEjCP,EAAA,QAAMQ,KAAK,QACTR,EAAA,UAAQK,KAAK,uBAAqB,eACnBzB,KAAKD,SAASwB,OAASvB,KAAKe,UAAS,OAGlD,I"}

package/dist/nano-components/nano-tab-group.entry.js

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,c as a,h as n,a as o,g as i}from"./index-9695db0a.js";import{g as s,a as r}from"./dom-8599fac1.js";import{s as e}from"./scroll-762b3e1a.js";import{C as l}from"./component-store-486d9d7a.js";import{c as h}from"./theme-931bd452.js";import{d as c}from"./transitions-5aecdeeb.js";import"./throttle-ac4fcefa.js";const d=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-track-color:#e4e6e8;--indicator-size:0;--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background-rgb:var(--nano-layer-bg-rgb, 255 255 255);--scroll-btn-color:"currentColor";--content-padding:2rem 2.5rem;--content-bg:rgb(var(--background-rgb));--content-border-radius:var(--border-radius);--tabs-padding-start:2.5rem;--tabs-padding-end:2.5rem;--tabs-padding-top:0;--tabs-padding-bottom:0;--tabs-container-bg:"transparent";--tabs-bg-rgb:var(--background-rgb);--tab-border-radius:var(--border-radius) var(--border-radius) 0 0;--tab-text-color:#007495;--shadow-opacity:0.1;--fade-transparency:0;display:block;position:relative;z-index:var(--nano-layer-index-raised, 5)}@media only screen and (max-width: 768px){:host{--tabs-padding-start:1.5rem;--tabs-padding-end:1.5rem}}:host ::slotted(nano-tab){--tab-indicator-color:var(--indicator-color);--bg-rgb:var(--tabs-bg-rgb);--border-radius:var(--tab-border-radius);--grab-offset-x:var(--tabs-padding-start)}:host([placement=start]){--content-border-radius:0 var(--border-radius) var(--border-radius) 0;--content-padding:1rem;--tab-border-radius:0;--tabs-padding-start:0;--tabs-padding-end:0;--tabs-padding-top:0;--tabs-padding-bottom:0;--tab-text-color:#455556;--indicator-color:#007495;--indicator-size:2px}:host(.nano-color){--indicator-color:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--tab-text-color:rgb(var(--nano-color-base-rgb) / 70%)}:host(.nano-color) ::slotted(nano-tab){--active-text-color:var(--nano-color-shade, var(--nano-color-primary-shade, #00637f))}.nano-tab-group{display:flex;border-radius:0;inline-size:100%;flex:inherit}.nano-tab-group__tabs{display:flex;position:relative;inline-size:100%}.nano-tab-group__active-tab-indicator{position:absolute;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease}.nano-tab-group__body{background:var(--content-bg)}.nano-tab-group .nano-tab-group__nav-container{position:relative;display:flex;background:var(--tabs-container-bg)}.nano-tab-group button{-webkit-appearance:none;appearance:none;background-color:transparent}.nano-tab-group__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;inset-block:0;border:unset;z-index:2;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color)}.nano-tab-group__scroll-button:focus{outline:none}.nano-tab-group__scroll-button.is-shown{opacity:1}.nano-tab-group__scroll-button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tab-group__scroll-button--left{inset-inline-start:0}.nano-tab-group__scroll-button--right{inset-inline-end:0}.nano-tab-group__scroll-button nano-icon{font-size:16px}.nano-tab-group--top{flex-direction:column}.nano-tab-group--top .nano-tab-group__nav-container::after{content:"";inline-size:86%;box-shadow:0 10px 40px 10px rgb(0 0 0/var(--shadow-opacity));block-size:10px;position:absolute;inset-inline-start:7%;inset-block-end:-10px;border-radius:10px;z-index:-1}.nano-tab-group--top .nano-tab-group__nav{scrollbar-width:none;-ms-overflow-style:none;padding-inline:var(--tabs-padding-start) var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);display:flex;overflow:auto hidden;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - var(--tabs-padding-end) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - var(--tabs-padding-end) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgb(0 0 0/var(--fade-transparency)));-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 4);mask-size:calc(100% + var(--tabs-padding-end) * 4);-webkit-mask-position:calc(var(--tabs-padding-end) * -2);mask-position:calc(var(--tabs-padding-end) * -2)}.nano-tab-group--top .nano-tab-group__nav::-webkit-scrollbar{inline-size:0;block-size:0}.nano-tab-group--top .nano-tab-group__nav::after{content:" ";padding-inline:0 var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);line-height:1;flex:0 0 auto}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left .nano-tab-group__nav{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 2);mask-size:calc(100% + var(--tabs-padding-end) * 2)}.nano-tab-group--top.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-position:calc(var(--tabs-padding-end) * -1);mask-position:calc(var(--tabs-padding-end) * -1);-webkit-mask-size:calc(100% + var(--tabs-padding-end));mask-size:calc(100% + var(--tabs-padding-end))}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.nano-tab-group--top .nano-tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row;text-align:center;color:var(--tab-text-color);inline-size:auto}.nano-tab-group--top .nano-tab-group__active-tab-indicator{inset-block-end:-2px;border-block-end:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--top .nano-tab-group__body{order:2;background:var(--content-bg);position:relative;overflow:hidden;inline-size:auto;display:flex;justify-content:center;padding:var(--content-padding);border-radius:var(--content-border-radius);flex:1 1 auto}.nano-tab-group--start{flex-direction:row}.nano-tab-group--start .nano-tab-group__tabs{flex:0 0 auto;flex-direction:column;color:var(--tab-text-color);background:rgb(var(--tabs-bg-rgb));border-inline-start:solid var(--indicator-size) var(--indicator-track-color);text-align:start}.nano-tab-group--start .nano-tab-group__active-tab-indicator{inset-inline-start:-2px;border-inline-start:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--start .nano-tab-group__body{flex:1 1 auto;order:2;padding:var(--content-padding);overflow:hidden;border-radius:var(--content-border-radius)}';let b=0;const p=class{constructor(n){t(this,n);this.nanoTabShow=a(this,"nanoTabShow",7);this.nanoTabHide=a(this,"nanoTabHide",7);this.nanoTabWillClose=a(this,"nanoTabWillClose",7);this.nanoTabClose=a(this,"nanoTabClose",7);this.baseId=`nano-tab-group-${++b}`;this.initialTouchX=null;this.initialTouchY=null;this.mutationObservers=new WeakMap;this.updateScrollControls=()=>{if(this.noScrollControls){this.hasScrollControls=false}else{this.hasScrollControls=["top"].includes(this.placement)&&this.nav.scrollWidth>this.nav.clientWidth&&this.nav.scrollWidth>this.tabs.clientWidth}};this.handleClick=t=>{const a=t.target;const n=a.closest("nano-tab");if(n)this.setActiveTab(n)};this.handleKeyDown=t=>{const a=document.activeElement;if(!a||a.tagName.toLowerCase()!=="nano-tab")return;if(["Enter"," "].includes(t.key)){const a=t.target;const n=a.closest("nano-tab");if(n){this.setActiveTab(n);t.preventDefault();t.stopPropagation()}}if(!["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key))return;const n=this.getAllActiveTabs;let o=n.indexOf(a);if(t.key==="Home")o=0;if(t.key==="End")o=n.length-1;if(this.placement==="top"){if(this.isRtl&&t.key==="ArrowRight"||!this.isRtl&&t.key==="ArrowLeft"){o=Math.max(0,o-1)}if(this.isRtl&&t.key==="ArrowLeft"||!this.isRtl&&t.key==="ArrowRight"){o=Math.min(n.length-1,o+1)}}if(this.placement==="start"){if(t.key==="ArrowUp")o=Math.max(0,o-1);if(t.key==="ArrowDown")o=Math.min(n.length-1,o+1)}n[o].setFocus();if(this.placement==="top"){e(n[o],this.nav,"horizontal","center")}t.stopPropagation();t.preventDefault()};this.handleTabScroll=()=>{if(!this.hasScrollControls){this.hideControlLeft=this.hideControlRight=true;return}const t=this.isRtl?this.nav.scrollLeft===0:this.nav.scrollWidth-this.nav.scrollLeft===this.nav.clientWidth;const a=this.isRtl?this.nav.scrollWidth+this.nav.scrollLeft===this.nav.clientWidth:this.nav.scrollLeft===0;if(a){this.hideControlLeft=true;this.hideControlRight=false}else if(t){this.hideControlLeft=false;this.hideControlRight=true}else{this.hideControlRight=false;this.hideControlLeft=false}};this.handleBtnClick=(t=false)=>{const a=this.getNavWidth();let n;if(t)n=this.nav.scrollLeft+a-20;else n=this.nav.scrollLeft-a+20;try{this.nav.scroll({left:n,behavior:"smooth"})}catch(t){this.nav.scrollLeft=n}};this.handleTouchStart=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];this.initialTouchX=a.pageX;this.initialTouchY=a.pageY};this.handleTouchEnd=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];const n=a.pageX-this.initialTouchX;const o=70;const i=this.initialTouchX-a.clientX;const s=this.initialTouchY-a.clientY;const r=Math.abs(n)>=o&&Math.abs(s)<=50;const e=this.getAllActiveTabs;const l=e.findIndex((t=>t.active));if(r){const t=n<0&&this.placement==="top"||n>0&&this.placement!=="top"?1:-1;if(e[l+t]){this.setActiveTab(e[l+t]);if(Math.abs(i)>Math.abs(s)){if(i>0)this.activePanel.setAttribute("animation-dir","left");else this.activePanel.setAttribute("animation-dir","right")}}}this.initialTouchX=null;this.initialTouchY=null};this.handleContentSlotChange=()=>{setTimeout((()=>{this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false)}))};this.handleTabSlotChange=t=>{setTimeout((()=>{this.setAriaLabels();this.handleTabScroll();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);this.updateScrollControls()}),500);const a=t.target.assignedElements({flatten:true});a.forEach((t=>{if(!this.mutationObservers.get(t)){const a=new MutationObserver((()=>{setTimeout((()=>{this.syncActiveTabIndicator();this.handleTabScroll();this.updateScrollControls()}),500)}));this.mutationObservers.set(t,a);a.observe(t,{characterData:true,childList:true,subtree:true})}}))};this.hasScrollControls=false;this.hideControlRight=true;this.hideControlLeft=true;this.tab=undefined;this.placement="top";this.noScrollControls=false;this.color=undefined;this.storeId=undefined;this.storeMethod="session";this.disableSwipe=undefined}handleTabNameChange(){if(this.activeTab&&this.activeTab.panel===this.tab)return;const t=this.getAllActiveTabs.find((t=>t.panel===this.tab));this.setActiveTab(t)}handlePlacementChange(){this.syncActiveTabIndicator()}handleNoScrollControlsChange(){this.updateScrollControls()}hideRightBtn(){if(!this.rightBtn)return;c(this.rightBtn,{className:"is-shown",show:!this.hideControlRight})}hideLeftBtn(){if(!this.leftBtn)return;c(this.leftBtn,{className:"is-shown",show:!this.hideControlLeft})}watchScrollControls(){if(this.hasScrollControls)setTimeout((t=>this.handleTabScroll()),20);else setTimeout((t=>{this.hideControlLeft=this.hideControlRight=true}),20)}async show(t){if(this.activeTab&&this.activeTab.panel===t)return;const a=this.getAllActiveTabs.find((a=>a.panel===t));if(a)this.setActiveTab(a)}get getAllActiveTabs(){return this.getAllTabs.filter((t=>!t.disabled))}get getAllTabs(){return s(this.host,"nano-tab")}get getAllPanels(){return s(this.host,"nano-tab-content")}get getActiveTab(){return this.getAllActiveTabs.find((t=>t.active))}setActiveTab(t,a=true){if(t&&t!==this.activeTab&&!t.disabled&&this.getAllActiveTabs.includes(t)){const n=this.activeTab;this.activeTab=t;this.tab=t.panel;this.getAllActiveTabs.map((t=>t.active=t===this.activeTab));this.getAllPanels.map((t=>{if(t.name===this.activeTab.panel){t.active=true;this.activePanel=t}else t.active=false;t.removeAttribute("animation-dir")}));this.syncActiveTabIndicator();if(this.nav&&["top"].includes(this.placement)){e(this.activeTab,this.nav,"horizontal","center")}if(a){if(n){this.nanoTabHide.emit({name:n.panel})}this.nanoTabShow.emit({name:this.activeTab.panel})}}}setAriaLabels(){const t=this.getAllActiveTabs;const a=this.getAllPanels;t.map(((t,n)=>{const o=a.find((a=>a.name===t.panel));if(o){if(!o.id)o.id=`${this.baseId}-panel-${n}`;if(!t.id)t.id=`${this.baseId}-tab-${n}`;t.setAttribute("aria-controls",o.id);o.setAttribute("aria-labelledby",t.id)}}))}syncActiveTabIndicator(){this.getAllTabs.forEach((t=>t.setAttribute("direction",this.placement==="top"?"horizontal":"vertical")));const t=this.getActiveTab;if(!t)return;const a=t.shadowRoot.querySelector(".nanotab")?.clientWidth||0;const n=t.clientHeight;const o=r(t,this.tabs);if(!this.activeTabIndicator)return;const i=o.top+this.nav.scrollTop;const s=o.left;switch(this.placement){case"top":this.activeTabIndicator.style.width=`${a}px`;this.activeTabIndicator.style.height=null;this.activeTabIndicator.style.transform=`translateX(${s}px)`;break;case"start":this.activeTabIndicator.style.width=null;this.activeTabIndicator.style.height=`${n}px`;this.activeTabIndicator.style.transform=`translateY(${i}px)`;break}}getNavWidth(){if(!this.nav)return 0;const t=getComputedStyle(this.nav);let a=this.nav.clientWidth;return a-=parseFloat(t.paddingLeft)+parseFloat(t.paddingRight)}handleTabClose(t){let a=this.getAllActiveTabs.indexOf(t.target);const n=t.target;if(a<0)return;const o=this.getAllPanels.find((t=>t.name===n.panel));if(!o)return;t.stopImmediatePropagation();const i=this.nanoTabWillClose.emit({name:n.panel});if(i.defaultPrevented)return;if(n.active){a=a===0?1:a-1;const t=this.getAllActiveTabs[a]?.panel;if(t)this.host.show(t)}n.remove();o.remove();this.nanoTabClose.emit({name:n.panel})}componentDidLoad(){const t=new IntersectionObserver(((t,a)=>{if(t[0].intersectionRatio>0){this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);if(this.storeId)l.init(this,["tab"],this.storeMethod,this.storeId);a.unobserve(t[0].target)}}));t.observe(this.host);requestAnimationFrame((()=>this.updateScrollControls()));if(!window["ResizeObserver"])return;this.resizeObserver=new ResizeObserver((()=>{setTimeout((()=>{this.updateScrollControls();this.syncActiveTabIndicator();e(this.activeTab,this.nav,"horizontal","center")}),500)}));this.resizeObserver.observe(this.nav)}connectedCallback(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl"}disconnectedCallback(){if(this.resizeObserver)this.resizeObserver.unobserve(this.nav)}render(){this.isRtl=this.host.ownerDocument.dir==="rtl";return n(o,{class:{...h(this.color)},dir:this.isRtl?"rtl":null},n("div",{part:"base",class:{"nano-tab-group":true,"nano-tab-group--top":this.placement==="top","nano-tab-group--start":this.placement==="start","nano-tab-group--has-scroll-controls":this.hasScrollControls,"nano-tab-group--has-scroll-controls-left":!this.hideControlLeft,"nano-tab-group--has-scroll-controls-right":!this.hideControlRight},onClick:this.handleClick,onKeyDown:this.handleKeyDown},n("div",{class:"nano-tab-group__nav-container",part:"nav"},this.placement==="top"&&n("button",{disabled:!this.hasScrollControls,class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--left":true},ref:t=>this.leftBtn=t,onClick:()=>this.handleBtnClick(false)},n("nano-icon",{name:"light/chevron-left",ariaLabel:"Scroll tabs towards the start"})),n("div",{ref:t=>this.nav=t,class:"nano-tab-group__nav",onScroll:this.handleTabScroll},n("div",{ref:t=>this.tabs=t,part:"tabs",class:"nano-tab-group__tabs",role:"tablist","aria-orientation":this.placement==="start"?"vertical":"horizontal"},n("div",{ref:t=>this.activeTabIndicator=t,part:"active-tab-indicator",class:"nano-tab-group__active-tab-indicator"}),n("slot",{name:"tabs",onSlotchange:this.handleTabSlotChange}))),this.placement==="top"&&n("button",{disabled:!this.hasScrollControls,class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--right":true},ref:t=>this.rightBtn=t,onClick:()=>this.handleBtnClick(true)},n("nano-icon",{name:"light/chevron-right",ariaLabel:"Scroll tabs towards the end"}))),n("slot",{name:"tab-content-header"}),n("div",{part:"body",class:"nano-tab-group__body",onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},n("slot",{onSlotchange:this.handleContentSlotChange}))))}get host(){return i(this)}static get watchers(){return{tab:["handleTabNameChange"],placement:["handlePlacementChange"],noScrollControls:["handleNoScrollControlsChange"],hideControlRight:["hideRightBtn"],hideControlLeft:["hideLeftBtn"],hasScrollControls:["watchScrollControls"]}}};p.style=d;export{p as nano_tab_group};
+import{r as t,c as a,h as n,a as o,g as i}from"./index-9695db0a.js";import{g as s,a as r}from"./dom-8599fac1.js";import{s as e}from"./scroll-762b3e1a.js";import{C as l}from"./component-store-64043183.js";import{c as h}from"./theme-931bd452.js";import{d as c}from"./transitions-5aecdeeb.js";import"./throttle-ac4fcefa.js";const d=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-track-color:#e4e6e8;--indicator-size:0;--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background-rgb:var(--nano-layer-bg-rgb, 255 255 255);--scroll-btn-color:"currentColor";--content-padding:2rem 2.5rem;--content-bg:rgb(var(--background-rgb));--content-border-radius:var(--border-radius);--tabs-padding-start:2.5rem;--tabs-padding-end:2.5rem;--tabs-padding-top:0;--tabs-padding-bottom:0;--tabs-container-bg:"transparent";--tabs-bg-rgb:var(--background-rgb);--tab-border-radius:var(--border-radius) var(--border-radius) 0 0;--tab-text-color:#007495;--shadow-opacity:0.1;--fade-transparency:0;display:block;position:relative;z-index:var(--nano-layer-index-raised, 5)}@media only screen and (max-width: 768px){:host{--tabs-padding-start:1.5rem;--tabs-padding-end:1.5rem}}:host ::slotted(nano-tab){--tab-indicator-color:var(--indicator-color);--bg-rgb:var(--tabs-bg-rgb);--border-radius:var(--tab-border-radius);--grab-offset-x:var(--tabs-padding-start)}:host([placement=start]){--content-border-radius:0 var(--border-radius) var(--border-radius) 0;--content-padding:1rem;--tab-border-radius:0;--tabs-padding-start:0;--tabs-padding-end:0;--tabs-padding-top:0;--tabs-padding-bottom:0;--tab-text-color:#455556;--indicator-color:#007495;--indicator-size:2px}:host(.nano-color){--indicator-color:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--tab-text-color:rgb(var(--nano-color-base-rgb) / 70%)}:host(.nano-color) ::slotted(nano-tab){--active-text-color:var(--nano-color-shade, var(--nano-color-primary-shade, #00637f))}.nano-tab-group{display:flex;border-radius:0;inline-size:100%;flex:inherit}.nano-tab-group__tabs{display:flex;position:relative;inline-size:100%}.nano-tab-group__active-tab-indicator{position:absolute;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease}.nano-tab-group__body{background:var(--content-bg)}.nano-tab-group .nano-tab-group__nav-container{position:relative;display:flex;background:var(--tabs-container-bg)}.nano-tab-group button{-webkit-appearance:none;appearance:none;background-color:transparent}.nano-tab-group__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;inset-block:0;border:unset;z-index:2;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color)}.nano-tab-group__scroll-button:focus{outline:none}.nano-tab-group__scroll-button.is-shown{opacity:1}.nano-tab-group__scroll-button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tab-group__scroll-button--left{inset-inline-start:0}.nano-tab-group__scroll-button--right{inset-inline-end:0}.nano-tab-group__scroll-button nano-icon{font-size:16px}.nano-tab-group--top{flex-direction:column}.nano-tab-group--top .nano-tab-group__nav-container::after{content:"";inline-size:86%;box-shadow:0 10px 40px 10px rgb(0 0 0/var(--shadow-opacity));block-size:10px;position:absolute;inset-inline-start:7%;inset-block-end:-10px;border-radius:10px;z-index:-1}.nano-tab-group--top .nano-tab-group__nav{scrollbar-width:none;-ms-overflow-style:none;padding-inline:var(--tabs-padding-start) var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);display:flex;overflow:auto hidden;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - var(--tabs-padding-end) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - var(--tabs-padding-end) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgb(0 0 0/var(--fade-transparency)));-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 4);mask-size:calc(100% + var(--tabs-padding-end) * 4);-webkit-mask-position:calc(var(--tabs-padding-end) * -2);mask-position:calc(var(--tabs-padding-end) * -2)}.nano-tab-group--top .nano-tab-group__nav::-webkit-scrollbar{inline-size:0;block-size:0}.nano-tab-group--top .nano-tab-group__nav::after{content:" ";padding-inline:0 var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);line-height:1;flex:0 0 auto}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left .nano-tab-group__nav{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 2);mask-size:calc(100% + var(--tabs-padding-end) * 2)}.nano-tab-group--top.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-position:calc(var(--tabs-padding-end) * -1);mask-position:calc(var(--tabs-padding-end) * -1);-webkit-mask-size:calc(100% + var(--tabs-padding-end));mask-size:calc(100% + var(--tabs-padding-end))}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.nano-tab-group--top .nano-tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row;text-align:center;color:var(--tab-text-color);inline-size:auto}.nano-tab-group--top .nano-tab-group__active-tab-indicator{inset-block-end:-2px;border-block-end:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--top .nano-tab-group__body{order:2;background:var(--content-bg);position:relative;overflow:hidden;inline-size:auto;display:flex;justify-content:center;padding:var(--content-padding);border-radius:var(--content-border-radius);flex:1 1 auto}.nano-tab-group--start{flex-direction:row}.nano-tab-group--start .nano-tab-group__tabs{flex:0 0 auto;flex-direction:column;color:var(--tab-text-color);background:rgb(var(--tabs-bg-rgb));border-inline-start:solid var(--indicator-size) var(--indicator-track-color);text-align:start}.nano-tab-group--start .nano-tab-group__active-tab-indicator{inset-inline-start:-2px;border-inline-start:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--start .nano-tab-group__body{flex:1 1 auto;order:2;padding:var(--content-padding);overflow:hidden;border-radius:var(--content-border-radius)}';let b=0;const p=class{constructor(n){t(this,n);this.nanoTabShow=a(this,"nanoTabShow",7);this.nanoTabHide=a(this,"nanoTabHide",7);this.nanoTabWillClose=a(this,"nanoTabWillClose",7);this.nanoTabClose=a(this,"nanoTabClose",7);this.baseId=`nano-tab-group-${++b}`;this.initialTouchX=null;this.initialTouchY=null;this.mutationObservers=new WeakMap;this.updateScrollControls=()=>{if(this.noScrollControls){this.hasScrollControls=false}else{this.hasScrollControls=["top"].includes(this.placement)&&this.nav.scrollWidth>this.nav.clientWidth&&this.nav.scrollWidth>this.tabs.clientWidth}};this.handleClick=t=>{const a=t.target;const n=a.closest("nano-tab");if(n)this.setActiveTab(n)};this.handleKeyDown=t=>{const a=document.activeElement;if(!a||a.tagName.toLowerCase()!=="nano-tab")return;if(["Enter"," "].includes(t.key)){const a=t.target;const n=a.closest("nano-tab");if(n){this.setActiveTab(n);t.preventDefault();t.stopPropagation()}}if(!["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key))return;const n=this.getAllActiveTabs;let o=n.indexOf(a);if(t.key==="Home")o=0;if(t.key==="End")o=n.length-1;if(this.placement==="top"){if(this.isRtl&&t.key==="ArrowRight"||!this.isRtl&&t.key==="ArrowLeft"){o=Math.max(0,o-1)}if(this.isRtl&&t.key==="ArrowLeft"||!this.isRtl&&t.key==="ArrowRight"){o=Math.min(n.length-1,o+1)}}if(this.placement==="start"){if(t.key==="ArrowUp")o=Math.max(0,o-1);if(t.key==="ArrowDown")o=Math.min(n.length-1,o+1)}n[o].setFocus();if(this.placement==="top"){e(n[o],this.nav,"horizontal","center")}t.stopPropagation();t.preventDefault()};this.handleTabScroll=()=>{if(!this.hasScrollControls){this.hideControlLeft=this.hideControlRight=true;return}const t=this.isRtl?this.nav.scrollLeft===0:this.nav.scrollWidth-this.nav.scrollLeft===this.nav.clientWidth;const a=this.isRtl?this.nav.scrollWidth+this.nav.scrollLeft===this.nav.clientWidth:this.nav.scrollLeft===0;if(a){this.hideControlLeft=true;this.hideControlRight=false}else if(t){this.hideControlLeft=false;this.hideControlRight=true}else{this.hideControlRight=false;this.hideControlLeft=false}};this.handleBtnClick=(t=false)=>{const a=this.getNavWidth();let n;if(t)n=this.nav.scrollLeft+a-20;else n=this.nav.scrollLeft-a+20;try{this.nav.scroll({left:n,behavior:"smooth"})}catch(t){this.nav.scrollLeft=n}};this.handleTouchStart=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];this.initialTouchX=a.pageX;this.initialTouchY=a.pageY};this.handleTouchEnd=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];const n=a.pageX-this.initialTouchX;const o=70;const i=this.initialTouchX-a.clientX;const s=this.initialTouchY-a.clientY;const r=Math.abs(n)>=o&&Math.abs(s)<=50;const e=this.getAllActiveTabs;const l=e.findIndex((t=>t.active));if(r){const t=n<0&&this.placement==="top"||n>0&&this.placement!=="top"?1:-1;if(e[l+t]){this.setActiveTab(e[l+t]);if(Math.abs(i)>Math.abs(s)){if(i>0)this.activePanel.setAttribute("animation-dir","left");else this.activePanel.setAttribute("animation-dir","right")}}}this.initialTouchX=null;this.initialTouchY=null};this.handleContentSlotChange=()=>{setTimeout((()=>{this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false)}))};this.handleTabSlotChange=t=>{setTimeout((()=>{this.setAriaLabels();this.handleTabScroll();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);this.updateScrollControls()}),500);const a=t.target.assignedElements({flatten:true});a.forEach((t=>{if(!this.mutationObservers.get(t)){const a=new MutationObserver((()=>{setTimeout((()=>{this.syncActiveTabIndicator();this.handleTabScroll();this.updateScrollControls()}),500)}));this.mutationObservers.set(t,a);a.observe(t,{characterData:true,childList:true,subtree:true})}}))};this.hasScrollControls=false;this.hideControlRight=true;this.hideControlLeft=true;this.tab=undefined;this.placement="top";this.noScrollControls=false;this.color=undefined;this.storeId=undefined;this.storeMethod="session";this.disableSwipe=undefined}handleTabNameChange(){if(this.activeTab&&this.activeTab.panel===this.tab)return;const t=this.getAllActiveTabs.find((t=>t.panel===this.tab));this.setActiveTab(t)}handlePlacementChange(){this.syncActiveTabIndicator()}handleNoScrollControlsChange(){this.updateScrollControls()}hideRightBtn(){if(!this.rightBtn)return;c(this.rightBtn,{className:"is-shown",show:!this.hideControlRight})}hideLeftBtn(){if(!this.leftBtn)return;c(this.leftBtn,{className:"is-shown",show:!this.hideControlLeft})}watchScrollControls(){if(this.hasScrollControls)setTimeout((t=>this.handleTabScroll()),20);else setTimeout((t=>{this.hideControlLeft=this.hideControlRight=true}),20)}async show(t){if(this.activeTab&&this.activeTab.panel===t)return;const a=this.getAllActiveTabs.find((a=>a.panel===t));if(a)this.setActiveTab(a)}get getAllActiveTabs(){return this.getAllTabs.filter((t=>!t.disabled))}get getAllTabs(){return s(this.host,"nano-tab")}get getAllPanels(){return s(this.host,"nano-tab-content")}get getActiveTab(){return this.getAllActiveTabs.find((t=>t.active))}setActiveTab(t,a=true){if(t&&t!==this.activeTab&&!t.disabled&&this.getAllActiveTabs.includes(t)){const n=this.activeTab;this.activeTab=t;this.tab=t.panel;this.getAllActiveTabs.map((t=>t.active=t===this.activeTab));this.getAllPanels.map((t=>{if(t.name===this.activeTab.panel){t.active=true;this.activePanel=t}else t.active=false;t.removeAttribute("animation-dir")}));this.syncActiveTabIndicator();if(this.nav&&["top"].includes(this.placement)){e(this.activeTab,this.nav,"horizontal","center")}if(a){if(n){this.nanoTabHide.emit({name:n.panel})}this.nanoTabShow.emit({name:this.activeTab.panel})}}}setAriaLabels(){const t=this.getAllActiveTabs;const a=this.getAllPanels;t.map(((t,n)=>{const o=a.find((a=>a.name===t.panel));if(o){if(!o.id)o.id=`${this.baseId}-panel-${n}`;if(!t.id)t.id=`${this.baseId}-tab-${n}`;t.setAttribute("aria-controls",o.id);o.setAttribute("aria-labelledby",t.id)}}))}syncActiveTabIndicator(){this.getAllTabs.forEach((t=>t.setAttribute("direction",this.placement==="top"?"horizontal":"vertical")));const t=this.getActiveTab;if(!t)return;const a=t.shadowRoot.querySelector(".nanotab")?.clientWidth||0;const n=t.clientHeight;const o=r(t,this.tabs);if(!this.activeTabIndicator)return;const i=o.top+this.nav.scrollTop;const s=o.left;switch(this.placement){case"top":this.activeTabIndicator.style.width=`${a}px`;this.activeTabIndicator.style.height=null;this.activeTabIndicator.style.transform=`translateX(${s}px)`;break;case"start":this.activeTabIndicator.style.width=null;this.activeTabIndicator.style.height=`${n}px`;this.activeTabIndicator.style.transform=`translateY(${i}px)`;break}}getNavWidth(){if(!this.nav)return 0;const t=getComputedStyle(this.nav);let a=this.nav.clientWidth;return a-=parseFloat(t.paddingLeft)+parseFloat(t.paddingRight)}handleTabClose(t){let a=this.getAllActiveTabs.indexOf(t.target);const n=t.target;if(a<0)return;const o=this.getAllPanels.find((t=>t.name===n.panel));if(!o)return;t.stopImmediatePropagation();const i=this.nanoTabWillClose.emit({name:n.panel});if(i.defaultPrevented)return;if(n.active){a=a===0?1:a-1;const t=this.getAllActiveTabs[a]?.panel;if(t)this.host.show(t)}n.remove();o.remove();this.nanoTabClose.emit({name:n.panel})}componentDidLoad(){const t=new IntersectionObserver(((t,a)=>{if(t[0].intersectionRatio>0){this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);if(this.storeId)l.init(this,["tab"],this.storeMethod,this.storeId);a.unobserve(t[0].target)}}));t.observe(this.host);requestAnimationFrame((()=>this.updateScrollControls()));if(!window["ResizeObserver"])return;this.resizeObserver=new ResizeObserver((()=>{setTimeout((()=>{this.updateScrollControls();this.syncActiveTabIndicator();e(this.activeTab,this.nav,"horizontal","center")}),500)}));this.resizeObserver.observe(this.nav)}connectedCallback(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl"}disconnectedCallback(){if(this.resizeObserver)this.resizeObserver.unobserve(this.nav)}render(){this.isRtl=this.host.ownerDocument.dir==="rtl";return n(o,{class:{...h(this.color)},dir:this.isRtl?"rtl":null},n("div",{part:"base",class:{"nano-tab-group":true,"nano-tab-group--top":this.placement==="top","nano-tab-group--start":this.placement==="start","nano-tab-group--has-scroll-controls":this.hasScrollControls,"nano-tab-group--has-scroll-controls-left":!this.hideControlLeft,"nano-tab-group--has-scroll-controls-right":!this.hideControlRight},onClick:this.handleClick,onKeyDown:this.handleKeyDown},n("div",{class:"nano-tab-group__nav-container",part:"nav"},this.placement==="top"&&n("button",{disabled:!this.hasScrollControls,class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--left":true},ref:t=>this.leftBtn=t,onClick:()=>this.handleBtnClick(false)},n("nano-icon",{name:"light/chevron-left",ariaLabel:"Scroll tabs towards the start"})),n("div",{ref:t=>this.nav=t,class:"nano-tab-group__nav",onScroll:this.handleTabScroll},n("div",{ref:t=>this.tabs=t,part:"tabs",class:"nano-tab-group__tabs",role:"tablist","aria-orientation":this.placement==="start"?"vertical":"horizontal"},n("div",{ref:t=>this.activeTabIndicator=t,part:"active-tab-indicator",class:"nano-tab-group__active-tab-indicator"}),n("slot",{name:"tabs",onSlotchange:this.handleTabSlotChange}))),this.placement==="top"&&n("button",{disabled:!this.hasScrollControls,class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--right":true},ref:t=>this.rightBtn=t,onClick:()=>this.handleBtnClick(true)},n("nano-icon",{name:"light/chevron-right",ariaLabel:"Scroll tabs towards the end"}))),n("slot",{name:"tab-content-header"}),n("div",{part:"body",class:"nano-tab-group__body",onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},n("slot",{onSlotchange:this.handleContentSlotChange}))))}get host(){return i(this)}static get watchers(){return{tab:["handleTabNameChange"],placement:["handlePlacementChange"],noScrollControls:["handleNoScrollControlsChange"],hideControlRight:["hideRightBtn"],hideControlLeft:["hideLeftBtn"],hasScrollControls:["watchScrollControls"]}}};p.style=d;export{p as nano_tab_group};
 //# sourceMappingURL=nano-tab-group.entry.js.map