@nanoporetech-digital/components 2.2.1 → 2.3.0

package/dist/collection/components/algolia/algolia.js

@@ -738,7 +738,7 @@ export class Algolia {
         "references": {
           "SearchIndex": {
             "location": "import",
-            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -982,7 +982,7 @@ export class Algolia {
         "references": {
           "StorageMethods": {
             "location": "import",
-            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
+            "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
           }
         }
       },
@@ -1047,7 +1047,7 @@ export class Algolia {
         "references": {
           "IndexResult": {
             "location": "import",
-            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1067,7 +1067,7 @@ export class Algolia {
         "references": {
           "IndexResult": {
             "location": "import",
-            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1087,7 +1087,7 @@ export class Algolia {
         "references": {
           "IndexResult": {
             "location": "import",
-            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1107,7 +1107,7 @@ export class Algolia {
         "references": {
           "IndexResult": {
             "location": "import",
-            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }

package/dist/collection/components/checkbox/checkbox-group.js

@@ -370,7 +370,7 @@ export class CheckboxGroup {
         "references": {
           "ControlValidityEventDetail": {
             "location": "import",
-            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -392,7 +392,7 @@ export class CheckboxGroup {
           },
           "ControlValidity": {
             "location": "import",
-            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         },
         "return": "Promise<ControlValidity>"

package/dist/collection/components/checkbox/checkbox.js

@@ -405,7 +405,7 @@ export class Checkbox {
         "references": {
           "Color": {
             "location": "import",
-            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -441,7 +441,7 @@ export class Checkbox {
         "references": {
           "CheckboxChangeEventDetail": {
             "location": "import",
-            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -512,7 +512,7 @@ export class Checkbox {
           },
           "ControlValidity": {
             "location": "import",
-            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         },
         "return": "Promise<ControlValidity>"

package/dist/collection/components/datalist/datalist.js

@@ -549,7 +549,7 @@ export class DataList {
         "references": {
           "OptionInterface": {
             "location": "import",
-            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },

package/dist/collection/components/date-input/date-input.js

@@ -393,7 +393,7 @@ export class DateInput {
         "references": {
           "LocalDateOpts": {
             "location": "import",
-            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -514,7 +514,7 @@ export class DateInput {
         "references": {
           "DaysOfWeek": {
             "location": "import",
-            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/utils/date-utils.ts"
+            "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/utils/date-utils.ts"
           }
         }
       },
@@ -538,7 +538,7 @@ export class DateInput {
         "references": {
           "DuetLocalizedText": {
             "location": "import",
-            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -580,7 +580,7 @@ export class DateInput {
         "references": {
           "Color": {
             "location": "import",
-            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -932,7 +932,7 @@ export class DateInput {
         "references": {
           "DateInputChangeEventDetail": {
             "location": "import",
-            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -955,7 +955,7 @@ export class DateInput {
         "references": {
           "ControlValidityEventDetail": {
             "location": "import",
-            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -977,7 +977,7 @@ export class DateInput {
           },
           "ControlValidity": {
             "location": "import",
-            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         },
         "return": "Promise<ControlValidity>"

package/dist/collection/components/date-picker/date-picker.js

@@ -370,7 +370,7 @@ export class DatePicker {
         "references": {
           "DaysOfWeek": {
             "location": "import",
-            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/utils/date-utils.ts"
+            "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/utils/date-utils.ts"
           }
         }
       },
@@ -395,7 +395,7 @@ export class DatePicker {
         "references": {
           "DuetLocalizedText": {
             "location": "import",
-            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -418,7 +418,7 @@ export class DatePicker {
         "references": {
           "Color": {
             "location": "import",
-            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -442,7 +442,7 @@ export class DatePicker {
         "references": {
           "DateDisabledPredicate": {
             "location": "import",
-            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -521,7 +521,7 @@ export class DatePicker {
         "references": {
           "PickerChangeEvent": {
             "location": "import",
-            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }

package/dist/collection/components/details/details.js

@@ -234,7 +234,7 @@ export class Details {
         "references": {
           "Color": {
             "location": "import",
-            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },

package/dist/collection/components/dialog/dialog.js

@@ -336,7 +336,7 @@ export class Dialog {
         "references": {
           "StorageMethods": {
             "location": "import",
-            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
+            "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
           }
         }
       },

package/dist/collection/components/file-upload/file-upload.js

@@ -655,7 +655,7 @@ export class FileUpload {
         "references": {
           "FileWithUrl": {
             "location": "import",
-            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -713,7 +713,7 @@ export class FileUpload {
         "references": {
           "FileInputChangeEventDetail": {
             "location": "import",
-            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -766,7 +766,7 @@ export class FileUpload {
         "references": {
           "ControlValidityEventDetail": {
             "location": "import",
-            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -788,7 +788,7 @@ export class FileUpload {
           },
           "ControlValidity": {
             "location": "import",
-            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         },
         "return": "Promise<ControlValidity>"

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

@@ -934,7 +934,7 @@
   }
 }
 .main-bar .nav-links {
-  font-size: 0.86em;
+  font-size: 0.75rem;
   -webkit-box-flex: 1;
       -ms-flex: 1 0 auto;
           flex: 1 0 auto;
@@ -957,18 +957,21 @@
   --padding-bottom: 7px;
   --padding-end: 2px;
   --padding-start: 2px;
-  --margin: 0 11px;
+  --margin: 0 8px;
 }
 .main-bar .nav-links--main {
-  font-weight: bold;
   -webkit-box-pack: start;
       -ms-flex-pack: start;
           justify-content: flex-start;
+  letter-spacing: 0.33px;
+  font-weight: 600;
+  font-stretch: expanded;
+  font-size: 0.8125rem;
 }
 .main-bar .nav-links--main ::slotted(nano-nav-item) {
-  --color: white;
-  --padding-end: 6px;
-  --padding-start: 6px;
+  --color: #fff;
+  --padding-end: 3px;
+  --padding-start: 0;
 }
 .main-bar .nav-links--sub {
   margin-left: 6px;
@@ -1028,6 +1031,8 @@
   transition: 0.2s ease height;
   padding: 0 var(--padding);
   outline: none;
+  max-width: 45em;
+  margin-left: auto;
 }
 .search-bar .search-widget {
   margin-left: 0;

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

@@ -6,7 +6,14 @@ import algoliasearch from 'algoliasearch';
 import { debounce, closestElement, displayTransition } from '../../utils';
 import { clientFetch } from '../../utils/fetch';
 import { ComponentStore } from '../../utils/store/component-store';
-const THRESHOLDLIMIT = 5;
+// the 'breakpoints' that different segments of content go into or out-of the burger / overflow menu
+const THRESHOLDBREAKS = {
+  search: 0,
+  about: 1,
+  main: 2,
+  login: 3,
+  icon: 4,
+};
 /**
  * Nanopore digital global navigation and search bar.
  * Incorporates MyAccount / SSO states (messages / cart / user name etc).
@@ -28,6 +35,7 @@ export class GlobalNav {
   constructor() {
     this.currSize = 0;
     this.thresholdsGoingUp = false;
+    this.THRESHOLDLIMIT = Object.keys(THRESHOLDBREAKS).length;
     this.autocompleteEles = [];
     this.currAIndex = -1;
     this.isLoggedIn = false;
@@ -50,7 +58,7 @@ export class GlobalNav {
     this.remoteDataReady = false;
     this.ready = false;
     this.isResizing = false;
-    this.threshold = THRESHOLDLIMIT;
+    this.threshold = this.THRESHOLDLIMIT;
     this.modalOpen = false;
     this.modalIsOpen = false;
     this.searchBarShown = false;
@@ -528,19 +536,19 @@ export class GlobalNav {
           ...Array.from(this.el.querySelectorAll('nano-nav-item[slot="overflow"]')),
         ];
         barItems = [];
-        if (this.threshold < THRESHOLDLIMIT - 4)
+        if (this.threshold < this.THRESHOLDLIMIT - THRESHOLDBREAKS.icon)
           menuItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="icon"]')));
         else
           barItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="icon"]')));
-        if (this.threshold < THRESHOLDLIMIT - 3)
+        if (this.threshold < this.THRESHOLDLIMIT - THRESHOLDBREAKS.login)
           menuItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="loggedin"]')));
         else
           barItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="loggedin"]')));
-        if (this.threshold < THRESHOLDLIMIT - 2)
+        if (this.threshold < this.THRESHOLDLIMIT - THRESHOLDBREAKS.main)
           menuItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="main"]')));
         else
           barItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="main"]')));
-        if (this.threshold < THRESHOLDLIMIT - 1)
+        if (this.threshold < this.THRESHOLDLIMIT - THRESHOLDBREAKS.about)
           menuItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="about"]')));
         else
           barItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="about"]')));
@@ -584,7 +592,7 @@ export class GlobalNav {
    * As relevant slotted items change, reset resizing breakpoints
    */
   slotChange() {
-    this.threshold = THRESHOLDLIMIT;
+    this.threshold = this.THRESHOLDLIMIT;
   }
   // General classes for visuals
   thresholdClasses() {
@@ -596,8 +604,9 @@ export class GlobalNav {
   }
   // Global DOM Events
   onWindowResize() {
-    if (this.threshold < THRESHOLDLIMIT && window.innerWidth > this.currSize) {
-      this.threshold = THRESHOLDLIMIT;
+    if (this.threshold < this.THRESHOLDLIMIT &&
+      window.innerWidth > this.currSize) {
+      this.threshold = this.THRESHOLDLIMIT;
     }
     this.currSize = window.innerWidth;
     this.searchBarShown = false;
@@ -870,9 +879,10 @@ export class GlobalNav {
           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 < THRESHOLDLIMIT - 3 && (h("nano-icon", { name: "light/times", "aria-label": "close menu" })),
-                this.threshold >= THRESHOLDLIMIT - 3 && (h("nano-icon", { name: "light/bars", "aria-label": "close menu" }))),
-              this.threshold < THRESHOLDLIMIT - 4 && [
+                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 &&
                   (!this.activeMyAccountSections ||
@@ -893,15 +903,20 @@ export class GlobalNav {
               h("div", { class: "content" },
                 h("nav", { class: "nav-links nav-links--main" },
                   h("slot", { name: "overflow" }),
-                  this.threshold < THRESHOLDLIMIT - 2 &&
+                  this.threshold <
+                    this.THRESHOLDLIMIT - THRESHOLDBREAKS.main &&
                     !!this.mainSlotLen && h("slot", { name: "main" })),
                 (((!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
-                  this.threshold < THRESHOLDLIMIT) ||
+                  this.threshold <
+                    this.THRESHOLDLIMIT - THRESHOLDBREAKS.about) ||
                   this.hasSiteSlot ||
                   !!this.siteNavItms.length) && (h("div", null,
                   (!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
-                    this.threshold < THRESHOLDLIMIT && [
-                    (this.threshold >= THRESHOLDLIMIT - 2 ||
+                    this.threshold <
+                      this.THRESHOLDLIMIT - THRESHOLDBREAKS.about && [
+                    // 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")),
@@ -911,7 +926,9 @@ export class GlobalNav {
                           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 < THRESHOLDLIMIT - 2 &&
+                    // 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" })),
@@ -930,7 +947,7 @@ export class GlobalNav {
                             })))))))),
                   ],
                   (this.hasSiteSlot || !!this.siteNavItms.length) && [
-                    (this.threshold >= THRESHOLDLIMIT - 2 ||
+                    (this.threshold >= this.THRESHOLDLIMIT - 2 ||
                       this.mainSlotLen < 2) &&
                       this.overflowSlotLen < 2 && (h("div", { class: "nav-links-wrap" },
                       h("h4", { class: "nav-links_title" }, "Sites"),
@@ -940,7 +957,7 @@ export class GlobalNav {
                           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 < THRESHOLDLIMIT - 2 &&
+                    ((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" },
@@ -959,7 +976,8 @@ export class GlobalNav {
                               }))))))),
                   ]))),
               this.isLoggedIn &&
-                this.threshold < THRESHOLDLIMIT - 3 &&
+                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,
@@ -987,13 +1005,18 @@ export class GlobalNav {
               (this.hasPromotionSlot ||
                 !!this.overflowSlotLen ||
                 ((this.myAccData || !!this.iconSlotLen) &&
-                  this.threshold < THRESHOLDLIMIT - 4) ||
+                  this.threshold <
+                    this.THRESHOLDLIMIT - THRESHOLDBREAKS.icon) ||
                 (this.isLoggedIn &&
                   (!!this.loggedInNavItms.length || this.hasLoggedinSlot) &&
-                  this.threshold < THRESHOLDLIMIT - 3) ||
-                (!!this.mainSlotLen && this.threshold < THRESHOLDLIMIT - 2) ||
+                  this.threshold <
+                    this.THRESHOLDLIMIT - THRESHOLDBREAKS.login) ||
+                (!!this.mainSlotLen &&
+                  this.threshold <
+                    this.THRESHOLDLIMIT - THRESHOLDBREAKS.main) ||
                 ((!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
-                  this.threshold < THRESHOLDLIMIT) ||
+                  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" }))),
@@ -1003,28 +1026,31 @@ export class GlobalNav {
                 h("slot", { name: "logo" }))),
               h("div", { class: "nav-links nav-links--main" },
                 h("slot", { name: "main" })),
-              this.threshold >= THRESHOLDLIMIT - 1 && [
+              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.threshold >= THRESHOLDLIMIT - 1 ||
-                !this.showSearch ||
-                !this.internalSearchIndeces.length) && (h("nav", { class: "nav-links nav-links--sub", "aria-label": "About the company links" }, (!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
-                this.threshold === THRESHOLDLIMIT && [
+              this.threshold >=
+                this.THRESHOLDLIMIT - THRESHOLDBREAKS.about && (h("nav", { class: "nav-links nav-links--sub", "aria-label": "About the company links" }, (!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
+                this.threshold >=
+                  this.THRESHOLDLIMIT - THRESHOLDBREAKS.about && [
                 h("slot", { name: "about" }),
                 this.aboutNavItms.map((link) => {
                   return (h("nano-nav-item", { class: "nano-global-nav nano-global-nav-bar" },
                     h("a", { href: link.address, target: link.target }, link.title)));
                 }),
               ])),
-              this.threshold < THRESHOLDLIMIT - 1 &&
+              this.threshold <
+                this.THRESHOLDLIMIT - THRESHOLDBREAKS.search &&
                 ((this.showSearch && !!this.internalSearchIndeces.length) ||
                   !!this.searchSlotLen) && (h("button", { class: "icon-btn", "aria-controls": "global-nav-search-bar", "aria-expanded": this.searchBarShown ? 'true' : 'false', onMouseDown: this.onSearchBtnClick, onKeyDown: this.onSearchBtnKeyDown },
                 h("nano-icon", { name: "light/search" }))),
-              this.threshold >= THRESHOLDLIMIT - 4 && [
+              this.threshold >=
+                this.THRESHOLDLIMIT - THRESHOLDBREAKS.icon && [
                 !!this.iconSlotLen && h("slot", { name: "icon" }),
                 this.myAccData &&
                   (!this.activeMyAccountSections ||
@@ -1038,7 +1064,8 @@ export class GlobalNav {
                 ],
               ],
               this.myAccData &&
-                this.threshold >= THRESHOLDLIMIT - 3 && [
+                this.threshold >=
+                  this.THRESHOLDLIMIT - THRESHOLDBREAKS.login && [
                 this.myAccData.urls.login && (h("a", { href: this.myAccData.urls.login + this.ssoRedirect, class: "login-btn" }, "Login / Register")),
                 this.myAccountUser && (h("div", { class: "user-links" },
                   h("button", { class: {
@@ -1059,7 +1086,8 @@ export class GlobalNav {
                       h("a", { href: this.myAccData.urls.logout + this.ssoRedirect }, "Logout"))))),
               ],
               h("span", { class: "measure-ele" })),
-            this.threshold < THRESHOLDLIMIT - 1 && (h("div", { id: "global-nav-search-bar", class: {
+            this.threshold <
+              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) },
@@ -1067,7 +1095,8 @@ export class GlobalNav {
                 this.showSearch && !!this.internalSearchIndeces.length && (h("div", null, searchWidget)),
                 (!this.showSearch || !this.myAccData) &&
                   !!this.searchSlotLen && h("slot", { name: "search" })))))),
-        (this.threshold < THRESHOLDLIMIT - 3 || this.menuFullScreen) && (h("div", { class: {
+        (this.threshold < this.THRESHOLDLIMIT - 3 ||
+          this.menuFullScreen) && (h("div", { class: {
             mask: true,
             open: this.modalOpen,
           }, onClick: this.menuClose, onTouchEnd: this.menuClose }))),
@@ -1353,7 +1382,7 @@ export class GlobalNav {
           },
           "SearchIndex": {
             "location": "import",
-            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -1602,7 +1631,7 @@ export class GlobalNav {
         "references": {
           "AloliaSearchResultDetail": {
             "location": "import",
-            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1622,7 +1651,7 @@ export class GlobalNav {
         "references": {
           "AlgoliaNetworkError": {
             "location": "import",
-            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1642,7 +1671,7 @@ export class GlobalNav {
         "references": {
           "AloliaSearchResultDetail": {
             "location": "import",
-            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }