@nanoporetech-digital/components 4.1.0 → 4.3.0

package/dist/collection/components/global-nav/assets/local-my-account.json

@@ -0,0 +1,341 @@
+{
+  "user": {
+    "id": "mr.test",
+    "uuid": "2589690E-A907-50BB-9551-55E18ABB1273",
+    "name": "Logged in user",
+    "first_name": "mr",
+    "last_name": "test",
+    "email": "mr.test@nanoporetech.com",
+    "job_title": "CEO",
+    "company": "ONT",
+    "small_avatar_url": "https://picsum.photos/75",
+    "is_nanopore_user": false,
+    "lifecycle_stage": "Lead",
+    "indirect_customer": false,
+    "registration": {
+      "next_url": null
+    }
+  },
+  "domains": [
+    {
+      "origin": "cws",
+      "domain": "nanoporetech.com"
+    },
+    {
+      "origin": "store",
+      "domain": "store.nanoporetech.com"
+    },
+    {
+      "origin": "community",
+      "domain": "community.nanoporetech.com"
+    }
+  ],
+  "cart": {
+    "count": 0,
+    "url": "https://shop-test.nanoporetech.com/checkout/cart"
+  },
+  "notifications": {
+    "count": 0
+  },
+  "links": [
+    {
+      "id": 1,
+      "area": "main",
+      "address": "#",
+      "title": "Trousers",
+      "order": 1,
+      "target": null
+    },
+    {
+      "id": 2,
+      "area": "logged-out",
+      "address": "#",
+      "title": "Mouse",
+      "order": 1,
+      "target": null
+    },
+    {
+      "id": 20,
+      "area": "profile-panel-block",
+      "address": "https://nanoporetech.com/about-us/news",
+      "title": "News",
+      "order": 3,
+      "target": ""
+    },
+    {
+      "id": 21,
+      "area": "profile-panel-block",
+      "address": "https://nanoporetech.com/about-us",
+      "title": "About",
+      "order": 3,
+      "target": ""
+    },
+    {
+      "id": 22,
+      "area": "profile-panel-block",
+      "address": "https://nanoporetech.com/contact",
+      "title": "Contact",
+      "order": 3,
+      "target": ""
+    },
+    {
+      "id": 28,
+      "area": "right-side-logged-out",
+      "address": "https://nanoporetech.com/contact",
+      "title": "Contact",
+      "order": 3,
+      "target": ""
+    },
+    {
+      "id": 29,
+      "area": "right-side-logged-out",
+      "address": "https://nanoporetech.com/about-us/news",
+      "title": "News",
+      "order": 3,
+      "target": ""
+    },
+    {
+      "id": 30,
+      "area": "right-side-logged-out",
+      "address": "https://nanoporetech.com/about-us",
+      "title": "About",
+      "order": 3,
+      "target": ""
+    },
+    {
+      "id": 9,
+      "area": "right-side-logged-in",
+      "address": "https://nanoporetech.com/contact",
+      "title": "Contact",
+      "order": 4,
+      "target": ""
+    },
+    {
+      "id": 10,
+      "area": "right-side-logged-in",
+      "address": "https://nanoporetech.com/about-us/news",
+      "title": "News",
+      "order": 4,
+      "target": ""
+    },
+    {
+      "id": 11,
+      "area": "right-side-logged-in",
+      "address": "https://nanoporetech.com/about-us",
+      "title": "About",
+      "order": 4,
+      "target": ""
+    },
+    {
+      "id": 12,
+      "area": "right-side-logged-in",
+      "address": "https://nanoporetech.com/events",
+      "title": "Events",
+      "order": 4,
+      "target": ""
+    },
+    {
+      "id": 23,
+      "area": "left-side-logged-out",
+      "address": "https://nanoporetech.com/",
+      "title": "Nanoporetech",
+      "order": 5,
+      "target": ""
+    },
+    {
+      "id": 24,
+      "area": "left-side-logged-out",
+      "address": "https://metrichor.com/",
+      "title": "Metrichor",
+      "order": 5,
+      "target": ""
+    },
+    {
+      "id": 25,
+      "area": "left-side-logged-out",
+      "address": "https://community.nanoporetech.com/",
+      "title": "Community",
+      "order": 5,
+      "target": ""
+    },
+    {
+      "id": 26,
+      "area": "left-side-logged-out",
+      "address": "https://nanoporetech.com/events",
+      "title": "Events",
+      "order": 5,
+      "target": ""
+    },
+    {
+      "id": 27,
+      "area": "left-side-logged-out",
+      "address": "https://store.nanoporetech.com",
+      "title": "Store",
+      "order": 5,
+      "target": ""
+    },
+    {
+      "id": 3,
+      "area": "left-side-logged-in",
+      "address": "https://nanoporetech.com/",
+      "title": "Nanoporetech",
+      "order": 6,
+      "target": ""
+    },
+    {
+      "id": 4,
+      "area": "left-side-logged-in",
+      "address": "https://metrichor.com/",
+      "title": "Metrichor",
+      "order": 6,
+      "target": ""
+    },
+    {
+      "id": 5,
+      "area": "left-side-logged-in",
+      "address": "https://community.nanoporetech.com/",
+      "title": "Community",
+      "order": 6,
+      "target": ""
+    },
+    {
+      "id": 6,
+      "area": "left-side-logged-in",
+      "address": "https://nanoporetech.com/events",
+      "title": "Events",
+      "order": 6,
+      "target": ""
+    },
+    {
+      "id": 7,
+      "area": "left-side-logged-in",
+      "address": "https://store.nanoporetech.com",
+      "title": "Store",
+      "order": 6,
+      "target": ""
+    },
+    {
+      "id": 8,
+      "area": "left-side-logged-in",
+      "address": "https://epi2me.nanoporetech.com",
+      "title": "EPI2ME",
+      "order": 6,
+      "target": "_blank"
+    },
+    {
+      "id": 13,
+      "area": "profile-panel-list",
+      "address": "https://community.nanoporetech.com/",
+      "title": "Community Dashboard",
+      "order": 7,
+      "target": ""
+    },
+    {
+      "id": 14,
+      "area": "profile-panel-list",
+      "address": "https://myaccount.nanoporetech.com/message_centre",
+      "title": "Messages",
+      "order": 7,
+      "target": ""
+    },
+    {
+      "id": 15,
+      "area": "profile-panel-list",
+      "address": "https://community.nanoporetech.com/my-activity",
+      "title": "My Activity",
+      "order": 7,
+      "target": ""
+    },
+    {
+      "id": 16,
+      "area": "profile-panel-list",
+      "address": "https://myaccount.nanoporetech.com/home",
+      "title": "My Account",
+      "order": 7,
+      "target": ""
+    },
+    {
+      "id": 17,
+      "area": "profile-panel-list",
+      "address": "https://myaccount.nanoporetech.com/account/teams",
+      "title": "Team Management ",
+      "order": 7,
+      "target": ""
+    },
+    {
+      "id": 18,
+      "area": "profile-panel-list",
+      "address": "https://nanoporetech.com/resource-centre/publications",
+      "title": "Publications",
+      "order": 7,
+      "target": ""
+    },
+    {
+      "id": 19,
+      "area": "profile-panel-list",
+      "address": "https://myaccount.nanoporetech.com/profile/status",
+      "title": "Preferences",
+      "order": 7,
+      "target": ""
+    }
+  ],
+  "urls": {
+    "forgot_password": "https://myaccount-dev.nanoporetech.com/profile/details#password-form?RelayState=",
+    "logout": "https://myaccount-dev.nanoporetech.com/sso/logout?RelayState=",
+    "login": null,
+    "messages": "https://myaccount-dev.nanoporetech.com/message_centre",
+    "cart": "https://shop-test.nanoporetech.com/checkout/cart"
+  },
+  "search": {
+    "app_id": "N8NZI5A47F",
+    "api_key": "b38860b015b02c9cb6993cf0367ed203",
+    "indeces": [
+      {
+        "index": "all_prod_en",
+        "name": "All",
+        "domain": "nanoporetech.com",
+        "all_group": true,
+        "filters": [
+          "tags",
+          "type"
+        ]
+      },
+      {
+        "index": "cws_english_en",
+        "name": "www",
+        "domain": "nanoporetech.com",
+        "filters": [
+          "tags",
+          "type"
+        ]
+      },
+      {
+        "index": "store_prod",
+        "name": "Store",
+        "domain": "store.nanoporetech.com",
+        "filters": [
+          "type"
+        ]
+      },
+      {
+        "index": "cws_english_resources_en",
+        "name": "Resources",
+        "domain": "nanoporetech.com",
+        "filters": [
+          "tags"
+        ]
+      },
+      {
+        "index": "community_prod",
+        "name": "Community",
+        "domain": "community.nanoporetech.com",
+        "filters": [
+          "type",
+          "channel",
+          "authors",
+          "tags"
+        ]
+      }
+    ]
+  }
+}

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

@@ -30,6 +30,13 @@ const THRESHOLDBREAKS = {
  * @slot promotion - a free area for any promotional content, displayed within the overflow menu panel
  * @slot logo - when show-logo="false" you can utilise the logo slot
  * @slot - if using search functionality, place a `<nano-search-results />` element in the default slot
+ *
+ * @part burger - the overflow / burger menu
+ * @part burger-actions-bar - the top bar of the overflow / burger menu
+ * @part burger-content - the main content area of the overflow / burger menu
+ * @part main-bar - the main nav menu bar
+ * @part logo-link - the link wrapping the logo
+ * @part search-bar - the search bar that appears under the main nav menu bar
  */
 export class GlobalNav {
   constructor() {
@@ -436,6 +443,18 @@ export class GlobalNav {
     this.showAutocomplete = false;
     return;
   }
+  /**
+   * Manually open or close the overflow (burger) menu
+   * @param openClose - optionally force open (true) or close (false)
+   */
+  async toggleOverflowMenu(openClose) {
+    if (openClose === true || (openClose === undefined && !this.modalIsOpen)) {
+      this.menuOpen();
+    }
+    else {
+      this.menuClose(null, true);
+    }
+  }
   async getMyAccData() {
     if (!!this.myAccData)
       return;
@@ -471,7 +490,7 @@ export class GlobalNav {
     const config = { timeout: 5000 };
     try {
       if (this.env === 'local') {
-        this.myAccData = (await import(`./local-my-account.json`));
+        this.myAccData = (await import(`./assets/local-my-account.json`));
       }
       else {
         this.myAccData = await clientFetch(url + 'nav_bar_data.json', config);
@@ -883,7 +902,7 @@ export class GlobalNav {
         'has-promotion': this.hasPromotionSlot,
         'menu-full-screen': this.menuFullScreen,
         'secondary-open': !!this.secondaryMenuOpen,
-      }, "aria-expanded": this.modalOpen ? 'true' : 'false', ref: (div) => (this.menuDiv = div) }, h("div", { class: "gn-menu_wrap", ref: (div) => (this.menuWrapDiv = div), tabindex: "-1" }, h("div", { class: "gn-menu_actions" }, h("button", { class: "menu-btn icon-btn icon-btn", onMouseDown: this.onMenuBtnClick, onKeyDown: this.onMenuBtnKeyDown }, this.threshold < this.THRESHOLDLIMIT - 3 && (h("nano-icon", { name: "light/times", "aria-label": "close menu" })), this.threshold >= this.THRESHOLDLIMIT - 3 && (h("nano-icon", { name: "light/bars", "aria-label": "close menu" }))), this.threshold <
+      }, "aria-expanded": this.modalOpen ? 'true' : 'false', ref: (div) => (this.menuDiv = div), part: "burger" }, h("div", { class: "gn-menu_wrap", ref: (div) => (this.menuWrapDiv = div), tabindex: "-1" }, h("div", { class: "gn-menu_actions", part: "burger-actions-bar" }, h("button", { class: "menu-btn icon-btn icon-btn", onMouseDown: this.onMenuBtnClick, onKeyDown: this.onMenuBtnKeyDown }, this.threshold < this.THRESHOLDLIMIT - 3 && (h("nano-icon", { name: "light/times", "aria-label": "close menu" })), this.threshold >= this.THRESHOLDLIMIT - 3 && (h("nano-icon", { name: "light/bars", "aria-label": "close menu" }))), this.threshold <
       this.THRESHOLDLIMIT - THRESHOLDBREAKS.icon && [
       !!this.iconSlotLen && h("slot", { name: "icon" }),
       this.myAccData &&
@@ -892,7 +911,7 @@ 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", onSlotchange: this.assessSlottedContent }), 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", part: "burger-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", onSlotchange: this.assessSlottedContent }))), (((!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
       this.hasSiteSlot) ||
@@ -913,7 +932,7 @@ export class GlobalNav {
       (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", 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.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", { part: "main-bar", 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 ||
@@ -932,7 +951,7 @@ 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", onSlotchange: this.assessSlottedContent }))), h("div", { class: "nav-links nav-links--main" }, h("slot", { name: "main", onSlotchange: this.assessSlottedContent })), 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", part: "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
@@ -978,7 +997,7 @@ export class GlobalNav {
         this.THRESHOLDLIMIT - THRESHOLDBREAKS.search) && (h("div", { id: "global-nav-search-bar", class: {
         '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) &&
+      }, "aria-expanded": this.searchBarShown ? 'true' : 'false', role: "region", tabindex: "-1", ref: (div) => (this.searchBarEl = div), part: "search-bar" }, h("div", { class: "search-widget" }, this.showSearch && !!this.internalSearchIndeces.length && (h("div", null, searchWidget)), (!this.showSearch || !this.myAccData) &&
       !!this.searchSlotLen && (h("slot", { name: "search", onSlotchange: this.assessSlottedContent }))))))), (this.threshold < this.THRESHOLDLIMIT - 3 ||
       this.menuFullScreen) && (h("div", { class: {
         mask: true,
@@ -1078,6 +1097,7 @@ export class GlobalNav {
       "$": ["./style/global-nav.css"]
     };
   }
+  static get assetsDirs() { return ["assets"]; }
   static get properties() {
     return {
       "env": {
@@ -1593,6 +1613,31 @@ export class GlobalNav {
           "text": "Submit the search form (a search value must be present)",
           "tags": []
         }
+      },
+      "toggleOverflowMenu": {
+        "complexType": {
+          "signature": "(openClose?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "openClose - optionally force open (true) or close (false)"
+                }],
+              "text": "- optionally force open (true) or close (false)"
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Manually open or close the overflow (burger) menu",
+          "tags": [{
+              "name": "param",
+              "text": "openClose - optionally force open (true) or close (false)"
+            }]
+        }
       }
     };
   }