@nanoporetech-digital/components 3.7.0 → 3.8.0

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

@@ -406,6 +406,7 @@ export class GlobalNav {
     this.searchValInternal = '';
     this.env = 'prod';
     this.ssoDataUrl = undefined;
+    this.myAccountData = undefined;
     this.ssoRedirect = encodeURIComponent(window.location.href);
     this.getMyAccountData = true;
     this.activeMyAccountSections = null;
@@ -423,6 +424,20 @@ export class GlobalNav {
     this.cartUrl = null;
     this.msgUrl = null;
   }
+  handleMyAccountData() {
+    if (!this.myAccountData)
+      return;
+    if (!this.myAccountData.user || !this.myAccountData.links)
+      return;
+    this.myAccData = this.myAccountData;
+    if (this.myAccData.user.id) {
+      this.isLoggedIn = true;
+      this.myAccountUser = this.myAccData.user;
+    }
+    this.processMyAccLinks();
+    this.processMyAccData();
+    this.remoteDataReady = true;
+  }
   /**
    * Submit the search form (a search value must be present)
    */
@@ -432,6 +447,8 @@ export class GlobalNav {
     return;
   }
   async getMyAccData() {
+    if (!!this.myAccData)
+      return;
     switch (this.env) {
       case 'prod':
         this.userProfileUrl = 'https://community.nanoporetech.com/profile/me';
@@ -486,6 +503,8 @@ export class GlobalNav {
     if (!this.internalSearchIndeces.length) {
       return;
     }
+    if (!this.searchIndex)
+      return this.internalSearchIndeces[0];
     const foundIndex = this.internalSearchIndeces.find((index) => index.index === this.searchIndex);
     if (!foundIndex) {
       this.currentIndex = this.internalSearchIndeces[0];
@@ -543,7 +562,11 @@ 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.
-      this.siteContent.style.minHeight = `calc(100% - ${this.barsDiv.clientHeight + 1}px)`;
+      // if (this.siteContent) {
+      //   this.siteContent.style.minHeight = `calc(100% - ${
+      //     this.barsDiv.clientHeight + 1
+      //   }px)`;
+      // }
       let menuItems, barItems;
       readTask(() => {
         menuItems = [
@@ -787,7 +810,8 @@ export class GlobalNav {
     if (Build.isBrowser)
       window.removeEventListener('resize', this.debounceResize);
   }
-  async connectedCallback() {
+  connectedCallback() {
+    this.handleMyAccountData();
     this.getMyAccData();
   }
   // Render output
@@ -840,12 +864,12 @@ export class GlobalNav {
     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: "light/chevron-down", class: "select-input__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 Nanopore", 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]
+      }), h("nano-icon", { name: "light/chevron-down", class: "select-input__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 Nanopore", 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.searchValue.length && !this.searchLoading,
+          'search-icon--show': !!this.searchValue && !this.searchLoading,
         }, slot: "end", onMouseDown: (e) => {
           this.searchValInternal = this.searchInput.value;
           this.onSearchSubmit(e, true);
@@ -857,6 +881,7 @@ export class GlobalNav {
     ];
   }
   render() {
+    var _a, _b;
     this.autocompleteEles = [];
     const isRtl = this.el.ownerDocument.dir === 'rtl';
     const searchWidget = this.searchWidget();
@@ -890,22 +915,7 @@ export class GlobalNav {
       this.THRESHOLDLIMIT - THRESHOLDBREAKS.main &&
       !!this.mainSlotLen && h("slot", { name: "main" })), (((!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
       this.hasSiteSlot) ||
-      !!this.siteNavItms.length) && (h("div", null, (!!this.aboutSlotLen || !!this.aboutNavItms.length) && [
-      // About Menu as an open list (before more items are added to burger)`
-      (this.threshold >=
-        this.THRESHOLDLIMIT - (THRESHOLDBREAKS.about + 1) ||
-        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)));
-      })))),
-      // About Menu as hidden list (when more items are added to burger)
-      ((this.threshold <
-        this.THRESHOLDLIMIT - (THRESHOLDBREAKS.about + 1) &&
-        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.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) => {
@@ -919,10 +929,10 @@ export class GlobalNav {
     ]))), 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), !!this.myAccountUser?.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" }), 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), role: !!this.mainSlotLen &&
+        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.threshold >= this.THRESHOLDLIMIT - THRESHOLDBREAKS.main
         ? 'menu'
         : undefined }, (this.hasPromotionSlot ||
@@ -978,7 +988,7 @@ export class GlobalNav {
           '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) }, !!this.myAccountUser?.small_avatar_url && (h("nano-global-nav-user-profile", { myAccountUser: this.myAccountUser, userProfileUrl: this.userProfileUrl })), h("div", { class: "user-links-panel-content" }, this.loggedInNavItms.map((link) => {
+        }, 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) }, !!((_b = this.myAccountUser) === null || _b === void 0 ? void 0 : _b.small_avatar_url) && (h("nano-global-nav-user-profile", { myAccountUser: this.myAccountUser, userProfileUrl: this.userProfileUrl })), 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"))))),
@@ -988,11 +998,11 @@ 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" })))))), h("div", { class: "sticker-trigger" }), (this.threshold < this.THRESHOLDLIMIT - 3 ||
+      !!this.searchSlotLen && h("slot", { name: "search" })))))), (this.threshold < this.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))));
+      }, onClick: this.menuClose, onTouchEnd: this.menuClose }))), h("div", { class: "site-content" }, h("slot", null))));
   }
   // Data processing
   domainFor(origin) {
@@ -1129,6 +1139,28 @@ export class GlobalNav {
         "attribute": "sso-data-url",
         "reflect": false
       },
+      "myAccountData": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "MyAccountData | null",
+          "resolved": "MyAccountData",
+          "references": {
+            "MyAccountData": {
+              "location": "import",
+              "path": "../../interface"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "An alternative to both 'env' and 'ssoDataUrl'.\nYou can directly provide a JSON object of myaccount data.\n(e.g. https://myaccount.nanoporetech.com/nav_bar_data.json)\nThis is useful for SSR"
+        },
+        "getter": false,
+        "setter": false
+      },
       "ssoRedirect": {
         "type": "string",
         "mutable": false,
@@ -1346,7 +1378,7 @@ export class GlobalNav {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "A search value to passed to Algolia to programatically get or to preload search results"
+          "text": "A search value to passed to Algolia to programmatically get or to preload search results"
         },
         "getter": false,
         "setter": false,
@@ -1366,7 +1398,7 @@ export class GlobalNav {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Algolia search index to programatically set or to set an initial index"
+          "text": "Algolia search index to programmatically set or to set an initial index"
         },
         "getter": false,
         "setter": false,
@@ -1587,6 +1619,9 @@ export class GlobalNav {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
+        "propName": "myAccountData",
+        "methodName": "handleMyAccountData"
+      }, {
         "propName": "env",
         "methodName": "getMyAccData"
       }, {