@nanoporetech-digital/components 2.2.0 → 2.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (142) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/nano-components.cjs.js +1 -1
  4. package/dist/cjs/nano-dropdown.cjs.entry.js +2 -1
  5. package/dist/cjs/nano-dropdown.cjs.entry.js.map +1 -1
  6. package/dist/cjs/nano-global-nav.cjs.entry.js +62 -33
  7. package/dist/cjs/nano-global-nav.cjs.entry.js.map +1 -1
  8. package/dist/cjs/nano-nav-item_2.cjs.entry.js +1 -1
  9. package/dist/cjs/nano-nav-item_2.cjs.entry.js.map +1 -1
  10. package/dist/cjs/nano-split-pane.cjs.entry.js +8 -14
  11. package/dist/cjs/nano-split-pane.cjs.entry.js.map +1 -1
  12. package/dist/cjs/nano-tooltip.cjs.entry.js +2 -1
  13. package/dist/cjs/nano-tooltip.cjs.entry.js.map +1 -1
  14. package/dist/cjs/{popover-55c687c2.js → popover-848d73ea.js} +4 -2
  15. package/dist/cjs/popover-848d73ea.js.map +1 -0
  16. package/dist/collection/components/accordion/accordion.js +1 -1
  17. package/dist/collection/components/alert/alert.js +1 -1
  18. package/dist/collection/components/algolia/algolia-filter.js +2 -2
  19. package/dist/collection/components/algolia/algolia-input.js +5 -5
  20. package/dist/collection/components/algolia/algolia-results.js +1 -1
  21. package/dist/collection/components/algolia/algolia.js +6 -6
  22. package/dist/collection/components/checkbox/checkbox-group.js +2 -2
  23. package/dist/collection/components/checkbox/checkbox.js +3 -3
  24. package/dist/collection/components/datalist/datalist.js +1 -1
  25. package/dist/collection/components/date-input/date-input.js +7 -7
  26. package/dist/collection/components/date-picker/date-picker.js +5 -5
  27. package/dist/collection/components/details/details.js +1 -1
  28. package/dist/collection/components/dialog/dialog.js +1 -1
  29. package/dist/collection/components/file-upload/file-upload.js +4 -4
  30. package/dist/collection/components/global-nav/global-nav.css +11 -6
  31. package/dist/collection/components/global-nav/global-nav.js +67 -38
  32. package/dist/collection/components/global-nav/global-nav.js.map +1 -1
  33. package/dist/collection/components/grid/grid-item.js +1 -1
  34. package/dist/collection/components/icon/icon.js +1 -1
  35. package/dist/collection/components/input/input.js +5 -5
  36. package/dist/collection/components/nav-item/nav-item.css +4 -1
  37. package/dist/collection/components/nav-item/nav-item.js +4 -4
  38. package/dist/collection/components/range/range.js +4 -4
  39. package/dist/collection/components/resize-observe/resize-observe.js +1 -1
  40. package/dist/collection/components/select/select.js +7 -7
  41. package/dist/collection/components/slides/slides.js +7 -7
  42. package/dist/collection/components/split-pane/split-pane.js +22 -37
  43. package/dist/collection/components/split-pane/split-pane.js.map +1 -1
  44. package/dist/collection/components/tabs/tab-group.js +2 -2
  45. package/dist/collection/utils/popover.js +2 -1
  46. package/dist/collection/utils/popover.js.map +1 -1
  47. package/dist/components/nano-global-nav.js +62 -33
  48. package/dist/components/nano-global-nav.js.map +1 -1
  49. package/dist/components/nano-split-pane.js +9 -16
  50. package/dist/components/nano-split-pane.js.map +1 -1
  51. package/dist/components/nav-item.js +1 -1
  52. package/dist/components/nav-item.js.map +1 -1
  53. package/dist/components/popover.js +3 -1
  54. package/dist/components/popover.js.map +1 -1
  55. package/dist/custom-elements/index.js +73 -50
  56. package/dist/custom-elements/index.js.map +1 -1
  57. package/dist/esm/loader.js +1 -1
  58. package/dist/esm/nano-components.js +1 -1
  59. package/dist/esm/nano-dropdown.entry.js +2 -1
  60. package/dist/esm/nano-dropdown.entry.js.map +1 -1
  61. package/dist/esm/nano-global-nav.entry.js +62 -33
  62. package/dist/esm/nano-global-nav.entry.js.map +1 -1
  63. package/dist/esm/nano-nav-item_2.entry.js +1 -1
  64. package/dist/esm/nano-nav-item_2.entry.js.map +1 -1
  65. package/dist/esm/nano-split-pane.entry.js +8 -14
  66. package/dist/esm/nano-split-pane.entry.js.map +1 -1
  67. package/dist/esm/nano-tooltip.entry.js +2 -1
  68. package/dist/esm/nano-tooltip.entry.js.map +1 -1
  69. package/dist/esm/{popover-d9dc8e13.js → popover-46b5193d.js} +4 -2
  70. package/dist/{nano-components/p-3c3e9fec.system.js.map → esm/popover-46b5193d.js.map} +1 -1
  71. package/dist/esm-es5/loader.js +1 -1
  72. package/dist/esm-es5/loader.js.map +1 -1
  73. package/dist/esm-es5/nano-components.js +1 -1
  74. package/dist/esm-es5/nano-components.js.map +1 -1
  75. package/dist/esm-es5/nano-dropdown.entry.js +1 -1
  76. package/dist/esm-es5/nano-dropdown.entry.js.map +1 -1
  77. package/dist/esm-es5/nano-global-nav.entry.js +1 -1
  78. package/dist/esm-es5/nano-global-nav.entry.js.map +1 -1
  79. package/dist/esm-es5/nano-nav-item_2.entry.js +1 -1
  80. package/dist/esm-es5/nano-nav-item_2.entry.js.map +1 -1
  81. package/dist/esm-es5/nano-split-pane.entry.js +1 -1
  82. package/dist/esm-es5/nano-split-pane.entry.js.map +1 -1
  83. package/dist/esm-es5/nano-tooltip.entry.js +1 -1
  84. package/dist/esm-es5/nano-tooltip.entry.js.map +1 -1
  85. package/dist/esm-es5/popover-46b5193d.js +5 -0
  86. package/dist/esm-es5/popover-46b5193d.js.map +1 -0
  87. package/dist/nano-components/nano-components.esm.js +1 -1
  88. package/dist/nano-components/nano-components.esm.js.map +1 -1
  89. package/dist/nano-components/p-094ab6f8.entry.js +5 -0
  90. package/dist/nano-components/{p-a0515a0f.entry.js.map → p-094ab6f8.entry.js.map} +1 -1
  91. package/dist/nano-components/p-096682d9.system.js +1 -1
  92. package/dist/nano-components/p-096682d9.system.js.map +1 -1
  93. package/dist/nano-components/p-12f70017.system.entry.js +5 -0
  94. package/dist/nano-components/p-12f70017.system.entry.js.map +1 -0
  95. package/dist/nano-components/p-4b7cd30c.js +5 -0
  96. package/dist/nano-components/p-4b7cd30c.js.map +1 -0
  97. package/dist/nano-components/p-6dd58c39.entry.js +5 -0
  98. package/dist/nano-components/p-6dd58c39.entry.js.map +1 -0
  99. package/dist/nano-components/p-8b3ee91b.system.entry.js +5 -0
  100. package/dist/nano-components/{p-ca466250.system.entry.js.map → p-8b3ee91b.system.entry.js.map} +1 -1
  101. package/dist/nano-components/p-8de6e276.entry.js +5 -0
  102. package/dist/nano-components/p-8de6e276.entry.js.map +1 -0
  103. package/dist/nano-components/p-9ca5e023.system.entry.js +5 -0
  104. package/dist/nano-components/p-9ca5e023.system.entry.js.map +1 -0
  105. package/dist/nano-components/p-d35d468b.system.js +5 -0
  106. package/dist/{cjs/popover-55c687c2.js.map → nano-components/p-d35d468b.system.js.map} +1 -1
  107. package/dist/nano-components/p-d9f2dda5.entry.js +5 -0
  108. package/dist/nano-components/p-d9f2dda5.entry.js.map +1 -0
  109. package/dist/nano-components/p-e01adaa3.entry.js +5 -0
  110. package/dist/nano-components/{p-17bf76c4.entry.js.map → p-e01adaa3.entry.js.map} +1 -1
  111. package/dist/nano-components/p-f9e30f31.system.entry.js +5 -0
  112. package/dist/nano-components/p-f9e30f31.system.entry.js.map +1 -0
  113. package/dist/nano-components/p-fd1a86d2.system.entry.js +5 -0
  114. package/dist/nano-components/{p-7fcbc27f.system.entry.js.map → p-fd1a86d2.system.entry.js.map} +1 -1
  115. package/dist/types/components/global-nav/global-nav.d.ts +1 -0
  116. package/dist/types/components/split-pane/split-pane.d.ts +2 -4
  117. package/dist/types/components.d.ts +2 -6
  118. package/docs-json.json +10 -25
  119. package/docs-vscode.json +0 -4
  120. package/package.json +2 -2
  121. package/dist/esm/popover-d9dc8e13.js.map +0 -1
  122. package/dist/esm-es5/popover-d9dc8e13.js +0 -5
  123. package/dist/esm-es5/popover-d9dc8e13.js.map +0 -1
  124. package/dist/nano-components/p-17bf76c4.entry.js +0 -5
  125. package/dist/nano-components/p-1ec44caf.entry.js +0 -5
  126. package/dist/nano-components/p-1ec44caf.entry.js.map +0 -1
  127. package/dist/nano-components/p-3c3e9fec.system.js +0 -5
  128. package/dist/nano-components/p-58419bed.system.entry.js +0 -5
  129. package/dist/nano-components/p-58419bed.system.entry.js.map +0 -1
  130. package/dist/nano-components/p-625d3733.js +0 -5
  131. package/dist/nano-components/p-625d3733.js.map +0 -1
  132. package/dist/nano-components/p-7fcbc27f.system.entry.js +0 -5
  133. package/dist/nano-components/p-a0515a0f.entry.js +0 -5
  134. package/dist/nano-components/p-b19e0775.system.entry.js +0 -5
  135. package/dist/nano-components/p-b19e0775.system.entry.js.map +0 -1
  136. package/dist/nano-components/p-c954c040.entry.js +0 -5
  137. package/dist/nano-components/p-c954c040.entry.js.map +0 -1
  138. package/dist/nano-components/p-ca466250.system.entry.js +0 -5
  139. package/dist/nano-components/p-d628547b.entry.js +0 -5
  140. package/dist/nano-components/p-d628547b.entry.js.map +0 -1
  141. package/dist/nano-components/p-d87ebf95.system.entry.js +0 -5
  142. package/dist/nano-components/p-d87ebf95.system.entry.js.map +0 -1
@@ -393,7 +393,7 @@ export class DateInput {
393
393
  "references": {
394
394
  "LocalDateOpts": {
395
395
  "location": "import",
396
- "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
396
+ "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
397
397
  }
398
398
  }
399
399
  },
@@ -514,7 +514,7 @@ export class DateInput {
514
514
  "references": {
515
515
  "DaysOfWeek": {
516
516
  "location": "import",
517
- "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/utils/date-utils.ts"
517
+ "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/utils/date-utils.ts"
518
518
  }
519
519
  }
520
520
  },
@@ -538,7 +538,7 @@ export class DateInput {
538
538
  "references": {
539
539
  "DuetLocalizedText": {
540
540
  "location": "import",
541
- "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
541
+ "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
542
542
  }
543
543
  }
544
544
  },
@@ -580,7 +580,7 @@ export class DateInput {
580
580
  "references": {
581
581
  "Color": {
582
582
  "location": "import",
583
- "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
583
+ "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
584
584
  }
585
585
  }
586
586
  },
@@ -932,7 +932,7 @@ export class DateInput {
932
932
  "references": {
933
933
  "DateInputChangeEventDetail": {
934
934
  "location": "import",
935
- "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
935
+ "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
936
936
  }
937
937
  }
938
938
  }
@@ -955,7 +955,7 @@ export class DateInput {
955
955
  "references": {
956
956
  "ControlValidityEventDetail": {
957
957
  "location": "import",
958
- "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
958
+ "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
959
959
  }
960
960
  }
961
961
  }
@@ -977,7 +977,7 @@ export class DateInput {
977
977
  },
978
978
  "ControlValidity": {
979
979
  "location": "import",
980
- "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
980
+ "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
981
981
  }
982
982
  },
983
983
  "return": "Promise<ControlValidity>"
@@ -370,7 +370,7 @@ export class DatePicker {
370
370
  "references": {
371
371
  "DaysOfWeek": {
372
372
  "location": "import",
373
- "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/utils/date-utils.ts"
373
+ "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/utils/date-utils.ts"
374
374
  }
375
375
  }
376
376
  },
@@ -395,7 +395,7 @@ export class DatePicker {
395
395
  "references": {
396
396
  "DuetLocalizedText": {
397
397
  "location": "import",
398
- "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
398
+ "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
399
399
  }
400
400
  }
401
401
  },
@@ -418,7 +418,7 @@ export class DatePicker {
418
418
  "references": {
419
419
  "Color": {
420
420
  "location": "import",
421
- "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
421
+ "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
422
422
  }
423
423
  }
424
424
  },
@@ -442,7 +442,7 @@ export class DatePicker {
442
442
  "references": {
443
443
  "DateDisabledPredicate": {
444
444
  "location": "import",
445
- "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
445
+ "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
446
446
  }
447
447
  }
448
448
  },
