@nanoporetech-digital/components 3.14.0 → 4.1.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-9044710f.js');
-require('./index-46286eea.js');
+const nanoTable_entry = require('./nano-table-c5b6630a.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":";;;;;;;AAEA,MAAM,KAAK,GAAG,IAAI,GAAG,EAAE,CAAC;AAExB;;;;SAIgB,iBAAiB,CAAC,SAAsB;EACtD,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;EACrB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;AAClD,CAAC;AAED;;;SAGgB,mBAAmB,CAAC,SAAsB;EACxD,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;EAExB,IAAI,KAAK,CAAC,IAAI,KAAK,CAAC,EAAE;IACpB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;GACpD;AACH,CAAC;AAED,SAAS,QAAQ,CACf,OAAoB,EACpB,SAAiB,EACjB,WAAoB,KAAK;EAEzB,IAAI,CAAC,QAAQ,EAAE;IACb,IAAI;MACF,OAAO,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;KAC3D;IAAC,OAAO,CAAC,EAAE;MACV,OAAO,CAAC,UAAU,GAAG,SAAS,CAAC;KAChC;IACD,OAAO;GACR;EACD,IAAI;IACF,OAAO,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;GAC1D;EAAC,OAAO,CAAC,EAAE;IACV,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC;GAC/B;AACH,CAAC;AAED;;;SAGgB,cAAc,CAC5B,OAAoB,EACpB,SAAsB,EACtB,YAAgD,UAAU,EAC1D,WAA+B,OAAO;EAEtC,MAAM,MAAM,GAAGA,aAAS,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;EAC7C,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,GAAG,SAAS,CAAC,SAAS,CAAC;EACnD,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,GAAG,SAAS,CAAC,UAAU,CAAC;EACtD,MAAM,IAAI,GAAG,SAAS,CAAC,UAAU,CAAC;EAClC,MAAM,IAAI,GAAG,SAAS,CAAC,UAAU,GAAG,SAAS,CAAC,WAAW,CAAC;EAC1D,MAAM,IAAI,GAAG,SAAS,CAAC,SAAS,CAAC;EACjC,MAAM,IAAI,GAAG,SAAS,CAAC,SAAS,GAAG,SAAS,CAAC,YAAY,CAAC;EAE1D,IAAI,SAAS,KAAK,YAAY,IAAI,SAAS,KAAK,MAAM,EAAE;IACtD,IAAI,QAAQ,KAAK,OAAO,EAAE;MACxB,IAAI,UAAU,GAAG,IAAI;QAAE,QAAQ,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;WAClD,IAAI,UAAU,GAAG,OAAO,CAAC,WAAW,GAAG,IAAI;QAC9C,QAAQ,CACN,SAAS,EACT,UAAU,GAAG,SAAS,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,CACzD,CAAC;KACL;SAAM;MACL,QAAQ,CACN,SAAS,EACT,SAAS,CAAC,UAAU;QAClB,MAAM,CAAC,IAAI;SACV,SAAS,CAAC,WAAW,GAAG,CAAC,GAAG,OAAO,CAAC,WAAW,GAAG,CAAC,CAAC,CACxD,CAAC;KACH;GACF;EAED,IAAI,SAAS,KAAK,UAAU,IAAI,SAAS,KAAK,MAAM,EAAE;IACpD,IAAI,QAAQ,KAAK,OAAO,EAAE;MACxB,IAAI,SAAS,GAAG,IAAI;QAAE,QAAQ,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;WACtD,IAAI,SAAS,GAAG,OAAO,CAAC,YAAY,GAAG,IAAI,EAAE;QAChD,QAAQ,CACN,SAAS,EACT,SAAS,GAAG,SAAS,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,EACzD,IAAI,CACL,CAAC;OACH;KACF;SAAM;MACL,QAAQ,CACN,SAAS,EACT,SAAS,CAAC,SAAS;QACjB,MAAM,CAAC,GAAG;SACT,SAAS,CAAC,YAAY,GAAG,CAAC,GAAG,OAAO,CAAC,YAAY,GAAG,CAAC,CAAC,EACzD,IAAI,CACL,CAAC;KACH;GACF;AACH;;;;;;","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-8ad26746.js → table.worker-0876611d.js}

@@ -3,11 +3,11 @@
  */
 'use strict';
 
-const nanoTable_entry = require('./nano-table-9044710f.js');
-require('./index-46286eea.js');
+const nanoTable_entry = require('./nano-table-c5b6630a.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-8ad26746.js.map
+//# sourceMappingURL=table.worker-0876611d.js.map

package/dist/cjs/table.worker-0876611d.js.map

@@ -0,0 +1 @@
+{"file":"table.worker-0876611d.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/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;
@@ -700,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) {
@@ -1692,6 +1685,12 @@ export class GlobalNav {
         "target": undefined,
         "capture": false,
         "passive": false
+      }, {
+        "name": "click",
+        "method": "menuClose",
+        "target": "body",
+        "capture": false,
+        "passive": false
       }];
   }
 }