@nanoporetech-digital/components 7.9.1 → 8.0.0-alpha.0

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

@@ -1,676 +1,9 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
-import { proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
-import { s as searchInsight } from './search-insights.js';
-import { t as transformTag, h } from './renderer.js';
-import { d as defineCustomElement$3 } from './algolia.js';
-import { d as defineCustomElement$2 } from './spinner.js';
-
-const globalSearchResultsCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:block;flex:1 1 100%}.main-search{display:flex;background:white;font-size:14px;min-block-size:calc(100vh - 63px);justify-content:space-between}.main-search__wrap{display:contents;block-size:100%}.main-search ul{margin:0;padding:0;list-style:none}.main-search li{margin:0;padding:0}.main-search button:not(.result__tags-tag){appearance:none;border:none;background:none;position:relative;inset-block-start:-2px}.main-search .icon-button{color:inherit;align-self:normal;padding:9px 7px;cursor:pointer;display:flex;align-items:center}.main-search__topbar{display:flex;align-items:center;flex-wrap:wrap;margin-block-end:1em}.main-search__topbar::after{content:\"\";inline-size:calc(100% - 30px);inset-inline-start:30px;position:relative;border-block-end:1px solid #e5eef1;padding-block-start:0.9em}.main-search__applied-filters{border:solid 1px #e4e6e8;text-transform:uppercase;border-radius:3px;font-weight:bold;display:flex;align-items:center;line-height:0.9;padding:5px 5px 0;letter-spacing:2px;flex-wrap:wrap;margin-block-end:0.5rem}.main-search__applied-filters span{display:flex;align-items:center}:host(.small) .main-search__applied-filters{display:none}.main-search__applied-nofilter{margin-inline:0 5px;margin-block:0 3px;padding-inline:7px;padding-block:10px;font-size:12px;color:rgba(69, 85, 86, 0.85)}.main-search__applied-filter{padding-inline:8px 2px;padding-block:5px 3px;margin-inline:0 5px;margin-block:0 5px;color:#455556;font-size:11px;border-radius:2px;border:solid 1px rgba(0, 132, 169, 0.5);background-color:rgba(0, 132, 169, 0.2);line-height:1}.main-search__applied-filter .icon-button{padding-inline:10px 4px;padding-block:2px 1px}.main-search__applied-filter .icon-button .nano-icon{pointer-events:none}.main-search .topbar__bkbtn{position:relative;inset-inline-start:-7px}:host(.small) .main-search .topbar__query{display:none}.main-search .topbar__filtering{display:flex;align-items:center;margin-block:0;margin-inline:1em 0;flex:1}.main-search .topbar__order{min-inline-size:175px;max-inline-size:200px;margin-inline-start:auto}:host(.small) .main-search .topbar__order{max-inline-size:300px}.main-search .topbar .nano-select{opacity:1;transition:0.1s ease opacity}.main-search .topbar .nano-select:not(.hydrated){opacity:0}.main-search .topbar__show-filters{margin-inline-start:0.5em;text-transform:uppercase;display:none;flex-direction:column;align-items:center}.main-search .topbar__show-filters .nano-icon{font-size:20px}:host(.small) .main-search .topbar__show-filters{display:flex}.main-search .topbar__filter-count{inline-size:12px;block-size:12px;box-shadow:inset 0 3px 4px 0 rgba(0, 0, 0, 0.2);border:solid 1px #005c76;background-color:#005c76;color:white;font-size:7px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1;margin-block-end:3px}.main-search__results{font-size:14px;padding:1em 40px;color:rgba(69, 85, 86, 0.85);inline-size:70%;block-size:100%}@media (max-width: 576px){.main-search__results{padding:1em 20px}}:host(.small) .main-search__results{inline-size:100%}.main-search__filters{outline:none;padding-inline:0 40px;padding-block:1.8em 1em;flex:1 1 30%;box-sizing:border-box}@media (max-width: 576px){.main-search__filters{padding-inline-end:20px}}:host(:not(.small)) .main-search__filters{max-inline-size:350px;min-inline-size:220px}.filters{color:#455556;background:white;font-size:14px}:host(.small) .filters{position:fixed;inline-size:0;block-size:0;z-index:10;inset-block-start:0;inset-inline-end:0;transition:all 0s ease 0.5s;background:none}:host(.small) .filters.show{block-size:100vh;inline-size:100vw;transition:all 0s ease 0s}:host(.small) .filters.show::after{opacity:1}:host(.small) .filters::after{content:\"\";background:rgba(0, 0, 0, 0.5);position:absolute;inset:0;z-index:-1;opacity:0;transition:0.1s ease opacity}.filters__close-filters{display:none !important;font-size:1.4em}:host(.small) .filters__close-filters{display:inline-block !important;margin-inline:auto 0;margin-block:0}.filters__old-posts{margin-inline-start:1rem}:host(.small) .filters-wrap{position:absolute;inset-block-start:0;inset-inline-end:0;background:rgb(247, 246, 246);transform:translateX(100%);inline-size:300px;min-inline-size:200px;max-inline-size:80vw;transition:transform 0.3s ease;padding:1em;color:black;overflow:auto;block-size:100vh}:host(.small) .filters.show .filters-wrap{transform:translateX(0%);box-shadow:-3px -3px 7px rgba(0, 0, 0, 0.1)}.filters ul{margin:0;padding:0;list-style:none}.filters li{margin:0;padding:0}.filters .nano-details{--padding:0.8em;margin:0.8em 0}.filters .nano-details strong[slot]{display:block;padding-inline-start:calc(20px - 0.8em)}.filters .nano-details .nano-icon[slot=icon-end]{padding-inline:calc(20px - 0.8em)}.filters li:last-child .filter-label{margin-block-end:0}.filters .filter-label{display:flex;align-items:center;position:relative;margin:0.5em 0;line-height:1.4;z-index:0}.filters .filter-label::before{margin-inline:0 1em;margin-block:0;content:\"\";border:1px solid #007495;background:#fff;border-radius:3px;block-size:1em;inline-size:1em;min-inline-size:1em;min-block-size:1em;display:inline-block}.filters .filter-label::after{background-image:url(\"data:image/svg+xml;charset=utf-8,url-encode(\\\"<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>\\\")\");content:\"\";block-size:0.7em;inline-size:0.7em;position:absolute;inset-inline-start:2px;inset-block-start:50%;transform:translateY(-50%);z-index:1;display:block;background-size:100%;background-position:center center;background-repeat:no-repeat}.filters .filter-cb{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.filters .filter-cb:checked+.filter-label::before{background:#245a6f}.filters .filter-cb:focus+.filter-label::before{box-shadow:0 0 0 1px rgba(0, 0, 0, 0.7)}.filters-header{display:flex;align-items:center;border-block-end:1px solid #90c6e7;padding-block-end:0.5rem;margin-block-end:0.5rem}.filters-reset{color:#007495;font-size:12px;text-decoration:underline;margin-inline:auto 0;margin-block:0}:host(.small) .filters-reset{margin:0}.filters-title{margin:0;text-transform:uppercase;color:rgba(69, 85, 86, 0.85);font-weight:bold;font-size:14px}:host(.small) .filters-title{display:none}.result{text-decoration:none;display:flex;flex-flow:row wrap;padding-block-end:14px;border-block-end:1px solid #90c6e7}.result *{word-wrap:break-word;overflow-wrap:break-word}.result__title{margin:1em 0 0.5em;inline-size:70%;display:flex}.result__title a{color:#0084a9;font-size:14px;line-height:1.43;text-decoration:none;font-weight:600}.result__title .nano-icon{margin-inline:0 0.5em;margin-block:0;min-inline-size:20px;min-block-size:20px;opacity:0.8}@media (max-width: 992px){.result__title{inline-size:100%}}.result__body{color:#455556;font-size:13px;inline-size:70%;text-decoration:none}@media (max-width: 992px){.result__body{inline-size:100%}}.result__pdf{display:inline-block;margin-inline-start:0.5rem;color:#b5aea7}.result__meta{display:flex;flex-flow:row wrap;color:#455556;font-size:11px;line-height:13px;inline-size:100%;align-items:center}.result__meta>*{margin-block-start:0.5rem}.result__meta>*:not(:last-child){padding-inline-end:0}.result__meta>*:not(:last-child)::after{content:\"\";block-size:1rem;inline-size:1px;background:#90c6e7;display:inline-block;margin-inline:0.7rem}@media (max-width: 576px){.result__meta>*:not(:last-child)::after{display:none}}@media (max-width: 576px){.result__meta{flex-flow:column;align-items:flex-start}}.result__tags{display:flex;flex-flow:row wrap}@media (max-width: 576px){.result__tags{padding-inline-start:0}}.result__tags-tag{color:#455556;display:inline-block;font-size:0.4375rem;letter-spacing:1.4px;background:#fff;border-radius:2px;text-transform:uppercase;padding:0 4px 1px 5px;font-weight:600;margin:3px 0.25rem 0.25rem 0;border:1px solid #b5aea7;white-space:nowrap;line-height:13px}.result__type{font-weight:600;text-transform:capitalize;white-space:nowrap;display:flex;align-items:center}.result__date{display:flex;align-items:center;color:#455556}.result__source{color:#455556;padding-inline-end:0.75rem}.result__authors{font-size:12px;color:#455556;margin-block-end:0.25rem;text-decoration:none;inline-size:70%}.result__buttons{inline-size:70%;margin-block-end:0.5rem}.result__buttons-button{background-color:#007495;color:#fff;padding:5px 8px 1px;border-radius:4px;display:inline-block;font-size:11px;text-decoration:none;border:none}.result__promo{inline-size:70%;margin-block-end:0.5rem;text-decoration:none;color:#455556}.result__promo-box{inline-size:300px;background-color:#e3eef1;padding:12px 12px 8px 4px;display:flex;flex-flow:row nowrap;margin-block-start:1rem}.result__promo-bigdate{flex:0 1 60px;text-align:center;font-weight:600;color:#007495;text-transform:uppercase;line-height:1;letter-spacing:1.5px}@media (max-width: 992px){.result__promo-bigdate{inline-size:100%}}.result__promo-bigdate span{color:#455556;display:block}.result__promo-bigdate~div{padding-inline-start:1rem;border-inline-start:1px solid #c5dbe1}.result__promo-date{font-size:12px}.result__promo-venue{font-size:12px}.result__promo .nano-icon{color:#007495;position:relative;inset-block-start:1px;padding-inline-end:2px}.result__image{display:block;background-size:cover;background-repeat:no-repeat;background-position:center;border-radius:4px;position:relative;inline-size:100%;block-size:150px;margin-block-end:0.5rem}@media (min-width: 576px){.result__image{inline-size:142px;block-size:80px}}.result__image .nano-icon{position:absolute;inset-block-start:calc(50% - 0.75rem);inset-inline-start:calc(50% - 0.75rem);font-size:1.5rem;color:#0084a9;--primary-color:#fff;--secondary-color:#0084a9;--primary-opacity:1}@media (max-width: 576px){.result__image .nano-icon{font-size:3rem;inset-block-start:calc(50% - 1.5rem);inset-inline-start:calc(50% - 1.5rem)}}.result__video-body{inline-size:70%;text-decoration:none;display:flex;flex-flow:row wrap}@media (max-width: 992px){.result__video-body{inline-size:100%}}@media (max-width: 576px){.result__video-body{flex-flow:column}}.result__video-body .result__body{padding-inline-start:1rem;display:flex;flex-direction:column;margin-block-end:0;flex:1}@media (max-width: 576px){.result__video-body .result__body{padding-inline-start:0}}.result__video-body .result__body p{display:inline;margin:0}.result__video-body .result__body u,.result__video-body .result__body li,.result__video-body .result__body a{text-decoration:none}.result__video-body .result__body .result__meta{margin-block-start:0.5rem}.result__video-body .result__body .result__description{flex:1 0 auto}.search-empty{padding:3rem 0;text-align:center;border-block-start:1px solid #e5eef1}.search-empty h2{color:#455556;font-size:1.125rem;margin-block-end:0.5rem}.search-empty-icon{font-size:7rem;--icon-color:#e4e6e8;margin-block-end:2rem}.search__highlight{background:#fbffbf;font-style:normal}";
-const NanoGlobalSearchResultsStyle0 = globalSearchResultsCss;
-
-const filterOldPosts = 'created > ' + Math.floor((Date.now() - 63115200000) / 1000);
-const GlobalSearchResults = /*@__PURE__*/ proxyCustomElement(class GlobalSearchResults extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.nanoSearchGoBack = createEvent(this, "nanoSearchGoBack", 7);
-    }
-    algoliaResultsEle;
-    filtersDiv;
-    openFilterBtn;
-    ro;
-    algoliaResults;
-    algoliaEle;
-    currentWidth;
-    apiKey;
-    appId;
-    index;
-    get el() { return this; }
-    /** Fired when the user clicks the 'back' button / closes the search panel
-     * Calling `event.preventDefault()` will prevent it from being closed.
-     */
-    nanoSearchGoBack;
-    handleAlgoliaCredsChange() {
-        if (!this.apiKey || !this.appId || !this.algoliaEle)
-            return;
-        this.algoliaEle.apiKey = this.apiKey;
-        this.algoliaEle.appId = this.appId;
-    }
-    handleAlgoliaIndexChange() {
-        if (!this.index || !this.algoliaEle)
-            return;
-        this.algoliaEle.searchIndex = this.index;
-    }
-    handleAlgoliaEleChange() {
-        if (!this.algoliaEle || !this.algoliaResults)
-            return;
-        if (this.algoliaResults.indexName === 'Community') {
-            this.algoliaEle.filters = [filterOldPosts]; // only get last 2 years
-        }
-    }
-    handleGlobalNavReset(e) {
-        if (e.target.tagName.toLowerCase() !== transformTag('nano-global-nav'))
-            return;
-        this.algoliaResultsEle = null;
-        this.goback();
-    }
-    handleGlobalNavSearch(e) {
-        const { detail: { meta, client }, } = e;
-        this.apiKey = client.apiKey;
-        this.appId = client.appId;
-        if (e.target.tagName.toLowerCase() !== transformTag('nano-global-nav'))
-            return;
-        this.index = {
-            name: meta.indexTitle,
-            index: meta.index,
-            domain: meta.domain,
-            filters: meta.filters,
-            replicas: meta.replicas,
-        };
-        this.algoliaEle.query = meta.query;
-    }
-    handleReorder(e) {
-        if (e
-            .composedPath()
-            .find((ele) => ele.classList && ele.classList.contains('indexchange')) &&
-            !!this.algoliaResultsEle) {
-            this.changeOrder(e);
-        }
-    }
-    attachListeners(e) {
-        searchInsight.init(e.detail.client.appId, e.detail.client.apiKey);
-        if (!e
-            .composedPath()
-            .find((ele) => ele.id && ele.id === 'main-search'))
-            return;
-        this.algoliaResultsEle = this.algoliaEle.querySelector('#main-search-results');
-        this.algoliaResults = e.detail.meta;
-        // add results listeners
-        this.attachResultListeners();
-        this.algoliaEle.querySelectorAll('.filters-reset').forEach((item) => {
-            item.addEventListener('click', () => {
-                this.removeAllFilters();
-            });
-        });
-        this.algoliaEle.querySelectorAll('.close-filters').forEach((item) => {
-            item.addEventListener('click', () => {
-                this.closefilters();
-            });
-        });
-        const filterWrap = this.algoliaEle.querySelector('.filters-wrap');
-        if (filterWrap) {
-            filterWrap.addEventListener('click', (e) => {
-                e.stopPropagation();
-            });
-        }
-        this.filtersDiv = this.algoliaEle.querySelector('#main-search-filters');
-        const oldResults = this.algoliaEle.querySelector('.old-posts');
-        if (oldResults) {
-            oldResults.addEventListener('change', (e) => {
-                this.toggleOldResults(e.target.checked);
-            });
-        }
-    }
-    attachResultListeners(e) {
-        if (e && e.composedPath()?.find((el) => el === this.algoliaEle)) {
-            this.algoliaResultsEle = this.algoliaEle.querySelector('nano-algolia-results');
-        }
-        if (!this.algoliaResultsEle)
-            return;
-        const resultEle = this.algoliaResultsEle;
-        // wire up hit event listener for analytics
-        this.algoliaResultsEle.removeEventListener('click', this.resultClick);
-        this.algoliaResultsEle.addEventListener('click', this.resultClick);
-        // wire up remove filter event listener
-        resultEle.querySelectorAll('.remove-filter').forEach((item) => {
-            item.removeEventListener('click', this.removeFilterClick);
-            item.addEventListener('click', this.removeFilterClick);
-        });
-        // wire up the back button event listener
-        resultEle.querySelectorAll('.back-btn').forEach((item) => {
-            item.removeEventListener('click', this.goback);
-            item.addEventListener('click', this.goback);
-        });
-        // wire up mobile filter list panel event listener
-        resultEle.querySelectorAll('.topbar__show-filters').forEach((item) => {
-            this.openFilterBtn = item;
-            item.removeEventListener('click', this.showFiltersClick);
-            item.addEventListener('click', this.showFiltersClick);
-        });
-        // wire up tags event listeners
-        const tags = Array.from(resultEle.querySelectorAll('.result__tags-tag'));
-        tags.forEach((tag) => {
-            tag.removeEventListener('click', this.tagClick);
-            tag.addEventListener('click', this.tagClick);
-        });
-    }
-    /** Manually close the search panel */
-    async closeSearch() {
-        this.goback();
-    }
-    resultClick = (e) => {
-        const hit = e.target.closest('.result');
-        if (e.target.tagName === 'A' && hit) {
-            searchInsight.sendClick({
-                index: this.algoliaResults.index,
-                eventName: 'Global nav full search - search result clicked',
-                queryID: this.algoliaResults.queryID,
-                objectIDs: [hit.dataset.hitId],
-                positions: [Number(hit.dataset.hitCount) + 1],
-            });
-        }
-    };
-    showFiltersClick = () => {
-        this.filtersDiv.tabIndex = -1;
-        this.filtersDiv.classList.add('show');
-        this.filtersDiv.setAttribute('aria-expanded', 'true');
-        document.body.style.overflow = 'hidden';
-        setTimeout(() => this.filtersDiv.focus(), 20);
-    };
-    removeFilterClick = (e) => {
-        this.removeFilter(e.target.dataset.filter, e.target.dataset.filterVal);
-    };
-    tagClick = (e) => {
-        e.preventDefault();
-        let tagVal = e.target.dataset.value;
-        tagVal = tagVal === 'publication' ? 'publications' : tagVal;
-        tagVal = tagVal.toLowerCase();
-        const filter = this.algoliaEle.querySelector('nano-algolia-filter[filter-name="tags"]');
-        if (filter.value.indexOf(tagVal) === -1) {
-            filter.value = filter.value ? [...filter.value, tagVal] : [tagVal];
-        }
-    };
-    changeOrder(ev) {
-        this.algoliaEle.replicaIndex = ev.detail.value;
-    }
-    goback = () => {
-        const goBackEvent = this.nanoSearchGoBack.emit();
-        if (goBackEvent.defaultPrevented)
-            return;
-        this.removeAllFilters();
-        this.algoliaEle.query = undefined;
-        this.algoliaEle.showResults = false;
-    };
-    removeFilter(facet, filter) {
-        this.algoliaEle.removeFilters(facet, filter);
-    }
-    removeAllFilters() {
-        this.algoliaEle.removeFilters();
-    }
-    closefilters() {
-        if (!this.filtersDiv)
-            return;
-        this.filtersDiv.tabIndex = null;
-        this.filtersDiv.classList.remove('show');
-        this.filtersDiv.setAttribute('aria-expanded', 'false');
-        document.body.style.overflow = '';
-        setTimeout(() => this.openFilterBtn.focus(), 20);
-    }
-    toggleOldResults(show) {
-        if (show)
-            this.algoliaEle.filters = this.algoliaEle.filters.filter((f) => !f.startsWith('created > '));
-        else
-            this.algoliaEle.filters = [...this.algoliaEle.filters, filterOldPosts];
-    }
-    connectedCallback() {
-        this.handleAlgoliaEleChange();
-    }
-    componentDidLoad() {
-        if (!window['ResizeObserver'])
-            return;
-        this.ro = new ResizeObserver((entries) => {
-            for (const entry of entries) {
-                if (!entry.contentRect.width)
-                    return;
-                this.currentWidth = entry.contentRect.width;
-            }
-        });
-        this.ro.observe(this.el);
-    }
-    render() {
-        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">
-                  <div class="sc-nano-global-search-results main-search__topbar topbar">
-                    <button class="sc-nano-global-search-results topbar__bkbtn back-btn icon-button">
-                      <nano-icon class="sc-nano-global-search-results" name="light/chevron-left" size="small"></nano-icon>
-                    </button>
-                    <div>
-                      <em class="sc-nano-global-search-results topbar__query">'{{ it.query }}' - </em> <strong>{{ it.totalHitsWithFilters }}</strong> Results
-                    </div>
-
-                    <div class="sc-nano-global-search-results topbar__filtering">
-                      {{ @if (it.results.length) }}
-                        {{ @if (it.searchIndex && it.searchIndex.replicas) }}
-                          <nano-select class="sc-nano-global-search-results topbar__order indexchange" value="{{ it.index }}" hide-label="true" label="Sort order" show-inline-error="false">
-                          {{ @each(it.searchIndex.replicas) => replica }}
-                            <nano-option value="{{ replica.index }}">{{ replica.name }}</nano-option>
-                          {{ /each }}
-                          </nano-select>
-                        {{ /if }}
-                      {{ /if }}
-
-                      <button class="sc-nano-global-search-results topbar__show-filters filters-title" aria-controls="main-search-filters">
-                        {{ @if (it.appliedFilters && it.appliedFilters.length > 0) }}
-                          <span class="sc-nano-global-search-results topbar__filter-count">
-                            {{ (it.appliedFilters.reduce(function(a, b) { return a + (b.values ? b.values.length : 0) }, 0)) }}
-                          </span>
-                        {{ /if }}
-                        <nano-icon class="sc-nano-global-search-results" name="light/filter"></nano-icon>
-                      </button>
-                    </div>
-                  </div>
-
-                  {{ @if (it.results.length) }}
-                    <div class="sc-nano-global-search-results main-search__applied-filters">
-                      {{ @if (it.appliedFilters) }}
-                        {{ @each(it.appliedFilters) => filterObj }}
-                          {{ @each(filterObj.values) => filterVal }}
-                            <span class="sc-nano-global-search-results main-search__applied-filter">
-                              {{ filterVal | public_name }}
-                              <button class="sc-nano-global-search-results icon-button remove-filter" data-filter="{{ filterObj.name }}" data-filter-val="{{ filterVal }}">
-                                <nano-icon class="sc-nano-global-search-results" name="light/xmark"></nano-icon>
-                              </button>
-                            </span>
-                          {{ /each }}
-                        {{ /each }}
-                      {{ #else }}
-                        <span class="sc-nano-global-search-results main-search__applied-nofilter">&nbsp;</span>
-                      {{ /if }}
-                    </div>
-                  {{ /if }}
-                </script>
-
-                <script type="text/template" slot="result-template">
-                  <!-- START NO CONTENT -->
-                  {{ @if ((!it.results || !it.results.length)) }}
-                    <div class="search-empty">
-                      <nano-icon name="light/magnifying-glass" class="search-empty-icon"></nano-icon>
-                      <h2>No matches found...</h2>
-                      <p>Please try a different search query.</p>
-                    </div>
-                  {{ /if }}
-                  <!-- END NO CONTENT -->
-
-                  {{ @if (it.totalHitsWithFilters > 0) }}
-                    {{ @each(it.results) => result, resultIndex }}
-                      {{ contentType = result.content_type ? result.content_type : result.type }}
-                      <li class="sc-nano-global-search-results">
-                        <div class="sc-nano-global-search-results result" data-hit-id="{{ result.objectID }}" data-hit-count="{{ resultIndex }}">
-                          <h4 class="sc-nano-global-search-results result__title" data-icon-set="{{(iconSet = false)}}">
-                            <a href="{{ result.url | abs_url(it, result) }}">
-                            {{ @if (result._snippetResult) }}
-                              {{ result._snippetResult.title.value | safe }}
-                            {{ #else }}
-                              {{ result.title | safe }}
-                            {{ /if }}
-                            {{ @if (contentType === 'technical_document' || contentType === 'literature' || contentType === 'white_paper' || contentType === 'protocol') }}
-                              <span class="sc-nano-global-search-results result__pdf">PDF</span>
-                            {{ /if }}
-                            </a>
-                          </h4>
-                          {{ @if (result.authors) }}
-                            {{ @if (typeof result.authors === 'string') }}
-                              <a class="sc-nano-global-search-results result__authors" href="{{ result.url | abs_url(it, result) }}">Authors: {{ result.authors | trim_to(50) }}</a>
-                            {{ #else }}
-                              <a class="sc-nano-global-search-results result__authors" href="{{ result.url | abs_url(it, result) }}">
-                                {{ @each(result.authors) => author, index }}
-                                  <!-- {{ @if(index == 0)}} -->
-                                    Authors: {{ author | trim_to(60) }}
-                                  <!-- {{ /if }} -->
-                                {{ /each }}
-                              </a>
-                            {{ /if }}
-                          {{ /if }}
-                          {{ @if (contentType === 'video' || contentType === 'lc_lightning_talk' ) }}
-                            {{ @if (result.name) }}
-                              <a class="sc-nano-global-search-results result__authors" href="{{ result.url | abs_url(it, result) }}">Speaker: {{ result.name | trim_to(50) }}</a>
-                            {{ /if }}
-                            <a class="sc-nano-global-search-results result__video-body" href="{{ result.url | abs_url(it, result) }}">
-                              {{ @if (result.image) }}
-                                <div class="sc-nano-global-search-results result__image" style="background-image: url('{{ result.image | abs_url(it, result) }}')">
-                                  <nano-icon class="sc-nano-global-search-results" name="duotone/play-circle"></nano-icon>
-                                </div>
-                              {{ /if }}
-                              <div class="sc-nano-global-search-results result__body">
-                                <div class="sc-nano-global-search-results result__description">
-                                  {{ @if (result.description) }}
-                                    {{ result._snippetResult.description.value | safe }}
-                                  {{ /if }}
-                                </div>
-                              </div>
-                              <div class="sc-nano-global-search-results result__meta">
-                                {{ @if (result.type || result.content_type) }}
-                                  <div class="sc-nano-global-search-results result__type">
-                                  {{ @if (contentType === 'lc_lightning_talk') }}
-                                    Presentation
-                                  {{ #else }}
-                                    {{ contentType }}
-                                  {{ /if }}
-                                  </div>
-                                {{ /if }}
-                                {{ @if (result.tags) }}
-                                  <div class="sc-nano-global-search-results result__tags">
-                                    {{ @if (typeof result.tags === 'string') }}
-                                      <button data-value="{{ result.tags | lowercase }}" class="sc-nano-global-search-results result__tags-tag">{{ result.tags }}</button>
-                                    {{ #else }}
-                                      {{ @each(result.tags) => tag, index }}
-                                        {{ @if(index < 5)}}
-                                          {{ @if (tag !== "No video" && tag !== "Resources" && tag !== "Video") }}
-                                            <button data-value="{{ tag | lowercase }}" class="sc-nano-global-search-results result__tags-tag">{{ tag }}</button>
-                                          {{ /if }}
-                                        {{ /if }}
-                                      {{ /each }}
-                                    {{ /if }}
-                                  </div>
-                                {{ /if }}
-                                {{ @if (result.source) }}
-                                  <div class="sc-nano-global-search-results result__source">Source: {{ result.source }}</div>
-                                {{ /if }}
-                              </div>
-                            </a>
-                          {{ /if }}
-                          {{ @if (result.body) }}
-                            <a class="sc-nano-global-search-results result__body" href="{{ result.url | abs_url(it, result) }}">
-                            {{ @if (result._snippetResult) }}
-                              {{ result._snippetResult.body.value | safe }}
-                            {{ /if }}
-                            </a>
-                          {{ /if }}
-                          {{ @if (contentType === 'product' }}
-                            <div class="sc-nano-global-search-results result__buttons">
-                              <a class="sc-nano-global-search-results result__buttons-button" href="{{ result.url | abs_url(it, result) }}">View product</a>
-                            </div>
-                          {{ /if }}
-                          {{ @if (contentType === 'event') }}
-                            <a class="sc-nano-global-search-results result__promo" href="{{ result.url | abs_url(it, result) }}">
-                              <div class="sc-nano-global-search-results result__promo-box">
-                                <div class="sc-nano-global-search-results result__promo-bigdate">
-                                  {{ result.start_date | date_long({year: undefined, month: 'short', day: undefined}) }}
-                                  <span>{{ result.start_date | date_long({year: undefined, month: undefined, day: 'numeric'}) }}</span>
-                                </div>
-                                <div>
-                                  <div class="sc-nano-global-search-results result__promo-date">
-                                    <nano-icon class="sc-nano-global-search-results" name="light/calendar-days"></nano-icon>
-                                    {{ @if (result.end_date) }}
-                                      {{ @if (result.end_date !== result.start_date) }}
-                                        {{ result.start_date | date_long({weekday: 'short', day: 'numeric', month: 'short'}) }} - {{ result.end_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}
-                                      {{ #else }}
-                                        {{ result.start_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}
-                                      {{ /if }}
-                                    {{ #else }}
-                                      {{ @if (result.start_date) }}
-                                        {{ result.start_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}
-                                      {{ /if }}
-                                    {{ /if }}
-                                  </div>
-                                  <div class="sc-nano-global-search-results result__promo-venue">
-                                    <nano-icon class="sc-nano-global-search-results" name="light/map-marker-alt"></nano-icon>
-                                    Venue
-                                  </div>
-                                </div>
-                              </div>
-                            </a>
-                          {{ /if }}
-                          {{ @if (contentType !== 'lc_lightning_talk' && contentType !== 'video') }}
-                            <div class="sc-nano-global-search-results result__meta">
-                              {{ @if (result.type || result.content_type) }}
-                                <div class="sc-nano-global-search-results result__type">
-                                {{ @if (contentType === 'news_item') }}
-                                  News
-                                {{ #elif (contentType === 'static_page' || contentType === 'bespoke') }}
-                                  Page
-                                {{ #elif (contentType === 'case_study') }}
-                                  Case study
-                                {{ #elif (contentType === 'lc_poster') }}
-                                  Poster
-                                {{ #elif (contentType === 'nanopore_live') }}
-                                  Live stream
-                                {{ #elif (contentType === 'data_release') }}
-                                  Data release
-                                {{ #elif (contentType === 'research_area') }}
-                                  Research area
-                                {{ #elif (contentType === 'white_paper') }}
-                                  White paper
-                                {{ #elif (contentType === 'technical_document') }}
-                                  Technical document
-                                {{ #elif (contentType === 'info_sheet') }}
-                                  Info sheet
-                                {{ #elif (contentType === 'lc_home' || contentType === 'lc_venue') }}
-                                  London Calling
-                                {{ #else }}
-                                  {{ contentType }}
-                                {{ /if }}
-                                </div>
-                              {{ /if }}
-                              {{ @if (contentType !== 'event') }}
-                                {{ @if (result.updated) }}
-                                  <div class="sc-nano-global-search-results result__date">{{ result.updated | date_long({year: 'numeric', month: 'short', day: 'numeric'}) }}</div>
-                                {{ #else }}
-                                  {{ @if (result.created) }}
-                                    <div class="sc-nano-global-search-results result__date">{{ result.created | date_long({year: 'numeric', month: 'short', day: 'numeric'}) }}</div>
-                                  {{ /if }}
-                                {{ /if }}
-                              {{ /if }}
-                              {{ @if (result.tags) }}
-                                <div class="sc-nano-global-search-results result__tags">
-                                  {{ @if (typeof result.tags === 'string') }}
-                                    {{ @if (result.tags !== "Resources" && result.tags !== "Tools" && result.tags !== "Publications" && result.tags !== "Case studies") }}
-                                      <button data-value="{{ result.tags | lowercase }}" class="sc-nano-global-search-results result__tags-tag">{{ result.tags }}</button>
-                                    {{ /if }}
-                                  {{ #else }}
-                                    {{ @each(result.tags) => tag, index }}
-                                      {{ @if(index < 5)}}
-                                        {{ @if (tag !== "Resources" && tag !== "Tools" && tag !== "Publications" && tag !== "Case studies") }}
-                                          <button data-value="{{ tag | lowercase }}" class="sc-nano-global-search-results result__tags-tag">{{ tag }}</button>
-                                        {{ /if }}
-                                      {{ /if }}
-                                    {{ /each }}
-                                  {{ /if }}
-                                </div>
-                              {{ /if }}
-                              {{ @if (result.source) }}
-                                <div class="sc-nano-global-search-results result__source">Source: {{ result.source }}</div>
-                              {{ /if }}
-                            </div>
-                          {{ /if }}
-                        </div>
-                      </li>
-                    {{ /each }}
-                  {{ /if }}
-                </script>
-
-                <div slot="start-output"></div>
-                <ul slot="result-output" class="sc-nano-global-search-results"></ul>
-              </nano-algolia-results>
-
-              {{ @if(Object.keys(it.origFilters).length) }}
-                <div class="sc-nano-global-search-results main-search__filters filters close-filters" id="main-search-filters">
-                  <div class="sc-nano-global-search-results filters-wrap">
-                    {{ @if(it.totalHits) }}
-                      <div class="sc-nano-global-search-results filters-header">
-                        <strong class="sc-nano-global-search-results filters-title">Filters</strong>
-                        <button class="sc-nano-global-search-results filters-reset">Reset</button>
-                        <button class="sc-nano-global-search-results filters__close-filters close-filters icon-button" aria-controls="main-search-filters">
-                          <nano-icon class="sc-nano-global-search-results" name="light/xmark"></nano-icon>
-                        </button>
-                      </div>
-                    {{ /if }}
-
-                    <div>
-                      <input class="sc-nano-global-search-results filter-cb old-posts filters__old-posts" type="checkbox" name="old-posts" id="old-posts" value="nice" />
-                      <label class="sc-nano-global-search-results filter-label" for="old-posts">
-                        <span>Include posts older than 2 years</span>
-                      </label>
-                      {{ @if(it.origFilters['type']) }}
-                        <nano-details class="sc-nano-global-search-results" open={true} icon-rotation="180">
-                          <strong slot="label">Type</strong>
-                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>
-                          <nano-algolia-filter store-id="searchf1" store-method="url-hash-push" filter-name="type">
-                            <script type="text/template" slot="filter-template">
-                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">
-                              {{ @foreach(it.dyn) => filter, filterVal }}
-                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">
-                                <input class="sc-nano-global-search-results filter-cb" type="checkbox" value="{{ filter }}" id="type-{{ filter }}-{{x}}" />
-                                <label class="sc-nano-global-search-results filter-label" for="type-{{ filter }}-{{x}}">
-                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>
-                                </label></li>
-                              {{ /foreach }}
-                              </ul>
-                            </script>
-                            <div slot="output"></div>
-                          </nano-algolia-filter>
-                        </nano-details>
-                      {{ /if }}
-
-                      {{ @if(it.origFilters['channel']) }}
-                        <nano-details open={true} icon-rotation="180">
-                          <strong slot="label">Channels</strong>
-                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>
-                          <nano-algolia-filter store-id="searchf2" store-method="url-hash-push" filter-name="channel">
-                            <script type="text/template" slot="filter-template">
-                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">
-                              {{ @foreach(it.dyn) => filter, filterVal }}
-                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">
-                                <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter }}" id="channel-{{ filter }}-{{x}}" />
-                                <label class="filter-label sc-nano-global-search-results" for="channel-{{ filter }}-{{x}}">
-                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>
-                                </label></li>
-                              {{ /foreach }}
-                              </ul>
-                            </script>
-                            <div slot="output"></div>
-                          </nano-algolia-filter>
-                        </nano-details>
-                      {{ /if }}
-
-                      {{ @if(it.origFilters['authors']) }}
-                        <nano-details open={true} icon-rotation="180">
-                          <strong slot="label">Authors</strong>
-                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>
-                          <nano-algolia-filter store-id="searchf3" store-method="url-hash-push" filter-name="authors">
-                            <script type="text/template" slot="filter-template">
-                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">
-                              {{ @foreach(it.dyn) => filter, filterVal }}
-                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">
-                                <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter }}" id="authors-{{ filter }}-{{x}}" />
-                                <label class="filter-label sc-nano-global-search-results" for="authors-{{ filter }}-{{x}}">
-                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>
-                                </label></li>
-                              {{ /foreach }}
-                              </ul>
-                            </script>
-                            <div slot="output"></div>
-                          </nano-algolia-filter>
-                        </nano-details>
-                      {{ /if }}
-
-                      {{ @if(it.origFilters['categories_without_path']) }}
-                        <nano-details open={true} icon-rotation="180">
-                          <strong slot="label">Category</strong>
-                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>
-                          <nano-algolia-filter store-id="searchf4" store-method="url-hash-push" filter-name="categories_without_path">
-                            <script type="text/template" slot="filter-template">
-                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">
-                              {{ @foreach(it.dyn) => filter, filterVal }}
-                                {{ @if(!filter.match(/publication/)) }}
-                                  <li class="sc-nano-global-search-results" data-num="{{(x++)}}">
-                                  <input class="sc-nano-global-search-results filter-cb" type="checkbox" value="{{ filter }}" id="cwp-{{ filter }}-{{x}}" />
-                                  <label class="sc-nano-global-search-results filter-label" for="cwp-{{ filter }}-{{x}}">
-                                    <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>
-                                  </label></li>
-                                {{ /if }}
-                              {{ /foreach }}
-                              </ul>
-                            </script>
-                            <div slot="output"></div>
-                          </nano-algolia-filter>
-                        </nano-details>
-                      {{ /if }}
-
-                      {{ @if(it.origFilters['tags']) }}
-                        <nano-details open={true} icon-rotation="180">
-                          <strong slot="label">Tags</strong>
-                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>
-                          <nano-algolia-filter store-id="searchf5" store-method="url-hash-push" filter-name="tags">
-                            <script type="text/template" slot="filter-template">
-                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">
-                              {{ @foreach(it.dyn) => filter, filterVal }}
-                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">
-                                <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter | lowercase }}" id="tags-{{ filter }}-{{x}}" />
-                                <label class="filter-label sc-nano-global-search-results" for="tags-{{ filter }}-{{x}}">
-                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>
-                                </label></li>
-                              {{ /foreach }}
-                              </ul>
-                            </script>
-                            <div slot="output"></div>
-                          </nano-algolia-filter>
-                        </nano-details>
-                      {{ /if }}
-                    </div>
-                  </div>
-                </div>
-              {{ /if }}
-            </div>`), h("div", { key: '836a3c9ba7855d4f08420f55c2df97c65438abad', slot: "output" }), h("slot", { key: 'a025d95f4ae2195f4aced3ade5acc3a433cbf3f5' }))));
-    }
-    static get watchers() { return {
-        "algoliaEle": ["handleAlgoliaCredsChange", "handleAlgoliaIndexChange", "handleAlgoliaEleChange"],
-        "apiKey": ["handleAlgoliaCredsChange"],
-        "appId": ["handleAlgoliaCredsChange"],
-        "index": ["handleAlgoliaIndexChange"],
-        "algoliaResults": ["handleAlgoliaEleChange"]
-    }; }
-    static get style() { return NanoGlobalSearchResultsStyle0; }
-}, [1, "nano-global-search-results", {
-        "algoliaResults": [32],
-        "algoliaEle": [32],
-        "currentWidth": [32],
-        "apiKey": [32],
-        "appId": [32],
-        "index": [32],
-        "closeSearch": [64]
-    }, [[16, "nanoSearchReset", "handleGlobalNavReset"], [16, "nanoSearchResult", "handleGlobalNavSearch"], [0, "nanoChange", "handleReorder"], [0, "nanoResultsShown", "attachListeners"], [16, "nanoNewResults", "attachResultListeners"]], {
-        "algoliaEle": ["handleAlgoliaCredsChange", "handleAlgoliaIndexChange", "handleAlgoliaEleChange"],
-        "apiKey": ["handleAlgoliaCredsChange"],
-        "appId": ["handleAlgoliaCredsChange"],
-        "index": ["handleAlgoliaIndexChange"],
-        "algoliaResults": ["handleAlgoliaEleChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["nano-global-search-results", "nano-algolia", "nano-spinner"];
-    components.forEach(tagName => { switch (tagName) {
-        case "nano-global-search-results":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, GlobalSearchResults);
-            }
-            break;
-        case "nano-algolia":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "nano-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
+import { G as GlobalSearchResults, d as defineCustomElement$1 } from './global-search-results.js';
 
 const NanoGlobalSearchResults = GlobalSearchResults;
 const defineCustomElement = defineCustomElement$1;
 
 export { NanoGlobalSearchResults, defineCustomElement };
-
-//# sourceMappingURL=nano-global-search-results.js.map