@nanoporetech-digital/components 3.13.0 → 4.0.0

package/dist/cjs/nano-table.cjs.entry.js

@@ -5,11 +5,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const nanoTable_entry = require('./nano-table-60c06885.js');
-require('./index-46286eea.js');
+const nanoTable_entry = require('./nano-table-737365b7.js');
+require('./index-71f899a7.js');
 require('./math-a8123703.js');
 require('./throttle-f55496c8.js');
-require('./index-b13f69e7.js');
+require('./index-99649bef.js');
 
 
 

package/dist/cjs/{scroll-a197d9c4.js → scroll-6a9bedb4.js}

@@ -58,17 +58,24 @@ function scrollIntoView(element, container, direction = 'vertical', position = '
       else if (offsetLeft + element.clientWidth > maxX)
         scrollTo(container, offsetLeft - container.offsetWidth + element.clientWidth);
     }
-    else
+    else {
       scrollTo(container, container.scrollLeft +
         offset.left -
-        container.offsetWidth / 2 +
-        element.offsetWidth / 2);
+        (container.offsetWidth / 2 + element.offsetWidth / 2));
+    }
   }
   if (direction === 'vertical' || direction === 'both') {
-    if (offsetTop < minY)
-      scrollTo(container, offsetTop, true);
-    else if (offsetTop + element.clientHeight > maxY) {
-      scrollTo(container, offsetTop - container.offsetHeight + element.clientHeight, true);
+    if (position === 'start') {
+      if (offsetTop < minY)
+        scrollTo(container, offsetTop, true);
+      else if (offsetTop + element.clientHeight > maxY) {
+        scrollTo(container, offsetTop - container.offsetHeight + element.clientHeight, true);
+      }
+    }
+    else {
+      scrollTo(container, container.scrollTop +
+        offset.top -
+        (container.offsetHeight / 2 + element.offsetHeight / 2), true);
     }
   }
 }
@@ -77,4 +84,4 @@ exports.lockBodyScrolling = lockBodyScrolling;
 exports.scrollIntoView = scrollIntoView;
 exports.unlockBodyScrolling = unlockBodyScrolling;
 
-//# sourceMappingURL=scroll-a197d9c4.js.map
+//# sourceMappingURL=scroll-6a9bedb4.js.map

package/dist/cjs/scroll-6a9bedb4.js.map

@@ -0,0 +1 @@
+{"file":"scroll-6a9bedb4.js","mappings":"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","names":["getOffset"],"sources":["./src/utils/scroll.ts"],"sourcesContent":["import { getOffset } from './dom';\n\nconst locks = new Set();\n\n/**\n * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible\n * without premature unlocking.\n */\nexport function lockBodyScrolling(lockingEl: HTMLElement) {\n  locks.add(lockingEl);\n  document.body.classList.add('nano-scroll-lock');\n}\n\n/**\n * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.\n */\nexport function unlockBodyScrolling(lockingEl: HTMLElement) {\n  locks.delete(lockingEl);\n\n  if (locks.size === 0) {\n    document.body.classList.remove('nano-scroll-lock');\n  }\n}\n\nfunction scrollTo(\n  element: HTMLElement,\n  scrollAmt: number,\n  vertical: boolean = false\n) {\n  if (!vertical) {\n    try {\n      element.scrollTo({ left: scrollAmt, behavior: 'smooth' });\n    } catch (e) {\n      element.scrollLeft = scrollAmt;\n    }\n    return;\n  }\n  try {\n    element.scrollTo({ top: scrollAmt, behavior: 'smooth' });\n  } catch (e) {\n    element.scrollTop = scrollAmt;\n  }\n}\n\n/**\n * Scrolls an element into view of its container. If the element is already in view, nothing will happen.\n */\nexport function scrollIntoView(\n  element: HTMLElement,\n  container: HTMLElement,\n  direction: 'horizontal' | 'vertical' | 'both' = 'vertical',\n  position: 'center' | 'start' = 'start'\n) {\n  const offset = getOffset(element, container);\n  const offsetTop = offset.top + container.scrollTop;\n  const offsetLeft = offset.left + container.scrollLeft;\n  const minX = container.scrollLeft;\n  const maxX = container.scrollLeft + container.offsetWidth;\n  const minY = container.scrollTop;\n  const maxY = container.scrollTop + container.offsetHeight;\n\n  if (direction === 'horizontal' || direction === 'both') {\n    if (position === 'start') {\n      if (offsetLeft < minX) scrollTo(container, offsetLeft);\n      else if (offsetLeft + element.clientWidth > maxX)\n        scrollTo(\n          container,\n          offsetLeft - container.offsetWidth + element.clientWidth\n        );\n    } else {\n      scrollTo(\n        container,\n        container.scrollLeft +\n          offset.left -\n          (container.offsetWidth / 2 + element.offsetWidth / 2)\n      );\n    }\n  }\n\n  if (direction === 'vertical' || direction === 'both') {\n    if (position === 'start') {\n      if (offsetTop < minY) scrollTo(container, offsetTop, true);\n      else if (offsetTop + element.clientHeight > maxY) {\n        scrollTo(\n          container,\n          offsetTop - container.offsetHeight + element.clientHeight,\n          true\n        );\n      }\n    } else {\n      scrollTo(\n        container,\n        container.scrollTop +\n          offset.top -\n          (container.offsetHeight / 2 + element.offsetHeight / 2),\n        true\n      );\n    }\n  }\n}\n"],"version":3}

