@nanoporetech-digital/components 1.15.6 → 2.1.0

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

@@ -0,0 +1,1221 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { HTMLElement, createEvent, readTask, writeTask, Build, h, Host, getAssetPath, proxyCustomElement } from '@stencil/core/internal/client';
+import { a as algoliasearch_umd } from './algoliasearch.umd.js';
+import { d as displayTransition } from './index2.js';
+import { C as ComponentStore } from './component-store.js';
+import { d as defineCustomElement$a } from './datalist.js';
+import { d as defineCustomElement$9 } from './dropdown.js';
+import { d as defineCustomElement$8 } from './icon.js';
+import { d as defineCustomElement$7 } from './input.js';
+import { d as defineCustomElement$6 } from './menu.js';
+import { d as defineCustomElement$5 } from './nav-item.js';
+import { d as defineCustomElement$4 } from './option.js';
+import { d as defineCustomElement$3 } from './select.js';
+import { d as defineCustomElement$2 } from './sticker.js';
+import { d as debounce } from './throttle.js';
+import { c as closestElement } from './dom.js';
+
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+    t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+async function clientFetch(url, _a = {}) {
+  var { body } = _a, customConfig = __rest(_a, ["body"]);
+  const headers = {
+    Accept: 'application/json, text/plain, */*',
+    'Access-Control-Allow-Origin': '*',
+    'Content-Type': 'application/json',
+    Cache: 'no-cache',
+  };
+  const config = Object.assign(Object.assign({ method: body ? 'POST' : 'GET', credentials: 'include', keepalive: true, mode: 'cors' }, customConfig), { headers: Object.assign(Object.assign({}, headers), customConfig.headers) });
+  if (body) {
+    config.body = JSON.stringify(body);
+  }
+  let id = setTimeout(() => { }, 0);
+  if (window.AbortController) {
+    const controller = new AbortController();
+    const { timeout = 500 } = customConfig;
+    id = setTimeout(() => controller.abort(), timeout);
+    config.signal = controller.signal;
+  }
+  const response = await fetch(url, config);
+  clearTimeout(id);
+  if (response.ok) {
+    return await response.json();
+  }
+  else {
+    const errorMessage = await response.text();
+    return new Error(errorMessage);
+  }
+}
+
+const globalNavCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--padding:12px;--padding-top:var(--padding);--padding-end:var(--padding);--padding-bottom:var(--padding);--padding-start:var(--padding);--bar-background:#005c75;--bar-text-color:white;--bar-color-shade:rgb(19, 89, 111);--bar-color-tint:rgb(19, 89, 111);--bar-color-focus:#90c6e7;--menu-background:#001a21;--menu-text-color:white;--menu-dropdown-bg:#196c82;--menu-dropdown-color:white;display:block;position:relative;line-height:1.5;height:100%}:host *{-webkit-box-sizing:inherit;box-sizing:inherit}.global-nav{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;font-size:0.88em;z-index:var(--nano-layer-index-menubar, 10)}.global-nav button{background:none;color:inherit;border:none;padding:0}.global-nav .icon-btn{position:relative;background:none;color:inherit;border:none;-ms-flex-item-align:normal;-ms-grid-row-align:normal;align-self:normal;padding:9px 7px;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.global-nav .icon-btn nano-icon{width:18px;height:18px}.global-nav ::slotted(nano-nav-item[slot=icon]){--padding-top:9px;--padding-bottom:9px;--padding-start:7px;--padding-end:7px;--display:flex;font-size:18px}.global-nav a{color:inherit;text-decoration:none;white-space:nowrap}.global-nav .nav-links_title{margin:8px 0 3px}.global-nav .nav-links ul{margin:0;padding:0}.global-nav .nav-links li{list-style:none}.global-nav .login-btn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:0.94em}.global-nav .menu-btn{padding:9px var(--padding) 9px var(--padding)}.gn-menu{position:fixed;top:0;left:0;z-index:-1;display:none;-webkit-transition:z-index 0.01s ease 0.2s;transition:z-index 0.01s ease 0.2s;height:100vh;width:100vw;overflow-y:auto}:host([dir=rtl]) .gn-menu{left:auto;right:0}:host(.threshold-2) .gn-menu{position:absolute;width:calc(100vw - 20px)}.gn-menu.menu-full-screen{width:100vw !important}.gn-menu_wrap{max-width:92vw;width:335px;background:var(--menu-background);color:var(--menu-text-color);padding:var(--padding) 0;-webkit-box-shadow:0 0 36px 0 rgba(0, 0, 0, 0.8);box-shadow:0 0 36px 0 rgba(0, 0, 0, 0.8);position:relative;pointer-events:all;margin-bottom:36px;opacity:0;outline:none;-webkit-transition:opacity 0.2s ease, -webkit-transform 0.2s ease;transition:opacity 0.2s ease, -webkit-transform 0.2s ease;transition:transform 0.2s ease, opacity 0.2s ease;transition:transform 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease}.gn-menu_wrap.has-promotion{padding:var(--padding) 0 0}.gn-menu.open{z-index:var(--nano-layer-index-dropdown, 300);-webkit-transition:z-index 0.01s ease;transition:z-index 0.01s ease}.gn-menu.open .gn-menu_wrap{opacity:1;-webkit-transform:translate3d(0, 0, 0) !important;transform:translate3d(0, 0, 0) !important;-webkit-transition:opacity 0.2s ease 0.01s, -webkit-transform 0.2s ease 0.01s;transition:opacity 0.2s ease 0.01s, -webkit-transform 0.2s ease 0.01s;transition:transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s;transition:transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s, -webkit-transform 0.2s ease 0.01s}.gn-menu_actions{padding-right:calc(var(--padding) / 2);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.gn-menu_actions{padding-right:unset;-webkit-padding-end:calc(var(--padding) / 2);padding-inline-end:calc(var(--padding) / 2)}}.gn-menu_actions-counter{background:#d0021b;color:#fff;position:absolute;bottom:4px;right:0;left:auto;font-size:9px;height:14px;line-height:14px;width:auto;min-width:14px;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;text-indent:0}.gn-menu .content-wrap{position:relative;overflow:hidden;-webkit-transition:0.2s ease min-height;transition:0.2s ease min-height;min-height:190px}.gn-menu .content--sub{padding:var(--padding) 0 var(--padding) 7px}.gn-menu .menu-btn{margin-right:auto}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.gn-menu .menu-btn{margin-right:unset;-webkit-margin-end:auto;margin-inline-end:auto}}.gn-menu .nav-links{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.gn-menu .nav-links ::slotted(nano-nav-item),.gn-menu .nav-links nano-nav-item{--icon-size:14px;--display:inline-block;--secondary-bg-color:#001a21;--padding-top:10px;--padding-bottom:10px;--padding-end:calc(var(--padding) * 2);--padding-start:calc(var(--padding) + 3px);--color:white;--color-hover:#90c6e7;--bg-color-hover:transparent;--bg-color-focus:#002530;--focus-outline:none;font-size:0.99em;width:100%}.gn-menu .nav-links .user-nav{--bg-color:#193037;--padding-top:9px;--padding-bottom:9px;font-weight:bold;margin:5px 0 0}.gn-menu .nav-links .user-nav ::slotted(nano-nav-item),.gn-menu .nav-links .user-nav nano-nav-item{font-weight:500;--bg-color:transparent}.gn-menu .nav-links_title{margin:0 var(--padding) 4px;border-bottom:1px solid #33484d;padding-bottom:8px;font-size:0.86em;text-transform:uppercase;color:#90c6e7;letter-spacing:1px;font-weight:700}.gn-menu .nav-links-wrap{margin:18px 0}.gn-menu .nav-links-wrap:last-child{margin-bottom:0}.gn-menu .nav-links .back-btn{border-top:1px solid #33484d;border-bottom:1px solid #33484d;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:10px 11px 10px 0;width:100%;font-size:12px;text-transform:uppercase;color:#90c6e7;letter-spacing:1px;font-weight:700}.gn-menu .nav-links .back-btn nano-icon{margin-right:10px;font-size:12px;color:white}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.gn-menu .nav-links .back-btn nano-icon{margin-right:unset;-webkit-margin-end:10px;margin-inline-end:10px}}.gn-menu .nav-links--sub{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.gn-menu .nav-links--sub ::slotted(nano-nav-item),.gn-menu .nav-links--sub nano-nav-item{--border-bottom:none;--padding-end:var(--padding);--padding-start:var(--padding);--padding-top:8px;--padding-bottom:8px;margin:0;width:50%;line-height:1.8}.gn-menu .nav-links .content{padding:8px var(--padding)}.gn-menu .login-btn{padding-left:7px;padding-right:var(--padding);padding-top:9px;padding-bottom:9px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.gn-menu .login-btn{padding-left:unset;padding-right:unset;-webkit-padding-start:7px;padding-inline-start:7px;-webkit-padding-end:var(--padding);padding-inline-end:var(--padding)}}.gn-menu .login-btn nano-icon{margin-left:10px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.gn-menu .login-btn nano-icon{margin-left:unset;-webkit-margin-start:10px;margin-inline-start:10px;}}.gn-menu .logout-btn{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.gn-menu .logout-btn a{padding:0 5px}.sticker-trigger{background:var(--bar-background);width:100%;z-index:calc(var(--nano-layer-index-menubar, 10) + 1)}.bars{color:var(--bar-text-color);z-index:var(--nano-layer-index-menubar, 10);position:relative;max-width:100%;min-width:100%;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:0.2s ease box-shadow;transition:0.2s ease box-shadow}[stuck] .bars{-webkit-box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15)}.bars::before{content:\"\";width:100%;height:100%;z-index:-1;background:var(--bar-background);position:absolute}.bars .search-widget{margin-left:11px;margin-right:auto;position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;max-width:45vw;min-width:269px;max-height:36px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.bars .search-widget{margin-left:unset;margin-right:unset;-webkit-margin-start:11px;margin-inline-start:11px;-webkit-margin-end:auto;margin-inline-end:auto}}.bars .search-inputs{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0}.bars .search-inputs input[type=submit]{display:none}.bars .search-autocomplete{position:absolute;top:calc(100% - 2px);width:100%;left:0;background:white;border:2px solid var(--bar-color-tint);border-radius:0 0 5px 5px;color:#4a4a4a;font-size:0.85em;padding:calc(var(--padding) / 2) 0 1px 0;z-index:1}:host([dir=rtl]) .bars .search-autocomplete{left:auto;right:0}.bars .search-autocomplete-hit{padding:calc(var(--padding) / 4) var(--padding) calc(var(--padding) / 4) var(--padding);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;text-align:left;line-height:1.5;cursor:pointer}:host([dir=rtl]) .bars .search-autocomplete-hit{text-align:right}.bars .search-autocomplete-hit-scope{font-size:0.76em;color:#a7b0b3;font-weight:600}.bars .search-autocomplete-hit:hover,.bars .search-autocomplete-hit:focus{background-color:#e4e6e8}.bars .search-autocomplete-hit .search__highlight,.bars .search-autocomplete-hit em{font-weight:bold;font-style:normal}.bars .search-autocomplete-hit--no-result:hover,.bars .search-autocomplete-hit--no-result:focus{background:none !important}.bars .search-autocomplete-foot{margin:7px 0 0}.bars .search-autocomplete-submit{background:none;border:none;-ms-flex-item-align:normal;-ms-grid-row-align:normal;align-self:normal;padding:9px var(--padding);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#007495;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;width:100%;text-decoration:underline;border-top:1px solid #e8eaea}.bars .search-autocomplete-submit:hover,.bars .search-autocomplete-submit:focus{background-color:#e4e6e8}.bars .search-input{--input-border-style:solid 1px rgb(85, 140, 157);--input-border-style--focus:solid 1px var(--bar-color-focus, #90c6e7);--input-border-width:1px;font-size:0.9em}.bars nano-select.search-input{--input-bg-color:var(--bar-color-tint, rgb(88, 140, 161));--input-text-color:inherit;--input-border-radius:5px 0 0 5px;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;width:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;left:1px}:host([dir=rtl]) .bars nano-select.search-input{--input-border-radius:0 5px 5px 0}:host(:not(.ready)) .bars nano-select.search-input{overflow:hidden;max-height:1em}.bars nano-select.search-input .down-arrow{font-size:0.65em}.bars nano-input.search-input{--input-text-color:inherit;--input-bg-color:var(--bar-color-shade, rgb(40, 110, 133));--clear-btn-color:#4a4a4a;--input-border-radius:0 5px 5px 0;--placeholder-color:white;width:206px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1}:host([dir=rtl]) .bars nano-input.search-input{--input-border-radius:5px 0 0 5px}:host(:not(.ready)) .bars nano-input.search-input{overflow:hidden;max-height:1em}.bars nano-input.search-input.has-value{--input-bg-color:#fff;--input-text-color:#4a4a4a}.bars nano-input.search-input.has-value .search-icon{color:#4a4a4a}.bars nano-input.search-input .search-icon{background:none;color:white;padding:0 8px;display:none}.bars nano-input.search-input .search-icon--show{display:-webkit-box;display:-ms-flexbox;display:flex}.bars nano-input.search-input .search-icon--loader{-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.bars nano-input.search-input .search-icon nano-icon{height:1.4em}.main-bar{width:100%;padding-left:0;padding-right:var(--padding);padding-top:var(--padding);padding-bottom:var(--padding);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;overflow-x:hidden}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-bar{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding);padding-inline-end:var(--padding)}}.main-bar:focus{outline:none}:host(.ready) .main-bar{overflow-x:visible}.main-bar>*,.main-bar ::slotted(*){-webkit-transition:opacity 0.2s ease;transition:opacity 0.2s ease}:host(:not(.ready)) .main-bar>*,:host(:not(.ready)) .main-bar ::slotted(*){opacity:0 !important}:host(.ready) .main-bar>*,:host(.ready) .main-bar ::slotted(*){opacity:1}:host(.resizing) .main-bar>*,:host(.resizing) .main-bar ::slotted(*){opacity:0 !important}.main-bar>*{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.main-bar>* ::slotted(nano-nav-item[slot=icon]){margin-left:11px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-bar>* ::slotted(nano-nav-item[slot=icon]){margin-left:unset;-webkit-margin-start:11px;margin-inline-start:11px;}}.main-bar>* ::slotted(nano-nav-item),.main-bar>* nano-nav-item{--color-hover:#e4e6e8;--secondary-bg-color:var(--menu-dropdown-bg);--secondary-color:var(--menu-dropdown-color);--bg-color-open:var(--bar-background);text-decoration:none !important}.main-bar .icon-btn{margin-left:6px;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-bar .icon-btn{margin-left:unset;-webkit-margin-start:6px;margin-inline-start:6px;}}:host(.threshold-2) .main-bar .icon-btn{margin-left:11px;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.threshold-2) .main-bar .icon-btn{margin-left:unset;-webkit-margin-start:11px;margin-inline-start:11px;}}.main-bar .menu-btn.icon-btn{margin:0 !important}:host(:not([dir=rtl])) .main-bar .menu-btn.icon-btn{border-right:1.5px solid var(--bar-color-shade)}:host([dir=rtl]) .main-bar .menu-btn.icon-btn{border-left:1.5px solid var(--bar-color-shade)}.main-bar .user-links{position:relative}.main-bar .user-links .icon-btn{padding-right:0;font-size:0.93em;font-weight:500}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-bar .user-links .icon-btn{padding-right:unset;-webkit-padding-end:0;padding-inline-end:0}}.main-bar .user-links .icon-btn nano-icon{margin-left:5px;width:16px;height:16px;-webkit-transform-origin:center;transform-origin:center;-webkit-transition:color 0.2s ease, -webkit-transform 0.2s ease;transition:color 0.2s ease, -webkit-transform 0.2s ease;transition:transform 0.2s ease, color 0.2s ease;transition:transform 0.2s ease, color 0.2s ease, -webkit-transform 0.2s ease}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-bar .user-links .icon-btn nano-icon{margin-left:unset;-webkit-margin-start:5px;margin-inline-start:5px;}}.main-bar .user-links .icon-btn.open nano-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg);color:#007495}.main-bar .user-links-panel{display:none;position:absolute;border-radius:4px 0 4px 4px;-webkit-box-shadow:0 1px 5px 0 rgba(0, 0, 0, 0.4);box-shadow:0 1px 5px 0 rgba(0, 0, 0, 0.4);background-color:#568c9d;opacity:0;-webkit-transform:translate3d(0, 24px, 0);transform:translate3d(0, 24px, 0);-webkit-transition:opacity 0.2s ease, -webkit-transform 0.2s ease;transition:opacity 0.2s ease, -webkit-transform 0.2s ease;transition:transform 0.2s ease, opacity 0.2s ease;transition:transform 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease;right:0;font-size:0.85em;min-width:250px;z-index:1}:host([dir=rtl]) .main-bar .user-links-panel{right:auto;left:0}.main-bar .user-links-panel:focus{outline:none}.main-bar .user-links-panel.show{opacity:1;-webkit-transform:translate3d(0, 4px, 0);transform:translate3d(0, 4px, 0)}.main-bar .user-links-panel-content{padding:0 18px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.main-bar .user-links-panel-content a{padding:11px 0;border-bottom:#669dac 1px solid}.main-bar .user-links-panel-content a:hover,.main-bar .user-links-panel-content a:focus{color:#455556}.main-bar .user-links-panel-content a:last-child{border-bottom:none}.main-bar .user-links-panel-foot{background-color:#aac5cd;border-radius:0 0 4px 4px;padding:var(--padding);color:#455556;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:500;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.main-bar .user-links-panel-foot a:hover{text-decoration:underline}.main-bar .logo{height:34px;width:auto;min-width:196px}:host(:not(.threshold-1)) .main-bar .logo{height:30px}.main-bar .logo-link{margin-left:0;margin-right:auto;padding-left:11px;padding-right:11px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:none}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-bar .logo-link{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:auto;margin-inline-end:auto}}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-bar .logo-link{padding-left:unset;padding-right:unset;-webkit-padding-start:11px;padding-inline-start:11px;-webkit-padding-end:11px;padding-inline-end:11px}}.main-bar .nav-links{font-size:0.86em;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}.main-bar .nav-links ul{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}.main-bar .nav-links ::slotted(nano-nav-item),.main-bar .nav-links nano-nav-item{--padding-top:7px;--padding-bottom:7px;--padding-end:2px;--padding-start:2px;--margin:0 11px}.main-bar .nav-links--main{font-weight:bold;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.main-bar .nav-links--main ::slotted(nano-nav-item){--color:white;--padding-end:6px;--padding-start:6px}.main-bar .nav-links--sub{margin-left:6px;--color:#e2e2e2;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-bar .nav-links--sub{margin-left:unset;-webkit-margin-start:6px;margin-inline-start:6px;}}.main-bar .login-btn{display:inline-block;border-radius:4px;background-color:#17bb75;color:#fff;padding:3px 10px;position:relative;left:auto;bottom:auto;margin-left:11px;margin-right:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-bar .login-btn{margin-left:unset;margin-right:unset;-webkit-margin-start:11px;margin-inline-start:11px;-webkit-margin-end:0;margin-inline-end:0}}.main-bar .measure-ele{min-width:1px;display:block;margin:0;padding:0}.search-bar{height:0;overflow:hidden;-webkit-transition:0.2s ease height;transition:0.2s ease height;padding:0 var(--padding);outline:none}.search-bar .search-widget{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;overflow:inherit;max-width:none;max-height:none;padding:0 0 var(--padding)}.search-bar .search-inputs{padding:0 0;margin:0 0}.search-bar .search-autocomplete{top:calc(100% - (var(--padding) + 1px))}.site-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-transition:min-height 0.2s ease;transition:min-height 0.2s ease;min-height:calc(100% - 61px);position:relative;z-index:auto;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.mask{opacity:0;background:rgba(0, 0, 0, 0.3);position:fixed;left:0;right:0;top:0;height:100vh;z-index:-1;-webkit-transition:opacity 0.2s ease, visibility 0.01s ease 0.2s, z-index 0.01s ease 0.2s, -webkit-transform 0.2s ease;transition:opacity 0.2s ease, visibility 0.01s ease 0.2s, z-index 0.01s ease 0.2s, -webkit-transform 0.2s ease;transition:transform 0.2s ease, opacity 0.2s ease, visibility 0.01s ease 0.2s, z-index 0.01s ease 0.2s;transition:transform 0.2s ease, opacity 0.2s ease, visibility 0.01s ease 0.2s, z-index 0.01s ease 0.2s, -webkit-transform 0.2s ease;visibility:hidden}.mask.open{opacity:1;-webkit-transition:z-index 0.01s ease, visibility 0.01s ease, opacity 0.2s ease 0.01s, -webkit-transform 0.2s ease 0.01s;transition:z-index 0.01s ease, visibility 0.01s ease, opacity 0.2s ease 0.01s, -webkit-transform 0.2s ease 0.01s;transition:z-index 0.01s ease, visibility 0.01s ease, transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s;transition:z-index 0.01s ease, visibility 0.01s ease, transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s, -webkit-transform 0.2s ease 0.01s;z-index:3;visibility:visible}";
+
+const THRESHOLDLIMIT = 5;
+let GlobalNav = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.nanoIsReady = createEvent(this, "nanoIsReady", 7);
+    this.nanoSearchResult = createEvent(this, "nanoSearchResult", 7);
+    this.nanoSearchError = createEvent(this, "nanoSearchError", 7);
+    this.nanoSearchReset = createEvent(this, "nanoSearchReset", 7);
+    this.currSize = 0;
+    this.thresholdsGoingUp = false;
+    this.autocompleteEles = [];
+    this.currAIndex = -1;
+    this.isLoggedIn = false;
+    this.myAccData = null;
+    // myaccount links
+    this.aboutNavItms = [];
+    this.siteNavItms = [];
+    this.loggedInNavItms = [];
+    this.hasLoggedinSlot = false;
+    this.hasSiteSlot = false;
+    this.hasPromotionSlot = false;
+    // slot item number tests
+    this.aboutSlotLen = 0;
+    this.iconSlotLen = 0;
+    this.mainSlotLen = 0;
+    this.overflowSlotLen = 0;
+    this.searchSlotLen = 0;
+    this.internalSearchIndeces = [];
+    this.thresholdReady = false;
+    this.remoteDataReady = false;
+    this.ready = false;
+    this.isResizing = false;
+    this.threshold = THRESHOLDLIMIT;
+    this.modalOpen = false;
+    this.modalIsOpen = false;
+    this.searchBarShown = false;
+    this.scrollingUp = true;
+    this.searchLoading = false;
+    this.showAutocomplete = false;
+    this.secondaryMenuOpen = false;
+    this.userMenuOpen = false;
+    this.menuFullScreen = false;
+    this.searchValInternal = '';
+    /**
+     * Connect to local, dev, test or prod MyAccount
+     * environments to retrieve global nav / sso data
+     */
+    this.env = 'prod';
+    /**
+     * Where to take user after SSO login
+     */
+    this.ssoRedirect = encodeURIComponent(window.location.href);
+    /**
+     * Whether to attempt to get global nav / sso data from MyAccount
+     */
+    this.getMyAccountData = true;
+    /**
+     * Active MyAccount link sections. By default all will show.
+     */
+    this.activeMyAccountSections = null;
+    /**
+     * Whether to show search functionality
+     */
+    this.showSearch = true;
+    /**
+     * Whether to show Nanopore logo
+     */
+    this.showLogo = true;
+    /**
+     * The link to put on the logo
+     */
+    this.logoUrl = location.protocol + '//' + location.host;
+    /**
+     * An array of Algolia search indexes (and optional display names). Will be automatically populated from MyAccount
+     */
+    this.searchIndeces = [];
+    /**
+     * Logged in user details automatically populated from MyAccount
+     */
+    this.myAccountUser = null;
+    /**
+     * A search value to passed to Algolia to programatically get or to preload search results
+     */
+    this.searchValue = '';
+    /**
+     * Algolia search index to programatically set or to set an initial index
+     */
+    this.searchIndex = 'all_prod_en';
+    /**
+     * MyAccount store cart count.
+     */
+    this.cartCount = 0;
+    /**
+     * MyAccount undread message count.
+     */
+    this.msgCount = 0;
+    /**
+     * Url to the Nanopore store cart. Will default to the url supplied by MyAccount
+     */
+    this.cartUrl = null;
+    /**
+     * Url to the Nanopore message center. Will default to the url supplied by MyAccount
+     */
+    this.msgUrl = null;
+    /**
+     * 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)
+     */
+    this.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;
+        this.thresholdsGoingUp = false;
+      }
+    };
+    this.onMenuBtnKeyDown = (ev) => {
+      switch (ev.key) {
+        case 'Enter':
+        case ' ':
+          this.modalOpen ? this.menuClose(ev, true) : this.menuOpen();
+          break;
+      }
+    };
+    this.onMenuBtnClick = (ev) => {
+      this.menuClose(ev, true);
+    };
+    this.menuOpen = (e) => {
+      if (e)
+        e.preventDefault();
+      this.menuDiv.style.display = 'block';
+      this.modalOpen = true;
+      this.modalIsOpen = true;
+      this.menuWrapDiv.addEventListener('focusout', this.menuClose);
+      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';
+    };
+    this.onMenuHidden = () => {
+      this.menuDiv.removeEventListener('transitionend', this.onMenuHidden);
+      this.menuWrapDiv.removeEventListener('focusout', this.menuClose);
+      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);
+    };
+    this.menuClose = (ev, force = false) => {
+      if (!force) {
+        let e = ev;
+        if (e &&
+          e.relatedTarget &&
+          closestElement('#global-nav-menu', e.relatedTarget))
+          return;
+        if (e &&
+          e.relatedTarget &&
+          e.relatedTarget.closest('#global-nav-menu'))
+          return;
+        if (e &&
+          e.relatedTarget &&
+          e.relatedTarget.closest('[slot="promotion"]'))
+          return;
+        if (this.secondaryMenuOpen)
+          return;
+      }
+      this.modalOpen = false;
+      this.menuDiv.addEventListener('transitionend', this.onMenuHidden);
+    };
+    this.subMenuClose = (ev) => {
+      ev.preventDefault();
+      ev.target.closest('nano-nav-item').open = false;
+    };
+    // User profile menu
+    this.onUserBtnClick = (ev) => {
+      ev.preventDefault();
+      this.userMenuOpen = !this.userMenuOpen;
+    };
+    this.onUserBtnKeyDown = (ev) => {
+      switch (ev.key) {
+        case 'Enter':
+        case ' ':
+          this.userMenuOpen = !this.userMenuOpen;
+          break;
+      }
+    };
+    this.onUserMenuBlur = (ev) => {
+      if (!ev.relatedTarget) {
+        this.userMenuOpen = false;
+        return;
+      }
+      if (!!ev.relatedTarget.closest('.user-links-panel'))
+        return false;
+      this.userMenuOpen = false;
+    };
+    // Search bar (smaller screens / mobile)
+    this.onSearchBtnClick = (ev) => {
+      ev.preventDefault();
+      if (!this.searchBarShown)
+        this.searchbarShow();
+      else
+        this.searchbarHide();
+    };
+    this.onSearchBtnKeyDown = (ev) => {
+      switch (ev.key) {
+        case 'Enter':
+        case ' ':
+          this.searchBarShown ? this.searchbarHide() : this.searchbarShow();
+          break;
+      }
+    };
+    this.onSearchBarShown = () => {
+      this.searchBarEl.removeEventListener('transitionend', this.onSearchBarShown);
+      if (this.searchInput)
+        this.searchInput.setFocus();
+      this.searchBarEl.style.overflow = 'visible';
+    };
+    this.searchbarHide = (ev) => {
+      if (ev &&
+        ev.relatedTarget &&
+        ev.relatedTarget.closest('#global-nav-search-bar'))
+        return;
+      this.showAutocomplete = false;
+      if (this.searchValInternal.length && ev)
+        return;
+      this.searchBarEl.addEventListener('transitionend', this.onSearchBarHidden);
+      this.searchBarEl.style.overflow = 'hidden';
+      this.searchBarEl.style.height = '0px';
+    };
+    this.onSearchBarHidden = () => {
+      this.searchBarEl.removeEventListener('transitionend', this.onSearchBarHidden);
+      this.searchBarEl.style.display = 'none';
+      this.searchBarShown = false;
+    };
+    this.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;
+      }
+    };
+    this.onSearchChange = async (ev) => {
+      this.searchValInternal = this.searchValue = ev
+        ? ev.detail.value
+        : this.searchValInternal;
+      this.showAutocomplete = false;
+      this.autocompleteResults = null;
+      if (!this.isSearchValSet()) {
+        if (!this.searchValInternal.length) {
+          this.nanoSearchReset.emit();
+        }
+        this.searchLoading = false;
+        return;
+      }
+      if (!this.currentIndex)
+        this.currentSelectedIndex();
+      try {
+        this.autocompleteResults = this.processSearchResults((await this.currentIndex.alogliaIndex.search(this.searchValInternal, {
+          attributesToSnippet: ['body:5', 'title:8'],
+          hitsPerPage: 5,
+          filters: 'created > ' + Math.floor((Date.now() - 63115200000) / 1000), // only get last 2 years
+        })));
+      }
+      catch (e) {
+        console.error(e);
+      }
+      this.scopeSearch = null;
+      this.scopeSearch = await this.onSearchSubmit(null, false);
+      this.searchLoading = false;
+      this.showAutocompleteResults();
+    };
+    this.onSearchSubmit = async (ev, emit = true) => {
+      if (ev)
+        ev.preventDefault();
+      if (!this.isSearchValSet())
+        return;
+      this.searchLoading = true;
+      this.algoliaSearchResults = null;
+      if (!this.currentIndex)
+        this.currentSelectedIndex();
+      let queries = this.internalSearchIndeces.map((index) => {
+        return {
+          indexName: index.index,
+          query: this.searchValInternal,
+          facets: index.filters,
+          hitsPerPage: 10,
+          filters: 'created > ' + Math.floor((Date.now() - 63115200000) / 1000), // only get last 2 years
+        };
+      });
+      try {
+        this.algoliaSearchResults = this.processSearchResults((await this.algoliaClient.multipleQueries(queries)));
+      }
+      catch (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;
+      });
+      if (emit) {
+        this.nanoSearchResult.emit({
+          results: this.algoliaSearchResults.results,
+          client: { apiKey: this.searchApiKey, appId: this.searchAppId },
+        });
+        this.showAutocomplete = false;
+      }
+      return this.algoliaSearchResults;
+    };
+    this.onSearchIndexChange = async (index) => {
+      let 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;
+      let selectedIndex = this.internalSearchIndeces.find((index) => index.index === indexStr);
+      if (!selectedIndex || !selectedIndex.alogliaIndex)
+        return;
+      this.searchIndex = selectedIndex.index;
+      if (this.isSearchValSet())
+        await this.onSearchChange();
+    };
+    this.switchIndexSubmit = async (index) => {
+      if (this.isSearchValSet()) {
+        await this.onSearchIndexChange(index);
+        this.onSearchSubmit();
+      }
+      else
+        this.onSearchIndexChange(index);
+    };
+    this.onAutocompleteBlur = (ev) => {
+      if (!this.showAutocomplete || !this.autocompleteResults)
+        return;
+      if (ev && ev.target && ev.target.closest('.search-widget'))
+        return;
+      this.showAutocomplete = false;
+    };
+    this.showAutocompleteResults = () => {
+      if (!this.autocompleteResults || !this.autocompleteResults.hits)
+        return;
+      this.showAutocomplete = true;
+    };
+    this.onAutocompleteInteract = (ev) => {
+      // list open, navigate items with arrows
+      if (!this.showAutocomplete || !this.autocompleteResults)
+        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 {
+              let 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--;
+          let found = this.autocompleteEles[testIndex];
+          if (found ||
+            testIndex < 0 ||
+            testIndex > this.autocompleteEles.length - 1)
+            ev.preventDefault();
+          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;
+      }
+    };
+  }
+  /**
+   * Submit the search form (a search value must be present)
+   */
+  async submitSearch() {
+    this.onSearchSubmit();
+    this.showAutocomplete = false;
+    return;
+  }
+  currentSelectedIndex() {
+    if (!this.internalSearchIndeces.length) {
+      return;
+    }
+    let foundIndex = this.internalSearchIndeces.find((index) => index.index === this.searchIndex);
+    if (!foundIndex) {
+      this.currentIndex = this.internalSearchIndeces[0];
+      console.error('index not found');
+      return;
+    }
+    this.currentIndex = foundIndex;
+    return foundIndex;
+  }
+  changeInternalSearchVal() {
+    if (this.searchValInternal !== this.searchValue)
+      this.searchValue = this.searchValInternal;
+  }
+  initAlgoliaClient() {
+    if (!this.searchAppId || !this.searchApiKey)
+      return;
+    this.algoliaClient = algoliasearch_umd(this.searchAppId, this.searchApiKey);
+    this.addAlgoliaIndeces();
+  }
+  addIndeces() {
+    this.internalSearchIndeces = [
+      ...this.internalSearchIndeces,
+      ...this.searchIndeces,
+    ];
+  }
+  addAlgoliaIndeces() {
+    if (!this.algoliaClient || !this.internalSearchIndeces.length)
+      return;
+    this.internalSearchIndeces.forEach((searchIndex) => {
+      searchIndex.alogliaIndex = this.algoliaClient.initIndex(searchIndex.index);
+    });
+    if (!this.searchIndex)
+      this.searchIndex = this.internalSearchIndeces[0].index;
+  }
+  thresholdChange(newThreshold, oldThreshold) {
+    if (newThreshold > oldThreshold) {
+      // we've resized to larger screen.
+      this.thresholdsGoingUp = true;
+      this.setResizingState(true);
+    }
+  }
+  /**
+   * Primary logic for resizing changes.
+   * When content doesn't fit - we loop down through break points until it does
+   */
+  ratioChange() {
+    if (this.intersectRatio < 1 && this.threshold > 0) {
+      // content doesn't fit
+      if (this.thresholdsGoingUp)
+        this.setResizingState(true);
+      this.threshold--;
+      setTimeout(() => this.ratioChange(), 500);
+    }
+    else {
+      this.thresholdReady = true;
+      // content now fits so add / remove context classes
+      // on nav-items depending on whether they're added to bar or burger.
+      this.siteContent.style.minHeight = `calc(100% - ${this.barsDiv.clientHeight + 1}px)`;
+      let menuItems, barItems;
+      readTask(() => {
+        menuItems = [
+          ...Array.from(this.el.querySelectorAll('nano-nav-item[slot="site"]')),
+          ...Array.from(this.el.querySelectorAll('nano-nav-item[slot="overflow"]')),
+        ];
+        barItems = [];
+        if (this.threshold < THRESHOLDLIMIT - 4)
+          menuItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="icon"]')));
+        else
+          barItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="icon"]')));
+        if (this.threshold < THRESHOLDLIMIT - 3)
+          menuItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="loggedin"]')));
+        else
+          barItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="loggedin"]')));
+        if (this.threshold < THRESHOLDLIMIT - 2)
+          menuItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="main"]')));
+        else
+          barItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="main"]')));
+        if (this.threshold < THRESHOLDLIMIT - 1)
+          menuItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="about"]')));
+        else
+          barItems.push(...Array.from(this.el.querySelectorAll('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');
+        });
+      });
+    }
+  }
+  assessReady() {
+    if (this.thresholdReady && this.remoteDataReady) {
+      this.ready = true;
+    }
+  }
+  remoteReady() {
+    this.attachIO();
+  }
+  isReady() {
+    this.nanoIsReady.emit();
+  }
+  /**
+   * Add / remove events when autocomplete results show / hide.
+   */
+  setupAutocompleteBlur() {
+    if (this.showAutocomplete) {
+      this.el.shadowRoot.addEventListener('click', this.onAutocompleteBlur);
+    }
+    else {
+      this.el.shadowRoot.removeEventListener('click', this.onAutocompleteBlur);
+    }
+  }
+  /**
+   * As relevant slotted items change, reset resizing breakpoints
+   */
+  slotChange() {
+    this.threshold = THRESHOLDLIMIT;
+  }
+  // General classes for visuals
+  thresholdClasses() {
+    let classes = [];
+    let i = 0;
+    for (i; i < this.threshold; i++)
+      classes.push('threshold-' + (i + 1));
+    return classes;
+  }
+  // Global DOM Events
+  onWindowResize() {
+    if (this.threshold < THRESHOLDLIMIT && window.innerWidth > this.currSize) {
+      this.threshold = THRESHOLDLIMIT;
+    }
+    this.currSize = window.innerWidth;
+    this.searchBarShown = false;
+  }
+  // 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 = true;
+    this.menuContentDiv.style.minHeight =
+      ev.detail.secondaryMenu.scrollHeight + 'px';
+  }
+  secondaryClose(ev) {
+    if (!ev.detail.secondaryMenu)
+      return;
+    ev.stopPropagation();
+    this.secondaryMenuOpen = false;
+    this.menuContentDiv.style.minHeight = '';
+  }
+  async handleUserMenu() {
+    await displayTransition(this.userLinkPanel, '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();
+    }
+  }
+  searchbarShow() {
+    this.searchBarShown = true;
+    this.searchBarEl.addEventListener('transitionend', this.onSearchBarShown);
+    this.searchBarEl.style.display = 'block';
+    setTimeout(() => {
+      this.searchBarEl.style.height =
+        this.searchBarEl.querySelector('.search-widget').scrollHeight + 'px';
+    }, 50);
+  }
+  // Algolia search
+  autocompleteSnippet(hit) {
+    let lookFor = ['title']; // , 'body'
+    if (hit._snippetResult) {
+      let 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;
+  }
+  isSearchValSet() {
+    if (this.searchValInternal.length < 3)
+      return false;
+    return true;
+  }
+  // Autocomplete
+  resetHitFocus() {
+    this.currAIndex = -1;
+  }
+  setActiveElement(autocompleteEle) {
+    this.autocompleteEles.map((ele) => ele.setAttribute('aria-selected', 'false'));
+    autocompleteEle.focus({ preventScroll: true });
+    autocompleteEle.setAttribute('aria-selected', 'true');
+  }
+  // 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;
+    });
+  }
+  /**
+   * Attach the IntersectionObserver - from which all threshold / breakpoint logic hinges
+   */
+  attachIO() {
+    if (this.io)
+      return;
+    let root = this.el.shadowRoot.querySelector('.global-nav .main-bar');
+    if (Build.isBrowser &&
+      typeof window !== 'undefined' &&
+      window.IntersectionObserver &&
+      !!root) {
+      const io = (this.io = new window.IntersectionObserver((data) => {
+        this.intersectRatio = data.slice(-1)[0].intersectionRatio;
+      }, { root, threshold: 1 }));
+      io.observe(root.querySelector('.measure-ele'));
+    }
+  }
+  // Stencil Lifecycle / Rendering
+  componentDidLoad() {
+    if (Build.isBrowser) {
+      this.debounceResize = debounce(this.onWindowResize.bind(this), 300);
+      window.addEventListener('resize', this.debounceResize);
+      this.currSize = window.innerWidth;
+    }
+    this.initAlgoliaClient();
+    this.addAlgoliaIndeces();
+    if (this.remoteDataReady)
+      this.attachIO();
+  }
+  componentWillLoad() {
+    ComponentStore.init(this, ['searchIndex', 'searchValue'], 'url-hash', 'gns');
+    if (Build.isBrowser &&
+      typeof window !== 'undefined' &&
+      window.MutationObserver) {
+      const mo = (this.mo = new MutationObserver(() => {
+        this.assessSlottedContent();
+      }));
+      mo.observe(this.el, { childList: true, subtree: false });
+    }
+    this.assessSlottedContent();
+  }
+  disconnectedCallback() {
+    if (this.io) {
+      this.io.disconnect();
+      this.io = undefined;
+    }
+    if (this.mo) {
+      this.mo.disconnect();
+      this.mo = undefined;
+    }
+    if (Build.isBrowser)
+      window.removeEventListener('resize', this.debounceResize);
+  }
+  async connectedCallback() {
+    this.getMyAccData();
+  }
+  // Render output
+  autocompleteList() {
+    let content;
+    if (this.showAutocomplete && this.scrollingUp) {
+      let currentScopeHits = 0;
+      let scopeChangeSuggestions = 0;
+      let scopeSuggestReducer = (total, result) => {
+        return result.index !== this.currentIndex.index
+          ? total + result.hits.length
+          : total;
+      };
+      let 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) }));
+          }),
+        ], (!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."));
+      }
+    }
+    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.searchIndex, onNanoChange: this.onSearchIndexChange, mask: true }, this.internalSearchIndeces.map((index) => {
+        return (h("nano-option", { selected: index.index === this.searchIndex, value: index.index }, index.name || index.index));
+      }), h("nano-icon", { name: "solid/caret-down", class: "down-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...", 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.searchValInternal.length,
+        }, slot: "end", onMouseDown: (e) => {
+          this.searchValInternal = this.searchInput.value;
+          this.onSearchSubmit(e, true);
+        } }, h("nano-icon", { name: "light/search" })), 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" })),
+    ];
+  }
+  render() {
+    this.autocompleteEles = [];
+    let isRtl = this.el.ownerDocument.dir === 'rtl';
+    let searchWidget = this.searchWidget();
+    searchWidget.push(this.autocompleteList());
+    return (h(Host, { 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,
+      }, dir: isRtl ? 'rtl' : null }, h("div", { class: {
+        'global-nav': true,
+        'scrolling-down': !this.scrollingUp,
+      } }, h("nav", { 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) }, h("div", { class: "gn-menu_wrap", ref: (div) => (this.menuWrapDiv = div), tabindex: "-1" }, h("div", { class: "gn-menu_actions" }, h("button", { class: "menu-btn icon-btn icon-btn", onMouseDown: this.onMenuBtnClick, onKeyDown: this.onMenuBtnKeyDown }, this.threshold < THRESHOLDLIMIT - 3 && (h("nano-icon", { name: "light/times", "aria-label": "close menu" })), this.threshold >= THRESHOLDLIMIT - 3 && (h("nano-icon", { name: "light/bars", "aria-label": "close menu" }))), this.threshold < THRESHOLDLIMIT - 4 && [
+      !!this.iconSlotLen && h("slot", { name: "icon" }),
+      this.myAccData &&
+        (!this.activeMyAccountSections ||
+          this.activeMyAccountSections.includes('icons')) && [
+        this.msgUrl && (h("a", { href: this.msgUrl, class: "icon-btn" }, h("nano-icon", { name: "light/bell" }), this.msgCount > 0 && (h("span", { class: "gn-menu_actions-counter" }, this.msgCount)))),
+        this.cartUrl && (h("a", { href: this.cartUrl, class: "icon-btn" }, h("nano-icon", { name: "light/shopping-cart" }), this.cartCount > 0 && (h("span", { class: "gn-menu_actions-counter" }, this.cartCount)))),
+      ],
+    ], this.myAccData && this.myAccData.urls.login && (h("a", { href: this.myAccData.urls.login + this.ssoRedirect, class: "login-btn" }, "Login / Register", ' ', h("nano-icon", { name: "solid/chevron-right" })))), h("div", { class: "content-wrap", ref: (div) => (this.menuContentDiv = div) }, h("div", { class: "content" }, h("nav", { class: "nav-links nav-links--main" }, h("slot", { name: "overflow" }), this.threshold < THRESHOLDLIMIT - 2 &&
+      !!this.mainSlotLen && h("slot", { name: "main" })), (((!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
+      this.threshold < THRESHOLDLIMIT) ||
+      this.hasSiteSlot ||
+      !!this.siteNavItms.length) && (h("div", null, (!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
+      this.threshold < THRESHOLDLIMIT && [
+      (this.threshold >= THRESHOLDLIMIT - 2 ||
+        this.mainSlotLen < 2) &&
+        this.overflowSlotLen < 2 && (h("div", { class: "nav-links-wrap" }, !!this.aboutNavItms.length && (h("h4", { class: "nav-links_title" }, "About")), h("nav", { class: "nav-links nav-links--sub", "aria-label": "About the company links" }, h("slot", { name: "about" }), this.aboutNavItms.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", { class: "nav-links", "aria-label": "About the company links" }, !this.aboutNavItms.length && (h("slot", { name: "about" })), !!this.aboutNavItms.length && (h("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, "Company", h("nano-icon", { slot: "icon-end", name: "solid/chevron-right" }), h("div", { slot: "secondary" }, h("div", { class: "content" }, h("button", { class: "back-btn", onClick: this.subMenuClose }, h("nano-icon", { slot: "icon-end", name: "solid/chevron-left", "aria-label": "go back" }), "Company"), h("slot", { name: "about" }), h("div", { class: "content--sub" }, this.aboutNavItms.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.hasSiteSlot || !!this.siteNavItms.length) && [
+      (this.threshold >= THRESHOLDLIMIT - 2 ||
+        this.mainSlotLen < 2) &&
+        this.overflowSlotLen < 2 && (h("div", { class: "nav-links-wrap" }, h("h4", { class: "nav-links_title" }, "Sites"), h("nav", { class: "nav-links nav-links--sub", "aria-label": "Different company site links" }, h("slot", { name: "site" }), 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", { class: "nav-links", "aria-label": "Different company site links" }, h("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, "Sites", h("nano-icon", { slot: "icon-end", name: "solid/chevron-right" }), h("div", { slot: "secondary" }, h("div", { class: "content" }, h("button", { class: "back-btn", onClick: this.subMenuClose }, h("nano-icon", { slot: "icon-end", name: "solid/chevron-left", "aria-label": "go back" }), "Sites"), h("div", { class: "content--sub" }, h("slot", { name: "site" }), 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 - 3 &&
+      (this.loggedInNavItms.length || this.hasLoggedinSlot) && (h("nav", { class: "nav-links", "aria-label": "Your user account links" }, h("nano-nav-item", { class: "nano-global-nav user-nav nano-global-nav-menu" }, this.myAccountUser.name, h("nano-icon", { slot: "icon-end", name: "solid/chevron-right" }), h("div", { slot: "secondary" }, h("div", { class: "content" }, h("button", { class: "back-btn", onClick: this.subMenuClose }, h("nano-icon", { slot: "icon-end", name: "solid/chevron-left", "aria-label": "go back" }), this.myAccountUser.name), h("div", { class: "content--sub" }, h("slot", { name: "loggedin" }), 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", { class: "nano-global-nav nano-global-nav-menu" }, h("a", { href: this.myAccData.urls.forgot_password +
+        this.ssoRedirect }, "Change Password")))))))), h("slot", { name: "promotion" }), this.myAccData && this.myAccData.urls.logout && (h("div", { class: "login-btn logout-btn" }, h("a", { href: this.myAccData.urls.logout + this.ssoRedirect }, "Logout")))))), h("nano-sticker", { "auto-resize": "false", "break-point-max": "800", quietMode: { h: 600, w: 800 } }, h("div", { class: "bars", ref: (div) => (this.barsDiv = div) }, h("nav", { 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 - 4) ||
+      (this.isLoggedIn &&
+        (!!this.loggedInNavItms.length || this.hasLoggedinSlot) &&
+        this.threshold < THRESHOLDLIMIT - 3) ||
+      (!!this.mainSlotLen && this.threshold < THRESHOLDLIMIT - 2) ||
+      ((!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
+        this.threshold < THRESHOLDLIMIT) ||
+      this.hasSiteSlot ||
+      !!this.siteNavItms.length) && (h("button", { 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", { name: "light/bars", "aria-label": "open menu" }))), this.showLogo && (h("a", { href: this.logoUrl, class: "logo-link" }, h("img", { src: getAssetPath(`./assets/ont-logo.svg`), alt: "Oxford Nanopore Technologies Logo", class: "logo" }))), !this.showLogo && (h("div", { class: "logo-link" }, h("slot", { name: "logo" }))), h("div", { class: "nav-links nav-links--main" }, h("slot", { name: "main" })), this.threshold >= THRESHOLDLIMIT - 1 && [
+      this.showSearch && !!this.internalSearchIndeces.length && (h("div", { 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", { name: "search" }),
+    ], (this.threshold >= THRESHOLDLIMIT - 1 ||
+      !this.showSearch ||
+      !this.internalSearchIndeces.length) && (h("nav", { class: "nav-links nav-links--sub", "aria-label": "About the company links" }, (!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
+      this.threshold === THRESHOLDLIMIT && [
+      h("slot", { name: "about" }),
+      this.aboutNavItms.map((link) => {
+        return (h("nano-nav-item", { class: "nano-global-nav nano-global-nav-bar" }, h("a", { href: link.address, target: link.target }, link.title)));
+      }),
+    ])), this.threshold < THRESHOLDLIMIT - 1 &&
+      ((this.showSearch && !!this.internalSearchIndeces.length) ||
+        !!this.searchSlotLen) && (h("button", { class: "icon-btn", "aria-controls": "global-nav-search-bar", "aria-expanded": this.searchBarShown ? 'true' : 'false', onMouseDown: this.onSearchBtnClick, onKeyDown: this.onSearchBtnKeyDown }, h("nano-icon", { name: "light/search" }))), this.threshold >= THRESHOLDLIMIT - 4 && [
+      !!this.iconSlotLen && h("slot", { name: "icon" }),
+      this.myAccData &&
+        (!this.activeMyAccountSections ||
+          this.activeMyAccountSections.includes('icons')) && [
+        this.msgUrl && (h("a", { href: this.msgUrl, class: "icon-btn" }, h("nano-icon", { name: "light/bell" }), this.msgCount > 0 && (h("span", { class: "gn-menu_actions-counter" }, this.msgCount)))),
+        this.cartUrl && (h("a", { href: this.cartUrl, class: "icon-btn" }, h("nano-icon", { name: "light/shopping-cart" }), this.cartCount > 0 && (h("span", { class: "gn-menu_actions-counter" }, this.cartCount)))),
+      ],
+    ], this.myAccData &&
+      this.threshold >= THRESHOLDLIMIT - 3 && [
+      this.myAccData.urls.login && (h("a", { href: this.myAccData.urls.login + this.ssoRedirect, class: "login-btn" }, "Login / Register")),
+      this.myAccountUser && (h("div", { class: "user-links" }, h("button", { class: {
+          'icon-btn': true,
+          'user-links-btn': true,
+          open: this.userMenuOpen,
+        }, onMouseDown: this.onUserBtnClick, onKeyDown: this.onUserBtnKeyDown }, ' ', this.myAccountUser.name, h("nano-icon", { name: "solid/caret-down" })), h("div", { class: "user-links-panel", tabindex: "-1", ref: (div) => (this.userLinkPanel = div) }, h("div", { class: "user-links-panel-content" }, this.loggedInNavItms.map((link) => {
+        return (h("a", { href: link.address, target: link.target }, link.title));
+      })), h("div", { class: "user-links-panel-foot" }, h("a", { href: this.myAccData.urls.forgot_password +
+          this.ssoRedirect }, "Change Password"), h("a", { href: this.myAccData.urls.logout + this.ssoRedirect }, "Logout"))))),
+    ], h("span", { class: "measure-ele" })), this.threshold < THRESHOLDLIMIT - 1 && (h("div", { 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) }, h("div", { class: "search-widget" }, this.showSearch && !!this.internalSearchIndeces.length && (h("div", null, searchWidget)), (!this.showSearch || !this.myAccData) &&
+      !!this.searchSlotLen && h("slot", { name: "search" })))))), (this.threshold < THRESHOLDLIMIT - 3 || this.menuFullScreen) && (h("div", { class: {
+        mask: true,
+        open: this.modalOpen,
+      }, onClick: this.menuClose, onTouchEnd: this.menuClose }))), h("div", { class: "site-content", ref: (div) => (this.siteContent = div) }, h("slot", null))));
+  }
+  // Data processing
+  domainFor(origin) {
+    if (!this.myAccData)
+      return '';
+    let domain = this.myAccData.domains.find((dm) => dm.origin === origin);
+    return domain ? domain.domain : '';
+  }
+  processSearchResults(results) {
+    let multiResults = results;
+    let 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;
+    }
+  }
+  async getMyAccData() {
+    if (!this.getMyAccountData || this.myAccData) {
+      this.remoteDataReady = true;
+      return;
+    }
+    let 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;
+    }
+    var config = { timeout: 5000 };
+    try {
+      if (this.env === 'local') {
+        this.myAccData = (await import('./local-my-account.js'));
+      }
+      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;
+    }
+  }
+  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;
+  }
+  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;
+      }
+    });
+  }
+  static get assetsDirs() { return ["assets"]; }
+  get el() { return this; }
+  static get watchers() { return {
+    "searchIndex": ["currentSelectedIndex"],
+    "searchValInternal": ["changeInternalSearchVal"],
+    "searchApiKey": ["initAlgoliaClient"],
+    "searchAppId": ["initAlgoliaClient"],
+    "searchIndeces": ["addIndeces"],
+    "internalSearchIndeces": ["addAlgoliaIndeces"],
+    "threshold": ["thresholdChange"],
+    "intersectRatio": ["ratioChange"],
+    "thresholdReady": ["assessReady"],
+    "remoteDataReady": ["assessReady", "remoteReady"],
+    "ready": ["isReady"],
+    "showAutocomplete": ["setupAutocompleteBlur", "resetHitFocus"],
+    "aboutSlotLen": ["slotChange"],
+    "iconSlotLen": ["slotChange"],
+    "mainSlotLen": ["slotChange"],
+    "overflowSlotLen": ["slotChange"],
+    "searchSlotLen": ["slotChange"],
+    "userMenuOpen": ["handleUserMenu"]
+  }; }
+  static get style() { return globalNavCss; }
+};
+GlobalNav = /*@__PURE__*/ proxyCustomElement(GlobalNav, [1, "nano-global-nav", {
+    "env": [1],
+    "ssoRedirect": [1, "sso-redirect"],
+    "getMyAccountData": [4, "get-my-account-data"],
+    "activeMyAccountSections": [16],
+    "showSearch": [4, "show-search"],
+    "showLogo": [4, "show-logo"],
+    "logoUrl": [1, "logo-url"],
+    "searchIndeces": [16],
+    "myAccountUser": [1040],
+    "searchAppId": [1025, "search-app-id"],
+    "searchApiKey": [1025, "search-api-key"],
+    "searchValue": [1025, "search-value"],
+    "searchIndex": [1025, "search-index"],
+    "cartCount": [1026, "cart-count"],
+    "msgCount": [1026, "msg-count"],
+    "cartUrl": [1025, "cart-url"],
+    "msgUrl": [1025, "msg-url"],
+    "hasLoggedinSlot": [32],
+    "hasSiteSlot": [32],
+    "hasPromotionSlot": [32],
+    "aboutSlotLen": [32],
+    "iconSlotLen": [32],
+    "mainSlotLen": [32],
+    "overflowSlotLen": [32],
+    "searchSlotLen": [32],
+    "internalSearchIndeces": [32],
+    "thresholdReady": [32],
+    "remoteDataReady": [32],
+    "ready": [32],
+    "isResizing": [32],
+    "intersectRatio": [32],
+    "threshold": [32],
+    "modalOpen": [32],
+    "modalIsOpen": [32],
+    "searchBarShown": [32],
+    "scrollingUp": [32],
+    "searchLoading": [32],
+    "showAutocomplete": [32],
+    "secondaryMenuOpen": [32],
+    "userMenuOpen": [32],
+    "menuFullScreen": [32],
+    "searchValInternal": [32],
+    "submitSearch": [64]
+  }, [[0, "nanoOpen", "secondaryOpen"], [0, "nanoClose", "secondaryClose"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["nano-global-nav", "nano-datalist", "nano-dropdown", "nano-icon", "nano-input", "nano-menu", "nano-nav-item", "nano-option", "nano-select", "nano-sticker"];
+  components.forEach(tagName => { switch (tagName) {
+    case "nano-global-nav":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GlobalNav);
+      }
+      break;
+    case "nano-datalist":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "nano-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "nano-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "nano-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "nano-menu":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "nano-nav-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "nano-option":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "nano-select":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "nano-sticker":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const NanoGlobalNav = GlobalNav;
+const defineCustomElement = defineCustomElement$1;
+
+export { NanoGlobalNav, defineCustomElement };
+
+//# sourceMappingURL=nano-global-nav.js.map