@nanoporetech-digital/components 7.6.0 → 7.8.0

package/dist/collection/components/global-nav/style/global-nav.css

@@ -52,11 +52,11 @@
   display: flex;
   align-items: center;
 }
-.global-nav .icon-btn nano-icon {
+.global-nav .icon-btn .nano-icon {
   inline-size: 18px;
   block-size: 18px;
 }
-.global-nav ::slotted(nano-nav-item[slot=icon]) {
+.global-nav ::slotted(.nano-nav-item[slot=icon]) {
   --padding-top: 9px;
   --padding-bottom: 9px;
   --padding-start: 7px;
@@ -154,11 +154,11 @@
 .main-bar > * {
   flex: 0 0 auto;
 }
-.main-bar > * ::slotted(nano-nav-item[slot=icon]) {
+.main-bar > * ::slotted(.nano-nav-item[slot=icon]) {
   margin-inline-start: 11px;
 }
-.main-bar > * ::slotted(nano-nav-item),
-.main-bar > * nano-nav-item {
+.main-bar > * ::slotted(.nano-nav-item),
+.main-bar > * .nano-nav-item {
   --color-hover: var(--bar-color-focus);
   --secondary-bg-color: var(--bar-dropdown-bg);
   --secondary-color: var(--bar-dropdown-text);
@@ -207,8 +207,8 @@
   display: flex;
   justify-content: space-around;
 }
-.main-bar .nav-links ::slotted(nano-nav-item),
-.main-bar .nav-links nano-nav-item {
+.main-bar .nav-links ::slotted(.nano-nav-item),
+.main-bar .nav-links .nano-nav-item {
   --padding-top: 7px;
   --padding-bottom: 7px;
   --padding-end: 2px;
@@ -223,7 +223,7 @@
   font-size: 1.065em;
   margin-inline-end: auto;
 }
-.main-bar .nav-links--main ::slotted(nano-nav-item) {
+.main-bar .nav-links--main ::slotted(.nano-nav-item) {
   --color: var(--bar-text-color);
   --padding-end: 3px;
   --padding-start: 0;
@@ -332,8 +332,8 @@
   display: flex;
   flex-wrap: wrap;
 }
-.gn-menu .nav-links ::slotted(nano-nav-item),
-.gn-menu .nav-links nano-nav-item {
+.gn-menu .nav-links ::slotted(.nano-nav-item),
+.gn-menu .nav-links .nano-nav-item {
   --icon-size: 14px;
   --display: inline-block;
   --secondary-bg-color: #001a21;
@@ -355,8 +355,8 @@
   font-weight: bold;
   margin: 5px 0 0;
 }
-.gn-menu .nav-links .user-nav ::slotted(nano-nav-item),
-.gn-menu .nav-links .user-nav nano-nav-item {
+.gn-menu .nav-links .user-nav ::slotted(.nano-nav-item),
+.gn-menu .nav-links .user-nav .nano-nav-item {
   font-weight: 400;
   --bg-color: transparent;
 }
@@ -405,7 +405,7 @@
 .gn-menu .nav-links .back-btn:hover {
   color: var(--menu-text-color);
 }
-.gn-menu .nav-links .back-btn nano-icon {
+.gn-menu .nav-links .back-btn .nano-icon {
   margin-inline-end: 10px;
   font-size: 12px;
   color: var(--menu-icon-color);
@@ -414,8 +414,8 @@
   display: flex;
   flex-wrap: wrap;
 }
-.gn-menu .nav-links--sub ::slotted(nano-nav-item),
-.gn-menu .nav-links--sub nano-nav-item {
+.gn-menu .nav-links--sub ::slotted(.nano-nav-item),
+.gn-menu .nav-links--sub .nano-nav-item {
   --border-bottom: none;
   --padding-end: var(--menu-padding);
   --padding-start: var(--menu-padding);
@@ -425,8 +425,8 @@
   inline-size: 50%;
   line-height: 1.8;
 }
-.gn-menu .nav-links--sites ::slotted(nano-nav-item),
-.gn-menu .nav-links--sites nano-nav-item {
+.gn-menu .nav-links--sites ::slotted(.nano-nav-item),
+.gn-menu .nav-links--sites .nano-nav-item {
   inline-size: 100%;
 }
 .gn-menu .nav-links .content {
@@ -436,7 +436,7 @@
   padding-inline: 7px var(--menu-padding);
   padding-block: var(--menu-padding);
 }
-.gn-menu .login-btn nano-icon {
+.gn-menu .login-btn .nano-icon {
   margin-inline-start: 10px;
 }
 .gn-menu .logout-btn {
@@ -509,13 +509,13 @@
   --nano-input-border-color--focus: var(--bar-search-focus);
   font-size: 1.1875em;
 }
-.search-bar .search-widget nano-select.search-input {
+.search-bar .search-widget .nano-select.search-input {
   --input-border-width: 2px 3px 0 0;
   --input-bg-color: var(--bar-search-focus);
   --input-bg-color--focus: #f3f3f3;
   color: #f3f3f3;
 }
-.search-bar .search-widget nano-select.search-input.has-focus {
+.search-bar .search-widget .nano-select.search-input.has-focus {
   color: var(--bar-search-focus);
 }
 .search-bar .search-widget .select-input__arrow {
@@ -619,7 +619,7 @@
   background-color: #e4e6e8;
 }
 
-nano-select.search-input {
+.nano-select.search-input {
   --input-border-width: 0 0 2px 0;
   --input-text-color: var(--bar-text-color);
   --nano-input-border-color: rgb(103 138 154);
@@ -637,15 +637,15 @@ nano-select.search-input {
   inset-inline-start: 1px;
   text-transform: uppercase;
 }
-:host(:not(.ready)) nano-select.search-input {
+:host(:not(.ready)) .nano-select.search-input {
   overflow: hidden;
   max-block-size: 1em;
 }
-nano-select.search-input .down-arrow {
+.nano-select.search-input .down-arrow {
   font-size: 0.65em;
 }
 
-nano-input.search-input {
+.nano-input.search-input {
   --clear-btn-color: var(--bar-text-color);
   --nano-input-border-color: rgb(103 138 154);
   --input-border-width: 0 0 2px 0;
@@ -660,28 +660,28 @@ nano-input.search-input {
   flex-direction: column;
   flex: 1;
 }
-:host(:dir(rtl)) nano-input.search-input {
+:host(:dir(rtl)) .nano-input.search-input {
   --input-border-radius: 5px 0 0 5px;
 }
 
-:host-context([dir=rtl]) nano-input.search-input {
+:host-context([dir=rtl]) .nano-input.search-input {
   --input-border-radius: 5px 0 0 5px;
 }
 
-:host(:not(.ready)) nano-input.search-input {
+:host(:not(.ready)) .nano-input.search-input {
   overflow: hidden;
   max-block-size: 1em;
 }
-nano-input.search-input .search-icon {
+.nano-input.search-input .search-icon {
   background: none;
   padding: 0 8px;
   display: none;
   font-size: 0.9em;
 }
-nano-input.search-input .search-icon--show {
+.nano-input.search-input .search-icon--show {
   display: flex !important;
 }
-nano-input.search-input .search-icon--loader {
+.nano-input.search-input .search-icon--loader {
   animation: spin 1s linear infinite;
 }
 @keyframes spin {
@@ -689,7 +689,7 @@ nano-input.search-input .search-icon--loader {
     transform: rotate(360deg);
   }
 }
-nano-input.search-input .search-icon nano-icon {
+.nano-input.search-input .search-icon .nano-icon {
   block-size: 1.4em;
 }
 
@@ -752,14 +752,14 @@ nano-input.search-input .search-icon nano-icon {
   font-weight: 400;
   padding: 7px;
 }
-.user-links .icon-btn nano-icon {
+.user-links .icon-btn .nano-icon {
   margin-inline-start: 5px;
   inline-size: 16px;
   block-size: 16px;
   transform-origin: center;
   transition: transform 0.2s ease, color 0.2s ease;
 }
-.user-links .icon-btn.open nano-icon {
+.user-links .icon-btn.open .nano-icon {
   transform: rotate(180deg);
   color: #007495;
 }

package/dist/collection/components/global-search-results/global-search-results.css

@@ -121,7 +121,7 @@
   padding-inline: 10px 4px;
   padding-block: 2px 1px;
 }
-.main-search__applied-filter .icon-button nano-icon {
+.main-search__applied-filter .icon-button .nano-icon {
   pointer-events: none;
 }
 .main-search .topbar__bkbtn {
@@ -146,11 +146,11 @@
 :host(.small) .main-search .topbar__order {
   max-inline-size: 300px;
 }
-.main-search .topbar nano-select {
+.main-search .topbar .nano-select {
   opacity: 1;
   transition: 0.1s ease opacity;
 }
-.main-search .topbar nano-select:not(.hydrated) {
+.main-search .topbar .nano-select:not(.hydrated) {
   opacity: 0;
 }
 .main-search .topbar__show-filters {
@@ -160,7 +160,7 @@
   flex-direction: column;
   align-items: center;
 }
-.main-search .topbar__show-filters nano-icon {
+.main-search .topbar__show-filters .nano-icon {
   font-size: 20px;
 }
 :host(.small) .main-search .topbar__show-filters {
@@ -285,15 +285,15 @@
   margin: 0;
   padding: 0;
 }
-.filters nano-details {
+.filters .nano-details {
   --padding: 0.8em;
   margin: 0.8em 0;
 }
-.filters nano-details strong[slot] {
+.filters .nano-details strong[slot] {
   display: block;
   padding-inline-start: calc(20px - 0.8em);
 }
-.filters nano-details nano-icon[slot=icon-end] {
+.filters .nano-details .nano-icon[slot=icon-end] {
   padding-inline: calc(20px - 0.8em);
 }
 .filters li:last-child .filter-label {
@@ -402,7 +402,7 @@
   text-decoration: none;
   font-weight: 600;
 }
-.result__title nano-icon {
+.result__title .nano-icon {
   margin-inline: 0 0.5em;
   margin-block: 0;
   min-inline-size: 20px;
@@ -567,7 +567,7 @@
 .result__promo-venue {
   font-size: 12px;
 }
-.result__promo nano-icon {
+.result__promo .nano-icon {
   color: #007495;
   position: relative;
   inset-block-start: 1px;
@@ -590,7 +590,7 @@
     block-size: 80px;
   }
 }
-.result__image nano-icon {
+.result__image .nano-icon {
   position: absolute;
   inset-block-start: calc(50% - 0.75rem);
   inset-inline-start: calc(50% - 0.75rem);
@@ -601,7 +601,7 @@
   --primary-opacity: 1;
 }
 @media (max-width: 576px) {
-  .result__image nano-icon {
+  .result__image .nano-icon {
     font-size: 3rem;
     inset-block-start: calc(50% - 1.5rem);
     inset-inline-start: calc(50% - 1.5rem);

package/dist/collection/components/global-search-results/global-search-results.js

@@ -1,8 +1,9 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { h, Host, } from "@stencil/core";
+import { Host, } from "@stencil/core";
 import searchInsight from "../../utils/search-insights";
+import { transformTag, h } from "../../utils/renderer";
 const filterOldPosts = 'created > ' + Math.floor((Date.now() - 63115200000) / 1000);
 /**
  * Nanopore Global Search results component
@@ -46,7 +47,7 @@ export class GlobalSearchResults {
         }
     }
     handleGlobalNavReset(e) {
-        if (e.target.tagName !== 'NANO-GLOBAL-NAV')
+        if (e.target.tagName.toLowerCase() !== transformTag('nano-global-nav'))
             return;
         this.algoliaResultsEle = null;
         this.goback();
@@ -55,7 +56,7 @@ export class GlobalSearchResults {
         const { detail: { meta, client }, } = e;
         this.apiKey = client.apiKey;
         this.appId = client.appId;
-        if (e.target.tagName !== 'NANO-GLOBAL-NAV')
+        if (e.target.tagName.toLowerCase() !== transformTag('nano-global-nav'))
             return;
         this.index = {
             name: meta.indexTitle,
@@ -225,7 +226,10 @@ export class GlobalSearchResults {
         this.ro.observe(this.el);
     }
     render() {
-        return (h(Host, { key: 'b592c70a9e711647256cf69f24b7a7b3ebc9e11a', class: { small: this.currentWidth < 677 }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : undefined }, h("nano-algolia", { key: 'cdede8937fca673686c787905bca39b8b348bdc5', storeId: "searchq", storeMethod: "url-hash-push", class: "main-search__wrap sc-nano-global-search-results", ref: (ele) => requestAnimationFrame(() => (this.algoliaEle = ele)), id: "main-search" }, h("template", { key: '21ce1d40b839c2945c7a2a8dce97017ac569842d', slot: "template" }, 
+        return (h(Host, { key: '9e9ee3d64c3887ab038de05adbcf01164904a267', class: {
+                small: this.currentWidth < 677,
+                'nano-global-search-results': true,
+            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : undefined }, h("nano-algolia", { key: '2716189744e26d36ab20ba3ce0d4e48852586955', storeId: "searchq", storeMethod: "url-hash-push", class: "main-search__wrap sc-nano-global-search-results", ref: (ele) => requestAnimationFrame(() => (this.algoliaEle = ele)), id: "main-search" }, h("template", { key: '048798b2c38c9af665c8555b366c545c57387fdc', slot: "template" }, 
         /* html */ `<div class="main-search sc-nano-global-search-results">
               <nano-algolia-results id="main-search-results" class="main-search__results sc-nano-global-search-results" infinite-scroll>
                 <script type="text/template" slot="start-template">
@@ -610,7 +614,7 @@ export class GlobalSearchResults {
                   </div>
                 </div>
               {{ /if }}
-            </div>`), h("div", { key: 'd295f3b569dcd1daa7a0a10148489519e2b8bce1', slot: "output" }), h("slot", { key: '156692c55474bd2b3694396fb8de9f98da8b5aab' }))));
+            </div>`), h("div", { key: '836a3c9ba7855d4f08420f55c2df97c65438abad', slot: "output" }), h("slot", { key: 'a025d95f4ae2195f4aced3ade5acc3a433cbf3f5' }))));
     }
     static get is() { return "nano-global-search-results"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/global-search-results/global-search-results.js.map

@@ -1 +1 @@
-{"version":3,"file":"global-search-results.js","sourceRoot":"","sources":["../../../../src/components/global-search-results/global-search-results.tsx"],"names":[],"mappings":"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","sourcesContent":["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 {\n  AlgoliaSearchResultDetail,\n  IndexResult,\n  SearchIndex,\n} from '../algolia/algolia-interface';\nimport { NanoAlgoliaResultsCustomEvent } from '../../components';\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: AlgoliaSearchResultDetail };\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: HTMLElement = e.target.closest('.result');\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={this.el.ownerDocument.dir === 'rtl' ? 'rtl' : undefined}\n      >\n        <nano-algolia\n          storeId=\"searchq\"\n          storeMethod=\"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/xmark\"></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/magnifying-glass\" 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-days\"></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/xmark\"></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"]}
+{"version":3,"file":"global-search-results.js","sourceRoot":"","sources":["../../../../src/components/global-search-results/global-search-results.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\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 {\n  AlgoliaSearchResultDetail,\n  IndexResult,\n  SearchIndex,\n} from '../algolia/algolia-interface';\nimport { NanoAlgoliaResultsCustomEvent } from '../../components';\nimport { transformTag, h } from '../../utils/renderer';\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.toLowerCase() !== transformTag('nano-global-nav'))\n      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: AlgoliaSearchResultDetail };\n\n    this.apiKey = client.apiKey;\n    this.appId = client.appId;\n\n    if (e.target.tagName.toLowerCase() !== transformTag('nano-global-nav'))\n      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: HTMLElement = e.target.closest('.result');\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={{\n          small: this.currentWidth < 677,\n          'nano-global-search-results': true,\n        }}\n        dir={this.el.ownerDocument.dir === 'rtl' ? 'rtl' : undefined}\n      >\n        <nano-algolia\n          storeId=\"searchq\"\n          storeMethod=\"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/xmark\"></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/magnifying-glass\" 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-days\"></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/xmark\"></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"]}

package/dist/collection/components/grid/grid-item.js

@@ -17,7 +17,7 @@ export class GridItem {
      * m-row-start-2
      */
     render() {
-        return h("slot", { key: '4515e532ac60ce23823d8918613c9783ae1751ea' });
+        return h("slot", { key: '8455879c23d6022649f66a70f8812ce6129d0da1' });
     }
     static get is() { return "nano-grid-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/grid/grid.js

@@ -15,8 +15,9 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
         return Reflect.metadata(k, v);
 };
-import { h, Host } from "@stencil/core";
+import { Host } from "@stencil/core";
 import { ConstructibleStyle } from "../../utils/constructible-style";
+import { h } from "../../utils/renderer";
 /**
  * A lightweight, context-aware CSS grid implementation.
  *
@@ -176,7 +177,7 @@ export class Grid {
         this.constructSizeArray();
     }
     render() {
-        return (h(Host, { key: '2eebb69e86c8ba0a00a3e589986514723cc3292b' }, h("div", { key: '9cd5af7437da2dc43540cfd7ef63fe3182efe67c', part: "grid", class: "grid", "cache-key": this.cacheKey }, h("slot", { key: 'c078a0403599f3fed6c4f525188f2ea53eb1513d' })), this.showHelper && (h("div", { key: 'a429c6a72df606909afcbbdda2fedc59d1767f4f', class: "grid grid--helper", part: "helper", "cache-key": this.cacheKey }, [...Array(24)].map(() => (h("div", { class: "grid__helper-item" })))))));
+        return (h(Host, { key: '0299504cb77aa4332c7dc2c2d895513938844d10', clas: "nano-grid" }, h("div", { key: 'ea2a3faf3994483ae290955ba4ba6a6a8afa4a94', part: "grid", class: "grid", "cache-key": this.cacheKey }, h("slot", { key: '8b0233a9a7b6fece32ddc3ebe7753efcf3d494cd' })), this.showHelper && (h("div", { key: 'e2a9d7d2dad1ce5a1b41716a377631123e74ebcd', class: "grid grid--helper", part: "helper", "cache-key": this.cacheKey }, [...Array(24)].map(() => (h("div", { class: "grid__helper-item" })))))));
     }
     static get is() { return "nano-grid"; }
     static get encapsulation() { return "shadow"; }