package/dist/cjs/{table.worker-f902766e.js → table.worker-c3b11144.js}

@@ -3,11 +3,11 @@
  */
 'use strict';
 
-const nanoTable_entry = require('./nano-table-60c06885.js');
-require('./index-46286eea.js');
+const nanoTable_entry = require('./nano-table-737365b7.js');
+require('./index-71f899a7.js');
 require('./math-a8123703.js');
 require('./throttle-f55496c8.js');
-require('./index-b13f69e7.js');
+require('./index-99649bef.js');
 
 const workerName = 'table.worker';
 const workerMsgId = 'stencil.table.worker';
@@ -22,4 +22,4 @@ exports.workerMsgId = workerMsgId;
 exports.workerName = workerName;
 exports.workerPath = workerPath;
 
-//# sourceMappingURL=table.worker-f902766e.js.map
+//# sourceMappingURL=table.worker-c3b11144.js.map

package/dist/cjs/table.worker-c3b11144.js.map

@@ -0,0 +1 @@
+{"file":"table.worker-c3b11144.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/cjs/{transitions-5cd8f697.js → transitions-1205f12b.js}

@@ -17,7 +17,7 @@
  * @param show
  * @returns a promise of resolving as either 'show' or 'hidden'
  */
-const displayTransition = (el, className, show = true) => {
+const displayTransition = (el, className, show = true, showDisplay = 'block') => {
   return new Promise((resolve) => {
     if (show) {
       el.addEventListener('transitionend', (e) => {
@@ -26,7 +26,7 @@ const displayTransition = (el, className, show = true) => {
           resolve('shown');
         }
       }, { once: true });
-      el.style.display = 'block';
+      el.style.display = showDisplay;
       el.dataset.displayTransition = 'true';
       setTimeout(() => el.classList.add(className), 20);
     }
@@ -45,4 +45,4 @@ const displayTransition = (el, className, show = true) => {
 
 exports.displayTransition = displayTransition;
 
-//# sourceMappingURL=transitions-5cd8f697.js.map
+//# sourceMappingURL=transitions-1205f12b.js.map

package/dist/cjs/transitions-1205f12b.js.map

@@ -0,0 +1 @@
+{"file":"transitions-1205f12b.js","mappings":";;;;;AAAA;;;;AAiBA;;;;;;;;;;MAUa,iBAAiB,GAAG,CAC/B,EAAe,EACf,SAAiB,EACjB,OAAgB,IAAI,EACpB,cAAsB,OAAO;EAE7B,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO;IACzB,IAAI,IAAI,EAAE;MACR,EAAE,CAAC,gBAAgB,CACjB,eAAe,EACf,CAAC,CAAQ;QACP,IACE,CAAC,CAAC,MAAM,KAAK,EAAE;UACf,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,EAC9C;UACA,OAAO,CAAC,OAAO,CAAC,CAAC;SAClB;OACF,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;MACF,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,WAAW,CAAC;MAC/B,EAAE,CAAC,OAAO,CAAC,iBAAiB,GAAG,MAAM,CAAC;MACtC,UAAU,CAAC,MAAM,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAC;KACnD;SAAM;MACL,EAAE,CAAC,gBAAgB,CACjB,eAAe,EACf,CAAC,CAAQ;QACP,IACE,CAAC,CAAC,MAAM,KAAK,EAAE;UACf,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,EAC9C;UACA,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;UAC1B,OAAO,CAAC,QAAQ,CAAC,CAAC;SACnB;OACF,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;MACF,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;KAChC;GACF,CAAC,CAAC;AACL;;;;","names":[],"sources":["./src/utils/transitions.ts"],"sourcesContent":["/**\n * Quality of life for transition handling.\n * Adds / removes transitionend events. Resolves on complete\n */\nexport const transitionDone = (\n  el: HTMLElement\n): Promise<'shown' | 'hidden'> => {\n  return new Promise((resolve) => {\n    const callback = () => {\n      el.removeEventListener('transitionend', callback);\n      resolve;\n    };\n    el.addEventListener('transitionend', callback);\n    // ??\n  });\n};\n\n/**\n * handles hiding and showing elements properly (with display),\n * along with transitions, so they are no longer viewable in the dom.\n * - OnHide remove show class, listen for transition end, then display: none on finish\n * - OnShow, display block on start then add a show class\n * @param el\n * @param className\n * @param show\n * @returns a promise of resolving as either 'show' or 'hidden'\n */\nexport const displayTransition = (\n  el: HTMLElement,\n  className: string,\n  show: boolean = true,\n  showDisplay: string = 'block'\n): Promise<'shown' | 'hidden'> => {\n  return new Promise((resolve) => {\n    if (show) {\n      el.addEventListener(\n        'transitionend',\n        (e: Event) => {\n          if (\n            e.target === el ||\n            e.composedPath().some((el) => el === e.target)\n          ) {\n            resolve('shown');\n          }\n        },\n        { once: true }\n      );\n      el.style.display = showDisplay;\n      el.dataset.displayTransition = 'true';\n      setTimeout(() => el.classList.add(className), 20);\n    } else {\n      el.addEventListener(\n        'transitionend',\n        (e: Event) => {\n          if (\n            e.target === el ||\n            e.composedPath().some((el) => el === e.target)\n          ) {\n            el.style.display = 'none';\n            resolve('hidden');\n          }\n        },\n        { once: true }\n      );\n      el.classList.remove(className);\n    }\n  });\n};\n"],"version":3}

package/dist/collection/collection-manifest.json

@@ -34,6 +34,7 @@
     "./components/menu-drawer/menu-drawer.js",
     "./components/nav-item/nav-item.js",
     "./components/option/option.js",
+    "./components/overflow-nav/overflow-nav.js",
     "./components/progress-bar/progress-bar.js",
     "./components/range/range.js",
     "./components/rating/rating.js",
@@ -53,7 +54,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.22.6",
+    "version": "2.23.0",
     "typescriptVersion": "4.9.4"
   },
   "collections": [],

package/dist/collection/components/checkbox/checkbox.css

@@ -27,11 +27,11 @@
    * @prop --cb-border-radius: Checkbox border radius. Defaults to to 2px and 5px on [has-focus];
    * @prop --radio-border-radius: Radio border radius. Defaults to to 50%;
    * @prop --tagbox-rgb: an rba list for tags which can be used to generate --tagbox-border-color and --tagbox-bg-color. Defaults to 144 198 231;
-   * @prop --tagbox-border-color: Defaults to rgba(var(--tagbox-rgb), .5);
-   * @prop --tagbox-bg-color: Defaults to rgba(var(--tagbox-rgb), .1);
+   * @prop --tagbox-border-color: Defaults to rgb(var(--tagbox-rgb) / 50%);
+   * @prop --tagbox-bg-color: Defaults to rgb(var(--tagbox-rgb) / 10%);
    * @prop --segment-color: Segment, unselected text color. (selected color is --check-checked-higlight-color). Defaults to #007495;
    * @prop --segment-border-radius: Defaults to 3px;
-   * @prop --segment-shadow: 0 1px 4px rgba(0,0,0,.2);
+   * @prop --segment-shadow: 0 1px 4px rgb(0 0 0 / 20%);
   */
   --focus-shadow: var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));
   --invalid-shadow: 0 0 0 0.1875rem  #ef4135;

package/dist/collection/components/drawer/drawer.css

@@ -14,7 +14,7 @@
   /**
   * @prop --size: The preferred size of the drawer; width or height depending on placement. Note that the drawer will shrink to accommodate smaller screens. Defaults to 25rem
   * @prop --panel-background-color: background color of panel. Default to 'white'
-  * @prop --panel-shadow: Defaults to '0 4px 16px rgba(0, 0, 0, 0.1)';
+  * @prop --panel-shadow: Defaults to '0 4px 16px rgb(0 0 0 / 10%)';
   * @prop --overlay-color: Defaults to 'hsla(203, 10%, 20%, 0.5)';
   */
   position: relative;

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

@@ -13,7 +13,7 @@ export class GlobalNavUserProfile {
   // Render output
   render() {
     var _a;
-    return (!!this.myAccountUser && (h("a", { href: this.userProfileUrl, class: "user-profile" }, h("div", { class: "left" }, h("div", { class: "avatar-container" }, h("img", { class: "avatar", src: (_a = this.myAccountUser) === null || _a === void 0 ? void 0 : _a.small_avatar_url, alt: "User Avatar", height: 75, width: 75 }), this.myAccountUser.is_nanopore_user && (h("img", { class: "logo-small", src: getAssetPath(`../nano-assets/ont-wheel-light.svg`), alt: "Nanopore Logo" }))), h("div", { class: "user-details" }, h("span", { class: "name" }, this.myAccountUser.name), h("span", { class: "bio" }, this.myAccountUser.job_title, " at ", this.myAccountUser.company))), h("div", { class: "right" }, h("div", { class: "chevron-right" }, h("nano-icon", { slot: "icon-end", name: "light/chevron-right", "aria-label": "navigate to ..." }))))));
+    return (!!this.myAccountUser && (h("a", { href: this.userProfileUrl, class: "user-profile" }, h("div", { class: "left" }, h("div", { class: "avatar-container" }, h("img", { class: "avatar", src: (_a = this.myAccountUser) === null || _a === void 0 ? void 0 : _a.small_avatar_url, alt: "User Avatar", height: 75, width: 75 }), this.myAccountUser.is_nanopore_user && (h("img", { class: "logo-small", src: getAssetPath(`/nano-assets/ont-wheel-light.svg`), alt: "Nanopore Logo" }))), h("div", { class: "user-details" }, h("span", { class: "name" }, this.myAccountUser.name), h("span", { class: "bio" }, this.myAccountUser.job_title, " at ", this.myAccountUser.company))), h("div", { class: "right" }, h("div", { class: "chevron-right" }, h("nano-icon", { slot: "icon-end", name: "light/chevron-right", "aria-label": "navigate to ..." }))))));
   }
   static get is() { return "nano-global-nav-user-profile"; }
   static get properties() {

package/dist/collection/components/global-nav/global-nav-user-profile.js.map

@@ -1 +1 @@
-{"version":3,"file":"global-nav-user-profile.js","sourceRoot":"","sources":["../../../src/components/global-nav/global-nav-user-profile.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,CAAC,EACD,IAAI,EACJ,YAAY,GAEb,MAAM,eAAe,CAAC;AAGvB;;GAEG;AAIH,MAAM,OAAO,oBAAoB;;;;;EAW/B,gBAAgB;EAEhB,MAAM;;IACJ,OAAO,CACL,CAAC,CAAC,IAAI,CAAC,aAAa,IAAI,CACtB,SAAG,IAAI,EAAE,IAAI,CAAC,cAAc,EAAE,KAAK,EAAC,cAAc;MAChD,WAAK,KAAK,EAAC,MAAM;QACf,WAAK,KAAK,EAAC,kBAAkB;UAC3B,WACE,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,MAAA,IAAI,CAAC,aAAa,0CAAE,gBAAgB,EACzC,GAAG,EAAC,aAAa,EACjB,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,EAAE,GACT;UACD,IAAI,CAAC,aAAa,CAAC,gBAAgB,IAAI,CACtC,WACE,KAAK,EAAC,YAAY,EAClB,GAAG,EAAE,YAAY,CAAC,oCAAoC,CAAC,EACvD,GAAG,EAAC,eAAe,GACnB,CACH,CACG;QAEN,WAAK,KAAK,EAAC,cAAc;UACvB,YAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAQ;UAEnD,YAAM,KAAK,EAAC,KAAK;YACd,IAAI,CAAC,aAAa,CAAC,SAAS;;YAAM,IAAI,CAAC,aAAa,CAAC,OAAO,CACxD,CACH,CACF;MAEN,WAAK,KAAK,EAAC,OAAO;QAChB,WAAK,KAAK,EAAC,eAAe;UACxB,iBACE,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,qBAAqB,gBACf,iBAAiB,GACjB,CACT,CACF,CACJ,CACL,CACF,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  getAssetPath,\n  ComponentInterface,\n} from '@stencil/core';\nimport { MyAccountUser } from './global-nav-interface';\n\n/**\n * Nanopore digital global navigation user profile.\n */\n@Component({\n  tag: 'nano-global-nav-user-profile',\n})\nexport class GlobalNavUserProfile implements ComponentInterface {\n  /**\n   * Logged in user details automatically populated from MyAccount\n   */\n  @Prop() myAccountUser: MyAccountUser;\n\n  /**\n   * Link to the user profile\n   */\n  @Prop() userProfileUrl: string;\n\n  // Render output\n\n  render() {\n    return (\n      !!this.myAccountUser && (\n        <a href={this.userProfileUrl} class=\"user-profile\">\n          <div class=\"left\">\n            <div class=\"avatar-container\">\n              <img\n                class=\"avatar\"\n                src={this.myAccountUser?.small_avatar_url}\n                alt=\"User Avatar\"\n                height={75}\n                width={75}\n              />\n              {this.myAccountUser.is_nanopore_user && (\n                <img\n                  class=\"logo-small\"\n                  src={getAssetPath(`../nano-assets/ont-wheel-light.svg`)}\n                  alt=\"Nanopore Logo\"\n                />\n              )}\n            </div>\n\n            <div class=\"user-details\">\n              <span class=\"name\">{this.myAccountUser.name}</span>\n\n              <span class=\"bio\">\n                {this.myAccountUser.job_title} at {this.myAccountUser.company}\n              </span>\n            </div>\n          </div>\n\n          <div class=\"right\">\n            <div class=\"chevron-right\">\n              <nano-icon\n                slot=\"icon-end\"\n                name=\"light/chevron-right\"\n                aria-label=\"navigate to ...\"\n              ></nano-icon>\n            </div>\n          </div>\n        </a>\n      )\n    );\n  }\n}\n"]}
+{"version":3,"file":"global-nav-user-profile.js","sourceRoot":"","sources":["../../../src/components/global-nav/global-nav-user-profile.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,CAAC,EACD,IAAI,EACJ,YAAY,GAEb,MAAM,eAAe,CAAC;AAGvB;;GAEG;AAIH,MAAM,OAAO,oBAAoB;;;;;EAW/B,gBAAgB;EAEhB,MAAM;;IACJ,OAAO,CACL,CAAC,CAAC,IAAI,CAAC,aAAa,IAAI,CACtB,SAAG,IAAI,EAAE,IAAI,CAAC,cAAc,EAAE,KAAK,EAAC,cAAc;MAChD,WAAK,KAAK,EAAC,MAAM;QACf,WAAK,KAAK,EAAC,kBAAkB;UAC3B,WACE,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,MAAA,IAAI,CAAC,aAAa,0CAAE,gBAAgB,EACzC,GAAG,EAAC,aAAa,EACjB,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,EAAE,GACT;UACD,IAAI,CAAC,aAAa,CAAC,gBAAgB,IAAI,CACtC,WACE,KAAK,EAAC,YAAY,EAClB,GAAG,EAAE,YAAY,CAAC,kCAAkC,CAAC,EACrD,GAAG,EAAC,eAAe,GACnB,CACH,CACG;QAEN,WAAK,KAAK,EAAC,cAAc;UACvB,YAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAQ;UAEnD,YAAM,KAAK,EAAC,KAAK;YACd,IAAI,CAAC,aAAa,CAAC,SAAS;;YAAM,IAAI,CAAC,aAAa,CAAC,OAAO,CACxD,CACH,CACF;MAEN,WAAK,KAAK,EAAC,OAAO;QAChB,WAAK,KAAK,EAAC,eAAe;UACxB,iBACE,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,qBAAqB,gBACf,iBAAiB,GACjB,CACT,CACF,CACJ,CACL,CACF,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  getAssetPath,\n  ComponentInterface,\n} from '@stencil/core';\nimport { MyAccountUser } from './global-nav-interface';\n\n/**\n * Nanopore digital global navigation user profile.\n */\n@Component({\n  tag: 'nano-global-nav-user-profile',\n})\nexport class GlobalNavUserProfile implements ComponentInterface {\n  /**\n   * Logged in user details automatically populated from MyAccount\n   */\n  @Prop() myAccountUser: MyAccountUser;\n\n  /**\n   * Link to the user profile\n   */\n  @Prop() userProfileUrl: string;\n\n  // Render output\n\n  render() {\n    return (\n      !!this.myAccountUser && (\n        <a href={this.userProfileUrl} class=\"user-profile\">\n          <div class=\"left\">\n            <div class=\"avatar-container\">\n              <img\n                class=\"avatar\"\n                src={this.myAccountUser?.small_avatar_url}\n                alt=\"User Avatar\"\n                height={75}\n                width={75}\n              />\n              {this.myAccountUser.is_nanopore_user && (\n                <img\n                  class=\"logo-small\"\n                  src={getAssetPath(`/nano-assets/ont-wheel-light.svg`)}\n                  alt=\"Nanopore Logo\"\n                />\n              )}\n            </div>\n\n            <div class=\"user-details\">\n              <span class=\"name\">{this.myAccountUser.name}</span>\n\n              <span class=\"bio\">\n                {this.myAccountUser.job_title} at {this.myAccountUser.company}\n              </span>\n            </div>\n          </div>\n\n          <div class=\"right\">\n            <div class=\"chevron-right\">\n              <nano-icon\n                slot=\"icon-end\"\n                name=\"light/chevron-right\"\n                aria-label=\"navigate to ...\"\n              ></nano-icon>\n            </div>\n          </div>\n        </a>\n      )\n    );\n  }\n}\n"]}

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

@@ -3,7 +3,6 @@
  */
 import { h, Host, Build, getAssetPath, readTask, writeTask, } from '@stencil/core';
 import algoliasearch from 'algoliasearch';
-import { closestElement } from '../../utils/dom';
 import { clientFetch } from '../../utils/fetch';
 import { ComponentStore } from '../../utils/store/component-store';
 import { debounce } from '../../utils/throttle';
@@ -81,10 +80,7 @@ export class GlobalNav {
       // need to open menu in stages
       // wait for re-flow after changing display
       // wait for repaint after animate, then focus
-      this.menuDiv.clientWidth; // force reflow
       this.modalOpen = true;
-      this.modalIsOpen = true;
-      this.menuWrapDiv.addEventListener('focusout', this.menuClose);
       this.menuDiv.clientWidth; // force reflow
       this.menuWrapDiv.focus({ preventScroll: true });
       if (this.threshold < 2 ||
@@ -94,10 +90,10 @@ export class GlobalNav {
       }
       else
         document.body.style.overflowX = 'hidden';
+      setTimeout(() => (this.modalIsOpen = true), 300);
     };
     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;
@@ -107,32 +103,6 @@ export class GlobalNav {
           this.mainBarDiv.focus({ preventScroll: true });
       }, 50);
     };
-    this.menuClose = (ev, force = false) => {
-      if (force) {
-        this.modalOpen = false;
-        this.menuDiv.addEventListener('transitionend', this.onMenuHidden);
-        return;
-      }
-      const 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;
-      requestAnimationFrame(() => {
-        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;
@@ -378,6 +348,25 @@ export class GlobalNav {
           break;
       }
     };
+    // Various.
+    /**
+     * Assesses what content is present in which slots
+     */
+    this.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;
+      });
+    };
     this.userProfileUrl = '';
     this.hasLoggedinSlot = false;
     this.hasSiteSlot = false;
@@ -423,6 +412,7 @@ export class GlobalNav {
     this.msgCount = 0;
     this.cartUrl = null;
     this.msgUrl = null;
+    this.assessSlottedContent = debounce(this.assessSlottedContent.bind(this), 10);
   }
   handleMyAccountData() {
     if (!this.myAccountData)
@@ -562,11 +552,6 @@ export class GlobalNav {
       this.thresholdReady = true;
       // content now fits so add / remove context classes
       // on nav-items depending on whether they're added to bar or burger.
-      // if (this.siteContent) {
-      //   this.siteContent.style.minHeight = `calc(100% - ${
-      //     this.barsDiv.clientHeight + 1
-      //   }px)`;
-      // }
       let menuItems, barItems;
       readTask(() => {
         menuItems = [
@@ -685,6 +670,29 @@ export class GlobalNav {
       }
     }, 200);
   }
+  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) => {
+      var _a;
+      return el === this.menuContentDiv ||
+        ((_a = el.classList) === null || _a === void 0 ? void 0 : _a.contains('gn-menu_actions'));
+    })) {
+      requestAnimationFrame(() => {
+        if (!!this.secondaryMenuOpen)
+          return;
+        this.modalOpen = false;
+        this.menuDiv.addEventListener('transitionend', this.onMenuHidden);
+      });
+    }
+  }
   async handleUserMenu() {
     await displayTransition(this.userLinkPanel, 'show', this.userMenuOpen);
     if (this.userMenuOpen) {
@@ -738,25 +746,6 @@ export class GlobalNav {
     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
    */
@@ -788,14 +777,6 @@ export class GlobalNav {
   }
   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() {
@@ -911,28 +892,28 @@ export class GlobalNav {
         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", role: "menu" }, h("slot", { name: "overflow" }), this.threshold <
+    ], 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", role: "menu" }, h("slot", { name: "overflow", onSlotchange: this.assessSlottedContent }), this.threshold <
       this.THRESHOLDLIMIT - THRESHOLDBREAKS.main &&
-      !!this.mainSlotLen && h("slot", { name: "main" })), (((!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
+      !!this.mainSlotLen && (h("slot", { name: "main", onSlotchange: this.assessSlottedContent }))), (((!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
       this.hasSiteSlot) ||
       !!this.siteNavItms.length) && (h("div", null, (this.hasSiteSlot || !!this.siteNavItms.length) && [
       (this.threshold >= this.THRESHOLDLIMIT - 2 ||
         this.mainSlotLen < 2) &&
-        this.overflowSlotLen < 2 && (h("div", { class: "nav-links-wrap" }, h("h4", { class: "nav-links_title nav-links_title--sites" }, "Sites"), h("nav", { class: "nav-links nav-links--sub nav-links--sites", "aria-label": "Different company site links" }, h("slot", { name: "site" }), this.siteNavItms.map((link) => {
+        this.overflowSlotLen < 2 && (h("div", { class: "nav-links-wrap" }, h("h4", { class: "nav-links_title nav-links_title--sites" }, "Sites"), h("nav", { class: "nav-links nav-links--sub nav-links--sites", "aria-label": "Different company site links" }, h("slot", { 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 < this.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) => {
+        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", 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 <
         this.THRESHOLDLIMIT - THRESHOLDBREAKS.login &&
-      (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), !!((_a = this.myAccountUser) === null || _a === void 0 ? void 0 : _a.small_avatar_url) && (h("nano-global-nav-user-profile", { myAccountUser: this.myAccountUser, userProfileUrl: this.userProfileUrl })), h("div", { class: "content--sub" }, h("slot", { name: "loggedin" }), this.loggedInNavItms.map((link) => {
+      (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), !!((_a = this.myAccountUser) === null || _a === void 0 ? void 0 : _a.small_avatar_url) && (h("nano-global-nav-user-profile", { myAccountUser: this.myAccountUser, userProfileUrl: this.userProfileUrl })), h("div", { class: "content--sub" }, h("slot", { 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", { 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("div", { class: "sticker-trigger" }), h("nano-sticker", { "auto-resize": "false", "break-point-max": "800", quietMode: { h: 600, w: 800 } }, h("div", { class: "bars" }, h("nav", { class: "main-bar", "aria-label": "Main site navigation", tabindex: "-1", ref: (div) => (this.mainBarDiv = div), role: !!this.mainSlotLen &&
+        this.ssoRedirect }, "Change Password")))))))), h("slot", { name: "promotion", onSlotchange: this.assessSlottedContent }), this.myAccData && this.myAccData.urls.logout && (h("div", { class: "login-btn logout-btn" }, h("a", { href: this.myAccData.urls.logout + this.ssoRedirect }, "Logout")))))), h("div", { class: "sticker-trigger" }), h("nano-sticker", { "auto-resize": "false", "break-point-max": "800", quietMode: { h: 600, w: 800 } }, h("div", { class: "bars" }, h("nav", { class: "main-bar", "aria-label": "Main site navigation", tabindex: "-1", ref: (div) => (this.mainBarDiv = div), role: !!this.mainSlotLen &&
         this.threshold >= this.THRESHOLDLIMIT - THRESHOLDBREAKS.main
         ? 'menu'
         : undefined }, (this.hasPromotionSlot ||
@@ -951,14 +932,14 @@ export class GlobalNav {
         this.threshold <
           this.THRESHOLDLIMIT - THRESHOLDBREAKS.about) ||
       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(`../nano-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.mainSlotLen === 0 &&
+      !!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(`/nano-assets/ont-logo.svg`), alt: "Oxford Nanopore Technologies Logo", class: "logo" }))), !this.showLogo && (h("div", { class: "logo-link" }, h("slot", { name: "logo", onSlotchange: this.assessSlottedContent }))), h("div", { class: "nav-links nav-links--main" }, h("slot", { name: "main", onSlotchange: this.assessSlottedContent })), this.mainSlotLen === 0 &&
       this.threshold >=
         this.THRESHOLDLIMIT - THRESHOLDBREAKS.search && [
       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.searchSlotLen && (h("slot", { name: "search", onSlotchange: this.assessSlottedContent })),
     ], (this.mainSlotLen > 0 ||
       this.threshold <
         this.THRESHOLDLIMIT - THRESHOLDBREAKS.search) &&
@@ -978,7 +959,7 @@ export class GlobalNav {
       ],
     ], (!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
       this.threshold >=
-        this.THRESHOLDLIMIT - THRESHOLDBREAKS.about && (h("nav", { class: "nav-links nav-links--sub", "aria-label": "About the company. Links", role: "menu" }, h("slot", { name: "about" }), !!this.aboutNavItms.length && (h("nano-nav-item", { class: "nano-global-nav nano-global-nav-bar" }, h("a", { href: this.aboutNavItms[0].address, target: this.aboutNavItms[0].target }, this.aboutNavItms[0].title))))), this.myAccData &&
+        this.THRESHOLDLIMIT - THRESHOLDBREAKS.about && (h("nav", { class: "nav-links nav-links--sub", "aria-label": "About the company. Links", role: "menu" }, h("slot", { name: "about", onSlotchange: this.assessSlottedContent }), !!this.aboutNavItms.length && (h("nano-nav-item", { class: "nano-global-nav nano-global-nav-bar" }, h("a", { href: this.aboutNavItms[0].address, target: this.aboutNavItms[0].target }, this.aboutNavItms[0].title))))), this.myAccData &&
       (!this.activeMyAccountSections ||
         this.activeMyAccountSections.includes('loggedin')) &&
       this.threshold >=
@@ -998,7 +979,7 @@ export class GlobalNav {
         '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 < this.THRESHOLDLIMIT - 3 ||
+      !!this.searchSlotLen && (h("slot", { name: "search", onSlotchange: this.assessSlottedContent }))))))), (this.threshold < this.THRESHOLDLIMIT - 3 ||
       this.menuFullScreen) && (h("div", { class: {
         mask: true,
         open: this.modalOpen,
@@ -1704,6 +1685,12 @@ export class GlobalNav {
         "target": undefined,
         "capture": false,
         "passive": false
+      }, {
+        "name": "click",
+        "method": "menuClose",
+        "target": "body",
+        "capture": false,
+        "passive": false
       }];
   }
 }