@@ -521,7 +521,7 @@ export class DatePicker {
521
521
  "references": {
522
522
  "PickerChangeEvent": {
523
523
  "location": "import",
524
- "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
524
+ "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
525
525
  }
526
526
  }
527
527
  }
@@ -234,7 +234,7 @@ export class Details {
234
234
  "references": {
235
235
  "Color": {
236
236
  "location": "import",
237
- "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
237
+ "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
238
238
  }
239
239
  }
240
240
  },
@@ -336,7 +336,7 @@ export class Dialog {
336
336
  "references": {
337
337
  "StorageMethods": {
338
338
  "location": "import",
339
- "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
339
+ "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
340
340
  }
341
341
  }
342
342
  },
@@ -655,7 +655,7 @@ export class FileUpload {
655
655
  "references": {
656
656
  "FileWithUrl": {
657
657
  "location": "import",
658
- "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
658
+ "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
659
659
  }
660
660
  }
661
661
  },
@@ -713,7 +713,7 @@ export class FileUpload {
713
713
  "references": {
714
714
  "FileInputChangeEventDetail": {
715
715
  "location": "import",
716
- "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
716
+ "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
717
717
  }
718
718
  }
719
719
  }
@@ -766,7 +766,7 @@ export class FileUpload {
766
766
  "references": {
767
767
  "ControlValidityEventDetail": {
768
768
  "location": "import",
769
- "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
769
+ "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
770
770
  }
771
771
  }
772
772
  }
@@ -788,7 +788,7 @@ export class FileUpload {
788
788
  },
789
789
  "ControlValidity": {
790
790
  "location": "import",
791
- "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
791
+ "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
792
792
  }
793
793
  },
794
794
  "return": "Promise<ControlValidity>"
@@ -934,7 +934,7 @@
934
934
  }
935
935
  }
936
936
  .main-bar .nav-links {
937
- font-size: 0.86em;
937
+ font-size: 0.75rem;
938
938
  -webkit-box-flex: 1;
939
939
  -ms-flex: 1 0 auto;
940
940
  flex: 1 0 auto;
@@ -957,18 +957,21 @@
957
957
  --padding-bottom: 7px;
958
958
  --padding-end: 2px;
959
959
  --padding-start: 2px;
960
- --margin: 0 11px;
960
+ --margin: 0 8px;
961
961
  }
962
962
  .main-bar .nav-links--main {
963
- font-weight: bold;
964
963
  -webkit-box-pack: start;
965
964
  -ms-flex-pack: start;
966
965
  justify-content: flex-start;
966
+ letter-spacing: 0.33px;
967
+ font-weight: 600;
968
+ font-stretch: expanded;
969
+ font-size: 0.8125rem;
967
970
  }
968
971
  .main-bar .nav-links--main ::slotted(nano-nav-item) {
969
- --color: white;
970
- --padding-end: 6px;
971
- --padding-start: 6px;
972
+ --color: #fff;
973
+ --padding-end: 3px;
974
+ --padding-start: 0;
972
975
  }
973
976
  .main-bar .nav-links--sub {
974
977
  margin-left: 6px;
@@ -1028,6 +1031,8 @@
1028
1031
  transition: 0.2s ease height;
1029
1032
  padding: 0 var(--padding);
1030
1033
  outline: none;
1034
+ max-width: 45em;
1035
+ margin-left: auto;
1031
1036
  }
