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

package/dist/collection/components/global-nav/global-nav.js

@@ -1,646 +1,310 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
-import { Host, Build, getAssetPath, readTask, writeTask, } from "@stencil/core";
-import algoliasearch from "algoliasearch/dist/algoliasearch-lite.esm.browser";
-import { clientFetch } from "../../utils/fetch";
-import { ComponentStore } from "../../utils/store/component-store";
+import { Host, getAssetPath, } from "@stencil/core";
+import { h } from "../../utils/renderer";
+import algoliaSearch from "algoliasearch/dist/algoliasearch-lite.esm.browser";
 import { debounce } from "../../utils/throttle";
-import { displayTransition } from "../../utils/transitions";
+import { addGlobalStylesheetToShadow } from "../../utils/style";
 import searchInsight from "../../utils/search-insights";
-import { transformTag, h } from "../../utils/renderer";
-// the 'breakpoints' where different segments of content go into or out-of the burger / overflow menu
-const THRESHOLDBREAKS = {
-    about: 0,
-    main: 1,
-    login: 2,
-    search: 3,
-    icon: 4,
-};
-const THRESHOLDLIMIT = Object.keys(THRESHOLDBREAKS).length;
+const MIN_SEARCH_LENGTH = 3;
 /**
- * Nanopore digital global navigation and search bar.
- * Incorporates MyAccount / SSO states (messages / cart / user name etc).
- * Incorporates Algolia search.
+ * The Global nav component standardises navigation within and across web applications.
  *
- * @slot main - main nav items. Should be used with nano-nav-item's
- * @slot icon - nano-nav-item's displayed alongside icon links that come from MyAccount
- * @slot loggedin - nano-nav-item's to display when users are signed in, alongside links from from MyAccount (within the overflow menu panel).
- * @slot about - nano-nav-item's to display with about links that come from MyAccount
- * @slot site - nano-nav-item's to display with site links that come from MyAccount
- * @slot overflow - items to always display in the overflow menu
- * @slot search - when not using myaccount search OR show-search="false" you can utilise the search slot
- * @slot promotion - a free area for any promotional content, displayed within the overflow menu panel
- * @slot logo - when show-logo="false" you can utilise the logo slot
- * @slot - if using search functionality, place a `<nano-search-results />` element in the default slot
+ * @version 8.0.0
+ * @status new
  *
- * @part burger - the overflow / burger ui element
- * @part burger-menu - the overflow / burger menu
- * @part burger-actions-bar - the top bar of the overflow / burger menu
- * @part burger-content - the main content area of the overflow / burger menu
- * @part bars - the main wrapper around the `main-bar` and `search-bar` nav bars
- * @part main-bar - the main nav menu bar
- * @part logo-link - the link wrapping the logo
- * @part search-bar - the search bar that appears under the main nav menu bar
+ * @slot menu - Main menu items. Can be used with `<nano-nav-item>` or `<a>` elements.
+ * @slot - Main site content.
+ *
+ * @part main-menu - The main menu bar nav element.
+ * @part search-form - The search form element.
+ * @part search-input - The search input element.
+ * @part search-select - The search select element.
+ * @part wrapper - The main wrapper for the component.
+ * @part drawer - The drawer element which controls the overflow menu.
+ * @part overflow-header - The header for the overflow menu.
+ * @part overflow-menu - The overflow menu items.
+ * @part menu-bar - The main menu bar.
+ * @part site-wrapper - The main site content area.
+ * @part logo-link - The logo link element.
+ * @part logo - The logo element.
+ * @part user-panel - The user panel element.
+ * @part site-search-results - The nano-global-search-results element
  */
 export class GlobalNav {
-    // position and dimension state
-    debounceResize;
-    debounceSetResizingState;
-    currSize = 0;
-    // menu
-    menuDiv;
-    menuBtn;
-    menuWrapDiv;
-    menuContentDiv;
-    menuSelectedItems;
-    // search
-    searchBarEl;
-    searchInput;
-    algoliaClient;
-    currentIndex;
-    autocompleteResults;
-    autocompleteEles = [];
-    currAIndex = -1;
-    algoliaSearchResults;
-    scopeSearch;
-    // general
-    mainBarDiv;
-    userLinkPanel;
-    isLoggedIn = false;
-    myAccData = null;
-    // myaccount links
-    aboutNavItms = [];
-    siteNavItms = [];
-    loggedInNavItms = [];
-    constructor() {
-        this.assessSlottedContent = debounce(this.assessSlottedContent.bind(this), 10);
-        this.handleBarResize = debounce(this.handleBarResize.bind(this), 200);
+    /// COMMON ///
+    host;
+    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 / 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 toggle open or close the overflow menu */
+    async toggleOverflowMenu() {
+        this.overflowOpen = !this.overflowOpen;
+    }
+    /// 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 import(`./assets/local-logged-in.json`));
+            return;
+        }
+        else if (this.myAccountUrl === 'local-logged-out') {
+            this.myAccountData = (await import(`./assets/local-logged-out.json`));
+            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);
+        });
     }
-    // user profile link
-    userProfileUrl = '';
-    // has slot tests
-    hasLoggedinSlot = false;
-    hasSiteSlot = false;
-    hasPromotionSlot = false;
-    // slot item number tests
-    aboutSlotLen = 0;
-    iconSlotLen = 0;
-    mainSlotLen = 0;
-    overflowSlotLen = 0;
-    searchSlotLen = 0;
-    // threshold / sizing
-    thresholdReady = false;
-    remoteDataReady = false;
-    ready = false;
-    isResizing = false;
-    threshold = THRESHOLDLIMIT;
-    // modals state
-    modalOpen = false;
-    modalIsOpen = false;
-    searchBarShown = false;
-    scrollingUp = true;
-    showAutocomplete = false;
-    secondaryMenuOpen = null;
-    userMenuOpen = false;
-    menuFullScreen = false;
-    // search
-    searchLoading = false;
-    searchValInternal = '';
-    internalSearchIndeces = [];
-    el;
     /**
-     * Connect to local, dev, test or prod MyAccount
-     * environments to retrieve global nav / sso data.
-     * Alternatively, you can use the `ssoDataUrl` prop.
-     */
-    env = 'prod';
-    /**
-     * A base url to retrieve global nav / sso data.
-     * `nav_bar_data.json` will be appended to this url.
-     * An alternative to the pre-defined `env` urls
-     */
-    ssoDataUrl;
-    /**
-     * An alternative to both 'env' and 'ssoDataUrl'.
-     * You can directly provide a JSON object of myaccount data.
-     * (e.g. https://myaccount.nanoporetech.com/nav_bar_data.json)
-     * This is useful for SSR
+     * MyAccount data 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;
-    handleMyAccountData() {
-        if (!this.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)
+            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;
-        if (!this.myAccountData.user || !this.myAccountData.links)
+        this._mainMenuBar = el;
+        this.addMainmenuRo();
+    }
+    shouldResize = true;
+    breakpoint = 0;
+    breakpointChanged() {
+        if (this.breakpoint < this.bpPartials.mainMenu.breakpoint &&
+            this.shouldResize === false) {
+            this.overflowOpen = false;
+        }
+    }
+    debounceResetResize = 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;
-        this.myAccData = this.myAccountData;
-        if (this.myAccData.user.id) {
-            this.isLoggedIn = true;
-            this.myAccountUser = this.myAccData.user;
-        }
-        this.processMyAccLinks();
-        this.processMyAccData();
-        this.remoteDataReady = true;
+        if (this.mainMenuBar)
+            this.resizeObserver.unobserve(this.mainMenuBar);
+        else
+            this.resizeObserver.disconnect();
     }
-    /**
-     * Where to take user after SSO login
-     */
-    ssoRedirect = encodeURIComponent(window.location.href);
-    /**
-     * Whether to attempt to get global nav / sso data from MyAccount
-     */
-    getMyAccountData = true;
-    /**
-     * Active MyAccount link sections. By default all will show.
-     */
-    activeMyAccountSections = null;
-    /**
-     * Whether to show search functionality
-     */
-    showSearch = true;
-    /**
-     * Whether to show Nanopore logo
-     */
-    showLogo = true;
-    /**
-     * The link to put on the logo
-     */
-    logoUrl = location.protocol + '//' + location.host;
-    /**
-     * An array of Algolia search indexes (and optional display names). Will be automatically populated from MyAccount
-     */
-    searchIndeces = [];
-    /**
-     * Logged in user details automatically populated from MyAccount
-     */
-    myAccountUser = null;
-    /**
-     * An Algolia App ID key. Will be automatically populated from MyAccount
-     */
-    searchAppId;
-    /**
-     * An Algolia API Key. Will be automatically populated from MyAccount
-     */
-    searchApiKey;
-    /**
-     * A search value to passed to Algolia to programmatically get or to preload search results
-     */
-    searchValue = '';
-    /**
-     * Algolia search index to programmatically set or to set an initial index
-     */
-    searchIndex = 'All';
-    /**
-     * MyAccount store cart count.
-     */
-    cartCount = 0;
-    /**
-     * MyAccount un-read message count.
-     */
-    msgCount = 0;
-    /**
-     * Url to the Nanopore store cart. Will default to the url supplied by MyAccount
-     */
-    cartUrl = null;
-    /**
-     * Url to the Nanopore message center. Will default to the url supplied by MyAccount
-     */
-    msgUrl = null;
-    /**
-     * Emitted when the global nav is ready.
-     */
-    nanoIsReady;
-    /**
-     * Emitted when search results are successfully returned from Algolia.
-     */
+    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.
-     */
+    /** Emitted when algolia returns an error. */
     nanoSearchError;
-    /**
-     * Emitted when search field is cleared.
-     */
+    /** Emitted when search field is cleared. */
     nanoSearchReset;
