/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { Host, Build, } from "@stencil/core";
import searchInsight from "../../utils/search-insights";
import { transformTag, h } from "../../utils/renderer";
import { addGlobalStylesheetToShadow } from "../../utils/style";
const filterOldPosts = 'created > ' + Math.floor((Date.now() - 63115200000) / 1000);
let searchResultIds = 0;
/**
 * Nanopore Global Search results component
 * to be used in conjunction with [Globla-Nav](/story/nano-compounds-global-nav).
 * A shortcut / helper which combines algolia components.
 * There should only be one <nano-global-search-results> per page
 * and should be a direct child of <nano-global-nav>
 */
export class GlobalSearchResults {
    algoliaResultsEle;
    filtersDiv;
    openFilterBtn;
    ro;
    searchResultId = searchResultIds++;
    queryId = this.searchResultId > 0 ? `searchq-${this.searchResultId}` : 'searchq';
    globalNav;
    algoliaResults;
    algoliaEle;
    currentWidth;
    apiKey;
    appId;
    index;
    el;
    /**
     * 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 = () => {
        this.algoliaResultsEle = null;
        this.goback();
    };
    handleGlobalNavSearch = (e) => {
        const { detail: { meta, client }, } = e;
        this.apiKey = client.apiKey;
        this.appId = client.appId;
        this.index = {
            name: meta.indexTitle,
            index: meta.index,
            domain: meta.domain,
            filters: meta.filters,
            replicas: meta.replicas,
        };
        this.algoliaEle.query = meta.query;
    };
    handleNanoFilterChanged() {
        if (!this.algoliaEle.showResults ||
            !this.algoliaResultsEle?.querySelector('.topbar'))
            return;
        const topBar = this.algoliaResultsEle.querySelector('.topbar');
        if (topBar.scrollIntoViewIfNeeded) {
            // @ts-expect-error - scrollIntoViewIfNeeded is not standard
            topBar.scrollIntoViewIfNeeded();
        }
        else {
            topBar.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
    }
    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('nanoChange', (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('nanoClose', this.removeFilterClick);
            item.addEventListener('nanoClose', 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);
        });
    }
    onDocNanoSearchResult(e) {
        if (!this.globalNav)
            return;
        if (e.target !== this.globalNav)
            return;
        this.handleGlobalNavSearch(e);
    }
    onDocNanoSearchReset(e) {
        if (!this.globalNav)
            return;
        if (e.target !== this.globalNav)
            return;
        this.handleGlobalNavReset();
    }
    /** Manually close the search panel */
    async closeSearch(clearHistory = false) {
        if (clearHistory) {
            this.goback();
            return;
        }
        this.algoliaEle.showResults = false;
    }
    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],
            });
            this.closeSearch();
        }
    };
    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) => {
        const target = e.target.closest('[data-filter-val]');
        this.removeFilter(target?.dataset.filter, 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];
    }
    componentWillLoad() {
        if (Build.isBrowser)
            addGlobalStylesheetToShadow(this.el.shadowRoot);
    }
    connectedCallback() {
        const globalNavTag = transformTag('nano-global-nav');
        this.globalNav = this.el.closest(globalNavTag);
        if (!this.globalNav) {
            const ownerHost = this.el.getRootNode()?.host;
            if (ownerHost && ownerHost.tagName === globalNavTag.toUpperCase()) {
                this.globalNav = ownerHost;
            }
        }
        if (!this.globalNav) {
            console.error('`<nano-global-search-results>` must be a child of `<nano-global-nav>`');
            return;
        }
        this.handleAlgoliaEleChange();
    }
    disconnectedCallback() {
        if (this.ro) {
            this.ro.disconnect();
        }
    }
    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: '63af990582466961e1cf02c9e67bd8cffa82e620', class: {
                small: this.currentWidth < 780,
                'nano-global-search-results': true,
            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : undefined }, h("nano-algolia", { key: 'ea81b7334b7d2edb65328f65c70db0f75b48820c', storeId: this.queryId, storeMethod: "url-hash-push", class: "main-search__wrap sc-nano-global-search-results", ref: (ele) => requestAnimationFrame(() => (this.algoliaEle = ele)), id: "main-search",
            // @ts-expect-error this bubbles from nano-algolia-filter
            onNanoFilterChanged: () => this.handleNanoFilterChanged() }, h("template", { key: '10cf57aac61c6b40cd3a285ddfd03b483b9d131d', 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">
                    <nano-icon-button icon-name="light/chevron-left" class="sc-nano-global-search-results topbar__bkbtn back-btn icon-button"></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 }}
                            <nano-tag 
                              closable 
                              size="large" 
                              data-filter-val="{{ filterVal }}" 
                              data-filter="{{ filterObj.name }}" 
                              class="remove-filter"
                            >{{ filterVal | tag_tidy | public_name }}</nano-tag>
                          {{ /each }}
                        {{ /each }}
                      {{ /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 }}">
                          <strong 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>
                          </strong>
                          {{ @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 }}
                            
                            {{ @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 }}
                            <a class="sc-nano-global-search-results result__video-body" href="{{ result.url | abs_url(it, result) }}">
                              <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>
                            </a>
                            <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.source) }}
                                <div class="sc-nano-global-search-results result__source">Source: {{ result.source }}</div>
                              {{ /if }}
                            </div>
                            {{ @if (result.tags) }}
                              <div class="sc-nano-global-search-results result__tags">
                                {{ @if (typeof result.tags === 'string') }}
                                  <nano-tag><button data-value="{{ result.tags | lowercase }}" class="sc-nano-global-search-results result__tags-tag">{{ result.tags }}</button></nano-tag>
                                {{ #else }}
                                  {{ @each(result.tags) => tag, index }}
                                    {{ @if(index < 5)}}
                                      {{ @if (tag !== "No video" && tag !== "Resources" && tag !== "Video") }}
                                        <nano-tag><button data-value="{{ tag | lowercase }}" class="sc-nano-global-search-results result__tags-tag">{{ tag | tag_tidy }}</button></nano-tag>
                                      {{ /if }}
                                    {{ /if }}
                                  {{ /each }}
                                {{ /if }}
                              </div>
                            {{ /if }}
                          {{ /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' }}
                            <nano-cta size="small">
                              <a 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.source) }}
                                <div class="sc-nano-global-search-results result__source">Source: {{ result.source }}</div>
                              {{ /if }}
                            </div>
                            {{ @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") }}
                                    <nano-tag><button data-value="{{ result.tags | lowercase }}" class="result__tags-tag">{{ result.tags }}</button></nano-tag>
                                  {{ /if }}
                                {{ #else }}
                                  {{ @each(result.tags) => tag, index }}
                                    {{ @if(index < 5)}}
                                      {{ @if (tag !== "Resources" && tag !== "Tools" && tag !== "Publications" && tag !== "Case studies") }}
                                        <nano-tag><button data-value="{{ tag | lowercase }}" class="result__tags-tag">{{ tag | tag_tidy }}</button></nano-tag>
                                      {{ /if }}
                                    {{ /if }}
                                  {{ /each }}
                                {{ /if }}
                              </div>
                            {{ /if }}
                          {{ /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>
                        <nano-icon-button class="sc-nano-global-search-results filters__close-filters close-filters icon-button" icon-name="light/xmark" aria-controls="main-search-filters"></nano-icon-button>
                      </div>
                    {{ /if }}

                    <div class="sc-nano-global-search-results filters-list">
                      <nano-checkbox value="old-posts" class="old-posts" name="old-posts" checked>
                        <span>Include posts older than 2 years</strong>)</span>
                      </nano-checkbox>
                      {{ @if(it.origFilters['type']) }}
                        <nano-details class="sc-nano-global-search-results" open={true} label="Type" size="small">
                          <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} label="Channels"  size="small">
                          <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} label="Authors" size="small">
                          <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} label="Categories" size="small">
                          <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} label="Tags" size="small">
                          <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 }}
                                {{ @if(!filter.match('>')) }}
                                  <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>
                                {{ /if }}
                              {{ /foreach }}
                              </ul>
                            </script>
                            <div slot="output"></div>
                          </nano-algolia-filter>
                        </nano-details>
                      {{ /if }}
                    </div>
                  </div>
                </div>
              {{ /if }}
            </div>`), h("div", { key: '531d1aaf58fe5df465d93998f9448207d23de76a', slot: "output" }), h("slot", { key: '66231f02547592a1b03a87b3f3e237c527befc38' }))));
    }
    static get is() { return "nano-global-search-results"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["global-search-results.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["global-search-results.css"]
        };
    }
    static get states() {
        return {
            "algoliaResults": {},
            "algoliaEle": {},
            "currentWidth": {},
            "apiKey": {},
            "appId": {},
            "index": {}
        };
    }
    static get events() {
        return [{
                "method": "nanoSearchGoBack",
                "name": "nanoSearchGoBack",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Fired when the user clicks the 'back' button / closes the search panel\nCalling `event.preventDefault()` will prevent it from being closed."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "closeSearch": {
                "complexType": {
                    "signature": "(clearHistory?: boolean) => Promise<void>",
                    "parameters": [{
                            "name": "clearHistory",
                            "type": "boolean",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Manually close the search panel",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "algoliaEle",
                "methodName": "handleAlgoliaCredsChange"
            }, {
                "propName": "apiKey",
                "methodName": "handleAlgoliaCredsChange"
            }, {
                "propName": "appId",
                "methodName": "handleAlgoliaCredsChange"
            }, {
                "propName": "algoliaEle",
                "methodName": "handleAlgoliaIndexChange"
            }, {
                "propName": "index",
                "methodName": "handleAlgoliaIndexChange"
            }, {
                "propName": "algoliaResults",
                "methodName": "handleAlgoliaEleChange"
            }, {
                "propName": "algoliaEle",
                "methodName": "handleAlgoliaEleChange"
            }];
    }
    static get listeners() {
        return [{
                "name": "nanoChange",
                "method": "handleReorder",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "nanoResultsShown",
                "method": "attachListeners",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "nanoNewResults",
                "method": "attachResultListeners",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "nanoSearchResult",
                "method": "onDocNanoSearchResult",
                "target": "document",
                "capture": false,
                "passive": false
            }, {
                "name": "nanoSearchReset",
                "method": "onDocNanoSearchReset",
                "target": "document",
                "capture": false,
                "passive": false
            }];
    }
}