1032
1037
  .search-bar .search-widget {
1033
1038
  margin-left: 0;
@@ -6,7 +6,14 @@ import algoliasearch from 'algoliasearch';
6
6
  import { debounce, closestElement, displayTransition } from '../../utils';
7
7
  import { clientFetch } from '../../utils/fetch';
8
8
  import { ComponentStore } from '../../utils/store/component-store';
9
- const THRESHOLDLIMIT = 5;
9
+ // the 'breakpoints' that different segments of content go into or out-of the burger / overflow menu
10
+ const THRESHOLDBREAKS = {
11
+ search: 0,
12
+ about: 1,
13
+ main: 2,
14
+ login: 3,
15
+ icon: 4,
16
+ };
10
17
  /**
11
18
  * Nanopore digital global navigation and search bar.
12
19
  * Incorporates MyAccount / SSO states (messages / cart / user name etc).
@@ -28,6 +35,7 @@ export class GlobalNav {
28
35
  constructor() {
29
36
  this.currSize = 0;
30
37
  this.thresholdsGoingUp = false;
38
+ this.THRESHOLDLIMIT = Object.keys(THRESHOLDBREAKS).length;
31
39
  this.autocompleteEles = [];
32
40
  this.currAIndex = -1;
33
41
  this.isLoggedIn = false;
@@ -50,7 +58,7 @@ export class GlobalNav {
50
58
  this.remoteDataReady = false;
51
59
  this.ready = false;
52
60
  this.isResizing = false;
53
- this.threshold = THRESHOLDLIMIT;
61
+ this.threshold = this.THRESHOLDLIMIT;
54
62
  this.modalOpen = false;
55
63
  this.modalIsOpen = false;
56
64
  this.searchBarShown = false;
@@ -528,19 +536,19 @@ export class GlobalNav {
528
536
  ...Array.from(this.el.querySelectorAll('nano-nav-item[slot="overflow"]')),
529
537
  ];
530
538
  barItems = [];
531
- if (this.threshold < THRESHOLDLIMIT - 4)
539
+ if (this.threshold < this.THRESHOLDLIMIT - THRESHOLDBREAKS.icon)
532
540
  menuItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="icon"]')));
533
541
  else
534
542
  barItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="icon"]')));
535
- if (this.threshold < THRESHOLDLIMIT - 3)
543
+ if (this.threshold < this.THRESHOLDLIMIT - THRESHOLDBREAKS.login)
536
544
  menuItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="loggedin"]')));
537
545
  else
538
546
  barItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="loggedin"]')));
539
- if (this.threshold < THRESHOLDLIMIT - 2)
547
+ if (this.threshold < this.THRESHOLDLIMIT - THRESHOLDBREAKS.main)
540
548
  menuItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="main"]')));
541
549
  else
542
550
  barItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="main"]')));
543
- if (this.threshold < THRESHOLDLIMIT - 1)
551
+ if (this.threshold < this.THRESHOLDLIMIT - THRESHOLDBREAKS.about)
544
552
  menuItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="about"]')));
545
553
  else
546
554
  barItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="about"]')));
@@ -584,7 +592,7 @@ export class GlobalNav {
584
592
  * As relevant slotted items change, reset resizing breakpoints
585
593
  */
586
594
  slotChange() {
587
- this.threshold = THRESHOLDLIMIT;
595
+ this.threshold = this.THRESHOLDLIMIT;
588
596
  }
589
597
  // General classes for visuals
590
598
  thresholdClasses() {
@@ -596,8 +604,9 @@ export class GlobalNav {
596
604
  }
597
605
  // Global DOM Events
598
606
  onWindowResize() {
599
- if (this.threshold < THRESHOLDLIMIT && window.innerWidth > this.currSize) {
600
- this.threshold = THRESHOLDLIMIT;
607
+ if (this.threshold < this.THRESHOLDLIMIT &&
608
+ window.innerWidth > this.currSize) {
609
+ this.threshold = this.THRESHOLDLIMIT;
601
610
  }
602
611
  this.currSize = window.innerWidth;
603
612
  this.searchBarShown = false;
@@ -870,9 +879,10 @@ export class GlobalNav {
870
879
  h("div", { class: "gn-menu_wrap", ref: (div) => (this.menuWrapDiv = div), tabindex: "-1" },
871
880
  h("div", { class: "gn-menu_actions" },
872
881
  h("button", { class: "menu-btn icon-btn icon-btn", onMouseDown: this.onMenuBtnClick, onKeyDown: this.onMenuBtnKeyDown },
873
- this.threshold < THRESHOLDLIMIT - 3 && (h("nano-icon", { name: "light/times", "aria-label": "close menu" })),
874
- this.threshold >= THRESHOLDLIMIT - 3 && (h("nano-icon", { name: "light/bars", "aria-label": "close menu" }))),
875
- this.threshold < THRESHOLDLIMIT - 4 && [
882
+ this.threshold < this.THRESHOLDLIMIT - 3 && (h("nano-icon", { name: "light/times", "aria-label": "close menu" })),
883
+ this.threshold >= this.THRESHOLDLIMIT - 3 && (h("nano-icon", { name: "light/bars", "aria-label": "close menu" }))),
884
+ this.threshold <
885
+ this.THRESHOLDLIMIT - THRESHOLDBREAKS.icon && [
876
886
  !!this.iconSlotLen && h("slot", { name: "icon" }),
877
887
  this.myAccData &&
878
888
  (!this.activeMyAccountSections ||
@@ -893,15 +903,20 @@ export class GlobalNav {
893
903
  h("div", { class: "content" },
894
904
  h("nav", { class: "nav-links nav-links--main" },
895
905
  h("slot", { name: "overflow" }),
896
- this.threshold < THRESHOLDLIMIT - 2 &&
906
+ this.threshold <
907
+ this.THRESHOLDLIMIT - THRESHOLDBREAKS.main &&
897
908
  !!this.mainSlotLen && h("slot", { name: "main" })),
898
909
  (((!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
899
- this.threshold < THRESHOLDLIMIT) ||
910
+ this.threshold <
911
+ this.THRESHOLDLIMIT - THRESHOLDBREAKS.about) ||
900
912
  this.hasSiteSlot ||
901
913
  !!this.siteNavItms.length) && (h("div", null,
902
914
  (!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
903
- this.threshold < THRESHOLDLIMIT && [
904
- (this.threshold >= THRESHOLDLIMIT - 2 ||
915
+ this.threshold <
916
+ this.THRESHOLDLIMIT - THRESHOLDBREAKS.about && [
917
+ // About Menu as an open list (before more items are added to burger)
918
+ (this.threshold >=
919
+ this.THRESHOLDLIMIT - (THRESHOLDBREAKS.about + 1) ||
905
920
  this.mainSlotLen < 2) &&
906
921
  this.overflowSlotLen < 2 && (h("div", { class: "nav-links-wrap" },
907
922
  !!this.aboutNavItms.length && (h("h4", { class: "nav-links_title" }, "About")),
@@ -911,7 +926,9 @@ export class GlobalNav {
911
926
  return (h("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" },
912
927
  h("a", { href: link.address, target: link.target }, link.title)));
913
928
  })))),
914
- ((this.threshold < THRESHOLDLIMIT - 2 &&
929
+ // About Menu as hidden list (when more items are added to burger)
930
+ ((this.threshold <
931
+ this.THRESHOLDLIMIT - (THRESHOLDBREAKS.about + 1) &&
915
932
  this.mainSlotLen >= 2) ||
916
933
  this.overflowSlotLen >= 2) && (h("nav", { class: "nav-links", "aria-label": "About the company links" },
917
934
  !this.aboutNavItms.length && (h("slot", { name: "about" })),
@@ -930,7 +947,7 @@ export class GlobalNav {
930
947
  })))))))),
931
948
  ],
932
949
  (this.hasSiteSlot || !!this.siteNavItms.length) && [
933
- (this.threshold >= THRESHOLDLIMIT - 2 ||
950
+ (this.threshold >= this.THRESHOLDLIMIT - 2 ||
934
951
  this.mainSlotLen < 2) &&
935
952
  this.overflowSlotLen < 2 && (h("div", { class: "nav-links-wrap" },
936
953
  h("h4", { class: "nav-links_title" }, "Sites"),
@@ -940,7 +957,7 @@ export class GlobalNav {
940
957
  return (h("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" },
941
958
  h("a", { href: link.address, target: link.target }, link.title)));
942
959
  })))),
943
- ((this.threshold < THRESHOLDLIMIT - 2 &&
960
+ ((this.threshold < this.THRESHOLDLIMIT - 2 &&
944
961
  this.mainSlotLen >= 2) ||
945
962
  this.overflowSlotLen >= 2) && (h("nav", { class: "nav-links", "aria-label": "Different company site links" },
946
963
  h("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" },
@@ -959,7 +976,8 @@ export class GlobalNav {
959
976
  }))))))),
960
977
  ]))),
961
978
  this.isLoggedIn &&
962
- this.threshold < THRESHOLDLIMIT - 3 &&
979
+ this.threshold <
980
+ this.THRESHOLDLIMIT - THRESHOLDBREAKS.login &&
963
981
  (this.loggedInNavItms.length || this.hasLoggedinSlot) && (h("nav", { class: "nav-links", "aria-label": "Your user account links" },
964
982
  h("nano-nav-item", { class: "nano-global-nav user-nav nano-global-nav-menu" },
965
983
  this.myAccountUser.name,
@@ -987,13 +1005,18 @@ export class GlobalNav {
987
1005
  (this.hasPromotionSlot ||
988
1006
  !!this.overflowSlotLen ||
989
1007
  ((this.myAccData || !!this.iconSlotLen) &&
990
- this.threshold < THRESHOLDLIMIT - 4) ||
1008
+ this.threshold <
1009
+ this.THRESHOLDLIMIT - THRESHOLDBREAKS.icon) ||
991
1010
  (this.isLoggedIn &&
992
1011
  (!!this.loggedInNavItms.length || this.hasLoggedinSlot) &&
993
- this.threshold < THRESHOLDLIMIT - 3) ||
994
- (!!this.mainSlotLen && this.threshold < THRESHOLDLIMIT - 2) ||
1012
+ this.threshold <
1013
+ this.THRESHOLDLIMIT - THRESHOLDBREAKS.login) ||
1014
+ (!!this.mainSlotLen &&
1015
+ this.threshold <
1016
+ this.THRESHOLDLIMIT - THRESHOLDBREAKS.main) ||
995
1017
  ((!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
996
- this.threshold < THRESHOLDLIMIT) ||
1018
+ this.threshold <
1019
+ this.THRESHOLDLIMIT - THRESHOLDBREAKS.about) ||
997
1020
  this.hasSiteSlot ||
998
1021
  !!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) },
999
1022
  h("nano-icon", { name: "light/bars", "aria-label": "open menu" }))),