-    /**
-     * Submit the search form (a search value must be present)
-     */
+    /** 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();
-        this.showAutocomplete = false;
         return;
     }
-    /**
-     * Manually open or close the overflow (burger) menu
-     * @param openClose - optionally force open (true) or close (false)
-     */
-    async toggleOverflowMenu(openClose) {
-        if (openClose === true || (openClose === undefined && !this.modalIsOpen)) {
-            this.menuOpen();
-        }
-        else {
-            this.menuClose(null, true);
-        }
-    }
-    async getMyAccData() {
-        if (this.myAccData)
+    handleSearchIndex() {
+        if (!this.searchIndices?.length)
             return;
-        switch (this.env) {
-            case 'prod':
-                this.userProfileUrl = 'https://myaccount.nanoporetech.com/';
-                break;
-            case 'local':
-            case 'dev':
-            case 'test':
-            default:
-                this.userProfileUrl = 'https://myaccount.nanoporetech.com/';
-                break;
-        }
-        if (!this.getMyAccountData || this.myAccData) {
-            this.remoteDataReady = true;
+        if (!this.searchIndex) {
+            this.activeIndex = this.searchIndices[0];
             return;
         }
-        let url = this.ssoDataUrl;
-        if (!url) {
-            switch (this.env) {
-                case 'dev':
-                    url = 'https://myaccount-dev.nanoporetech.com/';
-                    break;
-                case 'test':
-                    url = 'https://myaccount-test.nanoporetech.com/';
-                    break;
-                default:
-                    url = 'https://myaccount.nanoporetech.com/';
-                    break;
-            }
-        }
-        const config = { timeout: 5000 };
-        try {
-            if (this.env === 'local') {
-                this.myAccData = (await import(`./assets/local-my-account.json`));
-            }
-            else {
-                this.myAccData = await clientFetch(url + 'nav_bar_data.json', config);
-            }
-            if (this.myAccData.user.id) {
-                this.isLoggedIn = true;
-                this.myAccountUser = this.myAccData.user;
-            }
-            this.processMyAccLinks();
-            this.processMyAccData();
-            setTimeout(() => (this.remoteDataReady = true), 300);
-        }
-        catch (e) {
-            console.error(e);
-            this.remoteDataReady = true;
-        }
+        this.activeIndex =
+            this.searchIndices.find((index) => index.name === this.searchIndex) ||
+                this.searchIndices[0];
+        return this.activeIndex;
     }
-    currentSelectedIndex() {
-        if (!this.internalSearchIndeces.length) {
-            return;
-        }
-        if (!this.searchIndex)
-            return this.internalSearchIndeces[0];
-        const foundIndex = this.internalSearchIndeces.find((index) => index.name === this.searchIndex);
-        if (!foundIndex) {
-            this.currentIndex = this.internalSearchIndeces[0];
-            console.error('index not found');
+    initSearch() {
+        if (!this.myAccountData)
             return;
-        }
-        this.currentIndex = foundIndex;
-        return foundIndex;
-    }
-    changeInternalSearchVal() {
-        if (this.searchValInternal !== this.searchValue)
-            this.searchValue = this.searchValInternal;
-    }
-    initAlgoliaClient() {
-        if (!this.searchAppId || !this.searchApiKey)
+        const { search } = this.myAccountData;
+        if (!search?.app_id || !search?.api_key)
             return;
-        this.algoliaClient = algoliasearch(this.searchAppId, this.searchApiKey);
-        this.addAlgoliaIndeces();
+        // initialise algolia
+        this.algoliaClient = algoliaSearch(search.app_id, search.api_key);
         // setup algolia analytics
-        searchInsight.init(this.searchAppId, this.searchApiKey).then(() => {
+        searchInsight.init(search.app_id, search.api_key).then(() => {
             if (this.myAccountUser)
                 searchInsight.setUser(this.myAccountUser.uuid);
         });
-    }
-    /** Public facing set of Algolia indices. Add to any indices we may already have (e.g. from MyAccount) */
-    addIndeces() {
-        this.internalSearchIndeces = [
-            ...this.internalSearchIndeces,
-            ...this.searchIndeces,
-        ];
-    }
-    /** Internal set of of Algolia indices. Includes public & private (e.g. from MyAccount) */
-    addAlgoliaIndeces() {
-        if (!this.algoliaClient || !this.internalSearchIndeces.length)
-            return;
-        this.internalSearchIndeces.forEach((searchIndex) => {
-            searchIndex.alogliaIndex = this.algoliaClient.initIndex(searchIndex.index);
+        // 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.internalSearchIndeces[0].name;
-        }
-    }
-    /** Current content breakpoint. If it goes up, things can look wonky for a second so we temporarily hide stuff */
-    thresholdChange(newThreshold, oldThreshold) {
-        if (newThreshold > oldThreshold) {
-            // we've resized to larger screen.
-            this.setResizingState(true);
-        }
-    }
-    /* Check if data and item placement is ready */
-    assessReady() {
-        if (this.thresholdReady && this.remoteDataReady) {
-            this.ready = true;
-            this.nanoIsReady.emit();
-            if (this.searchValue)
-                requestAnimationFrame(() => this.searchbarShow());
-        }
-    }
-    /**
-     * Add / remove events when autocomplete results show / hide.
-     */
-    setupAutocompleteBlur() {
-        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        this.searchInput.clientWidth; // force reflow
-        if (this.showAutocomplete) {
-            this.el.shadowRoot.addEventListener('click', this.onAutocompleteBlur);
+            this.searchIndex = this.searchIndices[0].name;
         }
-        else {
-            this.el.shadowRoot.removeEventListener('click', this.onAutocompleteBlur);
-        }
-    }
-    closeSearchBar() {
-        if (!!this.secondaryMenuOpen && this.searchBarShown)
-            this.searchbarHide();
     }
-    /** As relevant slotted items change, reset resizing breakpoints */
-    slotChange() {
-        this.threshold = THRESHOLDLIMIT;
-    }
-    // General classes for visuals
-    thresholdClasses() {
-        const classes = [];
-        let i = 0;
-        for (i; i < this.threshold; i++)
-            classes.push('threshold-' + (i + 1));
-        return classes;
-    }
-    /**
-     * provides 'isResizing' - we use this to fade content out on 'breakpoint' increase
-     * (when the screen size increases). Otherwise the stepping through of
-     * breakpoints to calculate if content currently fits shows on screen (looks ugly)
-     */
-    setResizingState = (state = false) => {
-        if (typeof this.debounceSetResizingState === 'undefined') {
-            this.debounceSetResizingState = debounce(this.setResizingState, 600);
-        }
-        if (state) {
-            this.isResizing = true;
-            this.debounceSetResizingState();
-        }
-        else {
-            this.isResizing = false;
-        }
-    };
-    // Global DOM Events
     /**
-     * 1) Reset threshold (item fit breakpoint) when screen is bigger than before.
-     * 2) Assess the all threshold / breakpoints to see if content fits
-     * 3) Hide search bar whenever we resize
+     * Called whenever the search form is submitted (but can also be called manually).
+     * Fires event which will activate / display `nano-global-search-results`
      */
-    onWindowResize() {
-        if (this.threshold < THRESHOLDLIMIT && window.innerWidth > this.currSize) {
-            this.threshold = THRESHOLDLIMIT;
-            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-            this.mainBarDiv.clientWidth; // force reflow
-        }
-        this.currSize = window.innerWidth;
-        this.searchbarHide();
-        this.handleBarResize();
-    }
-    // Burger / Overflow Menu
-    /* listen to nav-item secondary open / close events primarily for resizing the menu */
-    secondaryOpen(ev) {
-        if (!ev.detail.secondaryMenu)
-            return;
-        ev.stopPropagation();
-        this.secondaryMenuOpen = ev.target;
-        if (!this.menuSelectedItems) {
-            this.menuSelectedItems = this.el.querySelectorAll(`${transformTag('nano-nav-item')}[selected]`);
-            this.menuSelectedItems.forEach((i) => i.classList.remove('selected'));
-        }
-        this.menuContentDiv.style.minHeight =
-            ev.detail.secondaryMenu.scrollHeight + 'px';
-    }
-    secondaryClose(ev) {
-        if (!ev.detail.secondaryMenu)
-            return;
-        ev.stopPropagation();
-        if (this.secondaryMenuOpen === ev.target && this.menuSelectedItems) {
-            this.secondaryMenuOpen = null;
-            this.menuContentDiv.style.minHeight = '';
-            this.menuSelectedItems = null;
-            this.el
-                .querySelectorAll(`${transformTag('nano-nav-item')}[selected]`)
-                .forEach((i) => i.classList.add('selected'));
-        }
-    }
-    onMenuBtnKeyDown = (ev) => {
-        switch (ev.key) {
-            case 'Enter':
-            case ' ':
-                if (this.modalOpen)
-                    this.menuClose(ev, true);
-                else
-                    this.menuOpen();
-                break;
-        }
-    };
-    onMenuBtnClick = (ev) => {
-        this.menuClose(ev, true);
-    };
-    menuOpen = (e) => {
-        if (e)
-            e.preventDefault();
-        this.menuDiv.style.display = 'block';
-        // need to open menu in stages
-        // wait for re-flow after changing display
-        // wait for repaint after animate, then focus
-        this.modalOpen = true;
-        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        this.menuDiv.clientWidth; // force reflow
-        this.menuWrapDiv.focus({ preventScroll: true });
-        if (this.threshold < 2 ||
-            this.menuWrapDiv.scrollHeight > window.innerHeight) {
-            document.body.style.overflow = 'hidden';
-            this.menuFullScreen = true;
-        }
-        else
-            document.body.style.overflowX = 'hidden';
-        setTimeout(() => (this.modalIsOpen = true), 300);
-    };
-    onMenuHidden = () => {
-        this.menuDiv.removeEventListener('transitionend', this.onMenuHidden);
-        document.body.style.overflow = '';
-        this.menuDiv.style.display = 'none';
-        this.modalIsOpen = false;
-        this.menuFullScreen = false;
-        setTimeout(() => {
-            if (document.activeElement === document.body && this.menuBtn)
-                this.mainBarDiv.focus({ preventScroll: true });
-        }, 50);
-    };
-    menuClose(ev, force = false) {
-        if (!this.modalIsOpen)
-            return;
-        if (force) {
-            this.modalOpen = false;
-            this.menuDiv.addEventListener('transitionend', this.onMenuHidden);
-            return;
-        }
-        if (!ev
-            .composedPath()
-            .some((el) => el === this.menuContentDiv ||
-            el.classList?.contains('gn-menu_actions'))) {
-            requestAnimationFrame(() => {
-                if (this.secondaryMenuOpen)
-                    return;
-                this.modalOpen = false;
-                this.menuDiv.addEventListener('transitionend', this.onMenuHidden);
-            });
-        }
-    }
-    subMenuClose = (ev) => {
-        ev.preventDefault();
-        ev.target.closest(transformTag('nano-nav-item')).open = false;
-    };
-    // User profile menu
-    onUserBtnClick = (ev) => {
-        ev.preventDefault();
-        this.userMenuOpen = !this.userMenuOpen;
-    };
-    onUserBtnKeyDown = (ev) => {
-        switch (ev.key) {
-            case 'Enter':
-            case ' ':
-                this.userMenuOpen = !this.userMenuOpen;
-                break;
-        }
-    };
-    onUserMenuBlur = (ev) => {
-        if (!ev.relatedTarget) {
-            this.userMenuOpen = false;
-            return;
-        }
-        if (ev.relatedTarget.closest('.user-links-panel'))
-            return false;
-        this.userMenuOpen = false;
-    };
-    async handleUserMenu() {
-        await displayTransition(this.userLinkPanel, {
-            className: 'show',
-            show: this.userMenuOpen,
-        });
-        if (this.userMenuOpen) {
-            this.userLinkPanel.focus();
-            this.userLinkPanel.addEventListener('focusout', this.onUserMenuBlur);
-        }
-        else {
-            this.userLinkPanel.removeEventListener('focusout', this.onUserMenuBlur);
-            this.el.focus();
-        }
-    }
-    // Search bar open / closed
-    onSearchBtnClick = (ev) => {
-        ev.preventDefault();
-        if (this.searchBarShown)
-            this.searchbarHide();
-        else
-            this.searchbarShow();
-    };
-    async searchbarShow() {
-        if (!this.searchBarEl)
+    onSearchSubmit = async (ev) => {
+        if (ev)
+            ev.preventDefault();
+        if (!this.activeIndex ||
+            !this.myAccountData ||
+            this._searchValue?.length < MIN_SEARCH_LENGTH)
             return;
-        this.searchBarShown = true;
-        this.searchBarEl.removeEventListener('transitionend', this.onSearchBarHidden);
-        this.searchBarEl.addEventListener('transitionend', this.onSearchBarShown);
-        this.searchBarEl.style.display = 'block';
-        requestAnimationFrame(() => {
-            const widgetHeight = Math.floor(this.searchBarEl.querySelector('.search-widget').scrollHeight) - 1;
-            this.searchBarEl.style.height = widgetHeight.toString() + 'px';
+        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 },
         });
-    }
-    onSearchBarShown = () => {
-        this.searchBarEl.removeEventListener('transitionend', this.onSearchBarShown);
-        if (this.searchInput)
-            this.searchInput.setFocus();
-        this.searchBarEl.style.overflow = 'visible';
-    };
-    searchbarHide = (ev) => {
-        if (ev &&
-            ev.relatedTarget &&
-            ev.relatedTarget.closest('#global-nav-search-bar')) {
-            return;
-        }
-        this.showAutocomplete = this.searchBarShown = false;
-        if (this.searchValInternal.length && ev)
-            return;
-        if (!this.searchBarEl)
-            return;
-        this.searchBarEl.addEventListener('transitionend', this.onSearchBarHidden);
-        this.searchBarEl.style.overflow = 'hidden';
-        this.searchBarEl.style.height = '0px';
-    };
-    onSearchBarHidden = () => {
-        this.searchBarEl.style.display = 'none';
-    };
-    // Algolia search
-    autocompleteSnippet(hit) {
-        const lookFor = ['title']; // , 'body'
-        if (hit._snippetResult) {
-            const found = lookFor.find((prop) => hit._snippetResult[prop] &&
-                hit._snippetResult[prop].matchLevel !== 'none');
-            if (found) {
-                if (found !== 'title')
-                    return ((hit.title.length > 15
-                        ? hit.title.substring(0, 15) + ' ...'
-                        : hit.title) +
-                        ' ' +
-                        hit._snippetResult[found].value);
-                else
-                    return hit._snippetResult['title'].value;
-            }
-        }
-        return hit.title;
-    }
-    onSearchInput = (ev) => {
-        this.searchValInternal = this.searchInput.value;
-        if (!this.isSearchValSet()) {
-            this.searchLoading = false;
-            return;
-        }
-        if (ev.detail.type === 'input') {
-            this.showAutocomplete = false;
-            this.searchLoading = true;
-        }
     };
-    /**
-     * Constructs a multi-search query for all set search indices
-     * (which are normally controlled via the myAccount payload) then sends to Algolia.
-     * Post-processes results, adding correct domains to url fields.
-     * @returns formatted algolia results
-     */
     async doAlgoliaSearch() {
-        this.algoliaSearchResults = null;
-        const queries = this.internalSearchIndeces.map((index) => {
+        this.searchResults = null;
+        const queries = this.searchIndices.map((index) => {
             const toReturn = {
                 clickAnalytics: true,
                 attributesToSnippet: ['body:5', 'title:8'],
                 indexName: index.index,
-                query: this.searchValInternal,
+                query: this._searchValue,
                 facets: index.filters,
                 hitsPerPage: 5,
                 filters: '',
@@ -652,611 +316,219 @@ export class GlobalNav {
             return toReturn;
         });
         try {
-            this.algoliaSearchResults = this.processSearchResults((await this.algoliaClient.search(queries)));
+            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;
-        if (!this.algoliaSearchResults)
-            return;
-        this.algoliaSearchResults.results.map((result, i) => {
-            result.indexName = this.internalSearchIndeces[i].name;
-            result.selected =
-                this.currentIndex.name === this.internalSearchIndeces[i].name;
-            result.domain = this.currentIndex.domain || null;
-            result.domains = this.myAccData.domains || null;
-            result.allGroup = !!this.internalSearchIndeces[i].allGroup;
-            result.filters = this.internalSearchIndeces[i].filters;
-            result.replicas = this.currentIndex.replicas;
-        });
-        return this.algoliaSearchResults;
+        return this.searchResults;
     }
     /**
-     * Called whenever the search input value changes.
-     * Performs Algolia search and shows autocomplete results.
-     * @param ev optional input change event
+     * Process a set (or multiple sets) of algolia results
+     * and applies correct domain names / http protocol to each result's url
      */
-    onSearchChange = async (ev) => {
-        this.searchValInternal = this.searchValue = ev
-            ? ev.detail.value
-            : this.searchValInternal;
-        this.showAutocomplete = false;
+    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.isSearchValSet()) {
-            if (!this.searchValInternal.length) {
+        if (this._searchValue.length < MIN_SEARCH_LENGTH) {
+            if (!this._searchValue.length)
                 this.nanoSearchReset.emit();
-            }
-            this.searchLoading = false;
             return;
         }
-        if (!this.currentIndex)
-            this.currentSelectedIndex();
-        // start search
-        this.searchLoading = true;
-        const algoliaHits = await this.doAlgoliaSearch();
-        this.scopeSearch = null;
-        this.scopeSearch = algoliaHits;
-        // set / show autocomplete results
-        this.autocompleteResults = algoliaHits.results.find((res) => res.selected);
-        this.showAutocompleteResults();
-        this.searchLoading = false;
-    };
-    /**
-     * Called whenever the search form is submitted (but can also be called manually).
-     * Fires event which will activate / display `nano-global-search-results`
-     *
-     * @param ev optional form submit event
-     * @returns Algolia search results
-     */
-    onSearchSubmit = async (ev) => {
-        if (ev)
-            ev.preventDefault();
-        if (!this.isSearchValSet())
+        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')) {
             return;
-        if (!this.currentIndex)
-            this.currentSelectedIndex();
-        if (!this.algoliaSearchResults)
-            await this.doAlgoliaSearch();
-        const activeIndex = this.algoliaSearchResults.results.find((res) => res.selected);
-        const { index, domain, filters, query, replicas } = activeIndex;
-        this.nanoSearchResult.emit({
-            meta: {
-                indexTitle: activeIndex.indexName,
-                index,
-                domain,
-                filters,
-                query,
-                replicas,
-            },
-            client: { apiKey: this.searchApiKey, appId: this.searchAppId },
-        });
-        this.showAutocomplete = false;
-        return this.algoliaSearchResults;
+        }
+        this.searchInput.setFocus();
+        this.searchBarShown = true;
     };
-    onSearchIndexChange = async (index) => {
-        const ev = index;
-        let indexStr = index;
-        if (!this.currentIndex)
-            this.currentSelectedIndex();
-        if (ev.detail && ev.detail.value.length)
-            indexStr = ev.detail.value;
-        if (!indexStr || !indexStr.length)
-            return;
-        if (this.currentIndex.index === indexStr)
-            return;
-        const selectedIndex = this.internalSearchIndeces.find((index) => index.index === indexStr);
-        if (!selectedIndex || !selectedIndex.alogliaIndex)
-            return;
-        this.searchIndex = selectedIndex.name;
-        if (this.isSearchValSet())
-            await this.onSearchChange();
+    handleSearchCloseEvent = (e) => {
+        if (e.target.classList.contains('gn__search-dropdown')) {
+            this.searchBarShown = false;
+        }
     };
-    isSearchValSet() {
-        if (this.searchValInternal.length < 3)
-            return false;
-        return true;
-    }
-    switchIndexSubmit = async (index) => {
-        if (this.isSearchValSet()) {
-            await this.onSearchIndexChange(index);
-            this.onSearchSubmit();
+    handleSearchTermInputEvent = (e) => {
+        if (e.detail.type === 'input' &&
+            this.searchInput.value.length >= MIN_SEARCH_LENGTH) {
+            this.autocompleteResults = null;
+            this.searchLoading = true;
         }
-        else
-            this.onSearchIndexChange(index);
     };
-    // Autocomplete
-    resetHitFocus() {
-        this.currAIndex = -1;
-    }
-    onAutocompleteBlur = (ev) => {
-        if (!this.showAutocomplete || !this.autocompleteResults)
+    handleSearchTermChangeEvent = (searchStr) => {
+        if (this._searchValue === searchStr)
             return;
-        if (ev && ev.target && ev.target.closest('.search-widget'))
-            return;
-        this.showAutocomplete = false;
+        this._searchValue = searchStr;
+        this.setAutocompleteResults();
     };
-    showAutocompleteResults = () => {
-        if (!this.autocompleteResults || !this.autocompleteResults.hits)
+    handleSearchIndexChangeEvent = (e) => {
+        if (!e.detail?.value?.length)
             return;
-        this.showAutocomplete = true;
-    };
-    setActiveElement(autocompleteEle) {
-        this.autocompleteEles.map((ele) => ele.setAttribute('aria-selected', 'false'));
-        autocompleteEle.focus({ preventScroll: true });
-        autocompleteEle.setAttribute('aria-selected', 'true');
-    }
-    onAutocompleteInteract = (ev) => {
-        // list open, navigate items with arrows
-        if (!this.showAutocomplete || !this.autocompleteResults)
+        const index = e.detail.value;
+        if (this.activeIndex.index === index)
             return;
-        let testIndex = this.currAIndex;
-        switch (ev.key) {
-            case 'Tab':
-                setTimeout(() => {
-                    if (!this.el.shadowRoot.activeElement ||
-                        !this.el.shadowRoot.activeElement.closest('.search-widget')) {
-                        this.showAutocomplete = false;
-                        return;
-                    }
-                    else {
-                        const found = this.autocompleteEles.find((ele, i) => {
-                            if (ele === this.el.shadowRoot.activeElement) {
-                                this.currAIndex = i;
-                                return true;
-                            }
-                        });
-                        if (found)
-                            this.setActiveElement(found);
-                        else
-                            this.currAIndex = -1;
-                    }
-                });
-                break;
-            case 'ArrowDown':
-            case 'ArrowUp': {
-                if (ev.key === 'ArrowDown')
-                    testIndex++;
-                else if (ev.key === 'ArrowUp')
-                    testIndex--;
-                const found = this.autocompleteEles[testIndex];
-                if (found ||
-                    testIndex < 0 ||
-                    testIndex > this.autocompleteEles.length - 1) {
-                    ev.preventDefault();
-                }
-                // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-                this.searchInput.clientWidth; // force reflow
-                if (found) {
-                    this.setActiveElement(found);
-                    this.currAIndex = testIndex;
-                }
-                else if (testIndex < 0) {
-                    this.searchInput.setFocus();
-                    this.currAIndex = -1;
-                }
-                break;
-            }
-            case 'Enter':
-            case ' ':
-                if (this.autocompleteEles[this.currAIndex]) {
-                    this.autocompleteEles[this.currAIndex].click();
-                }
-                break;
+        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();
         }
     };
-    // Various.
-    /**
-     * Assesses what content is present in which slots
-     */
-    assessSlottedContent = () => {
-        readTask(() => {
-            this.hasSiteSlot = !!this.el.querySelectorAll('[slot="site"]').length;
-            this.hasLoggedinSlot =
-                !!this.el.querySelectorAll('[slot="loggedin"]').length;
-            this.hasPromotionSlot =
-                !!this.el.querySelectorAll('[slot="promotion"]').length;
-            this.aboutSlotLen = this.el.querySelectorAll('[slot="about"]').length;
-            this.iconSlotLen = this.el.querySelectorAll('[slot="icon"]').length;
-            this.mainSlotLen = this.el.querySelectorAll('[slot="main"]').length;
-            this.overflowSlotLen =
-                this.el.querySelectorAll('[slot="overflow"]').length;
-            this.searchSlotLen = this.el.querySelectorAll('[slot="search"]').length;
-        });
-    };
-    async handleBarResize() {
-        const descreaseThreshold = () => {
-            return new Promise((resolve) => {
-                this.threshold--;
-                setTimeout(() => {
-                    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-                    this.mainBarDiv.clientWidth; // force reflow
-                    resolve();
-                }, 200);
-            });
-        };
-        // Decrease the threshold until content fits
-        while (this.threshold > 0) {
-            if (this.mainBarDiv.scrollWidth <= this.mainBarDiv.parentElement.clientWidth)
-                break;
-            await descreaseThreshold();
-        }
-        /* content now fits so add / remove context classes
-        on nav-items depending on whether they're added to bar or burger. */
-        this.thresholdReady = true;
-        let menuItems, barItems;
-        readTask(() => {
-            menuItems = [
-                ...Array.from(this.el.querySelectorAll(`${transformTag('nano-nav-item')}[slot="site"]`)),
-                ...Array.from(this.el.querySelectorAll(`${transformTag('nano-nav-item')}[slot="overflow"]`)),
-            ];
-            barItems = [];
-            if (this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.icon)
-                menuItems.push(...Array.from(this.el.querySelectorAll(`${transformTag('nano-nav-item')}[slot="icon"]`)));
-            else
-                barItems.push(...Array.from(this.el.querySelectorAll(`${transformTag('nano-nav-item')}[slot="icon"]`)));
-            if (this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.login)
-                menuItems.push(...Array.from(this.el.querySelectorAll(`${transformTag('nano-nav-item')}[slot="loggedin"]`)));
-            else
-                barItems.push(...Array.from(this.el.querySelectorAll(`${transformTag('nano-nav-item')}[slot="loggedin"]`)));
-            if (this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.main)
-                menuItems.push(...Array.from(this.el.querySelectorAll(`${transformTag('nano-nav-item')}[slot="main"]`)));
-            else
-                barItems.push(...Array.from(this.el.querySelectorAll(`${transformTag('nano-nav-item')}[slot="main"]`)));
-            if (this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.about)
-                menuItems.push(...Array.from(this.el.querySelectorAll(`${transformTag('nano-nav-item')}[slot="about"]`)));
-            else
-                barItems.push(...Array.from(this.el.querySelectorAll(`${transformTag('nano-nav-item')}[slot="about"]`)));
-        });
-        writeTask(() => {
-            menuItems.forEach((item) => {
-                item.classList.add('nano-global-nav-menu');
-                item.classList.remove('nano-global-nav-bar');
-            });
-            barItems.forEach((item) => {
-                item.classList.remove('nano-global-nav-menu');
-                item.classList.add('nano-global-nav-bar');
-            });
-        });
+    /// SEARCH - end ///
+    /// LIFECYCLE ///
+    constructor() {
+        this.handleResize = debounce(this.handleResize, 75);
     }
-    // Stencil Lifecycle / Rendering
     componentWillLoad() {
-        ComponentStore.init(this, ['searchIndex', 'searchValue'], 'url-hash', 'gns');
-        this.assessSlottedContent();
+        this.handleMyAccountUrl();
+        this.initSearch();
+        this.processUserData();
+        addGlobalStylesheetToShadow(this.host.shadowRoot);
     }
-    connectedCallback() {
-        this.handleMyAccountData();
-        this.getMyAccData();
+    componentDidRender() {
+        this.handleResize();
     }
-    componentDidLoad() {
-        if (Build.isBrowser) {
-            this.debounceResize = debounce(this.onWindowResize.bind(this), 200);
-            window.addEventListener('resize', this.debounceResize);
-            this.currSize = window.innerWidth;
+    /// RENDER ///
+    loggedInPanel() {
+        if (!this.isLoggedIn || !this.myAccountUser)
+            return;
+        return (h("div", { part: "user-panel", class: `gn__user-panel nano-theme-dark` }, h("div", { class: "gn__user-panel-head", slot: "label" }, 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') && (h("img", { src: this.myAccountUser.small_avatar_url, alt: "User Avatar", height: 40, width: 40 }))), h("div", null, this.myAccountUser.name, h("br", null), this.myAccountUser.job_title, ", ", this.myAccountUser.company)), h("div", { class: "gn__user-panel-body" }, this.userLinks.map((link) => (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 && (h("nano-badge", { theme: "danger", strength: "2" }, this.msgCount)))))), h("div", { class: "gn__user-panel-foot" }, h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, h("a", { href: this.formatLoginLink(this.logoutUrl) }, "Logout")))));
+    }
+    bpPartials = {
+        contact: {
+            tpl: () => h("a", { href: this.contactUrl }, "Contact"),
+            breakpoint: 0,
+        },
+        mainMenu: {
+            tpl: () => 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;
         }
-        this.initAlgoliaClient();
-        this.addAlgoliaIndeces();
-        requestAnimationFrame(() => this.handleBarResize());
-    }
-    disconnectedCallback() {
-        if (Build.isBrowser)
-            window.removeEventListener('resize', this.debounceResize);
-    }
-    // Render output
-    autocompleteList() {
-        let content;
-        if (this.showAutocomplete && this.scrollingUp) {
-            let currentScopeHits = 0;
-            let scopeChangeSuggestions = 0;
-            const scopeSuggestReducer = (total, result) => {
-                return result.index !== this.currentIndex.index
-                    ? total + result.hits.length
-                    : total;
-            };
-            const currentSuggestReducer = (total, result) => {
-                return result.index === this.currentIndex.index
-                    ? total + result.hits.length
-                    : total;
-            };
-            if (this.scopeSearch) {
-                scopeChangeSuggestions = this.scopeSearch.results.reduce(scopeSuggestReducer, 0);
-                currentScopeHits = this.scopeSearch.results.reduce(currentSuggestReducer, 0);
-            }
-            if ((this.autocompleteResults && this.autocompleteResults.hits.length) ||
-                (scopeChangeSuggestions && !currentScopeHits)) {
-                let scopeSuggestions = 0;
-                content = (h("div", null, !currentScopeHits && (h("div", { class: "search-autocomplete-hit search-autocomplete-hit--no-result" }, "No results matching '", this.searchValInternal, "' were found in", ' ', h("strong", null, this.currentIndex.name), ". Try another phrase.")), this.autocompleteResults && [
-                    this.autocompleteResults.hits.map((hit, i) => {
-                        return (h("a", { role: "option", ref: (a) => this.autocompleteEles.push(a), tabindex: "-1", id: 'autocomplete-hit-' + i, href: hit.url, class: "search-autocomplete-hit", innerHTML: this.autocompleteSnippet(hit), onClick: () => {
-                                searchInsight.sendClick({
-                                    index: this.currentIndex.index,
-                                    eventName: 'Global nav quick search - search result clicked',
-                                    queryID: this.autocompleteResults.queryID,
-                                    objectIDs: [hit.objectID],
-                                    positions: [i + 1],
-                                });
-                            } }));
-                    }),
-                ], (!currentScopeHits || this.currentIndex.allGroup) &&
-                    this.scopeSearch &&
-                    this.scopeSearch.results && [
-                    this.scopeSearch.results.map((result, i) => {
-                        if (!result.hits.length ||
-                            result.index === this.currentIndex.index ||
-                            scopeSuggestions > 1)
-                            return;
-                        scopeSuggestions++;
-                        return (h("button", { role: "option", ref: (button) => this.autocompleteEles.push(button), tabindex: "-1", id: 'autocomplete-scope-' + i, class: "search-autocomplete-hit", onClick: () => this.switchIndexSubmit(result.index), onMouseDown: () => this.switchIndexSubmit(result.index) }, "\"", this.searchValInternal, "\"", ' ', h("div", { class: "search-autocomplete-hit-scope" }, "in ", result.indexName)));
-                    }),
-                ], !!currentScopeHits && (h("div", { class: "search-autocomplete-foot" }, h("button", { role: "option", class: "search-autocomplete-submit", ref: (button) => this.autocompleteEles.push(button), id: 'autocomplete-foot', onClick: this.onSearchSubmit, onMouseDown: this.onSearchSubmit }, "View all results")))));
-            }
-            else if (!currentScopeHits) {
-                content = (h("div", { class: "search-autocomplete-hit search-autocomplete-hit--no-result" }, "No results matching '", this.searchValInternal, "' were found. Try another phrase."));
-            }
+        const toReturn = [];
+        if (this.searchIndex === 'All') {
+            toReturn.push(h("div", { slot: "no-result", class: "gn__search-no-results" }, "No results matching for \"", h("strong", null, this._searchValue), "\" Try another phrase"));
+            return toReturn;
         }
-        return (h("div", { class: "search-autocomplete", role: "listbox", id: "autocomplete-results", "aria-expanded": this.showAutocomplete ? 'true' : 'false', hidden: !this.showAutocomplete, onKeyDown: this.onAutocompleteInteract }, content));
-    }
-    searchWidget() {
-        return [
-            h("form", { class: "search-inputs", onSubmit: this.onSearchSubmit, id: "global-nav-search" }, h("nano-select", { class: "search-input", label: "Which area of content would you like to search?", hideLabel: true, showInlineError: false, value: this.currentSelectedIndex()?.index, onNanoChange: this.onSearchIndexChange, mask: true }, this.internalSearchIndeces.map((index) => {
-                return (h("nano-option", { selected: index.name === this.searchIndex, value: index.index }, index.name || index.index));
-            }), h("nano-icon", { name: "light/chevron-down", class: "select-input__arrow", slot: "down-arrow" })), h("nano-input", { class: "search-input", label: "What would you like to search for?", "aria-label": "What would you like to search for", hideLabel: true, showInlineError: false, "clear-input": true, placeholder: "Search Nanopore", type: "text", ref: (input) => (this.searchInput = input), onNanoChange: this.onSearchChange, onNanoInput: this.onSearchInput, onKeyDown: this.onAutocompleteInteract, debounce: 500, "aria-autocomplete": "list", "aria-activedescendant": this.autocompleteEles[this.currAIndex]
-                    ? this.autocompleteEles[this.currAIndex].id
-                    : false, "aria-controls": "autocomplete-results", onNanoFocus: this.showAutocompleteResults, value: this.searchValue, role: "textbox" }, h("button", { class: {
-                    'search-icon': true,
-                    'search-icon--search': true,
-                    'search-icon--show': !!this.searchValue && !this.searchLoading,
-                }, slot: "end", onClick: (e) => {
-                    this.searchValInternal = this.searchInput.value;
-                    this.onSearchSubmit(e);
-                } }, h("nano-icon", { name: "light/magnifying-glass", role: "img", ariaLabel: "Search now" })), h("span", { class: {
-                    'search-icon': true,
-                    'search-icon--loader': true,
-                    'search-icon--show': this.searchLoading,
-                }, slot: "end" }, h("nano-icon", { name: "light/spinner-third" }))), h("input", { type: "submit" })),
-        ];
+        this.searchResults.results.forEach((result) => {
+            if (result.hits.length) {
+                toReturn.push(h("nano-option", { class: "gn__search-result", onNanoSelect: (e) => {
+                        e.preventDefault();
+                        this.searchIndex = result.indexName;
+                        this.onSearchSubmit(e);
+                    } }, "Show results for \"", h("strong", null, this._searchValue), "\" in\u00A0", h("strong", null, result.indexName)));
+            }
+        });
+        toReturn.unshift(h("div", { slot: toReturn.length ? 'list-top' : 'no-result', class: "gn__search-no-results" }, "No results matching for \"", h("strong", null, this._searchValue), "\" in", ' ', h("strong", null, this.searchIndex), ". Try another phrase"));
+        return toReturn;
     }
     render() {
-        this.autocompleteEles = [];
-        const isRtl = this.el.ownerDocument.dir === 'rtl';
-        const searchWidget = this.searchWidget();
-        searchWidget.push(this.autocompleteList());
-        return (h(Host, { key: '24a35d2ad7bf721dd01ea704298d32450c987c53', class: {
-                [this.thresholdClasses().join(' ')]: true,
-                ready: this.ready,
-                'search-bar-shown': this.searchBarShown && this.scrollingUp,
-                'search-auto-complete-shown': this.showAutocomplete && this.scrollingUp,
-                'modal-open': this.modalIsOpen,
-                resizing: this.isResizing,
+        const bpps = this.bpPartials;
+        return (h(Host, { key: 'c968c75746e8b8211210b47c595cff25f0af8933', class: {
+                'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
+                'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
                 'nano-global-nav': true,
-            }, dir: isRtl ? 'rtl' : null }, h("div", { key: '6507f16e32b2c6d1e236efa05a8eb725226bebab', class: {
-                'global-nav': true,
-                'scrolling-down': !this.scrollingUp,
-            } }, h("nav", { key: '860000d1e558d4f386c6e656e9cf80768d5dad1f', id: "global-nav-menu", class: {
-                'gn-menu': true,
-                open: this.modalOpen,
-                'has-promotion': this.hasPromotionSlot,
-                'menu-full-screen': this.menuFullScreen,
-                'secondary-open': !!this.secondaryMenuOpen,
-            }, "aria-expanded": this.modalOpen ? 'true' : 'false', ref: (div) => (this.menuDiv = div), part: "burger" }, h("div", { key: '3d5bd2e8fd1257a1d3ee1d0106b85e213260c6c0', class: "gn-menu_wrap", ref: (div) => (this.menuWrapDiv = div), tabindex: "-1", part: "burger-menu" }, h("div", { key: '355f89f2ba243c3858e18c9af208d2c102214f6d', class: "gn-menu_actions", part: "burger-actions-bar" }, h("button", { key: 'b078eb21d775f3fb72873f08d8170c5cbd15fc7e', class: "menu-btn icon-btn icon-btn", onMouseDown: this.onMenuBtnClick, onKeyDown: this.onMenuBtnKeyDown }, this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.login && (h("nano-icon", { key: '59d9b7de1ec45513defaa00b318f56335239c4ba', name: "light/xmark", "aria-label": "close menu", role: "img" })), this.threshold >= THRESHOLDLIMIT - THRESHOLDBREAKS.login && (h("nano-icon", { key: 'a51364497a6436124d41c67387d4e06459fecac3', name: "light/bars", "aria-label": "close menu", role: "img" }))), this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.icon && [
-            !!this.iconSlotLen && h("slot", { key: '5a4de1bfc3142f1ab92c14f996e371105e8747ae', name: "icon" }),
-            this.myAccData &&
-                (!this.activeMyAccountSections ||
-                    this.activeMyAccountSections.includes('icons')) && [
-                this.msgUrl && (h("a", { key: 'c160c224ab55265b8711dfe52847ec694aea45b8', href: this.msgUrl, class: "icon-btn" }, h("nano-icon", { key: 'd1d6d0665ffd3fbe6a1cbf2fb5232b8de837680c', name: "light/bell", role: "img", ariaLabel: "Check notifications" }), this.msgCount > 0 && (h("span", { key: 'd88070f6f7b57b4f3db2d4165f3640b9c2a02cfa', class: "gn-menu_actions-counter" }, this.msgCount)))),
-                this.cartUrl && (h("a", { key: 'b34df751132a325edb07fd7b8bc722f6ac1a5249', href: this.cartUrl, class: "icon-btn" }, h("nano-icon", { key: 'baaeb176499832c4c337ab70b667c6405c289d25', name: "light/cart-shopping", role: "img", ariaLabel: "Go to cart" }), this.cartCount > 0 && (h("span", { key: '868f6bec4cec2385ead80ea3b25ff665546576d0', class: "gn-menu_actions-counter" }, this.cartCount)))),
-            ],
-        ], this.myAccData && this.myAccData.urls.login && (h("a", { key: '574ed325458daae66c2ef942af1698d60a1fc7d1', href: this.myAccData.urls.login + this.ssoRedirect, class: "login-btn" }, "Login / Register", ' ', h("nano-icon", { key: '5cb49b6829078fa1703930c9d023638751604517', name: "solid/chevron-right" })))), h("div", { key: '998c9784eb21866fd28c2b261cfd61a1c2183de9', class: "content-wrap", ref: (div) => (this.menuContentDiv = div) }, h("div", { key: '256be0960f44b72b62176a73a09937897aa211fb', class: "content", part: "burger-content" }, h("nav", { key: 'ed7346608de637f45639a5f7ee0a34930ebd2265', class: "nav-links nav-links--main", role: "menu" }, h("slot", { key: 'dfd170cd101390574856a9eadac9a67714d1f98f', name: "overflow", onSlotchange: this.assessSlottedContent }), this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.main &&
-            !!this.mainSlotLen && (h("slot", { key: 'f2e316b2d713411d126e39ac7c0a27f1d45128ad', name: "main", onSlotchange: this.assessSlottedContent }))), (((!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
-            this.hasSiteSlot) ||
-            !!this.siteNavItms.length) && (h("div", { key: '5cf164c338a24c26208a7807bb58e747890d0a3c' }, (this.hasSiteSlot || !!this.siteNavItms.length) && [
-            (this.threshold >= THRESHOLDLIMIT - 2 ||
-                this.mainSlotLen < 2) &&
-                this.overflowSlotLen < 2 && (h("div", { key: '5ae0b83ce30a602168a22d1367f75c7150eb2a8c', class: "nav-links-wrap" }, h("h4", { key: 'c19be958e609ed84e9e2feb0342c601fa5c38017', class: "nav-links_title nav-links_title--sites" }, "Sites"), h("nav", { key: '64fcab191bc5c7f100ba29fa83bff5e69813fc72', class: "nav-links nav-links--sub nav-links--sites", "aria-label": "Different company site links" }, h("slot", { key: 'aa8d2a33df760e02d193e94fc93fd731db345551', name: "site", onSlotchange: this.assessSlottedContent }), this.siteNavItms.map((link) => {
-                return (h("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, h("a", { href: link.address, target: link.target }, link.title)));
-            })))),
-            ((this.threshold < THRESHOLDLIMIT - 2 &&
-                this.mainSlotLen >= 2) ||
-                this.overflowSlotLen >= 2) && (h("nav", { key: '6f7613703f867a4a120a9511bb591784479bbb1a', class: "nav-links", "aria-label": "Different company site links" }, h("nano-nav-item", { key: 'b1f63cabe7bafb88d8d1a0386b1ea159ae334608', class: "nano-global-nav nano-global-nav-menu", closeOnBlur: false }, "Sites", h("nano-icon", { key: '5fe1c4389dacf278b3cc3290041af82e9f5f0731', slot: "icon-end", name: "solid/chevron-right" }), h("div", { key: '6fe3dbea59f144d3f857a70942ed03e667833f08', slot: "secondary" }, h("div", { key: 'd2c9bd8e6b35aebd5a2dc22a6a40de3db401123c', class: "content" }, h("button", { key: 'd996342c3f68a52c2d756801849ce2e82b25fb01', class: "back-btn", onClick: this.subMenuClose }, h("nano-icon", { key: '453b6631e44817cc9952cb649e3eb1e9f5b22a83', slot: "icon-end", name: "solid/chevron-left", "aria-label": "go back", role: "img" }), "Sites"), h("div", { key: '6aef4eb001acae9a17de56a9357293d7824da662', class: "content--sub" }, h("slot", { key: '64cf6e8c2bc47c9609c571a3e4fbf1a6d9955e0a', name: "site", onSlotchange: this.assessSlottedContent }), this.siteNavItms.map((link) => {
-                return (h("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, h("a", { href: link.address, target: link.target }, link.title)));
-            }))))))),
-        ]))), this.isLoggedIn &&
-            this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.login &&
-            (this.loggedInNavItms.length || this.hasLoggedinSlot) && (h("nav", { key: 'c74acf7d9230f3ce4722e9aee3cd7de5ab14fea2', class: "nav-links", "aria-label": "Your user account links" }, h("nano-nav-item", { key: '2de6d7fbe9c41bcfbf213d86396c2f89c49ef00c', class: "nano-global-nav user-nav nano-global-nav-menu", closeOnBlur: false }, this.myAccountUser.name, h("nano-icon", { key: 'ba118d2302b391640f00b30d8f03d64df08d0fb6', slot: "icon-end", name: "solid/chevron-right" }), h("div", { key: 'e7052720dd70aed785d055ee496d7c75f1736bf1', slot: "secondary" }, h("div", { key: '4dcc50535727163c54b95f705b390f16b4f82e7f', class: "content" }, h("button", { key: 'e3018cecdeca60b2fcf120a77bb3bd5bc710f19f', class: "back-btn", onClick: this.subMenuClose }, h("nano-icon", { key: '60938fd4dcf94006ffb5544fb7ddb24952ece667', slot: "icon-end", name: "solid/chevron-left", "aria-label": "go back", role: "img" }), this.myAccountUser.name), !!this.myAccountUser?.small_avatar_url && (h("nano-global-nav-user-profile", { key: 'd3d4d5d4e971f2c2e82adc7f64b3313d11e8a8e3', myAccountUser: this.myAccountUser, userProfileUrl: this.userProfileUrl })), h("div", { key: '2dffba3926caf4e82f13baa8e1070fb15fa1194d', class: "content--sub" }, h("slot", { key: 'b424a41514d0a0ec6c218f6a6191c5441bb02740', name: "loggedin", onSlotchange: this.assessSlottedContent }), this.loggedInNavItms.map((link) => {
-            return (h("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, h("a", { href: link.address, target: link.target }, link.title)));
-        }), h("nano-nav-item", { key: '2eaab58c5e0108e209308d1dd82e5a77803b8d02', class: "nano-global-nav nano-global-nav-menu" }, h("a", { key: '34b8908d1c901652129a9b7b3647945795e5d831', href: this.myAccData.urls.forgot_password +
-                this.ssoRedirect }, "Change Password")))))))), h("slot", { key: '8fc5918b9e332211e87b875d9688502be7e8c0f6', name: "promotion", onSlotchange: this.assessSlottedContent }), this.myAccData && this.myAccData.urls.logout && (h("div", { key: '36f4753c6c5e7cdc1e52ebe48b618562bc6bd73f', class: "login-btn logout-btn" }, h("a", { key: 'b207ee40e85bcca7e6a6e5b9bbd22a4e0a4a4e06', href: this.myAccData.urls.logout + this.ssoRedirect }, "Logout")))))), h("div", { key: '840fab91269d501ff63032755453fc7dd2e3044b', class: "bars", part: "bars" }, h("nav", { key: 'c5787f83cad65be5ab76d1c94e0afef8767ba30b', part: "main-bar", class: "main-bar", "aria-label": "Main site navigation", tabindex: "-1", ref: (div) => (this.mainBarDiv = div) }, (this.hasPromotionSlot ||
-            !!this.overflowSlotLen ||
-            ((this.myAccData || !!this.iconSlotLen) &&
-                this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.icon) ||
-            (this.isLoggedIn &&
-                (!!this.loggedInNavItms.length || this.hasLoggedinSlot) &&
-                this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.login) ||
-            (!!this.mainSlotLen &&
-                this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.main) ||
-            ((!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
-                this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.about) ||
-            this.hasSiteSlot ||
-            !!this.siteNavItms.length) && (h("button", { key: '228ac94558fa514552ef4fdbf64d7e50f8308eaf', class: "menu-btn icon-btn", onMouseDown: this.menuOpen, onKeyDown: this.onMenuBtnKeyDown, "aria-expanded": this.modalOpen ? 'true' : 'false', "aria-controls": "global-nav-menu", ref: (btn) => (this.menuBtn = btn) }, h("nano-icon", { key: '0a6a501e1b137d8c2c6b35e89d5f2c2a227757ae', name: "light/bars", "aria-label": "Open menu" }))), this.showLogo && (h("a", { key: '287d80e53176feb00c5c27c7725709fb1bfe429b', href: this.logoUrl, class: "logo-link", part: "logo-link" }, h("img", { key: 'c4ed59df56ee140f81836c2e70c680cfc64494a9', src: getAssetPath(`../nano-assets/ont-logo.svg`), alt: "Oxford Nanopore Technologies Logo", class: "logo" }))), !this.showLogo && (h("div", { key: '6457da01602749c6d4e57cc5eed213eb709f4725', class: "logo-link" }, h("slot", { key: '55427cf66636a0dd4e230a3d0b102ef7f13d1b8c', name: "logo", onSlotchange: this.assessSlottedContent }))), h("div", { key: 'e80af31b5921eb88bc30c1c1cd744135e9bdf608', class: "nav-links nav-links--main" }, h("slot", { key: '5593574b8f2c1cbb42a7054b9d57a0e388671f47', name: "main", onSlotchange: this.assessSlottedContent })), this.mainSlotLen === 0 &&
-            this.threshold >= THRESHOLDLIMIT - THRESHOLDBREAKS.search && [
-            this.showSearch && !!this.internalSearchIndeces.length && (h("div", { key: 'b549fa2052b890c98612f61b36192b1ebdae3727', class: "search-widget", role: "combobox", "aria-owns": "autocomplete-results", "aria-expanded": this.showAutocomplete && this.autocompleteResults
-                    ? 'true'
-                    : 'false' }, searchWidget)),
-            (!this.showSearch || !this.myAccData) &&
-                !!this.searchSlotLen && (h("slot", { key: '2ce8de3529a1282b84bdd869d8ee52e82d3b005e', name: "search", onSlotchange: this.assessSlottedContent })),
-        ], (this.mainSlotLen > 0 ||
-            this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.search) &&
-            ((this.showSearch && !!this.internalSearchIndeces.length) ||
-                !!this.searchSlotLen) && (h("button", { key: 'a7897e2689f5a359abf9ef9ed2a4ec817fd5b080', class: {
-                'icon-btn': true,
-                'search-btn': true,
-                'search-btn--open': this.searchBarShown,
-            }, "aria-controls": "global-nav-search-bar", "aria-expanded": this.searchBarShown ? 'true' : 'false', onClick: this.onSearchBtnClick }, h("nano-icon", { key: '722a12b69853025aea0afe9df06a619d4436cedc', name: "light/magnifying-glass", role: "img", ariaLabel: "Search Oxford Nanopore" }))), this.threshold >= THRESHOLDLIMIT - THRESHOLDBREAKS.icon && [
-            !!this.iconSlotLen && h("slot", { key: '42e97c3c8747b7c74db55cecd0b69d1852578b76', name: "icon" }),
-            this.myAccData &&
-                (!this.activeMyAccountSections ||
-                    this.activeMyAccountSections.includes('icons')) && [
-                this.msgUrl && (h("a", { key: '594e5afec810a113431fec5d3e7455b436ed8e64', href: this.msgUrl, class: "icon-btn" }, h("nano-icon", { key: '06716749b05dd80fe53682007f4a7002cea52a4f', name: "light/bell", ariaLabel: "View your notifications" }), this.msgCount > 0 && (h("span", { key: '5663dbe78c0752ed36b0aedc6607616716bf7e80', class: "gn-menu_actions-counter" }, this.msgCount)))),
-                this.cartUrl && (h("a", { key: '37c337b1f1ee4cf77e7262d836ec5e68bfb8eeab', href: this.cartUrl, class: "icon-btn" }, h("nano-icon", { key: '453c5ab4b42e75939fba0d27bfc6612190110e3d', name: "light/cart-shopping", ariaLabel: "View your shopping cart" }), this.cartCount > 0 && (h("span", { key: 'f05cd64edfb4551025985f856015db1c0172aa08', class: "gn-menu_actions-counter" }, this.cartCount)))),
-            ],
-        ], (!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
-            this.threshold >= THRESHOLDLIMIT - THRESHOLDBREAKS.about && (h("nav", { key: 'd4acf4145017c329be89cc5dc8ee2c363e07abd9', class: "nav-links nav-links--sub", "aria-label": "About the company. Links", role: "menu" }, h("slot", { key: 'effca72df5b665591a8a0bfb20928c087f477926', name: "about", onSlotchange: this.assessSlottedContent }), !!this.aboutNavItms.length && (h("nano-nav-item", { key: '53e97b86a3b21bb721f2c1c9429b644e80edb45f', class: "nano-global-nav nano-global-nav-bar" }, h("a", { key: '47b828025006378bc2d32e43e0b86c515a2ff4ae', href: this.aboutNavItms[0].address, target: this.aboutNavItms[0].target }, this.aboutNavItms[0].title))))), this.myAccData &&
-            (!this.activeMyAccountSections ||
-                this.activeMyAccountSections.includes('loggedin')) &&
-            this.threshold >= THRESHOLDLIMIT - THRESHOLDBREAKS.login && [
-            this.myAccData.urls.login && (h("a", { key: '49e47b4a0eff405906177fa9ac75b7b8c503500e', href: this.myAccData.urls.login + this.ssoRedirect, class: "login-btn" }, "Login / Register")),
-            this.myAccountUser && (h("div", { key: '92ff2c5e6cea3e5ed0383585ffa6048c0c260898', class: "user-links" }, h("button", { key: '9616128132c5cca0e0d7095255a2a268736021d4', class: {
-                    'icon-btn': true,
-                    'user-links-btn': true,
-                    open: this.userMenuOpen,
-                }, onMouseDown: this.onUserBtnClick, onKeyDown: this.onUserBtnKeyDown }, ' ', this.myAccountUser.name, h("nano-icon", { key: '122db375cc8db65f5a4f16180f6428102d8cbd21', name: "solid/caret-down", ariaLabel: "View your account links" })), h("div", { key: 'f6e44355fee2fb4b13d0b2e2a0be9c70a5e8c2ae', class: "user-links-panel", tabindex: "-1", ref: (div) => (this.userLinkPanel = div) }, !!this.myAccountUser?.small_avatar_url && (h("nano-global-nav-user-profile", { key: '4b394ae61cf88ee87bffc60f6a4941cd2a49a75d', myAccountUser: this.myAccountUser, userProfileUrl: this.userProfileUrl })), h("div", { key: '11e22a97ca4f9fb61004e5d6b4a6a8b254fc42e0', class: "user-links-panel-content" }, this.loggedInNavItms.map((link) => {
-                return (h("a", { href: link.address, target: link.target }, link.title));
-            })), h("div", { key: '960c025ec4f02407d7c3c7628391693146cb3696', class: "user-links-panel-foot" }, h("a", { key: 'b436b24213dcb3f3f5e6631bdb5c09a6cc8a58a1', href: this.myAccData.urls.forgot_password +
-                    this.ssoRedirect }, "Change Password"), h("a", { key: '9c068fc5c88b89b8b440de798481b50c75575c30', href: this.myAccData.urls.logout + this.ssoRedirect }, "Logout"))))),
-        ]), (this.mainSlotLen > 0 ||
-            this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.search) && (h("div", { key: 'c0301d8f09af80559b6b617338ab0280e9fa24af', id: "global-nav-search-bar", class: {
-                'search-bar': true,
-                show: this.searchBarShown,
-            }, "aria-expanded": this.searchBarShown ? 'true' : 'false', role: "region", tabindex: "-1", ref: (div) => (this.searchBarEl = div), part: "search-bar" }, h("div", { key: 'a91f8a78d5ef401db74dbcba2ed8baa707e239f5', class: "search-widget" }, this.showSearch && !!this.internalSearchIndeces.length && (h("div", { key: 'aabb58b78e40aba19642c8732422eb2e7575365f' }, searchWidget)), (!this.showSearch || !this.myAccData) &&
-            !!this.searchSlotLen && (h("slot", { key: '6814610e28a8710768cbed27b6e534024d06c4e5', name: "search", onSlotchange: this.assessSlottedContent })))))), (this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.login ||
-            this.menuFullScreen) && (h("div", { key: 'b49ca662c96557b2a267589c2f8d25f25f2bcb75', class: {
-                mask: true,
-                open: this.modalOpen,
-            }, onClick: this.menuClose, onTouchEnd: this.menuClose }))), h("div", { key: '2d3d588a904ee2c95c3582b9735bb8597dcf05d1', class: "site-content" }, h("slot", { key: '3411ccdeff0c33e857e72683e57acfcfef11ee96' }))));
-    }
-    // Data processing
-    /**
-     * Finds a correct domain (as defined by myAccount data) for a given origin
-     * @returns a domain string for this origin
-     */
-    domainFor(origin) {
-        if (!this.myAccData)
-            return '';
-        const domain = this.myAccData.domains.find((dm) => dm.origin === origin);
-        return domain ? domain.domain : '';
-    }
-    /**
-     * process a set, or multiple sets of algolia results
-     * and applies correct domain names / http protocol to each result's url
-     * @returns results where partial paths are turned to full urls
-     */
-    processSearchResults(results) {
-        const multiResults = results;
-        const singleResult = results;
-        if (multiResults.results) {
-            multiResults.results.forEach((result, i) => {
-                multiResults.results[i] = this.processSearchResults(result);
-            });
-            return multiResults;
-        }
-        else {
-            singleResult.hits.map((hit) => {
-                if (hit.url && !hit.url.match(/^http/))
-                    hit.url =
-                        location.protocol + '//' + this.domainFor(hit.origin) + hit.url;
-            });
-            return singleResult;
-        }
-    }
-    /**
-     * Ingests the data blob from myAccount; turns prescient fields to internal state
-     */
-    processMyAccData() {
-        if (!this.myAccData || !this.myAccData.search.indeces.length)
-            return;
-        if (this.myAccData.search.api_key)
-            this.searchApiKey = this.myAccData.search.api_key;
-        if (this.myAccData.search.app_id)
-            this.searchAppId = this.myAccData.search.app_id;
-        if (this.myAccData.cart.count)
-            this.cartCount = this.myAccData.cart.count;
-        if (this.myAccData.notifications.count)
-            this.msgCount = this.myAccData.notifications.count;
-        if (!this.searchAppId || !this.searchApiKey)
-            return;
-        this.internalSearchIndeces = [
-            ...this.myAccData.search.indeces,
-            ...this.searchIndeces,
-        ];
-        if (this.myAccData.urls.cart && !this.cartUrl)
-            this.cartUrl = this.myAccData.urls.cart;
-        if (this.myAccData.urls.messages && !this.msgUrl)
-            this.msgUrl = this.myAccData.urls.messages;
-    }
-    /**
-     * Ingests the data blob from myAccount links; applies prescient fields to internal state
-     */
-    processMyAccLinks() {
-        if (!this.myAccData.links || !this.myAccData.links.length)
-            return;
-        this.myAccData.links.forEach((link) => {
-            switch (link.area) {
-                case 'left-side-logged-in':
-                case 'left-side-logged-out':
-                    if (this.activeMyAccountSections &&
-                        !this.activeMyAccountSections.includes('sites'))
-                        break;
-                    if (this.isLoggedIn && link.area === 'left-side-logged-in')
-                        this.siteNavItms.push(link);
-                    else if (!this.isLoggedIn && link.area === 'left-side-logged-out')
-                        this.siteNavItms.push(link);
-                    break;
-                case 'right-side-logged-in':
-                case 'right-side-logged-out':
-                    if (this.activeMyAccountSections &&
-                        !this.activeMyAccountSections.includes('about'))
-                        break;
-                    if (this.isLoggedIn && link.area === 'right-side-logged-in')
-                        this.aboutNavItms.push(link);
-                    else if (!this.isLoggedIn && link.area === 'right-side-logged-out')
-                        this.aboutNavItms.push(link);
-                    break;
-                case 'profile-panel-list':
-                    if (this.activeMyAccountSections &&
-                        !this.activeMyAccountSections.includes('loggedin'))
-                        break;
-                    this.loggedInNavItms.push(link);
-                    break;
-            }
-        });
+            } }, h("div", { key: 'edeec7490c6a32e2a44f3a8109f5d3f18c9d6101', class: {
+                gn: true,
+                'gn__search-open': this.searchBarShown,
+            } }, h("nano-drawer", { key: '56df68664885f1ed133b75e7f290405eb32bed67', 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) }, h("div", { key: 'da5e97e862497b1af8f0d0b3ed67e0dd03761f28', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: '3336390377aba9b2f127a7e1056fb80ba7d1ec75', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
+            ? bpps.mainMenu.tpl()
+            : '', h("slot", { key: '8c29d087282917c213beeadf719840c44b0f5494', name: "overflow" }))), h("div", { key: '6f07398ab8cd7d5f5fadafdb1d1f29ee9917efc3', class: "gn__menu-bar-wrapper" }, h("div", { key: '58546b45ca7ba896a9f0e1c5e528e191602e64a8', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: 'dd3d1cf935f2231e280cb0c7697c55470887c949', class: `gn__main-menu ${this.shouldResize ? 'resizing' : ''}`, part: "main-menu", ref: (el) => (this.mainMenu = el) }, this.breakpoint > bpps.mainMenu.breakpoint && (h("nano-icon-button", { key: 'aa31d9a9cc0e1ad0d4db76ca9f4add388cef95bd', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '02abef6f7550594481eff44ae5e332d74ba61138', name: "logo" }, h("a", { key: '084b9f9f88c68933f0d038b655833c5ba0117498', href: this.logoUrl, class: "gn__logo-link", part: "logo-link" }, this.breakpoint <= bpps.logo.breakpoint ? (h("img", { src: 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" })) : (h("img", { src: 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 && (h("div", { key: '130b8ce4dfd708a8a884aa172a6b7c1a7defa204', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: 'e4f69fca3d5a6700de16f8102dbf916a0b0e4d77', class: "gn__main-menu-actions" }, h("nano-dropdown", { key: '40033ff956c6f0b59ef5f569a00e56efc8e0f8df', 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 }, h("nano-icon-button", { key: '32b4e3be46dae8578c4adf038bda844d3bf4b8b9', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), !!this.searchIndices.length && (h("form", { key: '17ee6f5b011997b09148d8a09749931ae0e681f0', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '800b2d3b1343a6d09a8951b753742e6eb5731648', 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) => (h("nano-option", { selected: index.name === this.searchIndex, value: index.index }, index.name || index.index))))), h("nano-input", { key: 'a8eb120a2268645e17935d5dd86e8cf9de550866', ref: (ele) => (this.searchInput = ele), part: "search-input", label: "Search Oxford Nanopore Technologies", placeholder: "Search Oxford Nanopore...", hideLabel: true, clearable: true, onNanoChange: (e) => {
+                this.handleSearchTermChangeEvent(e.detail.value);
+            }, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon", { key: '33472cd1d86a17143253aed1a7924b05343614a7', slot: "end", name: "light/magnifying-glass" }), h("nano-datalist", { key: 'f88f3bcef70a7a29410d77ba849862ffc9db6562', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '075a4615d1715d941bd2368db97375f614867477', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: '5194af389122625d1209e25208de761fa15dd7e3' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
+            this.autocompleteResults.hits.map((hit, i) => (h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
+                    searchInsight.sendClick({
+                        index: this.activeIndex.index,
+                        eventName: 'Global nav quick search - search result clicked',
+                        queryID: this.autocompleteResults.queryID,
+                        objectIDs: [hit.objectID],
+                        positions: [i + 1],
+                    });
+                } }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
+            h("nano-option", { key: 'c9dec204a82019869cc9b8086f07cfbfdf309f15', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
+        ]))))), h("div", { key: '986773d6af8b1b50000db8c428c2f25f07298a3c', class: "gn__cart" }, h("nano-icon-button", { key: '0afee86e684d4136e729955d28444a6c8a27838f', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }), !!this.cartCount && (h("nano-badge", { key: '6305ad69d802aeda9a132ca204baf8b7b3aa17be', theme: "danger", strength: "2" }, this.cartCount > 9 ? '9+' : this.cartCount))), this.breakpoint <= bpps.contact.breakpoint
+            ? bpps.contact.tpl()
+            : '', this.isLoggedIn ? (h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, h("nano-icon", { name: "light/user" }), h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (h("nano-badge", { theme: "danger", strength: "2" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login"))))))), h("div", { key: '7c8b5194019e9b8346f6e0e927cff22ccf8b3e2e', class: "gn__site", part: "site-wrapper" }, h("nano-global-search-results", { key: '213396f31494cb46551fd6839b95bf4155982a57', part: "site-search-results" }, h("slot", { key: 'd9471b1379c08106453aef43c0e590cf272a425f' }))))));
     }
     static get is() { return "nano-global-nav"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["style/global-nav.scss"]
+            "$": ["global-nav.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["style/global-nav.css"]
+            "$": ["global-nav.css"]
         };
     }
     static get assetsDirs() { return ["assets"]; }
     static get properties() {
-        return {
-            "env": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'local' | 'dev' | 'test' | 'prod'",
-                    "resolved": "\"dev\" | \"local\" | \"prod\" | \"test\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Connect to local, dev, test or prod MyAccount\nenvironments to retrieve global nav / sso data.\nAlternatively, you can use the `ssoDataUrl` prop."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "env",
-                "reflect": false,
-                "defaultValue": "'prod'"
-            },
-            "ssoDataUrl": {
+        return {
+            "logoUrl": {
                 "type": "string",
+                "attribute": "logo-url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1264,42 +536,20 @@ export class GlobalNav {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "A base url to retrieve global nav / sso data.\n`nav_bar_data.json` will be appended to this url.\nAn alternative to the pre-defined `env` urls"
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "sso-data-url",
-                "reflect": false
-            },
-            "myAccountData": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "MyAccountData | null",
-                    "resolved": "MyAccountData",
-                    "references": {
-                        "MyAccountData": {
-                            "location": "import",
-                            "path": "./global-nav-interface",
-                            "id": "src/components/global-nav/global-nav-interface.d.ts::MyAccountData"
-                        }
-                    }
-                },
-                "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "An alternative to both 'env' and 'ssoDataUrl'.\nYou can directly provide a JSON object of myaccount data.\n(e.g. https://myaccount.nanoporetech.com/nav_bar_data.json)\nThis is useful for SSR"
+                    "text": "The link to put on the logo"
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "location.protocol + '//' + location.host"
             },
-            "ssoRedirect": {
+            "cartUrl": {
                 "type": "string",
-                "mutable": false,
+                "attribute": "cart-url",
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -1309,95 +559,77 @@ export class GlobalNav {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Where to take user after SSO login"
+                    "text": "Url to the Nanopore store cart. Will default to the url supplied by MyAccount"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "sso-redirect",
                 "reflect": false,
-                "defaultValue": "encodeURIComponent(window.location.href)"
+                "defaultValue": "''"
             },
-            "getMyAccountData": {
-                "type": "boolean",
-                "mutable": false,
+            "msgUrl": {
+                "type": "string",
+                "attribute": "msg-url",
+                "mutable": true,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether to attempt to get global nav / sso data from MyAccount"
+                    "text": "Url to the Nanopore message center. Will default to the url supplied by MyAccount"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "get-my-account-data",
                 "reflect": false,
-                "defaultValue": "true"
-            },
-            "activeMyAccountSections": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "(\n    | 'about'\n    | 'loggedin'\n    | 'sites'\n    | 'icons'\n  )[]",
-                    "resolved": "(\"about\" | \"loggedin\" | \"sites\" | \"icons\")[]",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Active MyAccount link sections. By default all will show."
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "null"
+                "defaultValue": "''"
             },
-            "showSearch": {
-                "type": "boolean",
-                "mutable": false,
+            "loginUrl": {
+                "type": "string",
+                "attribute": "login-url",
+                "mutable": true,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether to show search functionality"
+                    "text": "Url to the Nanopore login page. Will default to the url supplied by MyAccount"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-search",
                 "reflect": false,
-                "defaultValue": "true"
+                "defaultValue": "''"
             },
-            "showLogo": {
-                "type": "boolean",
-                "mutable": false,
+            "logoutUrl": {
+                "type": "string",
+                "attribute": "logout-url",
+                "mutable": true,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether to show Nanopore logo"
+                    "text": "Url to the Nanopore login page. Will default to the url supplied by MyAccount"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-logo",
                 "reflect": false,
-                "defaultValue": "true"
+                "defaultValue": "''"
             },
-            "logoUrl": {
+            "contactUrl": {
                 "type": "string",
-                "mutable": false,
+                "attribute": "contact-url",
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -1407,69 +639,17 @@ export class GlobalNav {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The link to put on the logo"
+                    "text": "Url to the Nanopore contact page"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "logo-url",
                 "reflect": false,
-                "defaultValue": "location.protocol + '//' + location.host"
-            },
-            "searchIndeces": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "Array<SearchIndex>",
-                    "resolved": "SearchIndex[]",
-                    "references": {
-                        "Array": {
-                            "location": "global",
-                            "id": "global::Array"
-                        },
-                        "SearchIndex": {
-                            "location": "import",
-                            "path": "../algolia/algolia-interface",
-                            "id": "src/components/algolia/algolia-interface.ts::SearchIndex"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "An array of Algolia search indexes (and optional display names). Will be automatically populated from MyAccount"
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "[]"
-            },
-            "myAccountUser": {
-                "type": "unknown",
-                "mutable": true,
-                "complexType": {
-                    "original": "MyAccountUser",
-                    "resolved": "MyAccountUser",
-                    "references": {
-                        "MyAccountUser": {
-                            "location": "import",
-                            "path": "./global-nav-interface",
-                            "id": "src/components/global-nav/global-nav-interface.d.ts::MyAccountUser"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Logged in user details automatically populated from MyAccount"
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "null"
+                "defaultValue": "'https://nanoporetech.com/contact'"
             },
-            "searchAppId": {
+            "sessionRedirect": {
                 "type": "string",
-                "mutable": true,
+                "attribute": "session-redirect",
+                "mutable": false,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -1479,114 +659,122 @@ export class GlobalNav {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "An Algolia App ID key. Will be automatically populated from MyAccount"
+                    "text": "A url to take the user after login / logout. Defaults to current URL. Is automatically URI encoded"
                 },
-                "getter": false,
-                "setter": false,
-                "attribute": "search-app-id",
+                "getter": true,
+                "setter": true,
                 "reflect": false
             },
-            "searchApiKey": {
-                "type": "string",
+            "cartCount": {
+                "type": "number",
+                "attribute": "cart-count",
                 "mutable": true,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "An Algolia API Key. Will be automatically populated from MyAccount"
+                    "text": "MyAccount store cart count."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "search-api-key",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "0"
             },
-            "searchValue": {
-                "type": "string",
+            "msgCount": {
+                "type": "number",
+                "attribute": "msg-count",
                 "mutable": true,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A search value to passed to Algolia to programmatically get or to preload search results"
+                    "text": "MyAccount un-read message count."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "search-value",
                 "reflect": false,
-                "defaultValue": "''"
+                "defaultValue": "0"
             },
-            "searchIndex": {
+            "myAccountUrl": {
                 "type": "string",
-                "mutable": true,
+                "attribute": "my-account-url",
+                "mutable": false,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Algolia search index to programmatically set or to set an initial index"
+                    "text": "A base url to retrieve global nav / sso data. `nav_bar_data.json` will be appended to this url"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "search-index",
-                "reflect": false,
-                "defaultValue": "'All'"
+                "reflect": false
             },
-            "cartCount": {
-                "type": "number",
+            "myAccountData": {
+                "type": "unknown",
+                "attribute": "my-account-data",
                 "mutable": true,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
+                    "original": "MyAccountData | null",
+                    "resolved": "MyAccountData",
+                    "references": {
+                        "MyAccountData": {
+                            "location": "import",
+                            "path": "./global-nav-interface",
+                            "id": "src/components/global-nav/global-nav-interface.d.ts::MyAccountData"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "MyAccount store cart count."
+                    "text": "MyAccount data automatically set via `myAccountUrl`.\nAlternatively you can directly provide a JSON object which is useful for SSR\n(ref https://myaccount.nanoporetech.com/nav_bar_data.json)"
                 },
                 "getter": false,
-                "setter": false,
-                "attribute": "cart-count",
-                "reflect": false,
-                "defaultValue": "0"
+                "setter": false
             },
-            "msgCount": {
-                "type": "number",
-                "mutable": true,
+            "myAccountUser": {
+                "type": "unknown",
+                "attribute": "my-account-user",
+                "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
+                    "original": "MyAccountData['user']",
+                    "resolved": "MyAccountUser",
+                    "references": {
+                        "MyAccountData": {
+                            "location": "import",
+                            "path": "./global-nav-interface",
+                            "id": "src/components/global-nav/global-nav-interface.d.ts::MyAccountData"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "MyAccount un-read message count."
+                    "text": "Logged in user details automatically populated from MyAccount"
                 },
-                "getter": false,
-                "setter": false,
-                "attribute": "msg-count",
-                "reflect": false,
-                "defaultValue": "0"
+                "getter": true,
+                "setter": false
             },
-            "cartUrl": {
+            "searchIndex": {
                 "type": "string",
+                "attribute": "search-index",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -1597,17 +785,17 @@ export class GlobalNav {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Url to the Nanopore store cart. Will default to the url supplied by MyAccount"
+                    "text": "Algolia search index to search within"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "cart-url",
                 "reflect": false,
-                "defaultValue": "null"
+                "defaultValue": "'All'"
             },
-            "msgUrl": {
+            "searchValue": {
                 "type": "string",
-                "mutable": true,
+                "attribute": "search-value",
+                "mutable": false,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -1617,60 +805,48 @@ export class GlobalNav {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Url to the Nanopore message center. Will default to the url supplied by MyAccount"
+                    "text": "A search string used to load and show autocomplete results"
                 },
-                "getter": false,
-                "setter": false,
-                "attribute": "msg-url",
+                "getter": true,
+                "setter": true,
                 "reflect": false,
-                "defaultValue": "null"
+                "defaultValue": "''"
             }
         };
     }
     static get states() {
         return {
-            "userProfileUrl": {},
-            "hasLoggedinSlot": {},
-            "hasSiteSlot": {},
-            "hasPromotionSlot": {},
-            "aboutSlotLen": {},
-            "iconSlotLen": {},
-            "mainSlotLen": {},
-            "overflowSlotLen": {},
-            "searchSlotLen": {},
-            "thresholdReady": {},
-            "remoteDataReady": {},
-            "ready": {},
-            "isResizing": {},
-            "threshold": {},
-            "modalOpen": {},
-            "modalIsOpen": {},
+            "overflowOpen": {},
+            "isLoggedIn": {},
+            "shouldResize": {},
+            "breakpoint": {},
+            "searchIndices": {},
             "searchBarShown": {},
-            "scrollingUp": {},
-            "showAutocomplete": {},
-            "secondaryMenuOpen": {},
-            "userMenuOpen": {},
-            "menuFullScreen": {},
             "searchLoading": {},
-            "searchValInternal": {},
-            "internalSearchIndeces": {}
+            "_searchValue": {}
         };
     }
     static get events() {
         return [{
-                "method": "nanoIsReady",
-                "name": "nanoIsReady",
+                "method": "nanoUserData",
+                "name": "nanoUserData",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the global nav is ready."
+                    "text": "Emitted when myaccount data has loaded"
                 },
                 "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
+                    "original": "MyAccountData['user']",
+                    "resolved": "MyAccountUser",
+                    "references": {
+                        "MyAccountData": {
+                            "location": "import",
+                            "path": "./global-nav-interface",
+                            "id": "src/components/global-nav/global-nav-interface.d.ts::MyAccountData"
+                        }
+                    }
                 }
             }, {
                 "method": "nanoSearchResult",
@@ -1739,7 +915,7 @@ export class GlobalNav {
     }
     static get methods() {
         return {
-            "submitSearch": {
+            "toggleOverflowMenu": {
                 "complexType": {
                     "signature": "() => Promise<void>",
                     "parameters": [],
@@ -1752,18 +928,14 @@ export class GlobalNav {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Submit the search form (a search value must be present)",
+                    "text": "Manually toggle open or close the overflow menu",
                     "tags": []
                 }
             },
-            "toggleOverflowMenu": {
+            "submitSearch": {
                 "complexType": {
-                    "signature": "(openClose?: boolean) => Promise<void>",
-                    "parameters": [{
-                            "name": "openClose",
-                            "type": "boolean",
-                            "docs": "- optionally force open (true) or close (false)"
-                        }],
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
                     "references": {
                         "Promise": {
                             "location": "global",
@@ -1773,102 +945,35 @@ export class GlobalNav {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Manually open or close the overflow (burger) menu",
-                    "tags": [{
-                            "name": "param",
-                            "text": "openClose - optionally force open (true) or close (false)"
-                        }]
+                    "text": "Send the current search term and selected index to a nested `nano-global-search-results`",
+                    "tags": []
                 }
             }
         };
     }
-    static get elementRef() { return "el"; }
+    static get elementRef() { return "host"; }
     static get watchers() {
         return [{
-                "propName": "myAccountData",
-                "methodName": "handleMyAccountData"
-            }, {
-                "propName": "env",
-                "methodName": "getMyAccData"
-            }, {
-                "propName": "ssoDataUrl",
-                "methodName": "getMyAccData"
-            }, {
-                "propName": "searchIndex",
-                "methodName": "currentSelectedIndex"
-            }, {
-                "propName": "searchValInternal",
-                "methodName": "changeInternalSearchVal"
-            }, {
-                "propName": "searchApiKey",
-                "methodName": "initAlgoliaClient"
-            }, {
-                "propName": "searchAppId",
-                "methodName": "initAlgoliaClient"
+                "propName": "myAccountUrl",
+                "methodName": "handleMyAccountUrl"
             }, {
-                "propName": "searchIndeces",
-                "methodName": "addIndeces"
-            }, {
-                "propName": "internalSearchIndeces",
-                "methodName": "addAlgoliaIndeces"
-            }, {
-                "propName": "threshold",
-                "methodName": "thresholdChange"
-            }, {
-                "propName": "thresholdReady",
-                "methodName": "assessReady"
-            }, {
-                "propName": "remoteDataReady",
-                "methodName": "assessReady"
-            }, {
-                "propName": "showAutocomplete",
-                "methodName": "setupAutocompleteBlur"
-            }, {
-                "propName": "secondaryMenuOpen",
-                "methodName": "closeSearchBar"
-            }, {
-                "propName": "aboutSlotLen",
-                "methodName": "slotChange"
-            }, {
-                "propName": "iconSlotLen",
-                "methodName": "slotChange"
-            }, {
-                "propName": "mainSlotLen",
-                "methodName": "slotChange"
-            }, {
-                "propName": "overflowSlotLen",
-                "methodName": "slotChange"
+                "propName": "myAccountData",
+                "methodName": "processUserData"
             }, {
-                "propName": "searchSlotLen",
-                "methodName": "slotChange"
+                "propName": "shouldResize",
+                "methodName": "breakpointChanged"
             }, {
-                "propName": "userMenuOpen",
-                "methodName": "handleUserMenu"
+                "propName": "breakpoint",
+                "methodName": "breakpointChanged"
             }, {
-                "propName": "showAutocomplete",
-                "methodName": "resetHitFocus"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "nanoOpen",
-                "method": "secondaryOpen",
-                "target": undefined,
-                "capture": false,
-                "passive": false
+                "propName": "searchIndices",
+                "methodName": "handleSearchIndex"
             }, {
-                "name": "nanoClose",
-                "method": "secondaryClose",
-                "target": undefined,
-                "capture": false,
-                "passive": false
+                "propName": "searchIndex",
+                "methodName": "handleSearchIndex"
             }, {
-                "name": "click",
-                "method": "menuClose",
-                "target": "body",
-                "capture": false,
-                "passive": false
+                "propName": "myAccountData",
+                "methodName": "initSearch"
             }];
     }
 }
-//# sourceMappingURL=global-nav.js.map