@nanoporetech-digital/components 3.12.2 → 3.14.0

package/dist/cjs/nano-global-nav.cjs.entry.js

@@ -409,6 +409,25 @@ const GlobalNav = class {
           break;
       }
     };
+    // Various.
+    /**
+     * Assesses what content is present in which slots
+     */
+    this.assessSlottedContent = () => {
+      index.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;
@@ -454,6 +473,7 @@ const GlobalNav = class {
     this.msgCount = 0;
     this.cartUrl = null;
     this.msgUrl = null;
+    this.assessSlottedContent = throttle.debounce(this.assessSlottedContent.bind(this), 10);
   }
   handleMyAccountData() {
     if (!this.myAccountData)
@@ -593,11 +613,6 @@ const GlobalNav = class {
       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;
       index.readTask(() => {
         menuItems = [
@@ -768,25 +783,6 @@ const GlobalNav = class {
     autocompleteEle.focus({ preventScroll: true });
     autocompleteEle.setAttribute('aria-selected', 'true');
   }
-  // Various.
-  /**
-   * Assesses what content is present in which slots
-   */
-  assessSlottedContent() {
-    index.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
    */
@@ -817,13 +813,6 @@ const GlobalNav = class {
   }
   componentWillLoad() {
     componentStore.ComponentStore.init(this, ['searchIndex', 'searchValue'], 'url-hash', 'gns');
-    if (typeof window !== 'undefined' &&
-      window.MutationObserver) {
-      const mo = (this.mo = new MutationObserver(() => {
-        this.assessSlottedContent();
-      }));
-      mo.observe(this.el, { childList: true, subtree: false });
-    }
     this.assessSlottedContent();
   }
   disconnectedCallback() {
@@ -938,28 +927,28 @@ const GlobalNav = class {
         this.msgUrl && (index.h("a", { href: this.msgUrl, class: "icon-btn" }, index.h("nano-icon", { name: "light/bell" }), this.msgCount > 0 && (index.h("span", { class: "gn-menu_actions-counter" }, this.msgCount)))),
         this.cartUrl && (index.h("a", { href: this.cartUrl, class: "icon-btn" }, index.h("nano-icon", { name: "light/shopping-cart" }), this.cartCount > 0 && (index.h("span", { class: "gn-menu_actions-counter" }, this.cartCount)))),
       ],
-    ], this.myAccData && this.myAccData.urls.login && (index.h("a", { href: this.myAccData.urls.login + this.ssoRedirect, class: "login-btn" }, "Login / Register", ' ', index.h("nano-icon", { name: "solid/chevron-right" })))), index.h("div", { class: "content-wrap", ref: (div) => (this.menuContentDiv = div) }, index.h("div", { class: "content" }, index.h("nav", { class: "nav-links nav-links--main", role: "menu" }, index.h("slot", { name: "overflow" }), this.threshold <
+    ], this.myAccData && this.myAccData.urls.login && (index.h("a", { href: this.myAccData.urls.login + this.ssoRedirect, class: "login-btn" }, "Login / Register", ' ', index.h("nano-icon", { name: "solid/chevron-right" })))), index.h("div", { class: "content-wrap", ref: (div) => (this.menuContentDiv = div) }, index.h("div", { class: "content" }, index.h("nav", { class: "nav-links nav-links--main", role: "menu" }, index.h("slot", { name: "overflow", onSlotchange: this.assessSlottedContent }), this.threshold <
       this.THRESHOLDLIMIT - THRESHOLDBREAKS.main &&
-      !!this.mainSlotLen && index.h("slot", { name: "main" })), (((!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
+      !!this.mainSlotLen && (index.h("slot", { name: "main", onSlotchange: this.assessSlottedContent }))), (((!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
       this.hasSiteSlot) ||
       !!this.siteNavItms.length) && (index.h("div", null, (this.hasSiteSlot || !!this.siteNavItms.length) && [
       (this.threshold >= this.THRESHOLDLIMIT - 2 ||
         this.mainSlotLen < 2) &&
-        this.overflowSlotLen < 2 && (index.h("div", { class: "nav-links-wrap" }, index.h("h4", { class: "nav-links_title nav-links_title--sites" }, "Sites"), index.h("nav", { class: "nav-links nav-links--sub nav-links--sites", "aria-label": "Different company site links" }, index.h("slot", { name: "site" }), this.siteNavItms.map((link) => {
+        this.overflowSlotLen < 2 && (index.h("div", { class: "nav-links-wrap" }, index.h("h4", { class: "nav-links_title nav-links_title--sites" }, "Sites"), index.h("nav", { class: "nav-links nav-links--sub nav-links--sites", "aria-label": "Different company site links" }, index.h("slot", { name: "site", onSlotchange: this.assessSlottedContent }), this.siteNavItms.map((link) => {
         return (index.h("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, index.h("a", { href: link.address, target: link.target }, link.title)));
       })))),
       ((this.threshold < this.THRESHOLDLIMIT - 2 &&
         this.mainSlotLen >= 2) ||
-        this.overflowSlotLen >= 2) && (index.h("nav", { class: "nav-links", "aria-label": "Different company site links" }, index.h("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, "Sites", index.h("nano-icon", { slot: "icon-end", name: "solid/chevron-right" }), index.h("div", { slot: "secondary" }, index.h("div", { class: "content" }, index.h("button", { class: "back-btn", onClick: this.subMenuClose }, index.h("nano-icon", { slot: "icon-end", name: "solid/chevron-left", "aria-label": "go back" }), "Sites"), index.h("div", { class: "content--sub" }, index.h("slot", { name: "site" }), this.siteNavItms.map((link) => {
+        this.overflowSlotLen >= 2) && (index.h("nav", { class: "nav-links", "aria-label": "Different company site links" }, index.h("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, "Sites", index.h("nano-icon", { slot: "icon-end", name: "solid/chevron-right" }), index.h("div", { slot: "secondary" }, index.h("div", { class: "content" }, index.h("button", { class: "back-btn", onClick: this.subMenuClose }, index.h("nano-icon", { slot: "icon-end", name: "solid/chevron-left", "aria-label": "go back" }), "Sites"), index.h("div", { class: "content--sub" }, index.h("slot", { name: "site", onSlotchange: this.assessSlottedContent }), this.siteNavItms.map((link) => {
         return (index.h("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, index.h("a", { href: link.address, target: link.target }, link.title)));
       }))))))),
     ]))), this.isLoggedIn &&
       this.threshold <
         this.THRESHOLDLIMIT - THRESHOLDBREAKS.login &&
-      (this.loggedInNavItms.length || this.hasLoggedinSlot) && (index.h("nav", { class: "nav-links", "aria-label": "Your user account links" }, index.h("nano-nav-item", { class: "nano-global-nav user-nav nano-global-nav-menu" }, this.myAccountUser.name, index.h("nano-icon", { slot: "icon-end", name: "solid/chevron-right" }), index.h("div", { slot: "secondary" }, index.h("div", { class: "content" }, index.h("button", { class: "back-btn", onClick: this.subMenuClose }, index.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) && (index.h("nano-global-nav-user-profile", { myAccountUser: this.myAccountUser, userProfileUrl: this.userProfileUrl })), index.h("div", { class: "content--sub" }, index.h("slot", { name: "loggedin" }), this.loggedInNavItms.map((link) => {
+      (this.loggedInNavItms.length || this.hasLoggedinSlot) && (index.h("nav", { class: "nav-links", "aria-label": "Your user account links" }, index.h("nano-nav-item", { class: "nano-global-nav user-nav nano-global-nav-menu" }, this.myAccountUser.name, index.h("nano-icon", { slot: "icon-end", name: "solid/chevron-right" }), index.h("div", { slot: "secondary" }, index.h("div", { class: "content" }, index.h("button", { class: "back-btn", onClick: this.subMenuClose }, index.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) && (index.h("nano-global-nav-user-profile", { myAccountUser: this.myAccountUser, userProfileUrl: this.userProfileUrl })), index.h("div", { class: "content--sub" }, index.h("slot", { name: "loggedin", onSlotchange: this.assessSlottedContent }), this.loggedInNavItms.map((link) => {
       return (index.h("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, index.h("a", { href: link.address, target: link.target }, link.title)));
     }), index.h("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, index.h("a", { href: this.myAccData.urls.forgot_password +
-        this.ssoRedirect }, "Change Password")))))))), index.h("slot", { name: "promotion" }), this.myAccData && this.myAccData.urls.logout && (index.h("div", { class: "login-btn logout-btn" }, index.h("a", { href: this.myAccData.urls.logout + this.ssoRedirect }, "Logout")))))), index.h("div", { class: "sticker-trigger" }), index.h("nano-sticker", { "auto-resize": "false", "break-point-max": "800", quietMode: { h: 600, w: 800 } }, index.h("div", { class: "bars" }, index.h("nav", { class: "main-bar", "aria-label": "Main site navigation", tabindex: "-1", ref: (div) => (this.mainBarDiv = div), role: !!this.mainSlotLen &&
+        this.ssoRedirect }, "Change Password")))))))), index.h("slot", { name: "promotion", onSlotchange: this.assessSlottedContent }), this.myAccData && this.myAccData.urls.logout && (index.h("div", { class: "login-btn logout-btn" }, index.h("a", { href: this.myAccData.urls.logout + this.ssoRedirect }, "Logout")))))), index.h("div", { class: "sticker-trigger" }), index.h("nano-sticker", { "auto-resize": "false", "break-point-max": "800", quietMode: { h: 600, w: 800 } }, index.h("div", { class: "bars" }, index.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 ||
@@ -978,14 +967,14 @@ const GlobalNav = class {
         this.threshold <
           this.THRESHOLDLIMIT - THRESHOLDBREAKS.about) ||
       this.hasSiteSlot ||
-      !!this.siteNavItms.length) && (index.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) }, index.h("nano-icon", { name: "light/bars", "aria-label": "open menu" }))), this.showLogo && (index.h("a", { href: this.logoUrl, class: "logo-link" }, index.h("img", { src: index.getAssetPath(`../nano-assets/ont-logo.svg`), alt: "Oxford Nanopore Technologies Logo", class: "logo" }))), !this.showLogo && (index.h("div", { class: "logo-link" }, index.h("slot", { name: "logo" }))), index.h("div", { class: "nav-links nav-links--main" }, index.h("slot", { name: "main" })), this.mainSlotLen === 0 &&
+      !!this.siteNavItms.length) && (index.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) }, index.h("nano-icon", { name: "light/bars", "aria-label": "open menu" }))), this.showLogo && (index.h("a", { href: this.logoUrl, class: "logo-link" }, index.h("img", { src: index.getAssetPath(`../nano-assets/ont-logo.svg`), alt: "Oxford Nanopore Technologies Logo", class: "logo" }))), !this.showLogo && (index.h("div", { class: "logo-link" }, index.h("slot", { name: "logo", onSlotchange: this.assessSlottedContent }))), index.h("div", { class: "nav-links nav-links--main" }, index.h("slot", { name: "main", onSlotchange: this.assessSlottedContent })), this.mainSlotLen === 0 &&
       this.threshold >=
         this.THRESHOLDLIMIT - THRESHOLDBREAKS.search && [
       this.showSearch && !!this.internalSearchIndeces.length && (index.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 && index.h("slot", { name: "search" }),
+        !!this.searchSlotLen && (index.h("slot", { name: "search", onSlotchange: this.assessSlottedContent })),
     ], (this.mainSlotLen > 0 ||
       this.threshold <
         this.THRESHOLDLIMIT - THRESHOLDBREAKS.search) &&
@@ -1005,7 +994,7 @@ const GlobalNav = class {
       ],
     ], (!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
       this.threshold >=
-        this.THRESHOLDLIMIT - THRESHOLDBREAKS.about && (index.h("nav", { class: "nav-links nav-links--sub", "aria-label": "About the company. Links", role: "menu" }, index.h("slot", { name: "about" }), !!this.aboutNavItms.length && (index.h("nano-nav-item", { class: "nano-global-nav nano-global-nav-bar" }, index.h("a", { href: this.aboutNavItms[0].address, target: this.aboutNavItms[0].target }, this.aboutNavItms[0].title))))), this.myAccData &&
+        this.THRESHOLDLIMIT - THRESHOLDBREAKS.about && (index.h("nav", { class: "nav-links nav-links--sub", "aria-label": "About the company. Links", role: "menu" }, index.h("slot", { name: "about", onSlotchange: this.assessSlottedContent }), !!this.aboutNavItms.length && (index.h("nano-nav-item", { class: "nano-global-nav nano-global-nav-bar" }, index.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 >=
@@ -1025,7 +1014,7 @@ const GlobalNav = class {
         'search-bar': true,
         show: this.searchBarShown,
       }, "aria-expanded": this.searchBarShown ? 'true' : 'false', role: "region", tabindex: "-1", ref: (div) => (this.searchBarEl = div) }, index.h("div", { class: "search-widget" }, this.showSearch && !!this.internalSearchIndeces.length && (index.h("div", null, searchWidget)), (!this.showSearch || !this.myAccData) &&
-      !!this.searchSlotLen && index.h("slot", { name: "search" })))))), (this.threshold < this.THRESHOLDLIMIT - 3 ||
+      !!this.searchSlotLen && (index.h("slot", { name: "search", onSlotchange: this.assessSlottedContent }))))))), (this.threshold < this.THRESHOLDLIMIT - 3 ||
       this.menuFullScreen) && (index.h("div", { class: {
         mask: true,
         open: this.modalOpen,