@@ -1003,28 +1026,31 @@ export class GlobalNav {
1003
1026
  h("slot", { name: "logo" }))),
1004
1027
  h("div", { class: "nav-links nav-links--main" },
1005
1028
  h("slot", { name: "main" })),
1006
- this.threshold >= THRESHOLDLIMIT - 1 && [
1029
+ this.threshold >=
1030
+ this.THRESHOLDLIMIT - THRESHOLDBREAKS.search && [
1007
1031
  this.showSearch && !!this.internalSearchIndeces.length && (h("div", { class: "search-widget", role: "combobox", "aria-owns": "autocomplete-results", "aria-expanded": this.showAutocomplete && this.autocompleteResults
1008
1032
  ? 'true'
1009
1033
  : 'false' }, searchWidget)),
1010
1034
  (!this.showSearch || !this.myAccData) &&
1011
1035
  !!this.searchSlotLen && h("slot", { name: "search" }),
1012
1036
  ],
1013
- (this.threshold >= THRESHOLDLIMIT - 1 ||
1014
- !this.showSearch ||
1015
- !this.internalSearchIndeces.length) && (h("nav", { class: "nav-links nav-links--sub", "aria-label": "About the company links" }, (!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
1016
- this.threshold === THRESHOLDLIMIT && [
1037
+ this.threshold >=
1038
+ this.THRESHOLDLIMIT - THRESHOLDBREAKS.about && (h("nav", { class: "nav-links nav-links--sub", "aria-label": "About the company links" }, (!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
1039
+ this.threshold >=
1040
+ this.THRESHOLDLIMIT - THRESHOLDBREAKS.about && [
1017
1041
  h("slot", { name: "about" }),
1018
1042
  this.aboutNavItms.map((link) => {
1019
1043
  return (h("nano-nav-item", { class: "nano-global-nav nano-global-nav-bar" },
1020
1044
  h("a", { href: link.address, target: link.target }, link.title)));
1021
1045
  }),
1022
1046
  ])),
1023
- this.threshold < THRESHOLDLIMIT - 1 &&
1047
+ this.threshold <
1048
+ this.THRESHOLDLIMIT - THRESHOLDBREAKS.search &&
1024
1049
  ((this.showSearch && !!this.internalSearchIndeces.length) ||
1025
1050
  !!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 },
1026
1051
  h("nano-icon", { name: "light/search" }))),
1027
- this.threshold >= THRESHOLDLIMIT - 4 && [
1052
+ this.threshold >=
1053
+ this.THRESHOLDLIMIT - THRESHOLDBREAKS.icon && [
1028
1054
  !!this.iconSlotLen && h("slot", { name: "icon" }),
1029
1055
  this.myAccData &&
1030
1056
  (!this.activeMyAccountSections ||
@@ -1038,7 +1064,8 @@ export class GlobalNav {
1038
1064
  ],
1039
1065
  ],
1040
1066
  this.myAccData &&
1041
- this.threshold >= THRESHOLDLIMIT - 3 && [
1067
+ this.threshold >=
1068
+ this.THRESHOLDLIMIT - THRESHOLDBREAKS.login && [
1042
1069
  this.myAccData.urls.login && (h("a", { href: this.myAccData.urls.login + this.ssoRedirect, class: "login-btn" }, "Login / Register")),
1043
1070
  this.myAccountUser && (h("div", { class: "user-links" },
1044
1071
  h("button", { class: {
@@ -1059,7 +1086,8 @@ export class GlobalNav {
1059
1086
  h("a", { href: this.myAccData.urls.logout + this.ssoRedirect }, "Logout"))))),
1060
1087
  ],
1061
1088
  h("span", { class: "measure-ele" })),
1062
- this.threshold < THRESHOLDLIMIT - 1 && (h("div", { id: "global-nav-search-bar", class: {
1089
+ this.threshold <
1090
+ this.THRESHOLDLIMIT - THRESHOLDBREAKS.search && (h("div", { id: "global-nav-search-bar", class: {
1063
1091
  'search-bar': true,
1064
1092
  show: this.searchBarShown,
1065
1093
  }, "aria-expanded": this.searchBarShown ? 'true' : 'false', role: "region", tabindex: "-1", ref: (div) => (this.searchBarEl = div) },
@@ -1067,7 +1095,8 @@ export class GlobalNav {
1067
1095
  this.showSearch && !!this.internalSearchIndeces.length && (h("div", null, searchWidget)),
1068
1096
  (!this.showSearch || !this.myAccData) &&
1069
1097
  !!this.searchSlotLen && h("slot", { name: "search" })))))),
1070
- (this.threshold < THRESHOLDLIMIT - 3 || this.menuFullScreen) && (h("div", { class: {
1098
+ (this.threshold < this.THRESHOLDLIMIT - 3 ||
1099
+ this.menuFullScreen) && (h("div", { class: {
1071
1100
  mask: true,
1072
1101
  open: this.modalOpen,
1073
1102
  }, onClick: this.menuClose, onTouchEnd: this.menuClose }))),
@@ -1353,7 +1382,7 @@ export class GlobalNav {
1353
1382
  },
1354
1383
  "SearchIndex": {
1355
1384
  "location": "import",
1356
- "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
1385
+ "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
1357
1386
  }
1358
1387
  }
1359
1388
  },
@@ -1602,7 +1631,7 @@ export class GlobalNav {
1602
1631
  "references": {
1603
1632
  "AloliaSearchResultDetail": {
1604
1633
  "location": "import",
1605
- "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
1634
+ "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
1606
1635
  }
1607
1636
  }
1608
1637
  }
@@ -1622,7 +1651,7 @@ export class GlobalNav {
1622
1651
  "references": {
1623
1652
  "AlgoliaNetworkError": {
1624
1653
  "location": "import",
1625
- "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
1654
+ "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
1626
1655
  }
1627
1656
  }
1628
1657
  }
@@ -1642,7 +1671,7 @@ export class GlobalNav {
1642
1671
  "references": {
1643
1672
  "AloliaSearchResultDetail": {
1644
1673
  "location": "import",
1645
- "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
1674
+ "path": "/builds/ebUaUX1h/0/Digital/nano-components/packages/components/src/interface.d.ts"
1646
1675
  }
1647
1676
  }
1648
1677
  }