@nanoporetech-digital/components 5.9.5 → 5.10.0

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 (149) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/dist/cjs/index-1d3ebe1a.js +0 -4
  3. package/dist/cjs/loader.cjs.js +1 -1
  4. package/dist/cjs/nano-algolia.cjs.entry.js +13 -1
  5. package/dist/cjs/nano-algolia.cjs.entry.js.map +1 -1
  6. package/dist/cjs/nano-components.cjs.js +1 -1
  7. package/dist/cjs/nano-details.cjs.entry.js +1 -1
  8. package/dist/cjs/nano-dropdown.cjs.entry.js +10 -6
  9. package/dist/cjs/nano-dropdown.cjs.entry.js.map +1 -1
  10. package/dist/cjs/nano-global-nav-user-profile_3.cjs.entry.js +2 -2
  11. package/dist/cjs/nano-global-nav-user-profile_3.cjs.entry.js.map +1 -1
  12. package/dist/cjs/nano-global-nav.cjs.entry.js +92 -53
  13. package/dist/cjs/nano-global-nav.cjs.entry.js.map +1 -1
  14. package/dist/cjs/nano-global-search-results.cjs.entry.js +6 -7
  15. package/dist/cjs/nano-global-search-results.cjs.entry.js.map +1 -1
  16. package/dist/cjs/nano-icon-button_2.cjs.entry.js +1 -1
  17. package/dist/cjs/nano-tab-group.cjs.entry.js +1 -1
  18. package/dist/cjs/{nano-table-be63f3e1.js → nano-table-72d5dc63.js} +2 -2
  19. package/dist/cjs/{nano-table-be63f3e1.js.map → nano-table-72d5dc63.js.map} +1 -1
  20. package/dist/cjs/nano-table.cjs.entry.js +1 -1
  21. package/dist/cjs/{popover-088646b2.js → popover-b506f6ae.js} +10 -17
  22. package/dist/cjs/popover-b506f6ae.js.map +1 -0
  23. package/dist/cjs/{table.worker-b05ffc52.js → table.worker-3df34efe.js} +2 -2
  24. package/dist/cjs/table.worker-3df34efe.js.map +1 -0
  25. package/dist/cjs/{transitions-8c57ddb1.js → transitions-cc18619c.js} +3 -2
  26. package/dist/cjs/transitions-cc18619c.js.map +1 -0
  27. package/dist/collection/collection-manifest.json +0 -1
  28. package/dist/collection/components/algolia/algolia-interface.js.map +1 -1
  29. package/dist/collection/components/algolia/algolia.js +17 -5
  30. package/dist/collection/components/algolia/algolia.js.map +1 -1
  31. package/dist/collection/components/dropdown/dropdown.js +9 -5
  32. package/dist/collection/components/dropdown/dropdown.js.map +1 -1
  33. package/dist/collection/components/global-nav/global-nav.js +90 -51
  34. package/dist/collection/components/global-nav/global-nav.js.map +1 -1
  35. package/dist/collection/components/global-nav/style/global-nav.css +18 -18
  36. package/dist/collection/components/global-search-results/global-search-results.js +6 -7
  37. package/dist/collection/components/global-search-results/global-search-results.js.map +1 -1
  38. package/dist/collection/components/nav-item/nav-item.css +4 -4
  39. package/dist/collection/utils/transitions.js +2 -1
  40. package/dist/collection/utils/transitions.js.map +1 -1
  41. package/dist/components/algolia.js +13 -2
  42. package/dist/components/algolia.js.map +1 -1
  43. package/dist/components/dropdown.js +9 -5
  44. package/dist/components/dropdown.js.map +1 -1
  45. package/dist/components/index.d.ts +0 -1
  46. package/dist/components/index.js +0 -1
  47. package/dist/components/index.js.map +1 -1
  48. package/dist/components/nano-global-nav.js +91 -52
  49. package/dist/components/nano-global-nav.js.map +1 -1
  50. package/dist/components/nano-global-search-results.js +6 -7
  51. package/dist/components/nano-global-search-results.js.map +1 -1
  52. package/dist/components/nav-item.js +1 -1
  53. package/dist/components/nav-item.js.map +1 -1
  54. package/dist/components/popover.js +9 -16
  55. package/dist/components/popover.js.map +1 -1
  56. package/dist/components/transitions.js +2 -1
  57. package/dist/components/transitions.js.map +1 -1
  58. package/dist/esm/index-06666022.js +0 -4
  59. package/dist/esm/loader.js +1 -1
  60. package/dist/esm/nano-algolia.entry.js +13 -1
  61. package/dist/esm/nano-algolia.entry.js.map +1 -1
  62. package/dist/esm/nano-components.js +1 -1
  63. package/dist/esm/nano-details.entry.js +1 -1
  64. package/dist/esm/nano-dropdown.entry.js +10 -6
  65. package/dist/esm/nano-dropdown.entry.js.map +1 -1
  66. package/dist/esm/nano-global-nav-user-profile_3.entry.js +2 -2
  67. package/dist/esm/nano-global-nav-user-profile_3.entry.js.map +1 -1
  68. package/dist/esm/nano-global-nav.entry.js +92 -53
  69. package/dist/esm/nano-global-nav.entry.js.map +1 -1
  70. package/dist/esm/nano-global-search-results.entry.js +6 -7
  71. package/dist/esm/nano-global-search-results.entry.js.map +1 -1
  72. package/dist/esm/nano-icon-button_2.entry.js +1 -1
  73. package/dist/esm/nano-tab-group.entry.js +1 -1
  74. package/dist/esm/{nano-table-8ac79667.js → nano-table-5af42ba4.js} +2 -2
  75. package/dist/esm/{nano-table-8ac79667.js.map → nano-table-5af42ba4.js.map} +1 -1
  76. package/dist/esm/nano-table.entry.js +1 -1
  77. package/dist/esm/{popover-02e6714d.js → popover-e5e7a641.js} +10 -17
  78. package/dist/esm/popover-e5e7a641.js.map +1 -0
  79. package/dist/esm/{table.worker-822b1223.js → table.worker-3cae908c.js} +2 -2
  80. package/dist/esm/table.worker-3cae908c.js.map +1 -0
  81. package/dist/esm/{transitions-b4657201.js → transitions-fb09eb32.js} +3 -2
  82. package/dist/esm/transitions-fb09eb32.js.map +1 -0
  83. package/dist/nano-components/nano-components.esm.js +1 -1
  84. package/dist/nano-components/nano-components.esm.js.map +1 -1
  85. package/dist/nano-components/{p-f57cea20.entry.js → p-0e4da739.entry.js} +2 -2
  86. package/dist/nano-components/{p-f49f57ed.js → p-1987f7a9.js} +2 -2
  87. package/dist/nano-components/{p-f8dd8c20.entry.js → p-2a105609.entry.js} +2 -2
  88. package/dist/nano-components/{p-24dcd788.entry.js → p-2c0218e6.entry.js} +2 -2
  89. package/dist/nano-components/p-2c0218e6.entry.js.map +1 -0
  90. package/dist/nano-components/p-36c3ded8.entry.js +5 -0
  91. package/dist/nano-components/p-36c3ded8.entry.js.map +1 -0
  92. package/dist/nano-components/{p-2a7d0c13.entry.js → p-5fc3035d.entry.js} +2 -2
  93. package/dist/nano-components/p-688f1a55.entry.js +5 -0
  94. package/dist/nano-components/p-688f1a55.entry.js.map +1 -0
  95. package/dist/nano-components/p-abd11243.entry.js +5 -0
  96. package/dist/nano-components/p-abd11243.entry.js.map +1 -0
  97. package/dist/nano-components/p-c3e8e3f9.js +5 -0
  98. package/dist/nano-components/p-c3e8e3f9.js.map +1 -0
  99. package/dist/nano-components/p-cd1fd454.js +5 -0
  100. package/dist/nano-components/p-cd1fd454.js.map +1 -0
  101. package/dist/nano-components/{p-78323d6e.js → p-dc4020f8.js} +2 -2
  102. package/dist/nano-components/p-dc6cb252.entry.js +5 -0
  103. package/dist/nano-components/p-dc6cb252.entry.js.map +1 -0
  104. package/dist/nano-components/{p-7da12234.entry.js → p-fbde7010.entry.js} +2 -2
  105. package/dist/types/components/algolia/algolia-interface.d.ts +8 -2
  106. package/dist/types/components/algolia/algolia.d.ts +3 -4
  107. package/dist/types/components/global-nav/global-nav.d.ts +32 -0
  108. package/dist/types/components.d.ts +2 -127
  109. package/docs-json.json +5 -257
  110. package/docs-vscode.json +2 -63
  111. package/hydrate/index.js +134 -269
  112. package/package.json +3 -3
  113. package/dist/cjs/nano-algolia-input.cjs.entry.js +0 -168
  114. package/dist/cjs/nano-algolia-input.cjs.entry.js.map +0 -1
  115. package/dist/cjs/popover-088646b2.js.map +0 -1
  116. package/dist/cjs/table.worker-b05ffc52.js.map +0 -1
  117. package/dist/cjs/transitions-8c57ddb1.js.map +0 -1
  118. package/dist/collection/components/algolia/algolia-input.js +0 -463
  119. package/dist/collection/components/algolia/algolia-input.js.map +0 -1
  120. package/dist/components/nano-algolia-input.d.ts +0 -11
  121. package/dist/components/nano-algolia-input.js +0 -195
  122. package/dist/components/nano-algolia-input.js.map +0 -1
  123. package/dist/esm/nano-algolia-input.entry.js +0 -164
  124. package/dist/esm/nano-algolia-input.entry.js.map +0 -1
  125. package/dist/esm/popover-02e6714d.js.map +0 -1
  126. package/dist/esm/table.worker-822b1223.js.map +0 -1
  127. package/dist/esm/transitions-b4657201.js.map +0 -1
  128. package/dist/nano-components/p-02b727d3.entry.js +0 -5
  129. package/dist/nano-components/p-02b727d3.entry.js.map +0 -1
  130. package/dist/nano-components/p-24dcd788.entry.js.map +0 -1
  131. package/dist/nano-components/p-2db8bb0b.js +0 -5
  132. package/dist/nano-components/p-2db8bb0b.js.map +0 -1
  133. package/dist/nano-components/p-51bc8b59.js +0 -5
  134. package/dist/nano-components/p-51bc8b59.js.map +0 -1
  135. package/dist/nano-components/p-5e3f928c.entry.js +0 -5
  136. package/dist/nano-components/p-5e3f928c.entry.js.map +0 -1
  137. package/dist/nano-components/p-783de955.entry.js +0 -5
  138. package/dist/nano-components/p-783de955.entry.js.map +0 -1
  139. package/dist/nano-components/p-79c96564.entry.js +0 -5
  140. package/dist/nano-components/p-79c96564.entry.js.map +0 -1
  141. package/dist/nano-components/p-7dd30a3f.entry.js +0 -7
  142. package/dist/nano-components/p-7dd30a3f.entry.js.map +0 -1
  143. package/dist/types/components/algolia/algolia-input.d.ts +0 -103
  144. /package/dist/nano-components/{p-f57cea20.entry.js.map → p-0e4da739.entry.js.map} +0 -0
  145. /package/dist/nano-components/{p-7da12234.entry.js.map → p-1987f7a9.js.map} +0 -0
  146. /package/dist/nano-components/{p-f8dd8c20.entry.js.map → p-2a105609.entry.js.map} +0 -0
  147. /package/dist/nano-components/{p-2a7d0c13.entry.js.map → p-5fc3035d.entry.js.map} +0 -0
  148. /package/dist/nano-components/{p-78323d6e.js.map → p-dc4020f8.js.map} +0 -0
  149. /package/dist/nano-components/{p-f49f57ed.js.map → p-fbde7010.entry.js.map} +0 -0
package/dist/components/nano-global-search-results.js CHANGED
@@ -50,17 +50,16 @@ const GlobalSearchResults = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
50
50
  handleGlobalNavSearch(e) {
51
51
  if (e.target.tagName !== 'NANO-GLOBAL-NAV')
52
52
  return;
53
- const { detail: { results, client }, } = e;
54
- const result = results.find((result) => result.selected);
53
+ const { detail: { meta, client }, } = e;
55
54
  this.apiKey = client.apiKey;
56
55
  this.appId = client.appId;
57
56
  this.index = {
58
- name: result.indexName,
59
- index: result.index,
60
- domain: result.domain,
61
- filters: result.filters,
57
+ name: meta.indexTitle,
58
+ index: meta.index,
59
+ domain: meta.domain,
60
+ filters: meta.filters,
62
61
  };
63
- this.algoliaEle.query = result.query;
62
+ this.algoliaEle.query = meta.query;
64
63
  }
