@nanoporetech-digital/components 3.13.0 → 3.14.0

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const nanoTable_entry = require('./nano-table-60c06885.js');
+const nanoTable_entry = require('./nano-table-9044710f.js');
 require('./index-46286eea.js');
 require('./math-a8123703.js');
 require('./throttle-f55496c8.js');

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const nanoTable_entry = require('./nano-table-60c06885.js');
+const nanoTable_entry = require('./nano-table-9044710f.js');
 require('./index-46286eea.js');
 require('./math-a8123703.js');
 require('./throttle-f55496c8.js');
@@ -22,4 +22,4 @@ exports.workerMsgId = workerMsgId;
 exports.workerName = workerName;
 exports.workerPath = workerPath;
 
-//# sourceMappingURL=table.worker-f902766e.js.map
+//# sourceMappingURL=table.worker-8ad26746.js.map

package/dist/cjs/table.worker-8ad26746.js.map

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

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.js

@@ -378,6 +378,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 +442,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 +582,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 = [
@@ -738,25 +753,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 +784,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 +899,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 +939,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 +966,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 +986,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,