/*!
 * Custom elements for Nanopore-Digital Web applications
 */
'use strict';

var index = require('./index-DGttnXif.js');
var algoliasearchLite_esm_browser = require('./algoliasearch-lite.esm.browser-CEon6pM5.js');
var renderer = require('./renderer-jVpDRMfV.js');
var throttle = require('./throttle-CrRDOkln.js');
var style = require('./style-Du-L-qMa.js');
var searchInsights = require('./search-insights-BtxuX7Wv.js');

const globalNavCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--main-menu-bar-bg-color:var(--nano-color-base-0);--main-menu-text-color:var(--nano-color-base-1000);--main-menu-hover-text-color:var(--nano-color-primary-1000);--main-menu-active-text-color:var(--nano-color-primary-1200);--main-menu-active-border-color:var(--nano-color-primary-1000);--overflow-bg-color:var(--nano-color-grey-mono-1600);--overflow-text-color:var(--nano-color-basic-white);--overflow-hover-text-color:var(--nano-color-blue-cerulean-700);--overflow-active-text-color:var(--nano-color-blue-cerulean-300);display:block;color:var(--main-menu-text-color)}img{max-inline-size:none;display:block;block-size:revert-layer}::slotted(a),:host::slotted(a),a{text-decoration:none}a:has(img){display:inline-block}a:focus{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}nano-drawer:not(:defined){display:none}nano-badge{position:absolute;font-size:0.5625rem;pointer-events:none}.gn__cart{position:relative}.gn__cart nano-badge{inset-block-start:-0.35rem;inset-inline-end:-0.4rem}.gn__login-cta{--bg:transparent;--font-size:var(--nano-font-size-2xs);--padding-v:0.5em}.gn__menu-bar-wrapper{z-index:calc(var(--nano-z-index-menubar) + 1);position:relative}.gn__menu-bar-wrapper::after{content:\"\";position:absolute;block-size:1px;inline-size:100%;inset-inline:0;inset-block-end:-1px;z-index:-3;background-color:var(--nano-color-neutral-200)}.gn__menu-bar{inline-size:100%;overflow:clip;background-color:var(--main-menu-bar-bg-color)}.gn__menu-bar a{color:var(--main-menu-text-color)}.gn__menu-bar a:hover{color:var(--main-menu-hover-text-color)}.gn__menu-bar a:active{color:var(--main-menu-active-text-color)}.gn__main-menu{display:inline-flex;align-items:center;min-inline-size:100%;padding:var(--nano-spacing-md);transition:opacity var(--nano-transition-x-fast) ease;opacity:1}.gn__main-menu.resizing{transition:none;opacity:0}.gn__main-menu>*{margin-inline-end:var(--nano-spacing-xl)}.gn__main-menu>*:is(slot,slot-fb){display:flex}.gn__main-menu>*:last-child{margin-inline-end:0}.gn__overflow-button{--padding:0.5rem 0.875rem 0.5rem 0;margin-inline-end:0.875rem;font-size:1.125rem;position:relative}.gn__overflow-button::after{content:\"\";position:absolute;inline-size:1px;block-size:100%;inset-inline-end:0;background-color:var(--nano-color-neutral-300);opacity:0.7;inset-block-start:0}.gn__main-menu-links,.gn__main-menu-actions{display:inline-flex;align-items:center}.gn__main-menu-links .nano-icon,.gn__main-menu-links .nano-icon-button,.gn__main-menu-actions .nano-icon,.gn__main-menu-actions .nano-icon-button{--active-color:var(--main-menu-active-text-color);--hover-color:var(--main-menu-hover-text-color);font-size:1rem}.gn__main-menu-links .nano-icon-button:hover,.gn__main-menu-actions .nano-icon-button:hover{color:var(--main-menu-hover-text-color)}.gn__main-menu-links{gap:var(--nano-spacing-xl)}.gn__main-menu-links ::slotted(a),.gn__main-menu-links::slotted(a){color:var(--main-menu-text-color)}.gn__main-menu-links ::slotted(a:hover){color:var(--main-menu-hover-text-color)}.gn__main-menu-links ::slotted(*:active){color:var(--main-menu-active-text-color)}.gn__main-menu-actions{margin-inline-start:auto;font-size:0.9375rem;gap:var(--nano-spacing-md)}.gn__search-dropdown{--overflow:visible;--padding:0;--background:transparent}.gn__search-dropdown .nano-icon-button{position:relative}.gn__search-dropdown .nano-icon-button::before{content:\"\";position:absolute;background-color:var(--main-menu-active-border-color);block-size:4px;inset-inline:5px 2px;inset-block-end:-1.5625rem;transform:translateZ(0) scaleX(0);transform-origin:0 center;transition:transform var(--nano-transition-x-fast) ease-in-out}.gn__search-open .gn__search-dropdown .nano-icon-button::before{transform:translateZ(0) scaleX(1)}.gn__search-form{display:inline-flex;max-inline-size:100vw;inline-size:30.625rem}.gn__search-form .nano-select{--input-bg-color:var(--nano-color-neutral-200);flex:0}.gn__search-form .nano-select:focus-within{z-index:1}.gn__search-form .nano-select .form-ctrl__input{border-inline-end:none}.gn__search-form .nano-input{flex:1}.gn__search-results{--padding-start:var(--nano-spacing-md);--padding-top:var(--nano-spacing-sm);--padding-bottom:var(--nano-spacing-sm);font-size:var(--nano-font-size-2xs)}.gn__search-loading{display:flex;justify-content:center}.gn__search-result{--padding-start:0.3125rem;--padding-top:var(--nano-spacing-sm);--padding-bottom:var(--nano-spacing-sm);--bg-focus:var(--nano-color-primary-300);--color-focus:var(--nano-color-neutral-1400);--color:var(--nano-color-neutral-1400);font-size:var(--nano-font-size-2xs)}.gn__search-result .search__highlight{font-style:normal;background:var(--nano-color-highlight)}.gn__search-viewall{--bg-focus:var(--nano-color-primary-300);--color-focus:var(--nano-color-neutral-1400);--color:var(--nano-color-primary-1200)}.gn__search-viewall::part(label){justify-content:flex-end;text-decoration:underline}.gn__user-dropdown-trigger{all:unset;cursor:pointer;color:var(--nano-color-primary-1200);display:flex;white-space:nowrap;gap:var(--nano-spacing-xs);align-items:center;position:relative;padding-inline-start:var(--nano-spacing-md)}.gn__user-dropdown-trigger:hover{color:var(--main-menu-hover-text-color)}.gn__user-dropdown-trigger:active{color:var(--main-menu-active-text-color)}.gn__user-dropdown-trigger:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.gn__user-dropdown-trigger::before{content:\"\";position:absolute;inline-size:1px;block-size:100%;inset-inline-start:0;background-color:var(--nano-color-neutral-300);opacity:0.7;inset-block-start:0}.gn__user-dropdown-trigger .gn__user-dropdown-chevron{transition:rotate var(--nano-transition-x-fast) linear}[open] .gn__user-dropdown-trigger .gn__user-dropdown-chevron{rotate:180deg}.gn__user-dropdown-trigger nano-badge{inset-block-start:-0.7rem;inset-inline-end:-0.7rem}.gn__user-dropdown{--background:var(--overflow-bg-color);--padding:0;--overflow:visible}.gn__user-panel{inline-size:21.25rem;max-inline-size:21.25rem;color:var(--overflow-text-color);padding:var(--nano-spacing-md)}.gn__user-panel a{color:var(--overflow-text-color)}.gn__user-panel a:hover{text-decoration:underline;color:var(--overflow-hover-text-color)}.gn__user-panel-head{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);padding-block-end:var(--nano-spacing-md);display:flex;align-items:center;gap:var(--nano-spacing-sm);font-size:var(--nano-font-size-xs)}.gn__user-panel-head .gn__user-avatar nano-icon{font-size:2.5rem}.gn__user-panel-body{display:flex;flex-direction:column}.gn__user-panel-body a{position:relative;border-block-end:1px solid rgb(var(--nano-color-base-rgb-1000)/10%);padding-block:var(--nano-spacing-md)}.gn__user-panel-body a:first-child{border-block-start:1px solid rgb(var(--nano-color-base-rgb-1000)/10%)}.gn__user-panel-foot{padding-block-start:var(--nano-spacing-md);display:flex;align-items:center;justify-content:space-between;gap:var(--nano-spacing-md)}.gn__drawer{--panel-background:var(--overflow-bg-color);--header-button-color:var(--overflow-text-color);--body-spacing:0;--header-spacing:var(--nano-spacing-md) 0;--footer-spacing:var(--nano-spacing-md)}.gn__drawer::part(title){display:flex;justify-content:flex-end}.gn__drawer::part(header-actions){order:-1}.gn__drawer-header{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.gn__drawer-menu{display:flex;flex-direction:column;margin:0 var(--nano-spacing-md);padding-block-end:var(--nano-spacing-md);color:var(--overflow-text-color);border-block-start:1px solid rgb(var(--nano-color-base-rgb-1000)/10%);position:relative}.gn__drawer-menu ::slotted(a),.gn__drawer-menu::slotted(a){padding:var(--nano-spacing-md) 0}.gn__drawer-menu ::slotted(a),.gn__drawer-menu ::slotted(.nano-nav-item),.gn__drawer-menu::slotted(a),.gn__drawer-menu::slotted(.nano-nav-item){--padding:var(--nano-spacing-md) 0;display:block;color:inherit !important;border-block-end:1px solid rgb(var(--nano-color-base-rgb-1000)/10%)}.gn__drawer-menu ::slotted(a:hover),.gn__drawer-menu ::slotted(.nano-nav-item:hover){text-decoration:underline;color:var(--overflow-hover-text-color) !important}";

const MIN_SEARCH_LENGTH = 3;
const GlobalNav = class {
    get host() { return index.getElement(this); }
    overflowMenu;
    overflowOpen = false;
    /** The link to put on the logo */
    logoUrl = location.protocol + '//' + location.host;
    /** Url to the Nanopore store cart. Will default to the url supplied by MyAccount */
    cartUrl = '';
    /** Url to the Nanopore message center. Will default to the url supplied by MyAccount  */
    msgUrl = '';
    /** Url to the Nanopore login page. Will default to the url supplied by MyAccount */
    loginUrl = '';
    /** Url to the Nanopore login page. Will default to the url supplied by MyAccount */
    logoutUrl = '';
    /** Url to the Nanopore contact page */
    contactUrl = 'https://nanoporetech.com/contact';
    _sessionRedirect = window.location.href;
    /** A url to take the user after login or logout. Defaults to current URL. Is automatically URI encoded */
    get sessionRedirect() {
        return encodeURIComponent(this._sessionRedirect);
    }
    set sessionRedirect(val) {
        this._sessionRedirect = val;
    }
    /** MyAccount store cart count.*/
    cartCount = 0;
    /** MyAccount un-read message count. */
    msgCount = 0;
    /** Manually open the overflow menu */
    async openOverflowMenu() {
        this.overflowOpen = true;
    }
    /** Manually close the overflow menu */
    async closeOverflowMenu() {
        this.overflowOpen = false;
    }
    /// MY-ACCOUNT - start ///
    /** A base url to retrieve global nav / sso data. `nav_bar_data.json` will be appended to this url */
    myAccountUrl;
    async handleMyAccountUrl() {
        if (!this.myAccountUrl)
            return;
        if (this.myAccountUrl === 'local-logged-in') {
            this.myAccountData = (await Promise.resolve().then(function () { return require('./local-logged-in-AF3ywQXV.js'); }));
            return;
        }
        else if (this.myAccountUrl === 'local-logged-out') {
            this.myAccountData = (await Promise.resolve().then(function () { return require('./local-logged-out-DYEfc64n.js'); }));
            return;
        }
        fetch(this.myAccountUrl + '/nav_bar_data.json')
            .then((res) => res.json())
            .then((data) => {
            this.myAccountData = data;
        })
            .catch((err) => {
            console.error('Error fetching MyAccount data', err);
        });
    }
    /**
     * MyAccount data is automatically set via `myAccountUrl`.
     * Alternatively you can directly provide a JSON object which is useful for SSR
     * (ref https://myaccount.nanoporetech.com/nav_bar_data.json)
     */
    myAccountData;
    /** Emitted when myaccount data has loaded */
    nanoUserData;
    /// MY-ACCOUNT - end ///
    /// USER LOGIN ///
    userLinks = [];
    isLoggedIn = false;
    /** Logged in user details automatically populated from MyAccount */
    get myAccountUser() {
        return this.myAccountData?.user?.uuid ? this.myAccountData.user : null;
    }
    processUserData() {
        if (!this.myAccountUser) {
            this.isLoggedIn = false;
            this.userLinks = [];
            this.msgUrl = '';
            this.msgCount = 0;
            this.nanoUserData.emit(null);
            return;
        }
        this.userLinks =
            this.myAccountData?.links?.filter((link) => link.area === 'profile-panel-list') || [];
        this.loginUrl = this.loginUrl || this.myAccountData.urls?.login;
        this.logoutUrl = this.logoutUrl || this.myAccountData.urls?.logout;
        this.msgUrl = this.msgUrl || this.myAccountData.urls?.messages;
        this.msgCount = this.msgCount || this.myAccountData.notifications?.count;
        this.cartUrl = this.cartUrl || this.myAccountData.urls?.cart;
        this.cartCount = this.cartCount || this.myAccountData.cart?.count;
        this.isLoggedIn = true;
        this.nanoUserData.emit(this.myAccountUser);
    }
    formatLoginLink(link) {
        if (!link)
            return '';
        if (!this.sessionRedirect)
            return link;
        if (link.endsWith('='))
            return link + this.sessionRedirect;
        if (link.includes('?'))
            return link + '&ReplayState=' + this.sessionRedirect;
        return link + '?ReplayState=' + this.sessionRedirect;
    }
    /// USER LOGIN - end ///
    /// RESIZING - start ///
    resizeObserver;
    cachedWidth;
    mainMenu;
    _mainMenuBar;
    get mainMenuBar() {
        return this._mainMenuBar;
    }
    set mainMenuBar(el) {
        if (this._mainMenuBar === el)
            return;
        this._mainMenuBar = el;
        this.addMainmenuRo();
    }
    /**
     * Manually triggers the main menu bar resize behaviour.
     * This can be useful if you append new children to the global-nav
     */
    async triggerResize() {
        this.shouldResize = true;
        this.breakpoint = 0;
    }
    shouldResize = true;
    breakpoint = 0;
    breakpointChanged() {
        if (this.breakpoint < this.bpPartials.mainMenu.breakpoint &&
            this.shouldResize === false) {
            this.overflowOpen = false;
        }
    }
    debounceResetResize = throttle.debounce(() => {
        this.shouldResize = false;
    }, 300);
    addMainmenuRo() {
        this.removeMainmenuRo();
        const ro = (this.resizeObserver = new ResizeObserver(() => {
            if (this.shouldResize ||
                (this.mainMenuBar.clientWidth >= this.cachedWidth &&
                    this.breakpoint === 0) ||
                (this.mainMenuBar.clientWidth <= this.cachedWidth &&
                    this.mainMenuBar.clientWidth >= this.mainMenu.scrollWidth)) {
                // if we're already resizing,
                // OR we're already at the biggest breakpoint and the bar's size is now bigger than what it was,
                // OR the bar's size is less than it was but is still bigger than the menu's size
                // we don't need to do anything
                return;
            }
            // reset breakpoint and start resizing
            this.shouldResize = true;
            this.breakpoint = 0;
        }));
        ro.observe(this.mainMenuBar);
    }
    removeMainmenuRo() {
        if (!this.resizeObserver)
            return;
        if (this.mainMenuBar)
            this.resizeObserver.unobserve(this.mainMenuBar);
        else
            this.resizeObserver.disconnect();
    }
    handleResize = () => {
        if (!this.shouldResize)
            return;
        if (this.breakpoint < 4 &&
            this.mainMenu.scrollWidth > this.mainMenuBar.clientWidth) {
            // changing 'breakpoint' will keep triggering a re-render until the content fits
            this.breakpoint++;
        }
        else {
            // content now fits
            this.cachedWidth = this.mainMenuBar.clientWidth;
            this.debounceResetResize();
        }
    };
    /// RESIZING - end ///
    /// SEARCH - start ///
    algoliaClient;
    searchResults;
    searchInput;
    activeIndex;
    autocompleteResults;
    searchForm;
    searchIndices = [];
    searchBarShown = false;
    searchLoading = false;
    _searchValue = '';
    /** Emitted when search results are successfully returned from Algolia. */
    nanoSearchResult;
    /** Emitted when algolia returns an error. */
    nanoSearchError;
    /** Emitted when search field is cleared. */
    nanoSearchReset;
    /** Algolia search index to search within */
    searchIndex = 'All';
    /** A search string used to load and show autocomplete results */
    get searchValue() {
        return this._searchValue;
    }
    set searchValue(val) {
        if (val) {
            this.host.componentOnReady().then(() => {
                this.searchBarShown = true;
                this.handleSearchTermChangeEvent(val);
            });
        }
    }
    /** Send the current search term and selected index to a nested `nano-global-search-results` */
    async submitSearch() {
        this.onSearchSubmit();
        return;
    }
    handleSearchIndex() {
        if (!this.searchIndices?.length)
            return;
        if (!this.searchIndex) {
            this.activeIndex = this.searchIndices[0];
            return;
        }
        this.activeIndex =
            this.searchIndices.find((index) => index.name === this.searchIndex) ||
                this.searchIndices[0];
        return this.activeIndex;
    }
    initSearch() {
        if (!this.myAccountData)
            return;
        const { search } = this.myAccountData;
        if (!search?.app_id || !search?.api_key)
            return;
        // initialise algolia
        this.algoliaClient = algoliasearchLite_esm_browser.algoliasearch(search.app_id, search.api_key);
        // setup algolia analytics
        searchInsights.searchInsight.init(search.app_id, search.api_key).then(() => {
            if (this.myAccountUser)
                searchInsights.searchInsight.setUser(this.myAccountUser.uuid);
        });
        // initialise all search indices
        this.searchIndices = this.myAccountData.search.indeces;
        this.searchIndices.forEach((searchIndex) => {
            searchIndex.algoliaIndex = this.algoliaClient.initIndex(searchIndex.index);
        });
        // set the initial search index if it's not manually set
        if (!this.searchIndex) {
            this.searchIndex = this.searchIndices[0].name;
        }
    }
    /**
     * Called whenever the search form is submitted (but can also be called manually).
     * Fires event which will activate / display `nano-global-search-results`
     */
    onSearchSubmit = async (ev) => {
        if (ev)
            ev.preventDefault();
        if (!this.activeIndex ||
            !this.myAccountData ||
            this._searchValue?.length < MIN_SEARCH_LENGTH)
            return;
        if (!this.searchResults)
            await this.doAlgoliaSearch();
        const { search } = this.myAccountData;
        const activeIndex = this.searchResults?.results.find((res) => this.activeIndex.index === res.index);
        const { index, domain, filters, query, replicas } = activeIndex;
        this.searchBarShown = false;
        this.nanoSearchResult.emit({
            meta: {
                indexTitle: activeIndex.indexName,
                index,
                domain,
                filters,
                query,
                replicas,
            },
            client: { apiKey: search.api_key, appId: search.app_id },
        });
    };
    async doAlgoliaSearch() {
        this.searchResults = null;
        if (!this.algoliaClient)
            return;
        const queries = this.searchIndices.map((index) => {
            const toReturn = {
                clickAnalytics: true,
                attributesToSnippet: ['body:5', 'title:8'],
                indexName: index.index,
                query: this._searchValue,
                facets: index.filters,
                hitsPerPage: 5,
                filters: '',
            };
            if (index.name === 'Community') {
                toReturn.filters =
                    'created > ' + Math.floor((Date.now() - 63115200000) / 1000); // only get last 2 years
            }
            return toReturn;
        });
        try {
            this.searchLoading = true;
            // process results, adding correct domains to url fields.
            this.searchResults = this.processSearchResults((await this.algoliaClient.search(queries)));
        }
        catch (e) {
            console.error(e);
            this.nanoSearchError.emit(e);
        }
        this.searchLoading = false;
        return this.searchResults;
    }
    /**
     * Process a set (or multiple sets) of algolia results
     * and applies correct domain names / http protocol to each result's url
     * @returns algolia results with correct domains applied
     */
    processSearchResults(results) {
        const multiResults = results;
        const singleResult = results;
        if (multiResults?.results) {
            multiResults.results.forEach((result, i) => {
                result = {
                    ...result,
                    indexName: this.searchIndices[i].name,
                    selected: this.activeIndex.name === this.searchIndices[i].name,
                    domain: this.activeIndex.domain || null,
                    domains: this.myAccountData.domains || null,
                    allGroup: !!this.searchIndices[i].allGroup,
                    filters: this.searchIndices[i].filters,
                    replicas: this.activeIndex.replicas,
                };
                multiResults.results[i] = this.processSearchResults(result);
            });
            return multiResults;
        }
        singleResult.hits.map((hit) => {
            if (hit.url && !hit.url.match(/^http/))
                hit.url =
                    location.protocol + '//' + this.domainFor(hit.origin) + hit.url;
        });
        return singleResult;
    }
    // Finds a correct domain (as defined by myAccount data) for a given origin
    domainFor(origin) {
        if (!this.myAccountData)
            return '';
        const domain = this.myAccountData.domains.find((dm) => dm.origin === origin);
        return domain ? domain.domain : '';
    }
    async setAutocompleteResults() {
        this.autocompleteResults = null;
        if (this._searchValue.length < MIN_SEARCH_LENGTH) {
            if (!this._searchValue.length)
                this.nanoSearchReset.emit();
            return;
        }
        this.autocompleteResults = (await this.doAlgoliaSearch())?.results.find((res) => res.selected);
    }
    autocompleteSnippet(hit) {
        return hit._snippetResult?.title?.value || hit.title;
    }
    // Search event handlers
    handleSearchOpenEvent = (e) => {
        if (!e.target.classList.contains('gn__search-dropdown') ||
            !this.searchInput) {
            return;
        }
        this.searchInput.setFocus();
        this.searchBarShown = true;
    };
    handleSearchCloseEvent = (e) => {
        if (e.target.classList.contains('gn__search-dropdown')) {
            requestAnimationFrame(() => (this.searchBarShown = false));
        }
    };
    handleSearchTermInputEvent = (e) => {
        if (e.detail.type === 'input' &&
            this.searchInput.value.length >= MIN_SEARCH_LENGTH) {
            this.autocompleteResults = null;
            this.searchLoading = true;
        }
    };
    handleSearchTermChangeEvent = (searchStr) => {
        if (this._searchValue === searchStr)
            return;
        this._searchValue = searchStr;
        this.setAutocompleteResults();
    };
    handleSearchIndexChangeEvent = (e) => {
        if (!e.detail?.value?.length)
            return;
        const index = e.detail.value;
        if (this.activeIndex.index === index)
            return;
        const selectedIndex = this.searchIndices.find((searchIndex) => searchIndex.index === index);
        if (!selectedIndex || !selectedIndex.algoliaIndex)
            return;
        this.searchIndex = selectedIndex.name;
        if (this._searchValue.length >= MIN_SEARCH_LENGTH) {
            this.searchInput.setFocus();
            this.searchBarShown = true;
            this.setAutocompleteResults();
        }
    };
    /// SEARCH - end ///
    /// LIFECYCLE ///
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.nanoUserData = index.createEvent(this, "nanoUserData", 7);
        this.nanoSearchResult = index.createEvent(this, "nanoSearchResult", 7);
        this.nanoSearchError = index.createEvent(this, "nanoSearchError", 7);
        this.nanoSearchReset = index.createEvent(this, "nanoSearchReset", 7);
        this.handleResize = throttle.debounce(this.handleResize, 75);
    }
    componentWillLoad() {
        this.handleMyAccountUrl();
        this.initSearch();
        this.processUserData();
        style.addGlobalStylesheetToShadow(this.host.shadowRoot);
    }
    componentDidRender() {
        this.handleResize();
    }
    /// RENDER ///
    loggedInPanel() {
        if (!this.isLoggedIn || !this.myAccountUser)
            return;
        return (renderer.h("div", { part: "user-panel", class: `gn__user-panel nano-theme-dark` }, renderer.h("div", { class: "gn__user-panel-head", slot: "label" }, renderer.h("nano-avatar", { initials: this.myAccountUser.first_name?.charAt(0) +
                this.myAccountUser.last_name?.charAt(0) }, this.myAccountUser.small_avatar_url &&
            !this.myAccountUser.small_avatar_url.includes('generic') && (renderer.h("img", { src: this.myAccountUser.small_avatar_url, alt: "User Avatar", height: 40, width: 40 }))), renderer.h("div", null, this.myAccountUser.name, renderer.h("br", null), this.myAccountUser.job_title && this.myAccountUser?.company
            ? `${this.myAccountUser.job_title}, ${this.myAccountUser.company}`
            : this.myAccountUser.job_title ||
                this.myAccountUser.company ||
                '')), renderer.h("div", { class: "gn__user-panel-body" }, this.userLinks.map((link) => (renderer.h("a", { href: link.address, target: link.target || undefined }, link.title, (link.title === 'Messages' ||
            link.address.includes(this.msgUrl) ||
            this.msgUrl.includes(link.address)) &&
            this.msgCount > 0 && (renderer.h("nano-badge", { theme: "danger", strength: "2" }, this.msgCount)))))), renderer.h("div", { class: "gn__user-panel-foot" }, renderer.h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, typeof this.logoutUrl === 'string' ? (renderer.h("a", { href: this.formatLoginLink(this.logoutUrl) }, "Logout")) : (renderer.h("button", { onClick: this.logoutUrl }, "Logout"))))));
    }
    bpPartials = {
        contact: {
            tpl: () => this.contactUrl && renderer.h("a", { href: this.contactUrl }, "Contact"),
            breakpoint: 0,
        },
        mainMenu: {
            tpl: () => renderer.h("slot", { name: "menu" }),
            breakpoint: 1,
        },
        logo: {
            tpl: () => { },
            breakpoint: 2,
        },
    };
    noResultPartial() {
        if (this.searchLoading ||
            this.autocompleteResults?.hits.length ||
            this._searchValue.length < MIN_SEARCH_LENGTH) {
            // it's loading or there are results or there's no search term
            return;
        }
        const toReturn = [];
        if (this.searchIndex === 'All') {
            toReturn.push(renderer.h("div", { slot: "no-result", class: "gn__search-no-results" }, "No results matching for \"", renderer.h("strong", null, this._searchValue), "\" Try another phrase"));
            return toReturn;
        }
        this.searchResults?.results.forEach((result) => {
            if (result.hits.length) {
                toReturn.push(renderer.h("nano-option", { class: "gn__search-result", onNanoSelect: (e) => {
                        e.preventDefault();
                        this.searchIndex = result.indexName;
                        this.onSearchSubmit(e);
                    } }, "Show results for \"", renderer.h("strong", null, this._searchValue), "\" in\u00A0", renderer.h("strong", null, result.indexName)));
            }
        });
        toReturn.unshift(renderer.h("div", { slot: toReturn.length ? 'list-top' : 'no-result', class: "gn__search-no-results" }, "No results matching for \"", renderer.h("strong", null, this._searchValue), "\" in", ' ', renderer.h("strong", null, this.searchIndex), ". Try another phrase"));
        return toReturn;
    }
    render() {
        const bpps = this.bpPartials;
        return (renderer.h(index.Host, { key: '6f3ecd6fac6825f4b137592e1becb86046278542', class: {
                'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
                'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
                'nano-global-nav': true,
            } }, renderer.h("div", { key: '8ecbd0ecc9ac93f1a1dd5defa8f119874f623daf', class: {
                gn: true,
                'gn__search-open': this.searchBarShown,
            } }, renderer.h("nano-drawer", { key: '728b760496d041fc5f1d78905081e7fe59b7047c', ref: (el) => (this.overflowMenu = el), label: "Main menu", part: "drawer", class: "gn__drawer nano-theme-dark", placement: "start", open: this.overflowOpen, onNanoAfterHide: () => (this.overflowOpen = false), onNanoAfterShow: () => (this.overflowOpen = true) }, renderer.h("div", { key: 'd1b99ae15e00511594abf476a06f8374d4fad508', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), renderer.h("nav", { key: '97debdda75a0d7d9f2a6e23306fa93bd2d73de06', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
            ? bpps.mainMenu.tpl()
            : '', renderer.h("slot", { key: 'd500a55cb220088df7af00b356f902a3d80fb47d', name: "overflow" }))), renderer.h("div", { key: 'c1454d4666561a77a850d9328d13795d5f989d89', class: "gn__menu-bar-wrapper" }, renderer.h("div", { key: 'f32f9a8302ad3501ae3d9e8afdf2ed7d59297335', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, renderer.h("nav", { key: '8605e4bf473e4b34e3890ddaf69c555abc397716', "aria-label": "Global navigation", class: `gn__main-menu ${this.shouldResize ? 'resizing' : ''}`, part: "main-menu", ref: (el) => (this.mainMenu = el) }, this.breakpoint > bpps.mainMenu.breakpoint && (renderer.h("nano-icon-button", { key: '04aaa626447c7377fadcd8d374fa9120ef5fea62', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), renderer.h("slot", { key: '3f858438db16a112c2dee67ee8b865afba9180fe', name: "logo" }, renderer.h("a", { key: 'ddc758422fb964b2644e825c98ec0aec832895db', href: this.logoUrl, class: "gn__logo-link", part: "logo-link" }, this.breakpoint <= bpps.logo.breakpoint ? (renderer.h("img", { src: index.getAssetPath('../nano-assets/ont-logo.svg'), alt: `Oxford Nanopore Technologies logo. Features a stylised representation of a nanopore,
                            (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--large", width: "152", height: "36", part: "logo logo--large" })) : (renderer.h("img", { src: index.getAssetPath('../nano-assets/ont-wheel.svg'), alt: `Oxford Nanopore Technologies logo. A stylised representation of a nanopore,
                            (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--small", width: "36", height: "36", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (renderer.h("div", { key: 'c48d4d74b18f876cffee723a8da0bd4d82300b7b', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), renderer.h("div", { key: 'e433743c122dc9e4427de3f0fdd7067bcd52f558', class: "gn__main-menu-actions" }, !this.myAccountData ||
            (!!this.searchIndices.length && (renderer.h("nano-dropdown", { key: 'e6c5655701e5a91409f5fad4f45efd868cbd1a50', dialogTitle: "Search Oxford Nanopore Technologies", placement: "bottom", class: "gn__search-dropdown", skidding: -30, distance: 25, open: this.searchBarShown, onNanoAfterShow: this.handleSearchOpenEvent, onNanoAfterHide: this.handleSearchCloseEvent, autoOpen: !!this.searchIndices.length }, renderer.h("nano-icon-button", { key: '8de3fb7f465103bda3063e96876345701d942a01', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), renderer.h("form", { key: '18fca7445c9471089e013cea8d83aa749e655aab', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (renderer.h("nano-select", { key: '7b37f759f2a24d8686d46a3ebbcb3afaa54cbbee', part: "search-select", label: "Which site do you wish to search in?", mask: true, hideLabel: true, value: this.activeIndex?.index, onNanoChange: this.handleSearchIndexChangeEvent }, this.searchIndices.map((index) => (renderer.h("nano-option", { selected: index.name === this.searchIndex, value: index.index }, index.name || index.index))))), renderer.h("nano-input", { key: '93838bee803808b06f56c14886975cd3fc8ab827', ref: (ele) => (this.searchInput = ele), part: "search-input", label: "Search Oxford Nanopore Technologies", placeholder: "Search Oxford Nanopore...", hideLabel: true, clearable: true, showInlineError: false, onNanoChange: (e) => {
                    this.handleSearchTermChangeEvent(e.detail.value);
                }, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, renderer.h("nano-icon", { key: 'd39203dd3727a34b60c5c71fc6b9a14c23ef2465', slot: "end", name: "light/magnifying-glass" }), renderer.h("nano-datalist", { key: '9826082e21b53f54254c8f2490b3b42c215edacb', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (renderer.h("div", { key: '65f17640b43bce0f44e59f092b7c8ef562f02e19', slot: "no-result", class: "gn__search-loading" }, renderer.h("nano-spinner", { key: 'f0162dd8c60aae95e35d9e02770a9398bede0828' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
                this.autocompleteResults.hits.map((hit, i) => (renderer.h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
                        searchInsights.searchInsight.sendClick({
                            index: this.activeIndex.index,
                            eventName: 'Global nav quick search - search result clicked',
                            queryID: this.autocompleteResults.queryID,
                            objectIDs: [hit.objectID],
                            positions: [i + 1],
                        });
                    } }, renderer.h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
                renderer.h("nano-option", { key: 'ddf176669705bb04a45575ee1bf8897d46ae9704', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
            ])))))), renderer.h("div", { key: 'f84317012affbf6aa952810f627ca318f042dd0b', class: "gn__cart" }, this.cartUrl && [
            renderer.h("nano-icon-button", { key: 'c656b17e3ee2462900fc855c8128b2e92e3ad4cb', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }),
            !!this.cartCount && (renderer.h("nano-badge", { key: 'f6dbaa60f1960c3674c446fec760b27e9655d537', theme: "danger", strength: "2" }, this.cartCount > 9 ? '9+' : this.cartCount)),
        ]), this.breakpoint <= bpps.contact.breakpoint
            ? bpps.contact.tpl()
            : '', this.isLoggedIn ? (renderer.h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, renderer.h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, renderer.h("nano-icon", { name: "light/user" }), renderer.h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (renderer.h("nano-badge", { theme: "danger", strength: "2" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (renderer.h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, typeof this.loginUrl === 'string' ? (renderer.h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login")) : (renderer.h("button", { onClick: this.loginUrl }, "Login")))))))), renderer.h("nano-global-search-results", { key: '673b8dc2257fce9a5bb0766768cfcb7750e890f5', part: "site-search-results" }, renderer.h("div", { key: '73d76e83b1e397ed135bc102f45c37f41ca6759c', class: "gn__site", part: "site-wrapper" }, renderer.h("slot", { key: '940796917153c26f98dfb7359465989274673770' }))))));
    }
    static get assetsDirs() { return ["assets"]; }
    static get watchers() { return {
        "myAccountUrl": ["handleMyAccountUrl"],
        "myAccountData": ["processUserData", "initSearch"],
        "shouldResize": ["breakpointChanged"],
        "breakpoint": ["breakpointChanged"],
        "searchIndices": ["handleSearchIndex"],
        "searchIndex": ["handleSearchIndex"]
    }; }
};
GlobalNav.style = globalNavCss;

exports.nano_global_nav = GlobalNav;