65
64
  handleReorder(e) {
66
65
  if (e
package/dist/components/nano-global-search-results.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"nano-global-search-results.js","mappings":"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","names":[],"sources":["./src/components/global-search-results/global-search-results.scss?tag=nano-global-search-results&encapsulation=shadow","./src/components/global-search-results/global-search-results.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n\n:host {\n display: block;\n flex: 1 1 100%;\n}\n\n.main-search {\n display: flex;\n background: white;\n font-size: 14px;\n min-height: calc(100vh - 63px);\n justify-content: space-between;\n\n &__wrap {\n /* autoprefixer: ignore next */\n display: contents;\n height: 100%;\n }\n\n ul {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n li {\n margin: 0;\n padding: 0;\n }\n\n button:not(.result__tags-tag) {\n appearance: none;\n border: none;\n background: none;\n position: relative;\n inset-block-start: -2px;\n }\n\n .icon-button {\n color: inherit;\n align-self: normal;\n padding: 9px 7px;\n cursor: pointer;\n display: flex;\n align-items: center;\n }\n\n &__topbar {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n margin-block-end: 1em;\n\n &::after {\n content: '';\n width: calc(100% - 30px);\n inset-inline-start: 30px;\n position: relative;\n border-block-end: 1px solid #e5eef1;\n padding-block-start: 0.9em;\n }\n }\n\n &__applied-filters {\n border: solid 1px map.get($colors, lightgrey);\n text-transform: uppercase;\n border-radius: 3px;\n font-weight: bold;\n display: flex;\n align-items: center;\n line-height: 0.9;\n padding: 5px 5px 0;\n letter-spacing: 2px;\n flex-wrap: wrap;\n margin-block-end: 0.5rem;\n\n span {\n display: flex;\n align-items: center;\n }\n\n :host(.small) & {\n display: none;\n }\n }\n\n &__applied-nofilter {\n margin-inline: 0 5px;\n margin-block: 0 3px;\n padding-inline: 7px;\n padding-block: 10px;\n font-size: 12px;\n color: rgb(69 85 86 / 85%);\n }\n\n &__applied-filter {\n padding-inline: 8px 2px;\n padding-block: 5px 3px;\n margin-inline: 0 5px;\n margin-block: 0 5px;\n color: map.get($colors, darkgrey);\n font-size: 11px;\n border-radius: 2px;\n border: solid 1px rgb(0 132 169 / 50%);\n background-color: rgb(0 132 169 / 20%);\n line-height: 1;\n\n .icon-button {\n padding-inline: 10px 4px;\n padding-block: 2px 1px;\n\n nano-icon {\n pointer-events: none;\n }\n }\n }\n\n .topbar {\n &__bkbtn {\n position: relative;\n inset-inline-start: -7px;\n }\n\n &__query {\n :host(.small) & {\n display: none;\n }\n }\n\n &__filtering {\n display: flex;\n align-items: center;\n margin-block: 0;\n margin-inline: 1em 0;\n flex: 1;\n }\n\n &__order {\n min-width: 175px;\n max-width: 200px;\n margin-inline-start: auto;\n\n :host(.small) & {\n max-width: 300px;\n }\n }\n\n nano-select {\n opacity: 1;\n transition: 0.1s ease opacity;\n\n &:not(.hydrated) {\n opacity: 0;\n }\n }\n\n &__show-filters {\n margin-inline-start: 0.5em;\n text-transform: uppercase;\n display: none;\n flex-direction: column;\n align-items: center;\n\n nano-icon {\n font-size: 20px;\n }\n\n :host(.small) & {\n display: flex;\n }\n }\n\n &__filter-count {\n width: 12px;\n height: 12px;\n box-shadow: inset 0 3px 4px 0 rgb(0 0 0 / 20%);\n border: solid 1px #005c76;\n background-color: #005c76;\n color: white;\n font-size: 7px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n line-height: 1;\n margin-block-end: 3px;\n }\n }\n\n &__results {\n font-size: 14px;\n padding: 1em 40px;\n color: rgb(69 85 86 / 85%);\n width: 70%;\n height: 100%;\n\n @include media-breakpoint-down('sm') {\n padding: 1em 20px;\n }\n\n :host(.small) & {\n width: 100%;\n }\n }\n\n &__filters {\n outline: none;\n padding-inline: 0 40px;\n padding-block: 1.8em 1em;\n\n @include media-breakpoint-down('sm') {\n padding-inline-end: 20px;\n }\n\n flex: 1 1 30%;\n box-sizing: border-box;\n\n :host(:not(.small)) & {\n max-width: 350px;\n min-width: 220px;\n }\n }\n}\n\n.filters {\n color: map.get($colors, darkgrey);\n background: white;\n font-size: 14px;\n\n :host(.small) & {\n position: fixed;\n width: 0;\n height: 0;\n z-index: 10;\n inset-block-start: 0;\n inset-inline-end: 0;\n transition: all 0s ease 0.5s;\n background: none;\n\n &.show {\n height: 100vh;\n width: 100vw;\n transition: all 0s ease 0s;\n\n &::after {\n opacity: 1;\n }\n }\n\n &::after {\n content: '';\n background: rgb(0 0 0 / 50%);\n position: absolute;\n inset: 0;\n z-index: -1;\n opacity: 0;\n transition: 0.1s ease opacity;\n }\n }\n\n &__close-filters {\n display: none !important;\n font-size: 1.4em;\n\n :host(.small) & {\n display: inline-block !important;\n margin-inline: auto 0;\n margin-block: 0;\n }\n }\n\n &__old-posts {\n margin-inline-start: 1rem;\n }\n\n &-wrap {\n :host(.small) & {\n position: absolute;\n inset-block-start: 0;\n inset-inline-end: 0;\n background: rgb(247 246 246);\n transform: translateX(100%);\n width: 300px;\n min-width: 200px;\n max-width: 80vw;\n transition: transform 0.3s ease;\n padding: 1em;\n color: black;\n overflow: auto;\n height: 100vh;\n }\n }\n\n &.show {\n .filters-wrap {\n :host(.small) & {\n transform: translateX(0%);\n box-shadow: -3px -3px 7px rgb(0 0 0 / 10%);\n }\n }\n }\n\n ul {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n li {\n margin: 0;\n padding: 0;\n }\n\n nano-details {\n --padding: 0.8em;\n\n margin: 0.8em 0;\n\n strong[slot] {\n display: block;\n padding-inline-start: calc(20px - 0.8em);\n }\n\n nano-icon[slot='icon-end'] {\n padding-inline-start: calc(20px - 0.8em);\n padding-inline-end: calc(20px - 0.8em);\n }\n }\n\n li:last-child .filter-label {\n margin-block-end: 0;\n }\n\n .filter-label {\n display: flex;\n align-items: center;\n position: relative;\n margin: 0.5em 0;\n line-height: 1.4;\n z-index: 0;\n\n &::before {\n margin-inline: 0 1em;\n margin-block: 0;\n content: '';\n border: 1px solid map.get($colors, blue);\n background: map.get($colors, white);\n border-radius: 3px;\n height: 1em;\n width: 1em;\n min-width: 1em;\n min-height: 1em;\n display: inline-block;\n }\n\n &::after {\n @include svg-background-image(\n \"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='#ffffff' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/></svg>\"\n );\n\n content: '';\n height: 0.7em;\n width: 0.7em;\n position: absolute;\n inset-inline-start: 2px;\n inset-block-start: 50%;\n transform: translateY(-50%);\n z-index: 1;\n display: block;\n background-size: 100%;\n background-position: center center;\n background-repeat: no-repeat;\n }\n }\n\n .filter-cb {\n @include visually-hide;\n\n &:checked + .filter-label {\n &::before {\n background: map.get($colors, blue--darker);\n }\n }\n\n &:focus + .filter-label {\n &::before {\n box-shadow: 0 0 0 1px rgb(0 0 0 / 70%);\n }\n }\n }\n\n &-header {\n display: flex;\n align-items: center;\n border-block-end: 1px solid map.get($colors, lightblue);\n padding-block-end: 0.5rem;\n margin-block-end: 0.5rem;\n }\n\n &-reset {\n color: map.get($colors, blue);\n font-size: 12px;\n text-decoration: underline;\n margin-inline: auto 0;\n margin-block: 0;\n\n :host(.small) & {\n margin: 0;\n }\n }\n\n &-title {\n margin: 0;\n text-transform: uppercase;\n color: rgb(69 85 86 / 85%);\n font-weight: bold;\n font-size: 14px;\n\n :host(.small) & {\n display: none;\n }\n }\n}\n\n.result {\n text-decoration: none;\n display: flex;\n flex-flow: row wrap;\n padding-block-end: 14px;\n border-block-end: 1px solid map.get($colors, lightblue);\n\n * {\n word-wrap: break-word;\n word-break: break-word;\n }\n\n &__title {\n margin: 1em 0 0.5em;\n width: 70%;\n display: flex;\n\n a {\n color: lighten(map.get($colors, blue), 4%);\n font-size: 14px;\n line-height: 1.43;\n text-decoration: none;\n font-weight: 600;\n }\n\n nano-icon {\n margin-inline: 0 0.5em;\n margin-block: 0;\n min-width: 20px;\n min-height: 20px;\n opacity: 0.8;\n }\n\n @include media-breakpoint-down('lg') {\n width: 100%;\n }\n }\n\n &__body {\n color: map.get($colors, darkgrey);\n font-size: 13px;\n width: 70%;\n text-decoration: none;\n\n @include media-breakpoint-down('lg') {\n width: 100%;\n }\n }\n\n &__pdf {\n display: inline-block;\n margin-inline-start: 0.5rem;\n color: map.get($colors, palegrey);\n }\n\n &__meta {\n display: flex;\n flex-flow: row wrap;\n color: map.get($colors, darkgrey);\n font-size: 11px;\n line-height: 13px;\n width: 100%;\n align-items: center;\n\n > * {\n margin-block-start: 0.5rem;\n\n &:not(:last-child) {\n padding-inline-end: 0;\n\n &::after {\n content: '';\n height: 1rem;\n width: 1px;\n background: #90c6e7;\n display: inline-block;\n margin-inline-start: 0.7rem;\n margin-inline-end: 0.7rem;\n\n @include media-breakpoint-down('sm') {\n display: none;\n }\n }\n }\n }\n\n @include media-breakpoint-down('sm') {\n flex-flow: column;\n align-items: flex-start;\n }\n }\n\n &__tags {\n display: flex;\n flex-flow: row wrap;\n\n @include media-breakpoint-down('sm') {\n padding-inline-start: 0;\n }\n\n &-tag {\n color: map.get($colors, darkgrey);\n display: inline-block;\n font-size: 0.4375rem;\n letter-spacing: 1.4px;\n background: #fff;\n border-radius: 2px;\n text-transform: uppercase;\n padding: 0 4px 1px 5px;\n font-weight: 600;\n margin: 3px 0.25rem 0.25rem 0;\n border: 1px solid #b5aea7;\n white-space: nowrap;\n line-height: 13px;\n }\n }\n\n &__type {\n font-weight: 600;\n text-transform: capitalize;\n white-space: nowrap;\n display: flex;\n align-items: center;\n }\n\n &__date {\n display: flex;\n align-items: center;\n color: map.get($colors, darkgrey);\n }\n\n &__source {\n color: map.get($colors, darkgrey);\n padding-inline-end: 0.75rem;\n }\n\n &__authors {\n font-size: 12px;\n color: map.get($colors, darkgrey);\n margin-block-end: 0.25rem;\n text-decoration: none;\n width: 70%;\n }\n\n &__buttons {\n width: 70%;\n margin-block-end: 0.5rem;\n\n &-button {\n background-color: map.get($colors, blue);\n color: #fff;\n padding: 5px 8px 1px;\n border-radius: 4px;\n display: inline-block;\n font-size: 11px;\n text-decoration: none;\n border: none;\n }\n }\n\n &__promo {\n width: 70%;\n margin-block-end: 0.5rem;\n text-decoration: none;\n color: map.get($colors, darkgrey);\n\n &-box {\n width: 300px;\n background-color: #e3eef1;\n padding: 12px 12px 8px 4px;\n display: flex;\n flex-flow: row nowrap;\n margin-block-start: 1rem;\n }\n\n &-bigdate {\n flex: 0 1 60px;\n text-align: center;\n font-weight: 600;\n color: map.get($colors, blue);\n text-transform: uppercase;\n line-height: 1.25;\n letter-spacing: 1.5px;\n\n @include media-breakpoint-down('lg') {\n width: 100%;\n }\n\n span {\n color: map.get($colors, darkgrey);\n display: block;\n }\n\n & ~ div {\n padding-inline-start: 1rem;\n border-inline-start: 1px solid #c5dbe1;\n }\n }\n\n &-date {\n font-size: 12px;\n }\n\n &-venue {\n font-size: 12px;\n }\n\n nano-icon {\n color: map.get($colors, blue);\n position: relative;\n inset-block-start: 1px;\n padding-inline-end: 2px;\n }\n }\n\n &__image {\n display: block;\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n border-radius: 4px;\n position: relative;\n width: 100%;\n height: 150px;\n margin-block-end: 0.5rem;\n\n @include media-breakpoint-up('sm') {\n width: 142px;\n height: 80px;\n }\n\n nano-icon {\n position: absolute;\n inset-block-start: calc(50% - 0.75rem);\n inset-inline-start: calc(50% - 0.75rem);\n font-size: 1.5rem;\n color: #0084a9;\n\n --primary-color: #fff;\n --secondary-color: #0084a9;\n --primary-opacity: 1;\n\n @include media-breakpoint-down('sm') {\n font-size: 3rem;\n inset-block-start: calc(50% - 1.5rem);\n inset-inline-start: calc(50% - 1.5rem);\n }\n }\n }\n\n &__video {\n &-body {\n width: 70%;\n text-decoration: none;\n display: flex;\n flex-flow: row wrap;\n\n @include media-breakpoint-down('lg') {\n width: 100%;\n }\n\n @include media-breakpoint-down('sm') {\n flex-flow: column;\n }\n\n .result__body {\n padding-inline-start: 1rem;\n display: flex;\n flex-direction: column;\n margin-block-end: 0;\n flex: 1;\n\n @include media-breakpoint-down('sm') {\n padding-inline-start: 0;\n }\n\n p {\n display: inline;\n margin: 0;\n }\n\n u,\n li,\n a {\n text-decoration: none;\n }\n\n .result__meta {\n margin-block-start: 0.5rem;\n }\n\n .result__description {\n flex: 1 0 auto;\n }\n }\n }\n }\n}\n\n.search-empty {\n padding: 3rem 0;\n text-align: center;\n border-block-start: 1px solid #e5eef1;\n\n h2 {\n color: #455556;\n font-size: 1.125rem;\n margin-block-end: 0.5rem;\n }\n\n &-icon {\n font-size: 7rem;\n\n --icon-color: #e4e6e8;\n\n margin-block-end: 2rem;\n }\n}\n\n.search__highlight {\n background: #fbffbf;\n font-style: normal;\n}\n","import {\n Component,\n h,\n Host,\n Element,\n State,\n ComponentInterface,\n Watch,\n Listen,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport type { AloliaSearchResultDetail, SearchIndex } from '../../interface';\n\nconst filterOldPosts =\n 'created > ' + Math.floor((Date.now() - 63115200000) / 1000);\n\n/**\n * Nanopore Global Search results component\n * to be used in conjunction with [Globla-Nav](/story/nano-compounds-global-nav).\n * A shortcut / helper which combines algolia components.\n * There should only be one <nano-global-search-results> per page\n * and should be a direct child of <nano-global-nav>\n */\n@Component({\n tag: 'nano-global-search-results',\n styleUrl: 'global-search-results.scss',\n shadow: true,\n})\nexport class GlobalSearchResults implements ComponentInterface {\n private algoliaResultsEle: HTMLNanoAlgoliaResultsElement;\n private filtersDiv: HTMLElement;\n private openFilterBtn: HTMLButtonElement;\n private ro: ResizeObserver;\n\n @State() algoliaEle: HTMLNanoAlgoliaElement;\n @State() currentWidth: number;\n @State() apiKey: string;\n @State() appId: string;\n @State() index: SearchIndex;\n\n @Element() private el: HTMLNanoGlobalSearchResultsElement;\n\n /** Fired when the user clicks the 'back' button / closes the search panel\n * Calling `event.preventDefault()` will prevent it from being closed.\n */\n @Event() nanoSearchGoBack: EventEmitter;\n\n @Watch('algoliaEle')\n @Watch('apiKey')\n @Watch('appId')\n handleAlgoliaCredsChange() {\n if (!this.apiKey || !this.appId || !this.algoliaEle) return;\n this.algoliaEle.apiKey = this.apiKey;\n this.algoliaEle.appId = this.appId;\n }\n\n @Watch('algoliaEle')\n @Watch('index')\n handleAlgoliaIndexChange() {\n if (!this.index || !this.algoliaEle) return;\n this.algoliaEle.searchIndex = this.index;\n }\n\n @Listen('nanoSearchReset', { target: 'body' })\n handleGlobalNavReset(e: CustomEvent & { target: HTMLElement }) {\n if (e.target.tagName !== 'NANO-GLOBAL-NAV') return;\n this.algoliaResultsEle = null;\n this.goback();\n }\n\n @Listen('nanoSearchResult', { target: 'body' })\n handleGlobalNavSearch(e: CustomEvent & { target: HTMLElement }) {\n if (e.target.tagName !== 'NANO-GLOBAL-NAV') return;\n const {\n detail: { results, client },\n } = e as { detail: AloliaSearchResultDetail };\n const result = results.find((result) => result.selected);\n\n this.apiKey = client.apiKey;\n this.appId = client.appId;\n this.index = {\n name: result.indexName,\n index: result.index,\n domain: result.domain,\n filters: result.filters,\n };\n this.algoliaEle.query = result.query;\n }\n\n @Listen('nanoChange')\n handleReorder(e: CustomEvent & { target: HTMLNanoSelectElement }) {\n if (\n e\n .composedPath()\n .find(\n (ele: HTMLElement) =>\n ele.classList && ele.classList.contains('indexchange')\n ) &&\n !!this.algoliaResultsEle\n ) {\n this.changeOrder(e);\n }\n }\n\n @Listen('nanoResultsShown')\n attachListeners(e: CustomEvent & { target: HTMLElement }) {\n if (\n !e\n .composedPath()\n .find((ele: HTMLElement) => ele.id && ele.id === 'main-search')\n )\n return;\n\n this.algoliaResultsEle = this.algoliaEle.querySelector(\n '#main-search-results'\n );\n\n // add results listeners\n this.attachResultListeners();\n\n this.algoliaEle.querySelectorAll('.filters-reset').forEach((item) => {\n item.addEventListener('click', () => {\n this.removeAllFilters();\n });\n });\n\n this.algoliaEle.querySelectorAll('.close-filters').forEach((item) => {\n item.addEventListener('click', () => {\n this.closefilters();\n });\n });\n\n const filterWrap = this.algoliaEle.querySelector('.filters-wrap');\n if (filterWrap) {\n filterWrap.addEventListener('click', (e) => {\n e.stopPropagation();\n });\n }\n\n this.filtersDiv = this.algoliaEle.querySelector('#main-search-filters');\n\n const oldResults = this.algoliaEle.querySelector('.old-posts');\n if (oldResults) {\n oldResults.addEventListener(\n 'change',\n (e: Event & { target: HTMLInputElement }) => {\n this.toggleOldResults(e.target.checked);\n }\n );\n }\n }\n\n @Listen('nanoNewResults', { target: 'body' })\n attachResultListeners(e?: CustomEvent & { target: HTMLElement }) {\n if (e && e.composedPath().find((el) => el === this.algoliaEle)) {\n this.algoliaResultsEle = this.algoliaEle.querySelector(\n 'nano-algolia-results'\n );\n }\n if (!this.algoliaResultsEle) return;\n const resultEle = this.algoliaResultsEle;\n\n resultEle.querySelectorAll('.remove-filter').forEach((item) => {\n item.addEventListener('click', (clickEv: MouseEvent) => {\n const filter = clickEv.target as HTMLElement;\n this.removeFilter(filter.dataset.filter, filter.dataset.filterVal);\n });\n });\n\n resultEle.querySelectorAll('.back-btn').forEach((item) => {\n item.addEventListener('click', () => {\n this.goback();\n });\n });\n\n resultEle.querySelectorAll('.topbar__show-filters').forEach((item) => {\n this.openFilterBtn = item as HTMLButtonElement;\n item.addEventListener('click', () => {\n this.filtersDiv.tabIndex = -1;\n this.filtersDiv.classList.add('show');\n this.filtersDiv.setAttribute('aria-expanded', 'true');\n document.body.style.overflow = 'hidden';\n setTimeout(() => this.filtersDiv.focus(), 20);\n });\n });\n\n const tags = Array.from(resultEle.querySelectorAll('.result__tags-tag'));\n tags.forEach((tag) => {\n tag.removeEventListener('click', this.tagClick);\n tag.addEventListener('click', this.tagClick);\n });\n }\n\n private tagClick = (e: MouseEvent & { target: HTMLElement }) => {\n e.preventDefault();\n let tagVal = e.target.dataset.value;\n tagVal = tagVal === 'publication' ? 'publications' : tagVal;\n tagVal = tagVal.toLowerCase();\n\n const filter: HTMLNanoAlgoliaFilterElement = this.algoliaEle.querySelector(\n 'nano-algolia-filter[filter-name=\"tags\"]'\n );\n if (filter.value.indexOf(tagVal) === -1) {\n filter.value = filter.value ? [...filter.value, tagVal] : [tagVal];\n }\n };\n\n private changeOrder(ev) {\n this.algoliaEle.replicaIndex = ev.detail.value;\n }\n\n private goback() {\n const goBackEvent = this.nanoSearchGoBack.emit();\n if (goBackEvent.defaultPrevented) return;\n\n this.removeAllFilters();\n this.algoliaEle.query = '';\n this.algoliaEle.showResults = false;\n }\n\n private removeFilter(facet, filter) {\n this.algoliaEle.removeFilters(facet, filter);\n }\n\n private removeAllFilters() {\n this.algoliaEle.removeFilters();\n }\n\n private closefilters() {\n if (!this.filtersDiv) return;\n this.filtersDiv.tabIndex = null;\n this.filtersDiv.classList.remove('show');\n this.filtersDiv.setAttribute('aria-expanded', 'false');\n document.body.style.overflow = '';\n setTimeout(() => this.openFilterBtn.focus(), 20);\n }\n\n private toggleOldResults(show: boolean) {\n if (show)\n this.algoliaEle.filters = this.algoliaEle.filters.filter(\n (f) => !f.startsWith('created > ')\n );\n else this.algoliaEle.filters = [...this.algoliaEle.filters, filterOldPosts];\n }\n\n componentDidLoad() {\n this.algoliaEle.filters = [filterOldPosts]; // only get last 2 years\n\n if (!window['ResizeObserver']) return;\n\n this.ro = new ResizeObserver((entries) => {\n for (const entry of entries) {\n if (!entry.contentRect.width) return;\n this.currentWidth = entry.contentRect.width;\n }\n });\n this.ro.observe(this.el);\n }\n\n render() {\n return (\n <Host\n class={{ small: this.currentWidth < 677 }}\n dir={\n (this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : undefined\n }\n >\n <nano-algolia\n store-id=\"searchq\"\n store-method=\"url-hash-push\"\n class=\"main-search__wrap sc-nano-global-search-results\"\n ref={(ele) => (this.algoliaEle = ele)}\n id=\"main-search\"\n >\n <template slot=\"template\">\n {\n /* html */ `<div class=\"main-search sc-nano-global-search-results\">\n <nano-algolia-results id=\"main-search-results\" class=\"main-search__results sc-nano-global-search-results\" infinite-scroll>\n <script type=\"text/template\" slot=\"start-template\">\n <div class=\"sc-nano-global-search-results main-search__topbar topbar\">\n <button class=\"sc-nano-global-search-results topbar__bkbtn back-btn icon-button\">\n <nano-icon class=\"sc-nano-global-search-results\" name=\"light/chevron-left\" size=\"small\"></nano-icon>\n </button>\n <div>\n <em class=\"sc-nano-global-search-results topbar__query\">'{{ it.query }}' - </em> <strong>{{ it.totalHitsWithFilters }}</strong> Results\n </div>\n\n <div class=\"sc-nano-global-search-results topbar__filtering\">\n {{ @if (it.results.length) }}\n\n {{ @if (it.indexName === 'All') }}\n <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n <nano-option value=\"all_prod_en\">Sort by: Most relevant</nano-option>\n <nano-option value=\"all_prod_en_date_desc\">Sort by: Newest</nano-option>\n <nano-option value=\"all_prod_en_date_asc\">Sort by: Oldest</nano-option>\n <nano-option value=\"all_prod_en_activity_date_desc\">Sort by: Recent activity</nano-option>\n </nano-select>\n {{ /if }}\n\n {{ @if (it.indexName === 'www') }}\n <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n <nano-option value=\"cws_english_en\">Sort by: Most relevant</nano-option>\n <nano-option value=\"cws_english_en_date_desc\">Sort by: Newest</nano-option>\n <nano-option value=\"cws_english_en_date_asc\">Sort by: Oldest</nano-option>\n </nano-select>\n {{ /if }}\n\n {{ @if (it.indexName === 'Resources') }}\n <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n <nano-option value=\"cws_english_resources_en\">Sort by: Most relevant</nano-option>\n <nano-option value=\"cws_english_resources_en_featured_desc\">Sort by: Newest</nano-option>\n <nano-option value=\"cws_english_resources_en_featured_asc\">Sort by: Oldest</nano-option>\n </nano-select>\n {{ /if }}\n\n {{ @if (it.indexName === 'Store') }}\n <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n <nano-option value=\"store_prod\">Sort by: Most relevant</nano-option>\n <nano-option value=\"store_prod_date_desc\">Sort by: Newest</nano-option>\n <nano-option value=\"store_prod_date_asc\">Sort by: Oldest</nano-option>\n </nano-select>\n {{ /if }}\n\n {{ @if (it.indexName === 'Community') }}\n <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--community indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n <nano-option value=\"community_prod\">Sort by: Most relevant</nano-option>\n <nano-option value=\"community_prod_date_desc\">Sort by: Newest</nano-option>\n <nano-option value=\"community_prod_date_asc\">Sort by: Oldest</nano-option>\n <nano-option value=\"community_prod_activity_date_desc\">Sort by: Recent activity</nano-option>\n </nano-select>\n {{ /if }}\n {{ /if }}\n\n <button class=\"sc-nano-global-search-results topbar__show-filters filters-title\" aria-controls=\"main-search-filters\">\n {{ @if (it.appliedFilters && it.appliedFilters.length > 0) }}\n <span class=\"sc-nano-global-search-results topbar__filter-count\">\n {{ (it.appliedFilters.reduce(function(a, b) { return a + (b.values ? b.values.length : 0) }, 0)) }}\n </span>\n {{ /if }}\n <nano-icon class=\"sc-nano-global-search-results\" name=\"light/filter\"></nano-icon>\n </button>\n </div>\n </div>\n\n {{ @if (it.results.length) }}\n <div class=\"sc-nano-global-search-results main-search__applied-filters\">\n {{ @if (it.appliedFilters) }}\n {{ @each(it.appliedFilters) => filterObj }}\n {{ @each(filterObj.values) => filterVal }}\n <span class=\"sc-nano-global-search-results main-search__applied-filter\">\n {{ filterVal | public_name }}\n <button class=\"sc-nano-global-search-results icon-button remove-filter\" data-filter=\"{{ filterObj.name }}\" data-filter-val=\"{{ filterVal }}\">\n <nano-icon class=\"sc-nano-global-search-results\" name=\"light/times\"></nano-icon>\n </button>\n </span>\n {{ /each }}\n {{ /each }}\n {{ #else }}\n <span class=\"sc-nano-global-search-results main-search__applied-nofilter\">&nbsp;</span>\n {{ /if }}\n </div>\n {{ /if }}\n </script>\n\n <script type=\"text/template\" slot=\"result-template\">\n <!-- START NO CONTENT -->\n {{ @if ((!it.results || !it.results.length)) }}\n <div class=\"search-empty\">\n <nano-icon name=\"light/search\" class=\"search-empty-icon\"></nano-icon>\n <h2>No matches found...</h2>\n <p>Please try a different search query.</p>\n </div>\n {{ /if }}\n <!-- END NO CONTENT -->\n {{ @if (it.totalHitsWithFilters > 0) }}\n {{ @each(it.results) => result }}\n {{ contentType = result.content_type ? result.content_type : result.type }}\n <li class=\"sc-nano-global-search-results\">\n <div class=\"sc-nano-global-search-results result\">\n <h4 class=\"sc-nano-global-search-results result__title\" data-icon-set=\"{{(iconSet = false)}}\">\n <a href=\"{{ result.url | abs_url(it, result) }}\">\n {{ result._snippetResult.title.value | safe }}\n {{ @if (contentType === 'technical_document' || contentType === 'literature' || contentType === 'white_paper' || contentType === 'protocol') }}\n <span class=\"sc-nano-global-search-results result__pdf\">PDF</span>\n {{ /if }}\n </a>\n </h4>\n {{ @if (result.authors) }}\n {{ @if (typeof result.authors === 'string') }}\n <a class=\"sc-nano-global-search-results result__authors\" href=\"{{ result.url | abs_url(it, result) }}\">Authors: {{ result.authors | trim_to(50) }}</a>\n {{ #else }}\n <a class=\"sc-nano-global-search-results result__authors\" href=\"{{ result.url | abs_url(it, result) }}\">\n {{ @each(result.authors) => author, index }}\n <!-- {{ @if(index == 0)}} -->\n Authors: {{ author | trim_to(60) }}\n <!-- {{ /if }} -->\n {{ /each }}\n </a>\n {{ /if }}\n {{ /if }}\n {{ @if (contentType === 'video' || contentType === 'lc_lightning_talk' ) }}\n {{ @if (result.name) }}\n <a class=\"sc-nano-global-search-results result__authors\" href=\"{{ result.url | abs_url(it, result) }}\">Speaker: {{ result.name | trim_to(50) }}</a>\n {{ /if }}\n <a class=\"sc-nano-global-search-results result__video-body\" href=\"{{ result.url | abs_url(it, result) }}\">\n {{ @if (result.image) }}\n <div class=\"sc-nano-global-search-results result__image\" style=\"background-image: url('{{ result.image | abs_url(it, result) }}')\">\n <nano-icon class=\"sc-nano-global-search-results\" name=\"duotone/play-circle\"></nano-icon>\n </div>\n {{ /if }}\n <div class=\"sc-nano-global-search-results result__body\">\n <div class=\"sc-nano-global-search-results result__description\">\n {{ @if (result.description) }}\n {{ result._snippetResult.description.value | safe }}\n {{ /if }}\n </div>\n </div>\n <div class=\"sc-nano-global-search-results result__meta\">\n {{ @if (result.type || result.content_type) }}\n <div class=\"sc-nano-global-search-results result__type\">\n {{ @if (contentType === 'lc_lightning_talk') }}\n Presentation\n {{ #else }}\n {{ contentType }}\n {{ /if }}\n </div>\n {{ /if }}\n {{ @if (result.tags) }}\n <div class=\"sc-nano-global-search-results result__tags\">\n {{ @if (typeof result.tags === 'string') }}\n <button data-value=\"{{ result.tags | lowercase }}\" class=\"sc-nano-global-search-results result__tags-tag\">{{ result.tags }}</button>\n {{ #else }}\n {{ @each(result.tags) => tag, index }}\n {{ @if(index < 5)}}\n {{ @if (tag !== \"No video\" && tag !== \"Resources\" && tag !== \"Video\") }}\n <button data-value=\"{{ tag | lowercase }}\" class=\"sc-nano-global-search-results result__tags-tag\">{{ tag }}</button>\n {{ /if }}\n {{ /if }}\n {{ /each }}\n {{ /if }}\n </div>\n {{ /if }}\n {{ @if (result.source) }}\n <div class=\"sc-nano-global-search-results result__source\">Source: {{ result.source }}</div>\n {{ /if }}\n </div>\n </a>\n {{ /if }}\n {{ @if (result.body) }}\n <a class=\"sc-nano-global-search-results result__body\" href=\"{{ result.url | abs_url(it, result) }}\">{{ result._snippetResult.body.value | safe }}</a>\n {{ /if }}\n {{ @if (contentType === 'product' }}\n <div class=\"sc-nano-global-search-results result__buttons\">\n <a class=\"sc-nano-global-search-results result__buttons-button\" href=\"{{ result.url | abs_url(it, result) }}\">View product</a>\n </div>\n {{ /if }}\n {{ @if (contentType === 'event') }}\n <a class=\"sc-nano-global-search-results result__promo\" href=\"{{ result.url | abs_url(it, result) }}\">\n <div class=\"sc-nano-global-search-results result__promo-box\">\n <div class=\"sc-nano-global-search-results result__promo-bigdate\">\n {{ result.start_date | date_long({year: undefined, month: 'short', day: undefined}) }}\n <span>{{ result.start_date | date_long({year: undefined, month: undefined, day: 'numeric'}) }}</span>\n </div>\n <div>\n <div class=\"sc-nano-global-search-results result__promo-date\">\n <nano-icon class=\"sc-nano-global-search-results\" name=\"light/calendar-alt\"></nano-icon>\n {{ @if (result.end_date) }}\n {{ @if (result.end_date !== result.start_date) }}\n {{ result.start_date | date_long({weekday: 'short', day: 'numeric', month: 'short'}) }} - {{ result.end_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}\n {{ #else }}\n {{ result.start_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}\n {{ /if }}\n {{ #else }}\n {{ @if (result.start_date) }}\n {{ result.start_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}\n {{ /if }}\n {{ /if }}\n </div>\n <div class=\"sc-nano-global-search-results result__promo-venue\">\n <nano-icon class=\"sc-nano-global-search-results\" name=\"light/map-marker-alt\"></nano-icon>\n Venue\n </div>\n </div>\n </div>\n </a>\n {{ /if }}\n {{ @if (contentType !== 'lc_lightning_talk' && contentType !== 'video') }}\n <div class=\"sc-nano-global-search-results result__meta\">\n {{ @if (result.type || result.content_type) }}\n <div class=\"sc-nano-global-search-results result__type\">\n {{ @if (contentType === 'news_item') }}\n News\n {{ #elif (contentType === 'static_page' || contentType === 'bespoke') }}\n Page\n {{ #elif (contentType === 'case_study') }}\n Case study\n {{ #elif (contentType === 'lc_poster') }}\n Poster\n {{ #elif (contentType === 'nanopore_live') }}\n Live stream\n {{ #elif (contentType === 'data_release') }}\n Data release\n {{ #elif (contentType === 'research_area') }}\n Research area\n {{ #elif (contentType === 'white_paper') }}\n White paper\n {{ #elif (contentType === 'technical_document') }}\n Technical document\n {{ #elif (contentType === 'info_sheet') }}\n Info sheet\n {{ #elif (contentType === 'lc_home' || contentType === 'lc_venue') }}\n London Calling\n {{ #else }}\n {{ contentType }}\n {{ /if }}\n </div>\n {{ /if }}\n {{ @if (contentType !== 'event') }}\n {{ @if (result.updated) }}\n <div class=\"sc-nano-global-search-results result__date\">{{ result.updated | date_long({year: 'numeric', month: 'short', day: 'numeric'}) }}</div>\n {{ #else }}\n {{ @if (result.created) }}\n <div class=\"sc-nano-global-search-results result__date\">{{ result.created | date_long({year: 'numeric', month: 'short', day: 'numeric'}) }}</div>\n {{ /if }}\n {{ /if }}\n {{ /if }}\n {{ @if (result.tags) }}\n <div class=\"sc-nano-global-search-results result__tags\">\n {{ @if (typeof result.tags === 'string') }}\n {{ @if (result.tags !== \"Resources\" && result.tags !== \"Tools\" && result.tags !== \"Publications\" && result.tags !== \"Case studies\") }}\n <button data-value=\"{{ result.tags | lowercase }}\" class=\"sc-nano-global-search-results result__tags-tag\">{{ result.tags }}</button>\n {{ /if }}\n {{ #else }}\n {{ @each(result.tags) => tag, index }}\n {{ @if(index < 5)}}\n {{ @if (tag !== \"Resources\" && tag !== \"Tools\" && tag !== \"Publications\" && tag !== \"Case studies\") }}\n <button data-value=\"{{ tag | lowercase }}\" class=\"sc-nano-global-search-results result__tags-tag\">{{ tag }}</button>\n {{ /if }}\n {{ /if }}\n {{ /each }}\n {{ /if }}\n </div>\n {{ /if }}\n {{ @if (result.source) }}\n <div class=\"sc-nano-global-search-results result__source\">Source: {{ result.source }}</div>\n {{ /if }}\n </div>\n {{ /if }}\n </div>\n </li>\n {{ /each }}\n {{ /if }}\n </script>\n\n <div slot=\"start-output\"></div>\n <ul slot=\"result-output\" class=\"sc-nano-global-search-results\"></ul>\n </nano-algolia-results>\n\n {{ @if(Object.keys(it.origFilters).length) }}\n <div class=\"sc-nano-global-search-results main-search__filters filters close-filters\" id=\"main-search-filters\">\n <div class=\"sc-nano-global-search-results filters-wrap\">\n {{ @if(it.totalHits) }}\n <div class=\"sc-nano-global-search-results filters-header\">\n <strong class=\"sc-nano-global-search-results filters-title\">Filters</strong>\n <button class=\"sc-nano-global-search-results filters-reset\">Reset</button>\n <button class=\"sc-nano-global-search-results filters__close-filters close-filters icon-button\" aria-controls=\"main-search-filters\">\n <nano-icon class=\"sc-nano-global-search-results\" name=\"light/times\"></nano-icon>\n </button>\n </div>\n {{ /if }}\n\n <div>\n <input class=\"sc-nano-global-search-results filter-cb old-posts filters__old-posts\" type=\"checkbox\" name=\"old-posts\" id=\"old-posts\" value=\"nice\" />\n <label class=\"sc-nano-global-search-results filter-label\" for=\"old-posts\">\n <span>Include posts older than 2 years</span>\n </label>\n {{ @if(it.origFilters['type']) }}\n <nano-details class=\"sc-nano-global-search-results\" open={true} icon-rotation=\"180\">\n <strong slot=\"label\">Type</strong>\n <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n <nano-algolia-filter store-id=\"searchf1\" store-method=\"url-hash-push\" filter-name=\"type\">\n <script type=\"text/template\" slot=\"filter-template\">\n <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n {{ @foreach(it.dyn) => filter, filterVal }}\n <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n <input class=\"sc-nano-global-search-results filter-cb\" type=\"checkbox\" value=\"{{ filter }}\" id=\"type-{{ filter }}-{{x}}\" />\n <label class=\"sc-nano-global-search-results filter-label\" for=\"type-{{ filter }}-{{x}}\">\n <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n </label></li>\n {{ /foreach }}\n </ul>\n </script>\n <div slot=\"output\"></div>\n </nano-algolia-filter>\n </nano-details>\n {{ /if }}\n\n {{ @if(it.origFilters['channel']) }}\n <nano-details open={true} icon-rotation=\"180\">\n <strong slot=\"label\">Channels</strong>\n <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n <nano-algolia-filter store-id=\"searchf2\" store-method=\"url-hash-push\" filter-name=\"channel\">\n <script type=\"text/template\" slot=\"filter-template\">\n <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n {{ @foreach(it.dyn) => filter, filterVal }}\n <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n <input class=\"filter-cb sc-nano-global-search-results\" type=\"checkbox\" value=\"{{ filter }}\" id=\"channel-{{ filter }}-{{x}}\" />\n <label class=\"filter-label sc-nano-global-search-results\" for=\"channel-{{ filter }}-{{x}}\">\n <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n </label></li>\n {{ /foreach }}\n </ul>\n </script>\n <div slot=\"output\"></div>\n </nano-algolia-filter>\n </nano-details>\n {{ /if }}\n\n {{ @if(it.origFilters['authors']) }}\n <nano-details open={true} icon-rotation=\"180\">\n <strong slot=\"label\">Authors</strong>\n <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n <nano-algolia-filter store-id=\"searchf3\" store-method=\"url-hash-push\" filter-name=\"authors\">\n <script type=\"text/template\" slot=\"filter-template\">\n <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n {{ @foreach(it.dyn) => filter, filterVal }}\n <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n <input class=\"filter-cb sc-nano-global-search-results\" type=\"checkbox\" value=\"{{ filter }}\" id=\"authors-{{ filter }}-{{x}}\" />\n <label class=\"filter-label sc-nano-global-search-results\" for=\"authors-{{ filter }}-{{x}}\">\n <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n </label></li>\n {{ /foreach }}\n </ul>\n </script>\n <div slot=\"output\"></div>\n </nano-algolia-filter>\n </nano-details>\n {{ /if }}\n\n {{ @if(it.origFilters['categories_without_path']) }}\n <nano-details open={true} icon-rotation=\"180\">\n <strong slot=\"label\">Category</strong>\n <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n <nano-algolia-filter store-id=\"searchf4\" store-method=\"url-hash-push\" filter-name=\"categories_without_path\">\n <script type=\"text/template\" slot=\"filter-template\">\n <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n {{ @foreach(it.dyn) => filter, filterVal }}\n {{ @if(!filter.match(/publication/)) }}\n <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n <input class=\"sc-nano-global-search-results filter-cb\" type=\"checkbox\" value=\"{{ filter }}\" id=\"cwp-{{ filter }}-{{x}}\" />\n <label class=\"sc-nano-global-search-results filter-label\" for=\"cwp-{{ filter }}-{{x}}\">\n <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n </label></li>\n {{ /if }}\n {{ /foreach }}\n </ul>\n </script>\n <div slot=\"output\"></div>\n </nano-algolia-filter>\n </nano-details>\n {{ /if }}\n\n {{ @if(it.origFilters['tags']) }}\n <nano-details open={true} icon-rotation=\"180\">\n <strong slot=\"label\">Tags</strong>\n <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n <nano-algolia-filter store-id=\"searchf5\" store-method=\"url-hash-push\" filter-name=\"tags\">\n <script type=\"text/template\" slot=\"filter-template\">\n <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n {{ @foreach(it.dyn) => filter, filterVal }}\n <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n <input class=\"filter-cb sc-nano-global-search-results\" type=\"checkbox\" value=\"{{ filter | lowercase }}\" id=\"tags-{{ filter }}-{{x}}\" />\n <label class=\"filter-label sc-nano-global-search-results\" for=\"tags-{{ filter }}-{{x}}\">\n <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n </label></li>\n {{ /foreach }}\n </ul>\n </script>\n <div slot=\"output\"></div>\n </nano-algolia-filter>\n </nano-details>\n {{ /if }}\n </div>\n </div>\n </div>\n {{ /if }}\n </div>`\n }\n </template>\n <div slot=\"output\"></div>\n <slot />\n </nano-algolia>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"nano-global-search-results.js","mappings":"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","names":[],"sources":["./src/components/global-search-results/global-search-results.scss?tag=nano-global-search-results&encapsulation=shadow","./src/components/global-search-results/global-search-results.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n\n:host {\n display: block;\n flex: 1 1 100%;\n}\n\n.main-search {\n display: flex;\n background: white;\n font-size: 14px;\n min-height: calc(100vh - 63px);\n justify-content: space-between;\n\n &__wrap {\n /* autoprefixer: ignore next */\n display: contents;\n height: 100%;\n }\n\n ul {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n li {\n margin: 0;\n padding: 0;\n }\n\n button:not(.result__tags-tag) {\n appearance: none;\n border: none;\n background: none;\n position: relative;\n inset-block-start: -2px;\n }\n\n .icon-button {\n color: inherit;\n align-self: normal;\n padding: 9px 7px;\n cursor: pointer;\n display: flex;\n align-items: center;\n }\n\n &__topbar {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n margin-block-end: 1em;\n\n &::after {\n content: '';\n width: calc(100% - 30px);\n inset-inline-start: 30px;\n position: relative;\n border-block-end: 1px solid #e5eef1;\n padding-block-start: 0.9em;\n }\n }\n\n &__applied-filters {\n border: solid 1px map.get($colors, lightgrey);\n text-transform: uppercase;\n border-radius: 3px;\n font-weight: bold;\n display: flex;\n align-items: center;\n line-height: 0.9;\n padding: 5px 5px 0;\n letter-spacing: 2px;\n flex-wrap: wrap;\n margin-block-end: 0.5rem;\n\n span {\n display: flex;\n align-items: center;\n }\n\n :host(.small) & {\n display: none;\n }\n }\n\n &__applied-nofilter {\n margin-inline: 0 5px;\n margin-block: 0 3px;\n padding-inline: 7px;\n padding-block: 10px;\n font-size: 12px;\n color: rgb(69 85 86 / 85%);\n }\n\n &__applied-filter {\n padding-inline: 8px 2px;\n padding-block: 5px 3px;\n margin-inline: 0 5px;\n margin-block: 0 5px;\n color: map.get($colors, darkgrey);\n font-size: 11px;\n border-radius: 2px;\n border: solid 1px rgb(0 132 169 / 50%);\n background-color: rgb(0 132 169 / 20%);\n line-height: 1;\n\n .icon-button {\n padding-inline: 10px 4px;\n padding-block: 2px 1px;\n\n nano-icon {\n pointer-events: none;\n }\n }\n }\n\n .topbar {\n &__bkbtn {\n position: relative;\n inset-inline-start: -7px;\n }\n\n &__query {\n :host(.small) & {\n display: none;\n }\n }\n\n &__filtering {\n display: flex;\n align-items: center;\n margin-block: 0;\n margin-inline: 1em 0;\n flex: 1;\n }\n\n &__order {\n min-width: 175px;\n max-width: 200px;\n margin-inline-start: auto;\n\n :host(.small) & {\n max-width: 300px;\n }\n }\n\n nano-select {\n opacity: 1;\n transition: 0.1s ease opacity;\n\n &:not(.hydrated) {\n opacity: 0;\n }\n }\n\n &__show-filters {\n margin-inline-start: 0.5em;\n text-transform: uppercase;\n display: none;\n flex-direction: column;\n align-items: center;\n\n nano-icon {\n font-size: 20px;\n }\n\n :host(.small) & {\n display: flex;\n }\n }\n\n &__filter-count {\n width: 12px;\n height: 12px;\n box-shadow: inset 0 3px 4px 0 rgb(0 0 0 / 20%);\n border: solid 1px #005c76;\n background-color: #005c76;\n color: white;\n font-size: 7px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n line-height: 1;\n margin-block-end: 3px;\n }\n }\n\n &__results {\n font-size: 14px;\n padding: 1em 40px;\n color: rgb(69 85 86 / 85%);\n width: 70%;\n height: 100%;\n\n @include media-breakpoint-down('sm') {\n padding: 1em 20px;\n }\n\n :host(.small) & {\n width: 100%;\n }\n }\n\n &__filters {\n outline: none;\n padding-inline: 0 40px;\n padding-block: 1.8em 1em;\n\n @include media-breakpoint-down('sm') {\n padding-inline-end: 20px;\n }\n\n flex: 1 1 30%;\n box-sizing: border-box;\n\n :host(:not(.small)) & {\n max-width: 350px;\n min-width: 220px;\n }\n }\n}\n\n.filters {\n color: map.get($colors, darkgrey);\n background: white;\n font-size: 14px;\n\n :host(.small) & {\n position: fixed;\n width: 0;\n height: 0;\n z-index: 10;\n inset-block-start: 0;\n inset-inline-end: 0;\n transition: all 0s ease 0.5s;\n background: none;\n\n &.show {\n height: 100vh;\n width: 100vw;\n transition: all 0s ease 0s;\n\n &::after {\n opacity: 1;\n }\n }\n\n &::after {\n content: '';\n background: rgb(0 0 0 / 50%);\n position: absolute;\n inset: 0;\n z-index: -1;\n opacity: 0;\n transition: 0.1s ease opacity;\n }\n }\n\n &__close-filters {\n display: none !important;\n font-size: 1.4em;\n\n :host(.small) & {\n display: inline-block !important;\n margin-inline: auto 0;\n margin-block: 0;\n }\n }\n\n &__old-posts {\n margin-inline-start: 1rem;\n }\n\n &-wrap {\n :host(.small) & {\n position: absolute;\n inset-block-start: 0;\n inset-inline-end: 0;\n background: rgb(247 246 246);\n transform: translateX(100%);\n width: 300px;\n min-width: 200px;\n max-width: 80vw;\n transition: transform 0.3s ease;\n padding: 1em;\n color: black;\n overflow: auto;\n height: 100vh;\n }\n }\n\n &.show {\n .filters-wrap {\n :host(.small) & {\n transform: translateX(0%);\n box-shadow: -3px -3px 7px rgb(0 0 0 / 10%);\n }\n }\n }\n\n ul {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n li {\n margin: 0;\n padding: 0;\n }\n\n nano-details {\n --padding: 0.8em;\n\n margin: 0.8em 0;\n\n strong[slot] {\n display: block;\n padding-inline-start: calc(20px - 0.8em);\n }\n\n nano-icon[slot='icon-end'] {\n padding-inline-start: calc(20px - 0.8em);\n padding-inline-end: calc(20px - 0.8em);\n }\n }\n\n li:last-child .filter-label {\n margin-block-end: 0;\n }\n\n .filter-label {\n display: flex;\n align-items: center;\n position: relative;\n margin: 0.5em 0;\n line-height: 1.4;\n z-index: 0;\n\n &::before {\n margin-inline: 0 1em;\n margin-block: 0;\n content: '';\n border: 1px solid map.get($colors, blue);\n background: map.get($colors, white);\n border-radius: 3px;\n height: 1em;\n width: 1em;\n min-width: 1em;\n min-height: 1em;\n display: inline-block;\n }\n\n &::after {\n @include svg-background-image(\n \"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='#ffffff' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/></svg>\"\n );\n\n content: '';\n height: 0.7em;\n width: 0.7em;\n position: absolute;\n inset-inline-start: 2px;\n inset-block-start: 50%;\n transform: translateY(-50%);\n z-index: 1;\n display: block;\n background-size: 100%;\n background-position: center center;\n background-repeat: no-repeat;\n }\n }\n\n .filter-cb {\n @include visually-hide;\n\n &:checked + .filter-label {\n &::before {\n background: map.get($colors, blue--darker);\n }\n }\n\n &:focus + .filter-label {\n &::before {\n box-shadow: 0 0 0 1px rgb(0 0 0 / 70%);\n }\n }\n }\n\n &-header {\n display: flex;\n align-items: center;\n border-block-end: 1px solid map.get($colors, lightblue);\n padding-block-end: 0.5rem;\n margin-block-end: 0.5rem;\n }\n\n &-reset {\n color: map.get($colors, blue);\n font-size: 12px;\n text-decoration: underline;\n margin-inline: auto 0;\n margin-block: 0;\n\n :host(.small) & {\n margin: 0;\n }\n }\n\n &-title {\n margin: 0;\n text-transform: uppercase;\n color: rgb(69 85 86 / 85%);\n font-weight: bold;\n font-size: 14px;\n\n :host(.small) & {\n display: none;\n }\n }\n}\n\n.result {\n text-decoration: none;\n display: flex;\n flex-flow: row wrap;\n padding-block-end: 14px;\n border-block-end: 1px solid map.get($colors, lightblue);\n\n * {\n word-wrap: break-word;\n word-break: break-word;\n }\n\n &__title {\n margin: 1em 0 0.5em;\n width: 70%;\n display: flex;\n\n a {\n color: lighten(map.get($colors, blue), 4%);\n font-size: 14px;\n line-height: 1.43;\n text-decoration: none;\n font-weight: 600;\n }\n\n nano-icon {\n margin-inline: 0 0.5em;\n margin-block: 0;\n min-width: 20px;\n min-height: 20px;\n opacity: 0.8;\n }\n\n @include media-breakpoint-down('lg') {\n width: 100%;\n }\n }\n\n &__body {\n color: map.get($colors, darkgrey);\n font-size: 13px;\n width: 70%;\n text-decoration: none;\n\n @include media-breakpoint-down('lg') {\n width: 100%;\n }\n }\n\n &__pdf {\n display: inline-block;\n margin-inline-start: 0.5rem;\n color: map.get($colors, palegrey);\n }\n\n &__meta {\n display: flex;\n flex-flow: row wrap;\n color: map.get($colors, darkgrey);\n font-size: 11px;\n line-height: 13px;\n width: 100%;\n align-items: center;\n\n > * {\n margin-block-start: 0.5rem;\n\n &:not(:last-child) {\n padding-inline-end: 0;\n\n &::after {\n content: '';\n height: 1rem;\n width: 1px;\n background: #90c6e7;\n display: inline-block;\n margin-inline-start: 0.7rem;\n margin-inline-end: 0.7rem;\n\n @include media-breakpoint-down('sm') {\n display: none;\n }\n }\n }\n }\n\n @include media-breakpoint-down('sm') {\n flex-flow: column;\n align-items: flex-start;\n }\n }\n\n &__tags {\n display: flex;\n flex-flow: row wrap;\n\n @include media-breakpoint-down('sm') {\n padding-inline-start: 0;\n }\n\n &-tag {\n color: map.get($colors, darkgrey);\n display: inline-block;\n font-size: 0.4375rem;\n letter-spacing: 1.4px;\n background: #fff;\n border-radius: 2px;\n text-transform: uppercase;\n padding: 0 4px 1px 5px;\n font-weight: 600;\n margin: 3px 0.25rem 0.25rem 0;\n border: 1px solid #b5aea7;\n white-space: nowrap;\n line-height: 13px;\n }\n }\n\n &__type {\n font-weight: 600;\n text-transform: capitalize;\n white-space: nowrap;\n display: flex;\n align-items: center;\n }\n\n &__date {\n display: flex;\n align-items: center;\n color: map.get($colors, darkgrey);\n }\n\n &__source {\n color: map.get($colors, darkgrey);\n padding-inline-end: 0.75rem;\n }\n\n &__authors {\n font-size: 12px;\n color: map.get($colors, darkgrey);\n margin-block-end: 0.25rem;\n text-decoration: none;\n width: 70%;\n }\n\n &__buttons {\n width: 70%;\n margin-block-end: 0.5rem;\n\n &-button {\n background-color: map.get($colors, blue);\n color: #fff;\n padding: 5px 8px 1px;\n border-radius: 4px;\n display: inline-block;\n font-size: 11px;\n text-decoration: none;\n border: none;\n }\n }\n\n &__promo {\n width: 70%;\n margin-block-end: 0.5rem;\n text-decoration: none;\n color: map.get($colors, darkgrey);\n\n &-box {\n width: 300px;\n background-color: #e3eef1;\n padding: 12px 12px 8px 4px;\n display: flex;\n flex-flow: row nowrap;\n margin-block-start: 1rem;\n }\n\n &-bigdate {\n flex: 0 1 60px;\n text-align: center;\n font-weight: 600;\n color: map.get($colors, blue);\n text-transform: uppercase;\n line-height: 1.25;\n letter-spacing: 1.5px;\n\n @include media-breakpoint-down('lg') {\n width: 100%;\n }\n\n span {\n color: map.get($colors, darkgrey);\n display: block;\n }\n\n & ~ div {\n padding-inline-start: 1rem;\n border-inline-start: 1px solid #c5dbe1;\n }\n }\n\n &-date {\n font-size: 12px;\n }\n\n &-venue {\n font-size: 12px;\n }\n\n nano-icon {\n color: map.get($colors, blue);\n position: relative;\n inset-block-start: 1px;\n padding-inline-end: 2px;\n }\n }\n\n &__image {\n display: block;\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n border-radius: 4px;\n position: relative;\n width: 100%;\n height: 150px;\n margin-block-end: 0.5rem;\n\n @include media-breakpoint-up('sm') {\n width: 142px;\n height: 80px;\n }\n\n nano-icon {\n position: absolute;\n inset-block-start: calc(50% - 0.75rem);\n inset-inline-start: calc(50% - 0.75rem);\n font-size: 1.5rem;\n color: #0084a9;\n\n --primary-color: #fff;\n --secondary-color: #0084a9;\n --primary-opacity: 1;\n\n @include media-breakpoint-down('sm') {\n font-size: 3rem;\n inset-block-start: calc(50% - 1.5rem);\n inset-inline-start: calc(50% - 1.5rem);\n }\n }\n }\n\n &__video {\n &-body {\n width: 70%;\n text-decoration: none;\n display: flex;\n flex-flow: row wrap;\n\n @include media-breakpoint-down('lg') {\n width: 100%;\n }\n\n @include media-breakpoint-down('sm') {\n flex-flow: column;\n }\n\n .result__body {\n padding-inline-start: 1rem;\n display: flex;\n flex-direction: column;\n margin-block-end: 0;\n flex: 1;\n\n @include media-breakpoint-down('sm') {\n padding-inline-start: 0;\n }\n\n p {\n display: inline;\n margin: 0;\n }\n\n u,\n li,\n a {\n text-decoration: none;\n }\n\n .result__meta {\n margin-block-start: 0.5rem;\n }\n\n .result__description {\n flex: 1 0 auto;\n }\n }\n }\n }\n}\n\n.search-empty {\n padding: 3rem 0;\n text-align: center;\n border-block-start: 1px solid #e5eef1;\n\n h2 {\n color: #455556;\n font-size: 1.125rem;\n margin-block-end: 0.5rem;\n }\n\n &-icon {\n font-size: 7rem;\n\n --icon-color: #e4e6e8;\n\n margin-block-end: 2rem;\n }\n}\n\n.search__highlight {\n background: #fbffbf;\n font-style: normal;\n}\n","import {\n Component,\n h,\n Host,\n Element,\n State,\n ComponentInterface,\n Watch,\n Listen,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport type { AloliaSearchResultDetail, SearchIndex } from '../../interface';\n\nconst filterOldPosts =\n 'created > ' + Math.floor((Date.now() - 63115200000) / 1000);\n\n/**\n * Nanopore Global Search results component\n * to be used in conjunction with [Globla-Nav](/story/nano-compounds-global-nav).\n * A shortcut / helper which combines algolia components.\n * There should only be one <nano-global-search-results> per page\n * and should be a direct child of <nano-global-nav>\n */\n@Component({\n tag: 'nano-global-search-results',\n styleUrl: 'global-search-results.scss',\n shadow: true,\n})\nexport class GlobalSearchResults implements ComponentInterface {\n private algoliaResultsEle: HTMLNanoAlgoliaResultsElement;\n private filtersDiv: HTMLElement;\n private openFilterBtn: HTMLButtonElement;\n private ro: ResizeObserver;\n\n @State() algoliaEle: HTMLNanoAlgoliaElement;\n @State() currentWidth: number;\n @State() apiKey: string;\n @State() appId: string;\n @State() index: SearchIndex;\n\n @Element() private el: HTMLNanoGlobalSearchResultsElement;\n\n /** Fired when the user clicks the 'back' button / closes the search panel\n * Calling `event.preventDefault()` will prevent it from being closed.\n */\n @Event() nanoSearchGoBack: EventEmitter;\n\n @Watch('algoliaEle')\n @Watch('apiKey')\n @Watch('appId')\n handleAlgoliaCredsChange() {\n if (!this.apiKey || !this.appId || !this.algoliaEle) return;\n this.algoliaEle.apiKey = this.apiKey;\n this.algoliaEle.appId = this.appId;\n }\n\n @Watch('algoliaEle')\n @Watch('index')\n handleAlgoliaIndexChange() {\n if (!this.index || !this.algoliaEle) return;\n this.algoliaEle.searchIndex = this.index;\n }\n\n @Listen('nanoSearchReset', { target: 'body' })\n handleGlobalNavReset(e: CustomEvent & { target: HTMLElement }) {\n if (e.target.tagName !== 'NANO-GLOBAL-NAV') return;\n this.algoliaResultsEle = null;\n this.goback();\n }\n\n @Listen('nanoSearchResult', { target: 'body' })\n handleGlobalNavSearch(e: CustomEvent & { target: HTMLElement }) {\n if (e.target.tagName !== 'NANO-GLOBAL-NAV') return;\n const {\n detail: { meta, client },\n } = e as { detail: AloliaSearchResultDetail };\n\n this.apiKey = client.apiKey;\n this.appId = client.appId;\n this.index = {\n name: meta.indexTitle,\n index: meta.index,\n domain: meta.domain,\n filters: meta.filters,\n };\n this.algoliaEle.query = meta.query;\n }\n\n @Listen('nanoChange')\n handleReorder(e: CustomEvent & { target: HTMLNanoSelectElement }) {\n if (\n e\n .composedPath()\n .find(\n (ele: HTMLElement) =>\n ele.classList && ele.classList.contains('indexchange')\n ) &&\n !!this.algoliaResultsEle\n ) {\n this.changeOrder(e);\n }\n }\n\n @Listen('nanoResultsShown')\n attachListeners(e: CustomEvent & { target: HTMLElement }) {\n if (\n !e\n .composedPath()\n .find((ele: HTMLElement) => ele.id && ele.id === 'main-search')\n )\n return;\n\n this.algoliaResultsEle = this.algoliaEle.querySelector(\n '#main-search-results'\n );\n\n // add results listeners\n this.attachResultListeners();\n\n this.algoliaEle.querySelectorAll('.filters-reset').forEach((item) => {\n item.addEventListener('click', () => {\n this.removeAllFilters();\n });\n });\n\n this.algoliaEle.querySelectorAll('.close-filters').forEach((item) => {\n item.addEventListener('click', () => {\n this.closefilters();\n });\n });\n\n const filterWrap = this.algoliaEle.querySelector('.filters-wrap');\n if (filterWrap) {\n filterWrap.addEventListener('click', (e) => {\n e.stopPropagation();\n });\n }\n\n this.filtersDiv = this.algoliaEle.querySelector('#main-search-filters');\n\n const oldResults = this.algoliaEle.querySelector('.old-posts');\n if (oldResults) {\n oldResults.addEventListener(\n 'change',\n (e: Event & { target: HTMLInputElement }) => {\n this.toggleOldResults(e.target.checked);\n }\n );\n }\n }\n\n @Listen('nanoNewResults', { target: 'body' })\n attachResultListeners(e?: CustomEvent & { target: HTMLElement }) {\n if (e && e.composedPath().find((el) => el === this.algoliaEle)) {\n this.algoliaResultsEle = this.algoliaEle.querySelector(\n 'nano-algolia-results'\n );\n }\n if (!this.algoliaResultsEle) return;\n const resultEle = this.algoliaResultsEle;\n\n resultEle.querySelectorAll('.remove-filter').forEach((item) => {\n item.addEventListener('click', (clickEv: MouseEvent) => {\n const filter = clickEv.target as HTMLElement;\n this.removeFilter(filter.dataset.filter, filter.dataset.filterVal);\n });\n });\n\n resultEle.querySelectorAll('.back-btn').forEach((item) => {\n item.addEventListener('click', () => {\n this.goback();\n });\n });\n\n resultEle.querySelectorAll('.topbar__show-filters').forEach((item) => {\n this.openFilterBtn = item as HTMLButtonElement;\n item.addEventListener('click', () => {\n this.filtersDiv.tabIndex = -1;\n this.filtersDiv.classList.add('show');\n this.filtersDiv.setAttribute('aria-expanded', 'true');\n document.body.style.overflow = 'hidden';\n setTimeout(() => this.filtersDiv.focus(), 20);\n });\n });\n\n const tags = Array.from(resultEle.querySelectorAll('.result__tags-tag'));\n tags.forEach((tag) => {\n tag.removeEventListener('click', this.tagClick);\n tag.addEventListener('click', this.tagClick);\n });\n }\n\n private tagClick = (e: MouseEvent & { target: HTMLElement }) => {\n e.preventDefault();\n let tagVal = e.target.dataset.value;\n tagVal = tagVal === 'publication' ? 'publications' : tagVal;\n tagVal = tagVal.toLowerCase();\n\n const filter: HTMLNanoAlgoliaFilterElement = this.algoliaEle.querySelector(\n 'nano-algolia-filter[filter-name=\"tags\"]'\n );\n if (filter.value.indexOf(tagVal) === -1) {\n filter.value = filter.value ? [...filter.value, tagVal] : [tagVal];\n }\n };\n\n private changeOrder(ev) {\n this.algoliaEle.replicaIndex = ev.detail.value;\n }\n\n private goback() {\n const goBackEvent = this.nanoSearchGoBack.emit();\n if (goBackEvent.defaultPrevented) return;\n\n this.removeAllFilters();\n this.algoliaEle.query = '';\n this.algoliaEle.showResults = false;\n }\n\n private removeFilter(facet, filter) {\n this.algoliaEle.removeFilters(facet, filter);\n }\n\n private removeAllFilters() {\n this.algoliaEle.removeFilters();\n }\n\n private closefilters() {\n if (!this.filtersDiv) return;\n this.filtersDiv.tabIndex = null;\n this.filtersDiv.classList.remove('show');\n this.filtersDiv.setAttribute('aria-expanded', 'false');\n document.body.style.overflow = '';\n setTimeout(() => this.openFilterBtn.focus(), 20);\n }\n\n private toggleOldResults(show: boolean) {\n if (show)\n this.algoliaEle.filters = this.algoliaEle.filters.filter(\n (f) => !f.startsWith('created > ')\n );\n else this.algoliaEle.filters = [...this.algoliaEle.filters, filterOldPosts];\n }\n\n componentDidLoad() {\n this.algoliaEle.filters = [filterOldPosts]; // only get last 2 years\n\n if (!window['ResizeObserver']) return;\n\n this.ro = new ResizeObserver((entries) => {\n for (const entry of entries) {\n if (!entry.contentRect.width) return;\n this.currentWidth = entry.contentRect.width;\n }\n });\n this.ro.observe(this.el);\n }\n\n render() {\n return (\n <Host\n class={{ small: this.currentWidth < 677 }}\n dir={\n (this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : undefined\n }\n >\n <nano-algolia\n store-id=\"searchq\"\n store-method=\"url-hash-push\"\n class=\"main-search__wrap sc-nano-global-search-results\"\n ref={(ele) => (this.algoliaEle = ele)}\n id=\"main-search\"\n >\n <template slot=\"template\">\n {\n /* html */ `<div class=\"main-search sc-nano-global-search-results\">\n <nano-algolia-results id=\"main-search-results\" class=\"main-search__results sc-nano-global-search-results\" infinite-scroll>\n <script type=\"text/template\" slot=\"start-template\">\n <div class=\"sc-nano-global-search-results main-search__topbar topbar\">\n <button class=\"sc-nano-global-search-results topbar__bkbtn back-btn icon-button\">\n <nano-icon class=\"sc-nano-global-search-results\" name=\"light/chevron-left\" size=\"small\"></nano-icon>\n </button>\n <div>\n <em class=\"sc-nano-global-search-results topbar__query\">'{{ it.query }}' - </em> <strong>{{ it.totalHitsWithFilters }}</strong> Results\n </div>\n\n <div class=\"sc-nano-global-search-results topbar__filtering\">\n {{ @if (it.results.length) }}\n\n {{ @if (it.indexName === 'All') }}\n <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n <nano-option value=\"all_prod_en\">Sort by: Most relevant</nano-option>\n <nano-option value=\"all_prod_en_date_desc\">Sort by: Newest</nano-option>\n <nano-option value=\"all_prod_en_date_asc\">Sort by: Oldest</nano-option>\n <nano-option value=\"all_prod_en_activity_date_desc\">Sort by: Recent activity</nano-option>\n </nano-select>\n {{ /if }}\n\n {{ @if (it.indexName === 'www') }}\n <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n <nano-option value=\"cws_english_en\">Sort by: Most relevant</nano-option>\n <nano-option value=\"cws_english_en_date_desc\">Sort by: Newest</nano-option>\n <nano-option value=\"cws_english_en_date_asc\">Sort by: Oldest</nano-option>\n </nano-select>\n {{ /if }}\n\n {{ @if (it.indexName === 'Resources') }}\n <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n <nano-option value=\"cws_english_resources_en\">Sort by: Most relevant</nano-option>\n <nano-option value=\"cws_english_resources_en_featured_desc\">Sort by: Newest</nano-option>\n <nano-option value=\"cws_english_resources_en_featured_asc\">Sort by: Oldest</nano-option>\n </nano-select>\n {{ /if }}\n\n {{ @if (it.indexName === 'Store') }}\n <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n <nano-option value=\"store_prod\">Sort by: Most relevant</nano-option>\n <nano-option value=\"store_prod_date_desc\">Sort by: Newest</nano-option>\n <nano-option value=\"store_prod_date_asc\">Sort by: Oldest</nano-option>\n </nano-select>\n {{ /if }}\n\n {{ @if (it.indexName === 'Community') }}\n <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--community indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n <nano-option value=\"community_prod\">Sort by: Most relevant</nano-option>\n <nano-option value=\"community_prod_date_desc\">Sort by: Newest</nano-option>\n <nano-option value=\"community_prod_date_asc\">Sort by: Oldest</nano-option>\n <nano-option value=\"community_prod_activity_date_desc\">Sort by: Recent activity</nano-option>\n </nano-select>\n {{ /if }}\n {{ /if }}\n\n <button class=\"sc-nano-global-search-results topbar__show-filters filters-title\" aria-controls=\"main-search-filters\">\n {{ @if (it.appliedFilters && it.appliedFilters.length > 0) }}\n <span class=\"sc-nano-global-search-results topbar__filter-count\">\n {{ (it.appliedFilters.reduce(function(a, b) { return a + (b.values ? b.values.length : 0) }, 0)) }}\n </span>\n {{ /if }}\n <nano-icon class=\"sc-nano-global-search-results\" name=\"light/filter\"></nano-icon>\n </button>\n </div>\n </div>\n\n {{ @if (it.results.length) }}\n <div class=\"sc-nano-global-search-results main-search__applied-filters\">\n {{ @if (it.appliedFilters) }}\n {{ @each(it.appliedFilters) => filterObj }}\n {{ @each(filterObj.values) => filterVal }}\n <span class=\"sc-nano-global-search-results main-search__applied-filter\">\n {{ filterVal | public_name }}\n <button class=\"sc-nano-global-search-results icon-button remove-filter\" data-filter=\"{{ filterObj.name }}\" data-filter-val=\"{{ filterVal }}\">\n <nano-icon class=\"sc-nano-global-search-results\" name=\"light/times\"></nano-icon>\n </button>\n </span>\n {{ /each }}\n {{ /each }}\n {{ #else }}\n <span class=\"sc-nano-global-search-results main-search__applied-nofilter\">&nbsp;</span>\n {{ /if }}\n </div>\n {{ /if }}\n </script>\n\n <script type=\"text/template\" slot=\"result-template\">\n <!-- START NO CONTENT -->\n {{ @if ((!it.results || !it.results.length)) }}\n <div class=\"search-empty\">\n <nano-icon name=\"light/search\" class=\"search-empty-icon\"></nano-icon>\n <h2>No matches found...</h2>\n <p>Please try a different search query.</p>\n </div>\n {{ /if }}\n <!-- END NO CONTENT -->\n {{ @if (it.totalHitsWithFilters > 0) }}\n {{ @each(it.results) => result }}\n {{ contentType = result.content_type ? result.content_type : result.type }}\n <li class=\"sc-nano-global-search-results\">\n <div class=\"sc-nano-global-search-results result\">\n <h4 class=\"sc-nano-global-search-results result__title\" data-icon-set=\"{{(iconSet = false)}}\">\n <a href=\"{{ result.url | abs_url(it, result) }}\">\n {{ result._snippetResult.title.value | safe }}\n {{ @if (contentType === 'technical_document' || contentType === 'literature' || contentType === 'white_paper' || contentType === 'protocol') }}\n <span class=\"sc-nano-global-search-results result__pdf\">PDF</span>\n {{ /if }}\n </a>\n </h4>\n {{ @if (result.authors) }}\n {{ @if (typeof result.authors === 'string') }}\n <a class=\"sc-nano-global-search-results result__authors\" href=\"{{ result.url | abs_url(it, result) }}\">Authors: {{ result.authors | trim_to(50) }}</a>\n {{ #else }}\n <a class=\"sc-nano-global-search-results result__authors\" href=\"{{ result.url | abs_url(it, result) }}\">\n {{ @each(result.authors) => author, index }}\n <!-- {{ @if(index == 0)}} -->\n Authors: {{ author | trim_to(60) }}\n <!-- {{ /if }} -->\n {{ /each }}\n </a>\n {{ /if }}\n {{ /if }}\n {{ @if (contentType === 'video' || contentType === 'lc_lightning_talk' ) }}\n {{ @if (result.name) }}\n <a class=\"sc-nano-global-search-results result__authors\" href=\"{{ result.url | abs_url(it, result) }}\">Speaker: {{ result.name | trim_to(50) }}</a>\n {{ /if }}\n <a class=\"sc-nano-global-search-results result__video-body\" href=\"{{ result.url | abs_url(it, result) }}\">\n {{ @if (result.image) }}\n <div class=\"sc-nano-global-search-results result__image\" style=\"background-image: url('{{ result.image | abs_url(it, result) }}')\">\n <nano-icon class=\"sc-nano-global-search-results\" name=\"duotone/play-circle\"></nano-icon>\n </div>\n {{ /if }}\n <div class=\"sc-nano-global-search-results result__body\">\n <div class=\"sc-nano-global-search-results result__description\">\n {{ @if (result.description) }}\n {{ result._snippetResult.description.value | safe }}\n {{ /if }}\n </div>\n </div>\n <div class=\"sc-nano-global-search-results result__meta\">\n {{ @if (result.type || result.content_type) }}\n <div class=\"sc-nano-global-search-results result__type\">\n {{ @if (contentType === 'lc_lightning_talk') }}\n Presentation\n {{ #else }}\n {{ contentType }}\n {{ /if }}\n </div>\n {{ /if }}\n {{ @if (result.tags) }}\n <div class=\"sc-nano-global-search-results result__tags\">\n {{ @if (typeof result.tags === 'string') }}\n <button data-value=\"{{ result.tags | lowercase }}\" class=\"sc-nano-global-search-results result__tags-tag\">{{ result.tags }}</button>\n {{ #else }}\n {{ @each(result.tags) => tag, index }}\n {{ @if(index < 5)}}\n {{ @if (tag !== \"No video\" && tag !== \"Resources\" && tag !== \"Video\") }}\n <button data-value=\"{{ tag | lowercase }}\" class=\"sc-nano-global-search-results result__tags-tag\">{{ tag }}</button>\n {{ /if }}\n {{ /if }}\n {{ /each }}\n {{ /if }}\n </div>\n {{ /if }}\n {{ @if (result.source) }}\n <div class=\"sc-nano-global-search-results result__source\">Source: {{ result.source }}</div>\n {{ /if }}\n </div>\n </a>\n {{ /if }}\n {{ @if (result.body) }}\n <a class=\"sc-nano-global-search-results result__body\" href=\"{{ result.url | abs_url(it, result) }}\">{{ result._snippetResult.body.value | safe }}</a>\n {{ /if }}\n {{ @if (contentType === 'product' }}\n <div class=\"sc-nano-global-search-results result__buttons\">\n <a class=\"sc-nano-global-search-results result__buttons-button\" href=\"{{ result.url | abs_url(it, result) }}\">View product</a>\n </div>\n {{ /if }}\n {{ @if (contentType === 'event') }}\n <a class=\"sc-nano-global-search-results result__promo\" href=\"{{ result.url | abs_url(it, result) }}\">\n <div class=\"sc-nano-global-search-results result__promo-box\">\n <div class=\"sc-nano-global-search-results result__promo-bigdate\">\n {{ result.start_date | date_long({year: undefined, month: 'short', day: undefined}) }}\n <span>{{ result.start_date | date_long({year: undefined, month: undefined, day: 'numeric'}) }}</span>\n </div>\n <div>\n <div class=\"sc-nano-global-search-results result__promo-date\">\n <nano-icon class=\"sc-nano-global-search-results\" name=\"light/calendar-alt\"></nano-icon>\n {{ @if (result.end_date) }}\n {{ @if (result.end_date !== result.start_date) }}\n {{ result.start_date | date_long({weekday: 'short', day: 'numeric', month: 'short'}) }} - {{ result.end_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}\n {{ #else }}\n {{ result.start_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}\n {{ /if }}\n {{ #else }}\n {{ @if (result.start_date) }}\n {{ result.start_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}\n {{ /if }}\n {{ /if }}\n </div>\n <div class=\"sc-nano-global-search-results result__promo-venue\">\n <nano-icon class=\"sc-nano-global-search-results\" name=\"light/map-marker-alt\"></nano-icon>\n Venue\n </div>\n </div>\n </div>\n </a>\n {{ /if }}\n {{ @if (contentType !== 'lc_lightning_talk' && contentType !== 'video') }}\n <div class=\"sc-nano-global-search-results result__meta\">\n {{ @if (result.type || result.content_type) }}\n <div class=\"sc-nano-global-search-results result__type\">\n {{ @if (contentType === 'news_item') }}\n News\n {{ #elif (contentType === 'static_page' || contentType === 'bespoke') }}\n Page\n {{ #elif (contentType === 'case_study') }}\n Case study\n {{ #elif (contentType === 'lc_poster') }}\n Poster\n {{ #elif (contentType === 'nanopore_live') }}\n Live stream\n {{ #elif (contentType === 'data_release') }}\n Data release\n {{ #elif (contentType === 'research_area') }}\n Research area\n {{ #elif (contentType === 'white_paper') }}\n White paper\n {{ #elif (contentType === 'technical_document') }}\n Technical document\n {{ #elif (contentType === 'info_sheet') }}\n Info sheet\n {{ #elif (contentType === 'lc_home' || contentType === 'lc_venue') }}\n London Calling\n {{ #else }}\n {{ contentType }}\n {{ /if }}\n </div>\n {{ /if }}\n {{ @if (contentType !== 'event') }}\n {{ @if (result.updated) }}\n <div class=\"sc-nano-global-search-results result__date\">{{ result.updated | date_long({year: 'numeric', month: 'short', day: 'numeric'}) }}</div>\n {{ #else }}\n {{ @if (result.created) }}\n <div class=\"sc-nano-global-search-results result__date\">{{ result.created | date_long({year: 'numeric', month: 'short', day: 'numeric'}) }}</div>\n {{ /if }}\n {{ /if }}\n {{ /if }}\n {{ @if (result.tags) }}\n <div class=\"sc-nano-global-search-results result__tags\">\n {{ @if (typeof result.tags === 'string') }}\n {{ @if (result.tags !== \"Resources\" && result.tags !== \"Tools\" && result.tags !== \"Publications\" && result.tags !== \"Case studies\") }}\n <button data-value=\"{{ result.tags | lowercase }}\" class=\"sc-nano-global-search-results result__tags-tag\">{{ result.tags }}</button>\n {{ /if }}\n {{ #else }}\n {{ @each(result.tags) => tag, index }}\n {{ @if(index < 5)}}\n {{ @if (tag !== \"Resources\" && tag !== \"Tools\" && tag !== \"Publications\" && tag !== \"Case studies\") }}\n <button data-value=\"{{ tag | lowercase }}\" class=\"sc-nano-global-search-results result__tags-tag\">{{ tag }}</button>\n {{ /if }}\n {{ /if }}\n {{ /each }}\n {{ /if }}\n </div>\n {{ /if }}\n {{ @if (result.source) }}\n <div class=\"sc-nano-global-search-results result__source\">Source: {{ result.source }}</div>\n {{ /if }}\n </div>\n {{ /if }}\n </div>\n </li>\n {{ /each }}\n {{ /if }}\n </script>\n\n <div slot=\"start-output\"></div>\n <ul slot=\"result-output\" class=\"sc-nano-global-search-results\"></ul>\n </nano-algolia-results>\n\n {{ @if(Object.keys(it.origFilters).length) }}\n <div class=\"sc-nano-global-search-results main-search__filters filters close-filters\" id=\"main-search-filters\">\n <div class=\"sc-nano-global-search-results filters-wrap\">\n {{ @if(it.totalHits) }}\n <div class=\"sc-nano-global-search-results filters-header\">\n <strong class=\"sc-nano-global-search-results filters-title\">Filters</strong>\n <button class=\"sc-nano-global-search-results filters-reset\">Reset</button>\n <button class=\"sc-nano-global-search-results filters__close-filters close-filters icon-button\" aria-controls=\"main-search-filters\">\n <nano-icon class=\"sc-nano-global-search-results\" name=\"light/times\"></nano-icon>\n </button>\n </div>\n {{ /if }}\n\n <div>\n <input class=\"sc-nano-global-search-results filter-cb old-posts filters__old-posts\" type=\"checkbox\" name=\"old-posts\" id=\"old-posts\" value=\"nice\" />\n <label class=\"sc-nano-global-search-results filter-label\" for=\"old-posts\">\n <span>Include posts older than 2 years</span>\n </label>\n {{ @if(it.origFilters['type']) }}\n <nano-details class=\"sc-nano-global-search-results\" open={true} icon-rotation=\"180\">\n <strong slot=\"label\">Type</strong>\n <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n <nano-algolia-filter store-id=\"searchf1\" store-method=\"url-hash-push\" filter-name=\"type\">\n <script type=\"text/template\" slot=\"filter-template\">\n <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n {{ @foreach(it.dyn) => filter, filterVal }}\n <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n <input class=\"sc-nano-global-search-results filter-cb\" type=\"checkbox\" value=\"{{ filter }}\" id=\"type-{{ filter }}-{{x}}\" />\n <label class=\"sc-nano-global-search-results filter-label\" for=\"type-{{ filter }}-{{x}}\">\n <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n </label></li>\n {{ /foreach }}\n </ul>\n </script>\n <div slot=\"output\"></div>\n </nano-algolia-filter>\n </nano-details>\n {{ /if }}\n\n {{ @if(it.origFilters['channel']) }}\n <nano-details open={true} icon-rotation=\"180\">\n <strong slot=\"label\">Channels</strong>\n <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n <nano-algolia-filter store-id=\"searchf2\" store-method=\"url-hash-push\" filter-name=\"channel\">\n <script type=\"text/template\" slot=\"filter-template\">\n <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n {{ @foreach(it.dyn) => filter, filterVal }}\n <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n <input class=\"filter-cb sc-nano-global-search-results\" type=\"checkbox\" value=\"{{ filter }}\" id=\"channel-{{ filter }}-{{x}}\" />\n <label class=\"filter-label sc-nano-global-search-results\" for=\"channel-{{ filter }}-{{x}}\">\n <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n </label></li>\n {{ /foreach }}\n </ul>\n </script>\n <div slot=\"output\"></div>\n </nano-algolia-filter>\n </nano-details>\n {{ /if }}\n\n {{ @if(it.origFilters['authors']) }}\n <nano-details open={true} icon-rotation=\"180\">\n <strong slot=\"label\">Authors</strong>\n <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n <nano-algolia-filter store-id=\"searchf3\" store-method=\"url-hash-push\" filter-name=\"authors\">\n <script type=\"text/template\" slot=\"filter-template\">\n <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n {{ @foreach(it.dyn) => filter, filterVal }}\n <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n <input class=\"filter-cb sc-nano-global-search-results\" type=\"checkbox\" value=\"{{ filter }}\" id=\"authors-{{ filter }}-{{x}}\" />\n <label class=\"filter-label sc-nano-global-search-results\" for=\"authors-{{ filter }}-{{x}}\">\n <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n </label></li>\n {{ /foreach }}\n </ul>\n </script>\n <div slot=\"output\"></div>\n </nano-algolia-filter>\n </nano-details>\n {{ /if }}\n\n {{ @if(it.origFilters['categories_without_path']) }}\n <nano-details open={true} icon-rotation=\"180\">\n <strong slot=\"label\">Category</strong>\n <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n <nano-algolia-filter store-id=\"searchf4\" store-method=\"url-hash-push\" filter-name=\"categories_without_path\">\n <script type=\"text/template\" slot=\"filter-template\">\n <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n {{ @foreach(it.dyn) => filter, filterVal }}\n {{ @if(!filter.match(/publication/)) }}\n <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n <input class=\"sc-nano-global-search-results filter-cb\" type=\"checkbox\" value=\"{{ filter }}\" id=\"cwp-{{ filter }}-{{x}}\" />\n <label class=\"sc-nano-global-search-results filter-label\" for=\"cwp-{{ filter }}-{{x}}\">\n <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n </label></li>\n {{ /if }}\n {{ /foreach }}\n </ul>\n </script>\n <div slot=\"output\"></div>\n </nano-algolia-filter>\n </nano-details>\n {{ /if }}\n\n {{ @if(it.origFilters['tags']) }}\n <nano-details open={true} icon-rotation=\"180\">\n <strong slot=\"label\">Tags</strong>\n <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n <nano-algolia-filter store-id=\"searchf5\" store-method=\"url-hash-push\" filter-name=\"tags\">\n <script type=\"text/template\" slot=\"filter-template\">\n <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n {{ @foreach(it.dyn) => filter, filterVal }}\n <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n <input class=\"filter-cb sc-nano-global-search-results\" type=\"checkbox\" value=\"{{ filter | lowercase }}\" id=\"tags-{{ filter }}-{{x}}\" />\n <label class=\"filter-label sc-nano-global-search-results\" for=\"tags-{{ filter }}-{{x}}\">\n <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n </label></li>\n {{ /foreach }}\n </ul>\n </script>\n <div slot=\"output\"></div>\n </nano-algolia-filter>\n </nano-details>\n {{ /if }}\n </div>\n </div>\n </div>\n {{ /if }}\n </div>`\n }\n </template>\n <div slot=\"output\"></div>\n <slot />\n </nano-algolia>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/components/nav-item.js CHANGED
@@ -6,7 +6,7 @@ import { b as getSiblings, g as getDirectChildren } from './dom.js';
6
6
  import { d as displayTransition } from './transitions.js';
7
7
  import { g as getTabbableElements } from './tabbable.js';
8
8
 
9
- const navItemCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{opacity:inherit;display:block;color:var(--color) !important;margin:var(--margin);outline:none !important}:host .nav-item,:host .link{outline:none !important;border-radius:inherit}:host ::slotted(*),:host *{box-sizing:border-box}:host ::slotted(button),:host button{background:none;border:none;margin:0}:host ::slotted(button),:host ::slotted(a),:host ::slotted(a:visited),:host button,:host a,:host a:visited{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:var(--display, block);white-space:nowrap;color:var(--color) !important;background-color:var(--bg-color);line-height:inherit;outline:none !important}:host ::slotted(nano-icon[slot=icon-start]){-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}:host ::slotted(nano-icon[slot=icon-end]){-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start)}:host .link ::slotted(nano-icon[slot=icon-start]){-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:0;padding-inline-end:0}:host .link ::slotted(nano-icon[slot=icon-end]){-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);-webkit-padding-start:0;padding-inline-start:0}:host .link,:host button,:host a{-webkit-border-after:var(--border-bottom);border-block-end:var(--border-bottom);display:flex;align-items:center;border-radius:inherit}:host .secondary-menu{display:none}:host ::slotted(a:hover),:host ::slotted(button:hover),:host .link:hover,:host button:hover,:host a:hover{text-decoration:inherit !important}:host button:focus-visible,:host a:focus-visible{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}:host ::slotted(a:focus-visible),:host ::slotted(button:focus-visible){color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.nav-item.selected .link,.nav-item.selected button,.nav-item.selected a{color:var(--color-selected, var(--color-open, var(--color))) !important;background-color:var(--bg-color-selected, var(--bg-color-open, var(--bg-color)))}.nav-item.secondary-open button,.nav-item.secondary-open a{color:var(--color-open, var(--color-selected, var(--color))) !important;background-color:var(--bg-color-open, var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color))))}.nav-item.disabled{opacity:0.6}.nav-item.disabled button,.nav-item.disabled a{color:var(--color-disabled, var(--color)) !important}.nav-item:not(.nano-menu) ::slotted(a:hover),.nav-item:not(.nano-menu) ::slotted(button:hover),.nav-item:not(.nano-menu) .link:hover,.nav-item:not(.nano-menu) button:hover,.nav-item:not(.nano-menu) a:hover{color:var(--color-hover, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-hover, var(--bg-color-focus, var(--bg-color)))}:host(.has-focus) .link{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:var(--focus-outline, 5px auto -webkit-focus-ring-color)}:host(.nano-global-nav-menu) a,:host(.nano-global-nav-menu) a:visited,:host(.nano-global-nav-menu) button,:host(.nano-global-nav-menu) .link,:host(.nano-menu) a,:host(.nano-menu) a:visited,:host(.nano-menu) button,:host(.nano-menu) .link{display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;cursor:pointer;line-height:1.2;width:100%}:host(.nano-global-nav-menu) .text,:host(.nano-menu) .text{-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);flex:1}:host(.nano-global-nav-menu) ::slotted(a),:host(.nano-global-nav-menu) ::slotted(button),:host(.nano-menu) ::slotted(a),:host(.nano-menu) ::slotted(button){flex:1}:host(.nano-global-nav-menu) .secondary-menu,:host(.nano-menu) .secondary-menu{display:none;position:absolute;color:var(--secondary-color, currentcolor);min-height:100%;inset-block-start:0;inset-inline-start:0;width:100%;z-index:1;opacity:0;transition:opacity 0.2s ease, transform 0.3s ease;background-color:var(--secondary-bg-color, white);transform:translateX(100%)}:host(.nano-global-nav-menu) .secondary-menu:focus,:host(.nano-menu) .secondary-menu:focus{outline:none}:host(.nano-global-nav-menu) .secondary-menu.open,:host(.nano-menu) .secondary-menu.open{opacity:1;transform:translateX(0);transition:opacity 0.3s ease, transform 0.2s ease}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-end]){padding-inline:0 var(--padding-end);padding-block:0;font-size:10px;flex:0 0 10px;pointer-events:none}:host(.nano-global-nav-menu) button ::slotted(nano-icon[slot=icon-end]),:host(.nano-global-nav-menu) a ::slotted(nano-icon[slot=icon-end]){padding:0}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu,:host(.nano-menu[dir=rtl]) .secondary-menu{transform:translateX(-100%)}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu.open,:host(.nano-menu[dir=rtl]) .secondary-menu.open{transform:translateX(0)}:host(.nano-menu) ::slotted(a:focus),:host(.nano-menu) ::slotted(button:focus){box-shadow:none}:host(.nano-menu) .secondary-menu-content{padding-inline:var(--secondary-padding-start) var(--secondary-padding-end);padding-block:var(--secondary-padding-top) var(--secondary-padding-bottom)}:host(.nano-global-nav-bar) .link,:host(.nano-global-nav-bar) a,:host(.nano-global-nav-bar) button{display:flex;align-items:center;cursor:pointer}:host(.nano-global-nav-bar) .text{flex:1 0 auto}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end]){margin-inline:var(--padding-end) 0;margin-block:0}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-start]){margin-inline:0 var(--padding-start);margin-block:0}:host(.nano-global-nav-bar) ::slotted(a),:host(.nano-global-nav-bar) button{position:relative}:host(.nano-global-nav-bar) ::slotted(a)::before,:host(.nano-global-nav-bar) button::before{content:\"\";background-color:#0c5a71;height:9px;inset-inline:0 5px;inset-block-end:-22px;position:absolute;transform:translateZ(0) scaleX(0);transform-origin:0;transition:0.2s ease transform}:host(.nano-global-nav-bar) .selected button::before,:host(.nano-global-nav-bar) .secondary-open button::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.selected) ::slotted(a)::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before{opacity:0.7}:host(.nano-global-nav-bar.has-secondary) .secondary-menu{display:none;transition:transform 0.3s ease;transform:translateY(-100%) translateZ(0);background-color:var(--secondary-bg-color, #196c82);color:var(--secondary-color);position:absolute;box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);inset-inline:0;z-index:-2;outline:none}:host(.nano-global-nav-bar.has-secondary) .secondary-menu.open{transform:translateY(12px) translateZ(0)}:host(.nano-menu-drawer) .link,:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{-webkit-padding-before:calc(var(--padding-top) / 2);padding-block-start:calc(var(--padding-top) / 2);-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-after:calc(var(--padding-bottom) / 2);padding-block-end:calc(var(--padding-bottom) / 2);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;width:100%}:host(.nano-menu-drawer) .text{-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);-webkit-padding-start:0;padding-inline-start:0;text-align:start;flex:0 1 auto;min-width:130px;width:130px}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0;font-size:var(--icon-size);width:var(--icon-size);flex:0 0 var(--icon-size)}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end]){padding:0 var(--padding-end) 0 0;font-size:10px;flex:0 0 20px;min-width:20px}:host(.nano-menu-drawer) .secondary-menu{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);height:100vh;inset-inline:auto 0;inset-block:0;transform:translateX(0);z-index:-1;transition:transform 0.3s ease, opacity 0.2s ease;overflow-y:auto;width:var(--secondary-width, 400px);max-width:62vw;opacity:1;padding-inline:var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));padding-block:var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom))}:host(.nano-menu-drawer) .secondary-menu:focus{outline:none}:host(.nano-menu-drawer) .secondary-menu.open{transform:translateX(100%)}:host(.nano-menu-drawer) .notification{position:relative}:host(.nano-menu-drawer) .notification::after{content:\"\";display:block;position:absolute;width:6px;height:6px;background-color:#ef4135;inset-inline-start:10px;inset-block-start:7px;border-radius:50%}@media (min-width: 52em){:host(.nano-menu-drawer) .notification::after{width:7px;height:7px;inset-inline-start:8px;inset-block-start:5px}}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu{transform:translateX(0%)}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu.open{transform:translateX(-100%);opacity:1}";
9
+ const navItemCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{opacity:inherit;display:block;color:var(--color) !important;margin:var(--margin);outline:none !important}:host .nav-item,:host .link{outline:none !important;border-radius:inherit}:host ::slotted(*),:host *{box-sizing:border-box}:host ::slotted(button),:host button{background:none;border:none;margin:0}:host ::slotted(button),:host ::slotted(a),:host ::slotted(a:visited),:host button,:host a,:host a:visited{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:var(--display, block);white-space:nowrap;color:var(--color) !important;background-color:var(--bg-color);line-height:inherit;outline:none !important}:host ::slotted(nano-icon[slot=icon-start]){-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}:host ::slotted(nano-icon[slot=icon-end]){-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start)}:host .link ::slotted(nano-icon[slot=icon-start]){-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:0;padding-inline-end:0}:host .link ::slotted(nano-icon[slot=icon-end]){-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);-webkit-padding-start:0;padding-inline-start:0}:host .link,:host button,:host a{-webkit-border-after:var(--border-bottom);border-block-end:var(--border-bottom);display:flex;align-items:center;border-radius:inherit}:host .secondary-menu{display:none}:host ::slotted(a:hover),:host ::slotted(button:hover),:host .link:hover,:host button:hover,:host a:hover{text-decoration:inherit !important}:host button:focus-visible,:host a:focus-visible{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}:host ::slotted(a:focus-visible),:host ::slotted(button:focus-visible){color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.nav-item.selected .link,.nav-item.selected button,.nav-item.selected a{color:var(--color-selected, var(--color-open, var(--color))) !important;background-color:var(--bg-color-selected, var(--bg-color-open, var(--bg-color)))}.nav-item.secondary-open button,.nav-item.secondary-open a{color:var(--color-open, var(--color-selected, var(--color))) !important;background-color:var(--bg-color-open, var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color))))}.nav-item.disabled{opacity:0.6}.nav-item.disabled button,.nav-item.disabled a{color:var(--color-disabled, var(--color)) !important}.nav-item:not(.nano-menu) ::slotted(a:hover),.nav-item:not(.nano-menu) ::slotted(button:hover),.nav-item:not(.nano-menu) .link:hover,.nav-item:not(.nano-menu) button:hover,.nav-item:not(.nano-menu) a:hover{color:var(--color-hover, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-hover, var(--bg-color-focus, var(--bg-color)))}:host(.has-focus) .link{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:var(--focus-outline, 5px auto -webkit-focus-ring-color)}:host(.nano-global-nav-menu) a,:host(.nano-global-nav-menu) a:visited,:host(.nano-global-nav-menu) button,:host(.nano-global-nav-menu) .link,:host(.nano-menu) a,:host(.nano-menu) a:visited,:host(.nano-menu) button,:host(.nano-menu) .link{display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;cursor:pointer;line-height:1.2;width:100%}:host(.nano-global-nav-menu) .text,:host(.nano-menu) .text{-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);flex:1}:host(.nano-global-nav-menu) ::slotted(a),:host(.nano-global-nav-menu) ::slotted(button),:host(.nano-menu) ::slotted(a),:host(.nano-menu) ::slotted(button){flex:1}:host(.nano-global-nav-menu) .secondary-menu,:host(.nano-menu) .secondary-menu{display:none;position:absolute;color:var(--secondary-color, currentcolor);min-height:100%;inset-block-start:0;inset-inline-start:0;width:100%;z-index:1;opacity:0;transition:opacity 0.3s ease, transform 0.3s ease;background-color:var(--secondary-bg-color, white);transform:translate3d(100%, 0, 0)}:host(.nano-global-nav-menu) .secondary-menu:focus,:host(.nano-menu) .secondary-menu:focus{outline:none}:host(.nano-global-nav-menu) .secondary-menu.open,:host(.nano-menu) .secondary-menu.open{opacity:1;transform:translate3d(0, 0, 0);transition:opacity 0.3s ease, transform 0.3s ease}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-end]){padding-inline:0 var(--padding-end);padding-block:0;font-size:10px;flex:0 0 10px;pointer-events:none}:host(.nano-global-nav-menu) button ::slotted(nano-icon[slot=icon-end]),:host(.nano-global-nav-menu) a ::slotted(nano-icon[slot=icon-end]){padding:0}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu,:host(.nano-menu[dir=rtl]) .secondary-menu{transform:translateX(-100%)}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu.open,:host(.nano-menu[dir=rtl]) .secondary-menu.open{transform:translateX(0)}:host(.nano-menu) ::slotted(a:focus),:host(.nano-menu) ::slotted(button:focus){box-shadow:none}:host(.nano-menu) .secondary-menu-content{padding-inline:var(--secondary-padding-start) var(--secondary-padding-end);padding-block:var(--secondary-padding-top) var(--secondary-padding-bottom)}:host(.nano-global-nav-bar) .link,:host(.nano-global-nav-bar) a,:host(.nano-global-nav-bar) button{display:flex;align-items:center;cursor:pointer}:host(.nano-global-nav-bar) .text{flex:1 0 auto}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end]){margin-inline:var(--padding-end) 0;margin-block:0}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-start]){margin-inline:0 var(--padding-start);margin-block:0}:host(.nano-global-nav-bar) ::slotted(a),:host(.nano-global-nav-bar) button{position:relative}:host(.nano-global-nav-bar) ::slotted(a)::before,:host(.nano-global-nav-bar) button::before{content:\"\";background-color:#0c5a71;height:9px;inset-inline:0 5px;inset-block-end:-22px;position:absolute;transform:translateZ(0) scaleX(0);transform-origin:0;transition:0.2s ease transform}:host(.nano-global-nav-bar) .selected button::before,:host(.nano-global-nav-bar) .secondary-open button::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.selected) ::slotted(a)::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before{opacity:0.7}:host(.nano-global-nav-bar.has-secondary) .secondary-menu{display:none;transition:transform 0.3s ease;transform:translateY(-100%) translateZ(0);background-color:var(--secondary-bg-color, #196c82);color:var(--secondary-color);position:absolute;box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);inset-inline:0;z-index:-2;outline:none}:host(.nano-global-nav-bar.has-secondary) .secondary-menu.open{transform:translateY(12px) translateZ(0)}:host(.nano-menu-drawer) .link,:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{-webkit-padding-before:calc(var(--padding-top) / 2);padding-block-start:calc(var(--padding-top) / 2);-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-after:calc(var(--padding-bottom) / 2);padding-block-end:calc(var(--padding-bottom) / 2);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;width:100%}:host(.nano-menu-drawer) .text{-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);-webkit-padding-start:0;padding-inline-start:0;text-align:start;flex:0 1 auto;min-width:130px;width:130px}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0;font-size:var(--icon-size);width:var(--icon-size);flex:0 0 var(--icon-size)}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end]){padding:0 var(--padding-end) 0 0;font-size:10px;flex:0 0 20px;min-width:20px}:host(.nano-menu-drawer) .secondary-menu{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);height:100vh;inset-inline:auto 0;inset-block:0;transform:translateX(0);z-index:-1;transition:transform 0.3s ease, opacity 0.2s ease;overflow-y:auto;width:var(--secondary-width, 400px);max-width:62vw;opacity:1;padding-inline:var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));padding-block:var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom))}:host(.nano-menu-drawer) .secondary-menu:focus{outline:none}:host(.nano-menu-drawer) .secondary-menu.open{transform:translateX(100%)}:host(.nano-menu-drawer) .notification{position:relative}:host(.nano-menu-drawer) .notification::after{content:\"\";display:block;position:absolute;width:6px;height:6px;background-color:#ef4135;inset-inline-start:10px;inset-block-start:7px;border-radius:50%}@media (min-width: 52em){:host(.nano-menu-drawer) .notification::after{width:7px;height:7px;inset-inline-start:8px;inset-block-start:5px}}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu{transform:translateX(0%)}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu.open{transform:translateX(-100%);opacity:1}";
10
10
 
11
11
  const NavItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
12
12
  constructor() {
package/dist/components/nav-item.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"nav-item.js","mappings":"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","names":[],"sources":["./src/components/nav-item/nav-item.scss?tag=nano-nav-item&encapsulation=shadow","./src/components/nav-item/nav-item.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n:host {\n // These can be overwritten, but are automatically set from context components\n\n // --padding-top: inherit;\n // --padding-bottom: inherit;\n // --padding-start: inherit;\n // --padding-end: inherit;\n // --margin: inherit;\n\n // --secondary-padding-top: inherit;\n // --secondary-padding-bottom: inherit;\n // --secondary-padding-start: inherit;\n // --secondary-padding-end: inherit;\n\n // --border-bottom: inherit;\n // --icon-size: inherit;\n\n // --color: inherit;\n // --color-hover: inherit;\n // --color-focus: inherit;\n // --color-selected: inherit;\n // --color-open: inherit;\n\n // --bg-color: inherit;\n // --bg-color-hover: inherit;\n // --bg-color-selected: inherit;\n // --bg-color-open: inherit;\n // --bg-color-focus: inherit;\n\n // --secondary-bg-color: inherit;\n // --secondary-color: inherit;\n\n opacity: inherit;\n display: block;\n color: var(--color) !important;\n margin: var(--margin);\n outline: none !important;\n\n .nav-item,\n .link {\n outline: none !important;\n border-radius: inherit;\n }\n\n ::slotted(*),\n * {\n box-sizing: border-box;\n }\n\n ::slotted(button),\n button {\n background: none;\n border: none;\n margin: 0;\n }\n\n ::slotted(button),\n ::slotted(a),\n ::slotted(a:visited),\n button,\n a,\n a:visited {\n @include text-inherit();\n\n padding-inline: var(--padding-start) var(--padding-end);\n padding-block: var(--padding-top) var(--padding-bottom);\n display: var(--display, block);\n white-space: nowrap;\n color: var(--color) !important;\n background-color: var(--bg-color);\n line-height: inherit;\n outline: none !important;\n }\n\n ::slotted(nano-icon[slot='icon-start']) {\n padding-inline-end: var(--padding-end);\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n padding-inline-start: var(--padding-start);\n }\n\n .link {\n ::slotted(nano-icon[slot='icon-start']) {\n padding-inline-start: var(--padding-start);\n padding-inline-end: 0;\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n padding-inline-end: var(--padding-end);\n padding-inline-start: 0;\n }\n }\n\n .link,\n button,\n a {\n border-block-end: var(--border-bottom);\n display: flex;\n align-items: center;\n border-radius: inherit;\n }\n\n .secondary-menu {\n display: none;\n }\n\n ::slotted(a:hover),\n ::slotted(button:hover),\n .link:hover,\n button:hover,\n a:hover {\n text-decoration: inherit !important;\n }\n\n button:focus-visible,\n a:focus-visible {\n color: var(--color-focus, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-focus,\n var(--bg-color-hover, var(--bg-color))\n );\n box-shadow: #{$control-focus-style};\n }\n\n ::slotted(a:focus-visible),\n ::slotted(button:focus-visible) {\n color: var(--color-focus, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-focus,\n var(--bg-color-hover, var(--bg-color))\n );\n box-shadow: #{$control-focus-style};\n }\n}\n\n.nav-item {\n &.selected {\n .link,\n button,\n a {\n color: var(--color-selected, var(--color-open, var(--color))) !important;\n background-color:\n var(\n --bg-color-selected,\n var(--bg-color-open, var(--bg-color))\n );\n }\n }\n\n &.secondary-open {\n button,\n a {\n color: var(--color-open, var(--color-selected, var(--color))) !important;\n background-color:\n var(\n --bg-color-open,\n var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color)))\n );\n }\n }\n\n &.disabled {\n opacity: 0.6;\n\n button,\n a {\n color: var(--color-disabled, var(--color)) !important;\n }\n }\n\n &:not(.nano-menu) {\n ::slotted(a:hover),\n ::slotted(button:hover),\n .link:hover,\n button:hover,\n a:hover {\n color: var(--color-hover, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-hover,\n var(--bg-color-focus, var(--bg-color))\n );\n }\n }\n}\n\n:host(.has-focus) {\n .link {\n color: var(--color-focus, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-focus,\n var(--bg-color-hover, var(--bg-color))\n );\n outline: var(--focus-outline, 5px auto -webkit-focus-ring-color);\n }\n}\n\n:host(.nano-global-nav-menu),\n:host(.nano-menu) {\n a,\n a:visited,\n button,\n .link {\n display: flex;\n justify-content: flex-start;\n flex-direction: row;\n align-items: center;\n color: currentcolor;\n text-decoration: inherit;\n white-space: normal;\n cursor: pointer;\n line-height: 1.2;\n width: 100%;\n }\n\n .text {\n padding-inline-start: 0;\n padding-inline-end: var(--padding-end);\n flex: 1;\n }\n\n ::slotted(a),\n ::slotted(button) {\n flex: 1;\n }\n\n .secondary-menu {\n display: none;\n position: absolute;\n color: var(--secondary-color, currentcolor);\n min-height: 100%;\n inset-block-start: 0;\n inset-inline-start: 0;\n width: 100%;\n z-index: 1;\n opacity: 0;\n transition: opacity 0.2s ease, transform 0.3s ease;\n background-color: var(--secondary-bg-color, white);\n transform: translateX(100%);\n\n &:focus {\n outline: none;\n }\n\n &.open {\n opacity: 1;\n transform: translateX(0);\n transition: opacity 0.3s ease, transform 0.2s ease;\n }\n }\n}\n\n:host(.nano-global-nav-menu) {\n ::slotted(nano-icon[slot='icon-start']) {\n padding-inline: 0 var(--padding-end);\n padding-block: 0;\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n padding-inline: 0 var(--padding-end);\n padding-block: 0;\n font-size: 10px;\n flex: 0 0 10px;\n pointer-events: none;\n }\n\n button,\n a {\n ::slotted(nano-icon[slot='icon-end']) {\n padding: 0;\n }\n }\n}\n\n:host(.nano-global-nav-menu[dir='rtl']),\n:host(.nano-menu[dir='rtl']) {\n .secondary-menu {\n transform: translateX(-100%);\n\n &.open {\n transform: translateX(0);\n }\n }\n}\n\n:host(.nano-menu) {\n ::slotted(a:focus),\n ::slotted(button:focus) {\n box-shadow: none;\n }\n\n .secondary-menu-content {\n padding-inline: var(--secondary-padding-start) var(--secondary-padding-end);\n padding-block: var(--secondary-padding-top) var(--secondary-padding-bottom);\n }\n}\n\n:host(.nano-global-nav-bar) {\n .link,\n a,\n button {\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n\n .text {\n flex: 1 0 auto;\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n margin-inline: var(--padding-end) 0;\n margin-block: 0;\n }\n\n ::slotted(nano-icon[slot='icon-start']) {\n margin-inline: 0 var(--padding-start);\n margin-block: 0;\n }\n\n ::slotted(a),\n button {\n position: relative;\n\n &::before {\n content: '';\n background-color: rgb(12 90 113);\n height: 9px;\n inset-inline: 0 5px;\n inset-block-end: -22px;\n position: absolute;\n transform: translateZ(0) scaleX(0);\n transform-origin: 0;\n transition: 0.2s ease transform;\n }\n }\n\n .selected button::before,\n .secondary-open button::before {\n transform: translateZ(0) scaleX(1);\n }\n}\n\n:host(.nano-global-nav-bar.selected) {\n ::slotted(a) {\n &::before {\n transform: translateZ(0) scaleX(1);\n }\n }\n}\n\n:host(.nano-global-nav-bar.has-secondary) {\n .secondary-open button::before {\n opacity: 0.7;\n }\n\n .secondary-menu {\n display: none;\n transition: transform 0.3s ease;\n transform: translateY(-100%) translateZ(0);\n background-color: var(--secondary-bg-color, #196c82);\n color: var(--secondary-color);\n position: absolute;\n box-shadow: 0 1px 25px 0 rgb(0 0 0 / 15%);\n inset-inline: 0;\n z-index: -2;\n outline: none;\n\n &.open {\n transform: translateY(12px) translateZ(0);\n }\n }\n}\n\n:host(.nano-menu-drawer) {\n .link,\n a,\n button {\n padding-block-start: calc(var(--padding-top) / 2);\n padding-inline-end: 0;\n padding-block-end: calc(var(--padding-bottom) / 2);\n padding-inline-start: var(--padding-start);\n display: flex;\n justify-content: flex-start;\n flex-direction: row;\n align-items: center;\n color: currentcolor;\n text-decoration: inherit;\n white-space: normal;\n border: none;\n cursor: pointer;\n line-height: 1.2;\n width: 100%;\n }\n\n .text {\n padding-inline-end: var(--padding-end);\n padding-inline-start: 0;\n text-align: start;\n flex: 0 1 auto;\n min-width: 130px;\n width: 130px;\n }\n\n ::slotted(nano-icon[slot='icon-start']) {\n padding-inline: 0 var(--padding-end);\n padding-block: 0;\n font-size: var(--icon-size);\n width: var(--icon-size);\n flex: 0 0 var(--icon-size);\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n padding: 0 var(--padding-end) 0 0;\n font-size: 10px;\n flex: 0 0 20px;\n min-width: 20px;\n }\n\n .secondary-menu {\n display: none;\n position: absolute;\n background-color: var(--secondary-bg-color);\n color: var(--secondary-color);\n height: 100vh;\n inset-inline: auto 0;\n inset-block: 0;\n transform: translateX(0);\n z-index: -1;\n transition: transform 0.3s ease, opacity 0.2s ease;\n overflow-y: auto;\n width: var(--secondary-width, 400px);\n max-width: 62vw;\n opacity: 1;\n padding-inline:\n var(--secondary-padding-start, var(--padding-start))\n var(--secondary-padding-end, var(--padding-end));\n padding-block:\n var(--secondary-padding-top, var(--padding-top))\n var(--secondary-padding-bottom, var(--padding-bottom));\n\n &:focus {\n outline: none;\n }\n\n &.open {\n transform: translateX(100%);\n }\n }\n\n .notification {\n position: relative;\n\n &::after {\n content: '';\n display: block;\n position: absolute;\n width: 6px;\n height: 6px;\n background-color: #ef4135;\n inset-inline-start: 10px;\n inset-block-start: 7px;\n border-radius: 50%;\n\n @media (min-width: 52em) {\n width: 7px;\n height: 7px;\n inset-inline-start: 8px;\n inset-block-start: 5px;\n }\n }\n }\n}\n\n:host(.nano-menu-drawer[dir='rtl']) {\n .secondary-menu {\n transform: translateX(0%);\n\n &.open {\n transform: translateX(-100%);\n opacity: 1;\n }\n }\n}\n","import {\n Component,\n h,\n Host,\n Element,\n Prop,\n Watch,\n EventEmitter,\n Event,\n State,\n Method,\n ComponentInterface,\n Listen,\n} from '@stencil/core';\nimport { getSiblings, getDirectChildren } from '../../utils/dom';\nimport { displayTransition } from '../../utils/transitions';\nimport { getTabbableElements } from '../../utils/tabbable';\nimport type { NavItemEventDetail } from '../../interface';\n\n/**\n * Nav items to be used with the various nav items.\n * [Globla-Nav](/story/compounds-global-nav)\n * [Menu-Drawer](/story/components-menu-drawer)\n * [Dropdown](/story/components-dropdown)\n *\n * @slot icon-start - an icon at the start of the main control\n * @slot icon-end - an icon at the end of the main control\n * @slot secondary - a content panel in which you can place any html to display on control click\n * @slot - use the default slot for either `<a>` or text (if constructing a secondary content panel or using `href` directly)\n * @part ctrl - the controlling `<a>` or `<button>` element\n * @part ctrl--button - the controlling `<button>` element\n * @part ctrl--anchor - the controlling <a> element\n * @part ctrl-wrapper - the wrapping div around the control (shadow `<button>` / `<a>` or slotted `<a>`)\n * @part secondary-wrapper - the div surrounding slotted secondary content\n * @part secondary-mask - the div that is added when secondary content is shown\n */\n@Component({\n tag: 'nano-nav-item',\n styleUrl: 'nav-item.scss',\n shadow: true,\n})\nexport class NavItem implements ComponentInterface {\n private hasSecondarySlot: boolean = false;\n private btn: HTMLButtonElement | HTMLAnchorElement;\n private fromHover: boolean;\n private animating: boolean = false;\n private waitHide: number;\n private waitShow: number;\n private globalNavEle?: HTMLNanoGlobalNavElement;\n private secondaryDiv: HTMLDivElement;\n\n @State() hasAnchorEle: boolean = false;\n @State() didOpen: boolean = false;\n @State() isInGlobalNav: boolean = false;\n @State() isInMenuDrawer: boolean = false;\n @State() isInMenu: boolean = false;\n @State() hasFocus: boolean = false;\n @Element() private el: HTMLNanoNavItemElement;\n\n /**\n * Href to link to\n */\n @Prop({ mutable: true }) href: string = null;\n\n /**\n * Target to use for links\n */\n @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n /**\n * Disable the nav item\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Whether a secondary menu should be or is currently open\n */\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /**\n * Whether this menu item is currently 'selected'\n */\n @Prop({ reflect: true }) selected: boolean = false;\n\n /**\n * Screen pixel width to activate the secondary menu\n */\n @Prop() secondaryActiveWidth: number = 0;\n\n /**\n * Secondary fallback function for when the secondary menu is no longer active.\n */\n @Prop() secondaryFallback = () => {};\n\n /**\n * Whether secondary menus should close on blur\n */\n @Prop() closeOnBlur: boolean = true;\n\n /**\n * Will show an indicator badge - only when placed in a nano-menu-draw\n */\n @Prop() notification: boolean = false;\n\n /**\n * Emitted when the nav item closes it's secondary navigation.\n */\n @Event() nanoClose!: EventEmitter<NavItemEventDetail>;\n\n /**\n * Emitted when the nav item opens it's secondary navigation.\n */\n @Event() nanoOpen!: EventEmitter<NavItemEventDetail>;\n\n /**\n * Emitted when the nav item is about to open it's secondary navigation.\n */\n @Event() nanoOpening!: EventEmitter<NavItemEventDetail>;\n\n /**\n * Emitted when the nav item is about to close it's secondary navigation.\n */\n @Event() nanoClosing!: EventEmitter<NavItemEventDetail>;\n\n /**\n * Emitted when the nav item loses focus.\n */\n @Event() nanoBlur!: EventEmitter<void>;\n\n /**\n * Emitted when the nav item has focus.\n */\n @Event() nanoFocus!: EventEmitter<void>;\n\n /**\n * Sets focus on the first button or anchor present. Use this method instead of the global\n * `element.focus()`.\n */\n @Method()\n async setFocus() {\n if (!this.btn) return;\n this.btn.focus();\n }\n\n /**\n * Public open watcher\n */\n @Watch('open')\n openChange() {\n this.open ? this.openSecondary() : this.closeSecondary();\n }\n\n /**\n * Internal open watcher\n */\n @Watch('didOpen')\n didOpenChange() {\n if (!this.hasSecondarySlot) return;\n\n if (!this.didOpen) {\n /* the secondadry panel is not closing via hover,\n remove blur events, add focus back to originating button */\n setTimeout(() => {\n if (\n !this.fromHover &&\n (!document.activeElement || document.activeElement === document.body)\n )\n this.btn.focus({ preventScroll: true });\n this.el.tabIndex = null;\n this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });\n }, 50);\n } else {\n /* the secondary panel is not opening via hover,\n scroll content into view, focus on it and add blur events */\n if (!this.fromHover) {\n const panelIO = new (window as any).IntersectionObserver(\n (data: IntersectionObserverEntry[]) => {\n if (data[0].boundingClientRect.top < 0) {\n this.secondaryDiv.scrollIntoView({\n behavior: 'smooth',\n });\n }\n panelIO.disconnect();\n },\n { threshold: 1 }\n );\n panelIO.observe(this.secondaryDiv);\n this.secondaryDiv.focus({ preventScroll: true });\n\n const focusableChild = getTabbableElements(this.secondaryDiv, true);\n if (focusableChild[0]) focusableChild[0].focus();\n\n this.el.tabIndex = -1;\n this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });\n }\n }\n }\n\n @Listen('click', { target: 'body' })\n @Listen('keyup', { target: 'body' })\n handleClose(e: MouseEvent | KeyboardEvent) {\n if (!this.didOpen || !this.hasSecondarySlot || !this.closeOnBlur) return;\n if (!e.composedPath().some((el) => el === this.secondaryDiv))\n this.toggleSecondary();\n }\n\n private closeSecondary = async () => {\n if (!this.hasSecondarySlot || !this.didOpen) return;\n this.open = false;\n await displayTransition(this.secondaryDiv, {\n className: 'open',\n show: false,\n });\n this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });\n this.didOpen = false;\n };\n\n private openSecondary = async () => {\n if (window.innerWidth < this.secondaryActiveWidth) {\n this.secondaryFallback.call(this);\n return;\n }\n\n if (!this.hasSecondarySlot || this.didOpen) return;\n this.open = true;\n await displayTransition(this.secondaryDiv, {\n className: 'open',\n show: true,\n });\n this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });\n this.didOpen = true;\n };\n\n private toggleSecondary = () => {\n if (!this.hasSecondarySlot) return;\n if (this.didOpen) this.closeSecondary();\n else this.openSecondary();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n // opens secondary panel when activated via hover\n if (this.href && !this.animating && this.hasSecondarySlot)\n this.openSecondary();\n this.nanoFocus.emit();\n };\n\n private handleHostBlur = () => {\n if (this.animating) return;\n\n // tab index is added to host when secondary panel opens\n // to return focus after secondary panel closes. Remove now if it was added\n this.el.removeAttribute('tabindex');\n this.hasFocus = false;\n this.nanoBlur.emit();\n };\n\n // direct host clicks to internal button\n private handleHostClick = (ev: MouseEvent) => {\n if (!this.hasAnchorEle) return;\n const foundlink = (ev.target as HTMLElement).closest('a, button');\n if (!foundlink) this.btn.click();\n };\n\n // handles secondary menu hover behaviour.\n private handleMouseEnter = async () => {\n if (\n !this.href ||\n this.animating ||\n !this.hasSecondarySlot ||\n (this.globalNavEle && !this.globalNavEle.classList.contains('ready'))\n )\n return;\n\n // if there are sibling secondary panels currently open,\n // we need to wait before opening otherwise we get unwanted overlapping\n let timeToWait = 0;\n if (getSiblings(this.el, '.secondary-open.has-secondary').length)\n timeToWait = 300;\n\n clearTimeout(this.waitHide);\n this.fromHover = true;\n this.animating = true;\n this.waitShow = window.setTimeout(\n async () => await this.openSecondary(),\n timeToWait\n );\n this.animating = false;\n };\n\n // handles secondary menu hover-out behaviour.\n private handleMouseLeave = () => {\n if (!this.href) return;\n clearTimeout(this.waitShow);\n this.fromHover = true;\n this.animating = true;\n\n // prevent closing immediately - makes navigating to items within more forgiving\n this.waitHide = window.setTimeout(\n async () => await this.closeSecondary(),\n 300\n );\n this.animating = false;\n };\n\n private handleClick = () => {\n this.fromHover = false;\n if (this.hasSecondarySlot) this.toggleSecondary();\n };\n\n connectedCallback() {\n const secondaryEle = this.el.querySelector('[slot=\"secondary\"]');\n this.hasSecondarySlot = !!secondaryEle;\n\n const link = getDirectChildren<HTMLAnchorElement | HTMLButtonElement>(\n this.el,\n 'a, button'\n )[0];\n this.hasAnchorEle = !!link;\n\n if (link) {\n this.href = (link as HTMLAnchorElement).href\n ? (link as HTMLAnchorElement).href\n : null;\n this.btn = link;\n if (this.hasSecondarySlot)\n this.btn.addEventListener('click', this.toggleSecondary);\n\n this.btn.addEventListener('focus', this.handleFocus);\n this.btn.addEventListener('blur', this.handleHostBlur);\n }\n\n this.isInGlobalNav = false;\n this.isInMenuDrawer = false;\n this.globalNavEle = this.el.closest('nano-global-nav');\n\n this.isInMenuDrawer = !!this.el.closest('nano-menu-drawer');\n this.isInMenu = !!this.el.closest('nano-menu');\n this.isInGlobalNav =\n this.el.parentElement === this.globalNavEle ||\n !!this.el.closest('.global-nav');\n }\n\n componentDidLoad() {\n this.openChange();\n }\n\n disconnectedCallback(): void {\n this.btn.removeEventListener('click', this.toggleSecondary);\n this.btn.removeEventListener('focus', this.handleFocus);\n this.btn.removeEventListener('blur', this.handleHostBlur);\n }\n\n render() {\n return (\n <Host\n class={{\n 'has-secondary': this.hasSecondarySlot,\n 'secondary-open': this.open,\n selected: this.selected,\n 'has-focus': this.hasFocus,\n disabled: this.disabled,\n 'nano-global-nav': this.isInGlobalNav,\n 'nano-menu-drawer': this.isInMenuDrawer,\n 'nano-menu': this.isInMenu,\n }}\n onBlur={this.handleHostBlur}\n dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n onClick={this.handleHostClick}\n role={this.el.closest('[role=\"menu\"]') ? 'menuitem' : undefined}\n >\n <div\n class={{\n 'nav-item': true,\n 'secondary-open': this.open,\n selected: this.selected,\n }}\n part=\"ctrl-wrapper\"\n >\n {this.href && !this.hasAnchorEle && !this.disabled && (\n <a\n part=\"ctrl ctrl--anchor\"\n target={this.target}\n ref={(a) => (this.btn = a)}\n href={this.href}\n onFocus={this.handleFocus}\n class={{\n notification: this.notification,\n }}\n >\n <slot name=\"icon-start\" />\n <span class=\"text\">\n <slot />\n </span>\n <slot name=\"icon-end\" />\n </a>\n )}\n {((!this.hasAnchorEle && !this.href) || this.disabled) && (\n <button\n part=\"ctrl ctrl--button\"\n ref={(btn) => (this.btn = btn)}\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n disabled={this.disabled}\n class={{\n notification: this.notification,\n }}\n >\n <slot name=\"icon-start\" />\n <span class=\"text\">\n <slot />\n </span>\n <slot name=\"icon-end\" />\n </button>\n )}\n {this.hasAnchorEle && !this.disabled && (\n <div class=\"link\">\n <slot name=\"icon-start\" />\n <slot />\n <slot name=\"icon-end\" />\n </div>\n )}\n {this.hasSecondarySlot && !this.disabled && (\n <div\n class=\"secondary-menu\"\n ref={(div) => (this.secondaryDiv = div)}\n tabIndex={-1}\n >\n <div class=\"secondary-menu-content\" part=\"secondary-wrapper\">\n <slot name=\"secondary\" />\n </div>\n <div\n class=\"secondary-menu-mask\"\n onClick={this.closeSecondary}\n part=\"secondary-mask\"\n ></div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"nav-item.js","mappings":"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","names":[],"sources":["./src/components/nav-item/nav-item.scss?tag=nano-nav-item&encapsulation=shadow","./src/components/nav-item/nav-item.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n:host {\n // These can be overwritten, but are automatically set from context components\n\n // --padding-top: inherit;\n // --padding-bottom: inherit;\n // --padding-start: inherit;\n // --padding-end: inherit;\n // --margin: inherit;\n\n // --secondary-padding-top: inherit;\n // --secondary-padding-bottom: inherit;\n // --secondary-padding-start: inherit;\n // --secondary-padding-end: inherit;\n\n // --border-bottom: inherit;\n // --icon-size: inherit;\n\n // --color: inherit;\n // --color-hover: inherit;\n // --color-focus: inherit;\n // --color-selected: inherit;\n // --color-open: inherit;\n\n // --bg-color: inherit;\n // --bg-color-hover: inherit;\n // --bg-color-selected: inherit;\n // --bg-color-open: inherit;\n // --bg-color-focus: inherit;\n\n // --secondary-bg-color: inherit;\n // --secondary-color: inherit;\n\n opacity: inherit;\n display: block;\n color: var(--color) !important;\n margin: var(--margin);\n outline: none !important;\n\n .nav-item,\n .link {\n outline: none !important;\n border-radius: inherit;\n }\n\n ::slotted(*),\n * {\n box-sizing: border-box;\n }\n\n ::slotted(button),\n button {\n background: none;\n border: none;\n margin: 0;\n }\n\n ::slotted(button),\n ::slotted(a),\n ::slotted(a:visited),\n button,\n a,\n a:visited {\n @include text-inherit();\n\n padding-inline: var(--padding-start) var(--padding-end);\n padding-block: var(--padding-top) var(--padding-bottom);\n display: var(--display, block);\n white-space: nowrap;\n color: var(--color) !important;\n background-color: var(--bg-color);\n line-height: inherit;\n outline: none !important;\n }\n\n ::slotted(nano-icon[slot='icon-start']) {\n padding-inline-end: var(--padding-end);\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n padding-inline-start: var(--padding-start);\n }\n\n .link {\n ::slotted(nano-icon[slot='icon-start']) {\n padding-inline-start: var(--padding-start);\n padding-inline-end: 0;\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n padding-inline-end: var(--padding-end);\n padding-inline-start: 0;\n }\n }\n\n .link,\n button,\n a {\n border-block-end: var(--border-bottom);\n display: flex;\n align-items: center;\n border-radius: inherit;\n }\n\n .secondary-menu {\n display: none;\n }\n\n ::slotted(a:hover),\n ::slotted(button:hover),\n .link:hover,\n button:hover,\n a:hover {\n text-decoration: inherit !important;\n }\n\n button:focus-visible,\n a:focus-visible {\n color: var(--color-focus, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-focus,\n var(--bg-color-hover, var(--bg-color))\n );\n box-shadow: #{$control-focus-style};\n }\n\n ::slotted(a:focus-visible),\n ::slotted(button:focus-visible) {\n color: var(--color-focus, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-focus,\n var(--bg-color-hover, var(--bg-color))\n );\n box-shadow: #{$control-focus-style};\n }\n}\n\n.nav-item {\n &.selected {\n .link,\n button,\n a {\n color: var(--color-selected, var(--color-open, var(--color))) !important;\n background-color:\n var(\n --bg-color-selected,\n var(--bg-color-open, var(--bg-color))\n );\n }\n }\n\n &.secondary-open {\n button,\n a {\n color: var(--color-open, var(--color-selected, var(--color))) !important;\n background-color:\n var(\n --bg-color-open,\n var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color)))\n );\n }\n }\n\n &.disabled {\n opacity: 0.6;\n\n button,\n a {\n color: var(--color-disabled, var(--color)) !important;\n }\n }\n\n &:not(.nano-menu) {\n ::slotted(a:hover),\n ::slotted(button:hover),\n .link:hover,\n button:hover,\n a:hover {\n color: var(--color-hover, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-hover,\n var(--bg-color-focus, var(--bg-color))\n );\n }\n }\n}\n\n:host(.has-focus) {\n .link {\n color: var(--color-focus, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-focus,\n var(--bg-color-hover, var(--bg-color))\n );\n outline: var(--focus-outline, 5px auto -webkit-focus-ring-color);\n }\n}\n\n:host(.nano-global-nav-menu),\n:host(.nano-menu) {\n a,\n a:visited,\n button,\n .link {\n display: flex;\n justify-content: flex-start;\n flex-direction: row;\n align-items: center;\n color: currentcolor;\n text-decoration: inherit;\n white-space: normal;\n cursor: pointer;\n line-height: 1.2;\n width: 100%;\n }\n\n .text {\n padding-inline-start: 0;\n padding-inline-end: var(--padding-end);\n flex: 1;\n }\n\n ::slotted(a),\n ::slotted(button) {\n flex: 1;\n }\n\n .secondary-menu {\n display: none;\n position: absolute;\n color: var(--secondary-color, currentcolor);\n min-height: 100%;\n inset-block-start: 0;\n inset-inline-start: 0;\n width: 100%;\n z-index: 1;\n opacity: 0;\n transition: opacity 0.3s ease, transform 0.3s ease;\n background-color: var(--secondary-bg-color, white);\n transform: translate3d(100%, 0, 0);\n\n &:focus {\n outline: none;\n }\n\n &.open {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n transition: opacity 0.3s ease, transform 0.3s ease;\n }\n }\n}\n\n:host(.nano-global-nav-menu) {\n ::slotted(nano-icon[slot='icon-start']) {\n padding-inline: 0 var(--padding-end);\n padding-block: 0;\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n padding-inline: 0 var(--padding-end);\n padding-block: 0;\n font-size: 10px;\n flex: 0 0 10px;\n pointer-events: none;\n }\n\n button,\n a {\n ::slotted(nano-icon[slot='icon-end']) {\n padding: 0;\n }\n }\n}\n\n:host(.nano-global-nav-menu[dir='rtl']),\n:host(.nano-menu[dir='rtl']) {\n .secondary-menu {\n transform: translateX(-100%);\n\n &.open {\n transform: translateX(0);\n }\n }\n}\n\n:host(.nano-menu) {\n ::slotted(a:focus),\n ::slotted(button:focus) {\n box-shadow: none;\n }\n\n .secondary-menu-content {\n padding-inline: var(--secondary-padding-start) var(--secondary-padding-end);\n padding-block: var(--secondary-padding-top) var(--secondary-padding-bottom);\n }\n}\n\n:host(.nano-global-nav-bar) {\n .link,\n a,\n button {\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n\n .text {\n flex: 1 0 auto;\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n margin-inline: var(--padding-end) 0;\n margin-block: 0;\n }\n\n ::slotted(nano-icon[slot='icon-start']) {\n margin-inline: 0 var(--padding-start);\n margin-block: 0;\n }\n\n ::slotted(a),\n button {\n position: relative;\n\n &::before {\n content: '';\n background-color: rgb(12 90 113);\n height: 9px;\n inset-inline: 0 5px;\n inset-block-end: -22px;\n position: absolute;\n transform: translateZ(0) scaleX(0);\n transform-origin: 0;\n transition: 0.2s ease transform;\n }\n }\n\n .selected button::before,\n .secondary-open button::before {\n transform: translateZ(0) scaleX(1);\n }\n}\n\n:host(.nano-global-nav-bar.selected) {\n ::slotted(a) {\n &::before {\n transform: translateZ(0) scaleX(1);\n }\n }\n}\n\n:host(.nano-global-nav-bar.has-secondary) {\n .secondary-open button::before {\n opacity: 0.7;\n }\n\n .secondary-menu {\n display: none;\n transition: transform 0.3s ease;\n transform: translateY(-100%) translateZ(0);\n background-color: var(--secondary-bg-color, #196c82);\n color: var(--secondary-color);\n position: absolute;\n box-shadow: 0 1px 25px 0 rgb(0 0 0 / 15%);\n inset-inline: 0;\n z-index: -2;\n outline: none;\n\n &.open {\n transform: translateY(12px) translateZ(0);\n }\n }\n}\n\n:host(.nano-menu-drawer) {\n .link,\n a,\n button {\n padding-block-start: calc(var(--padding-top) / 2);\n padding-inline-end: 0;\n padding-block-end: calc(var(--padding-bottom) / 2);\n padding-inline-start: var(--padding-start);\n display: flex;\n justify-content: flex-start;\n flex-direction: row;\n align-items: center;\n color: currentcolor;\n text-decoration: inherit;\n white-space: normal;\n border: none;\n cursor: pointer;\n line-height: 1.2;\n width: 100%;\n }\n\n .text {\n padding-inline-end: var(--padding-end);\n padding-inline-start: 0;\n text-align: start;\n flex: 0 1 auto;\n min-width: 130px;\n width: 130px;\n }\n\n ::slotted(nano-icon[slot='icon-start']) {\n padding-inline: 0 var(--padding-end);\n padding-block: 0;\n font-size: var(--icon-size);\n width: var(--icon-size);\n flex: 0 0 var(--icon-size);\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n padding: 0 var(--padding-end) 0 0;\n font-size: 10px;\n flex: 0 0 20px;\n min-width: 20px;\n }\n\n .secondary-menu {\n display: none;\n position: absolute;\n background-color: var(--secondary-bg-color);\n color: var(--secondary-color);\n height: 100vh;\n inset-inline: auto 0;\n inset-block: 0;\n transform: translateX(0);\n z-index: -1;\n transition: transform 0.3s ease, opacity 0.2s ease;\n overflow-y: auto;\n width: var(--secondary-width, 400px);\n max-width: 62vw;\n opacity: 1;\n padding-inline:\n var(--secondary-padding-start, var(--padding-start))\n var(--secondary-padding-end, var(--padding-end));\n padding-block:\n var(--secondary-padding-top, var(--padding-top))\n var(--secondary-padding-bottom, var(--padding-bottom));\n\n &:focus {\n outline: none;\n }\n\n &.open {\n transform: translateX(100%);\n }\n }\n\n .notification {\n position: relative;\n\n &::after {\n content: '';\n display: block;\n position: absolute;\n width: 6px;\n height: 6px;\n background-color: #ef4135;\n inset-inline-start: 10px;\n inset-block-start: 7px;\n border-radius: 50%;\n\n @media (min-width: 52em) {\n width: 7px;\n height: 7px;\n inset-inline-start: 8px;\n inset-block-start: 5px;\n }\n }\n }\n}\n\n:host(.nano-menu-drawer[dir='rtl']) {\n .secondary-menu {\n transform: translateX(0%);\n\n &.open {\n transform: translateX(-100%);\n opacity: 1;\n }\n }\n}\n","import {\n Component,\n h,\n Host,\n Element,\n Prop,\n Watch,\n EventEmitter,\n Event,\n State,\n Method,\n ComponentInterface,\n Listen,\n} from '@stencil/core';\nimport { getSiblings, getDirectChildren } from '../../utils/dom';\nimport { displayTransition } from '../../utils/transitions';\nimport { getTabbableElements } from '../../utils/tabbable';\nimport type { NavItemEventDetail } from '../../interface';\n\n/**\n * Nav items to be used with the various nav items.\n * [Globla-Nav](/story/compounds-global-nav)\n * [Menu-Drawer](/story/components-menu-drawer)\n * [Dropdown](/story/components-dropdown)\n *\n * @slot icon-start - an icon at the start of the main control\n * @slot icon-end - an icon at the end of the main control\n * @slot secondary - a content panel in which you can place any html to display on control click\n * @slot - use the default slot for either `<a>` or text (if constructing a secondary content panel or using `href` directly)\n * @part ctrl - the controlling `<a>` or `<button>` element\n * @part ctrl--button - the controlling `<button>` element\n * @part ctrl--anchor - the controlling <a> element\n * @part ctrl-wrapper - the wrapping div around the control (shadow `<button>` / `<a>` or slotted `<a>`)\n * @part secondary-wrapper - the div surrounding slotted secondary content\n * @part secondary-mask - the div that is added when secondary content is shown\n */\n@Component({\n tag: 'nano-nav-item',\n styleUrl: 'nav-item.scss',\n shadow: true,\n})\nexport class NavItem implements ComponentInterface {\n private hasSecondarySlot: boolean = false;\n private btn: HTMLButtonElement | HTMLAnchorElement;\n private fromHover: boolean;\n private animating: boolean = false;\n private waitHide: number;\n private waitShow: number;\n private globalNavEle?: HTMLNanoGlobalNavElement;\n private secondaryDiv: HTMLDivElement;\n\n @State() hasAnchorEle: boolean = false;\n @State() didOpen: boolean = false;\n @State() isInGlobalNav: boolean = false;\n @State() isInMenuDrawer: boolean = false;\n @State() isInMenu: boolean = false;\n @State() hasFocus: boolean = false;\n @Element() private el: HTMLNanoNavItemElement;\n\n /**\n * Href to link to\n */\n @Prop({ mutable: true }) href: string = null;\n\n /**\n * Target to use for links\n */\n @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n /**\n * Disable the nav item\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Whether a secondary menu should be or is currently open\n */\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /**\n * Whether this menu item is currently 'selected'\n */\n @Prop({ reflect: true }) selected: boolean = false;\n\n /**\n * Screen pixel width to activate the secondary menu\n */\n @Prop() secondaryActiveWidth: number = 0;\n\n /**\n * Secondary fallback function for when the secondary menu is no longer active.\n */\n @Prop() secondaryFallback = () => {};\n\n /**\n * Whether secondary menus should close on blur\n */\n @Prop() closeOnBlur: boolean = true;\n\n /**\n * Will show an indicator badge - only when placed in a nano-menu-draw\n */\n @Prop() notification: boolean = false;\n\n /**\n * Emitted when the nav item closes it's secondary navigation.\n */\n @Event() nanoClose!: EventEmitter<NavItemEventDetail>;\n\n /**\n * Emitted when the nav item opens it's secondary navigation.\n */\n @Event() nanoOpen!: EventEmitter<NavItemEventDetail>;\n\n /**\n * Emitted when the nav item is about to open it's secondary navigation.\n */\n @Event() nanoOpening!: EventEmitter<NavItemEventDetail>;\n\n /**\n * Emitted when the nav item is about to close it's secondary navigation.\n */\n @Event() nanoClosing!: EventEmitter<NavItemEventDetail>;\n\n /**\n * Emitted when the nav item loses focus.\n */\n @Event() nanoBlur!: EventEmitter<void>;\n\n /**\n * Emitted when the nav item has focus.\n */\n @Event() nanoFocus!: EventEmitter<void>;\n\n /**\n * Sets focus on the first button or anchor present. Use this method instead of the global\n * `element.focus()`.\n */\n @Method()\n async setFocus() {\n if (!this.btn) return;\n this.btn.focus();\n }\n\n /**\n * Public open watcher\n */\n @Watch('open')\n openChange() {\n this.open ? this.openSecondary() : this.closeSecondary();\n }\n\n /**\n * Internal open watcher\n */\n @Watch('didOpen')\n didOpenChange() {\n if (!this.hasSecondarySlot) return;\n\n if (!this.didOpen) {\n /* the secondadry panel is not closing via hover,\n remove blur events, add focus back to originating button */\n setTimeout(() => {\n if (\n !this.fromHover &&\n (!document.activeElement || document.activeElement === document.body)\n )\n this.btn.focus({ preventScroll: true });\n this.el.tabIndex = null;\n this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });\n }, 50);\n } else {\n /* the secondary panel is not opening via hover,\n scroll content into view, focus on it and add blur events */\n if (!this.fromHover) {\n const panelIO = new (window as any).IntersectionObserver(\n (data: IntersectionObserverEntry[]) => {\n if (data[0].boundingClientRect.top < 0) {\n this.secondaryDiv.scrollIntoView({\n behavior: 'smooth',\n });\n }\n panelIO.disconnect();\n },\n { threshold: 1 }\n );\n panelIO.observe(this.secondaryDiv);\n this.secondaryDiv.focus({ preventScroll: true });\n\n const focusableChild = getTabbableElements(this.secondaryDiv, true);\n if (focusableChild[0]) focusableChild[0].focus();\n\n this.el.tabIndex = -1;\n this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });\n }\n }\n }\n\n @Listen('click', { target: 'body' })\n @Listen('keyup', { target: 'body' })\n handleClose(e: MouseEvent | KeyboardEvent) {\n if (!this.didOpen || !this.hasSecondarySlot || !this.closeOnBlur) return;\n if (!e.composedPath().some((el) => el === this.secondaryDiv))\n this.toggleSecondary();\n }\n\n private closeSecondary = async () => {\n if (!this.hasSecondarySlot || !this.didOpen) return;\n this.open = false;\n await displayTransition(this.secondaryDiv, {\n className: 'open',\n show: false,\n });\n this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });\n this.didOpen = false;\n };\n\n private openSecondary = async () => {\n if (window.innerWidth < this.secondaryActiveWidth) {\n this.secondaryFallback.call(this);\n return;\n }\n\n if (!this.hasSecondarySlot || this.didOpen) return;\n this.open = true;\n await displayTransition(this.secondaryDiv, {\n className: 'open',\n show: true,\n });\n this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });\n this.didOpen = true;\n };\n\n private toggleSecondary = () => {\n if (!this.hasSecondarySlot) return;\n if (this.didOpen) this.closeSecondary();\n else this.openSecondary();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n // opens secondary panel when activated via hover\n if (this.href && !this.animating && this.hasSecondarySlot)\n this.openSecondary();\n this.nanoFocus.emit();\n };\n\n private handleHostBlur = () => {\n if (this.animating) return;\n\n // tab index is added to host when secondary panel opens\n // to return focus after secondary panel closes. Remove now if it was added\n this.el.removeAttribute('tabindex');\n this.hasFocus = false;\n this.nanoBlur.emit();\n };\n\n // direct host clicks to internal button\n private handleHostClick = (ev: MouseEvent) => {\n if (!this.hasAnchorEle) return;\n const foundlink = (ev.target as HTMLElement).closest('a, button');\n if (!foundlink) this.btn.click();\n };\n\n // handles secondary menu hover behaviour.\n private handleMouseEnter = async () => {\n if (\n !this.href ||\n this.animating ||\n !this.hasSecondarySlot ||\n (this.globalNavEle && !this.globalNavEle.classList.contains('ready'))\n )\n return;\n\n // if there are sibling secondary panels currently open,\n // we need to wait before opening otherwise we get unwanted overlapping\n let timeToWait = 0;\n if (getSiblings(this.el, '.secondary-open.has-secondary').length)\n timeToWait = 300;\n\n clearTimeout(this.waitHide);\n this.fromHover = true;\n this.animating = true;\n this.waitShow = window.setTimeout(\n async () => await this.openSecondary(),\n timeToWait\n );\n this.animating = false;\n };\n\n // handles secondary menu hover-out behaviour.\n private handleMouseLeave = () => {\n if (!this.href) return;\n clearTimeout(this.waitShow);\n this.fromHover = true;\n this.animating = true;\n\n // prevent closing immediately - makes navigating to items within more forgiving\n this.waitHide = window.setTimeout(\n async () => await this.closeSecondary(),\n 300\n );\n this.animating = false;\n };\n\n private handleClick = () => {\n this.fromHover = false;\n if (this.hasSecondarySlot) this.toggleSecondary();\n };\n\n connectedCallback() {\n const secondaryEle = this.el.querySelector('[slot=\"secondary\"]');\n this.hasSecondarySlot = !!secondaryEle;\n\n const link = getDirectChildren<HTMLAnchorElement | HTMLButtonElement>(\n this.el,\n 'a, button'\n )[0];\n this.hasAnchorEle = !!link;\n\n if (link) {\n this.href = (link as HTMLAnchorElement).href\n ? (link as HTMLAnchorElement).href\n : null;\n this.btn = link;\n if (this.hasSecondarySlot)\n this.btn.addEventListener('click', this.toggleSecondary);\n\n this.btn.addEventListener('focus', this.handleFocus);\n this.btn.addEventListener('blur', this.handleHostBlur);\n }\n\n this.isInGlobalNav = false;\n this.isInMenuDrawer = false;\n this.globalNavEle = this.el.closest('nano-global-nav');\n\n this.isInMenuDrawer = !!this.el.closest('nano-menu-drawer');\n this.isInMenu = !!this.el.closest('nano-menu');\n this.isInGlobalNav =\n this.el.parentElement === this.globalNavEle ||\n !!this.el.closest('.global-nav');\n }\n\n componentDidLoad() {\n this.openChange();\n }\n\n disconnectedCallback(): void {\n this.btn.removeEventListener('click', this.toggleSecondary);\n this.btn.removeEventListener('focus', this.handleFocus);\n this.btn.removeEventListener('blur', this.handleHostBlur);\n }\n\n render() {\n return (\n <Host\n class={{\n 'has-secondary': this.hasSecondarySlot,\n 'secondary-open': this.open,\n selected: this.selected,\n 'has-focus': this.hasFocus,\n disabled: this.disabled,\n 'nano-global-nav': this.isInGlobalNav,\n 'nano-menu-drawer': this.isInMenuDrawer,\n 'nano-menu': this.isInMenu,\n }}\n onBlur={this.handleHostBlur}\n dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n onClick={this.handleHostClick}\n role={this.el.closest('[role=\"menu\"]') ? 'menuitem' : undefined}\n >\n <div\n class={{\n 'nav-item': true,\n 'secondary-open': this.open,\n selected: this.selected,\n }}\n part=\"ctrl-wrapper\"\n >\n {this.href && !this.hasAnchorEle && !this.disabled && (\n <a\n part=\"ctrl ctrl--anchor\"\n target={this.target}\n ref={(a) => (this.btn = a)}\n href={this.href}\n onFocus={this.handleFocus}\n class={{\n notification: this.notification,\n }}\n >\n <slot name=\"icon-start\" />\n <span class=\"text\">\n <slot />\n </span>\n <slot name=\"icon-end\" />\n </a>\n )}\n {((!this.hasAnchorEle && !this.href) || this.disabled) && (\n <button\n part=\"ctrl ctrl--button\"\n ref={(btn) => (this.btn = btn)}\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n disabled={this.disabled}\n class={{\n notification: this.notification,\n }}\n >\n <slot name=\"icon-start\" />\n <span class=\"text\">\n <slot />\n </span>\n <slot name=\"icon-end\" />\n </button>\n )}\n {this.hasAnchorEle && !this.disabled && (\n <div class=\"link\">\n <slot name=\"icon-start\" />\n <slot />\n <slot name=\"icon-end\" />\n </div>\n )}\n {this.hasSecondarySlot && !this.disabled && (\n <div\n class=\"secondary-menu\"\n ref={(div) => (this.secondaryDiv = div)}\n tabIndex={-1}\n >\n <div class=\"secondary-menu-content\" part=\"secondary-wrapper\">\n <slot name=\"secondary\" />\n </div>\n <div\n class=\"secondary-menu-mask\"\n onClick={this.closeSecondary}\n part=\"secondary-mask\"\n ></div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}