@nanoporetech-digital/components 9.1.1 → 9.1.3

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 (38) hide show
  1. package/dist/cjs/nano-avatar_5.cjs.entry.js +1 -1
  2. package/dist/cjs/nano-breadcrumb.cjs.entry.js +1 -1
  3. package/dist/cjs/nano-collapsible-comparison.cjs.entry.js +1 -1
  4. package/dist/cjs/nano-datalist_3.cjs.entry.js +8 -6
  5. package/dist/cjs/nano-footer.cjs.entry.js +1 -1
  6. package/dist/cjs/nano-global-nav.cjs.entry.js +20 -16
  7. package/dist/cjs/nano-step-breadcrumb.cjs.entry.js +1 -1
  8. package/dist/cjs/style-CQ5MIH25.js +143 -0
  9. package/dist/collection/components/cta/cta.js +1 -1
  10. package/dist/collection/components/datalist/datalist.js +8 -6
  11. package/dist/collection/components/global-nav/global-nav.js +19 -15
  12. package/dist/collection/utils/style.js +81 -10
  13. package/dist/components/datalist.js +8 -6
  14. package/dist/components/nano-global-nav.js +19 -15
  15. package/dist/components/style.js +81 -10
  16. package/dist/esm/nano-avatar_5.entry.js +1 -1
  17. package/dist/esm/nano-breadcrumb.entry.js +1 -1
  18. package/dist/esm/nano-collapsible-comparison.entry.js +1 -1
  19. package/dist/esm/nano-datalist_3.entry.js +8 -6
  20. package/dist/esm/nano-footer.entry.js +1 -1
  21. package/dist/esm/nano-global-nav.entry.js +20 -16
  22. package/dist/esm/nano-step-breadcrumb.entry.js +1 -1
  23. package/dist/esm/style-DZBZHpf8.js +141 -0
  24. package/dist/nano-components/nano-avatar_5.entry.js +1 -1
  25. package/dist/nano-components/nano-breadcrumb.entry.js +1 -1
  26. package/dist/nano-components/nano-collapsible-comparison.entry.js +1 -1
  27. package/dist/nano-components/nano-datalist_3.entry.js +1 -1
  28. package/dist/nano-components/nano-footer.entry.js +1 -1
  29. package/dist/nano-components/nano-global-nav.entry.js +1 -1
  30. package/dist/nano-components/nano-step-breadcrumb.entry.js +1 -1
  31. package/dist/nano-components/style-DZBZHpf8.js +4 -0
  32. package/docs-json.json +7 -7
  33. package/hydrate/index.js +27 -21
  34. package/hydrate/index.mjs +27 -21
  35. package/package.json +2 -2
  36. package/dist/cjs/style-Du-L-qMa.js +0 -72
  37. package/dist/esm/style-Ds52s5za.js +0 -70
  38. package/dist/nano-components/style-Ds52s5za.js +0 -4
package/dist/collection/utils/style.js CHANGED
@@ -2,6 +2,27 @@
2
2
  * Custom elements for Nanopore-Digital Web applications
3
3
  */
4
4
  let cachedCSStylesheet;
5
+ // de-dupes the async fetch fallback so we only build the stylesheet once even
6
+ // if several components request it before the fetch resolves
7
+ let pendingCSStylesheet = null;
8
+ // arbitrary pieces of text that appear early in the `nano-components` stylesheet
9
+ // this is a bit fragile but does the job
10
+ const NANO_STYLESHEET_MARKERS = ['.nano-toast-stack', '.nano-theme'];
11
+ function cssTextContainsNanoMarker(cssText) {
12
+ return NANO_STYLESHEET_MARKERS.some((marker) => cssText.indexOf(marker) > -1);
13
+ }
14
+ // only cross-origin sheets whose href looks like the nano stylesheet are worth
15
+ // fetching as a fallback - this avoids pulling unrelated third-party sheets over
16
+ // the network (and into shadow roots). The `@nanoporetech-digital/style` package
17
+ // serves bundles such as `core.css` / `nano.css`.
18
+ const NANO_STYLESHEET_HREF_PATTERNS = [
19
+ '@nanoporetech-digital/style',
20
+ '/core.css',
21
+ '/nano.css',
22
+ ];
23
+ function isLikelyNanoStylesheetHref(href) {
24
+ return NANO_STYLESHEET_HREF_PATTERNS.some((pattern) => href.indexOf(pattern) > -1);
25
+ }
5
26
  /**
6
27
  * Adds the global nano-components stylesheets as a constructable stylesheet to a shadow root.
7
28
  * This is useful when shadow DOM enabled components:
@@ -22,6 +43,9 @@ export function addGlobalStylesheetToShadow(shadowRoot) {
22
43
  let stylesheet = null;
23
44
  let rule = null;
24
45
  const globalStylesheet = [];
46
+ // stylesheets we couldn't read directly (typically CORS-restricted, e.g.
47
+ // served from a CDN without a `crossorigin` attribute on the `<link>`)
48
+ const inaccessibleHrefs = [];
25
49
  for (stylesheet of globalStylesheets) {
26
50
  if (!(stylesheet instanceof CSSStyleSheet)) {
27
51
  continue;
@@ -34,20 +58,18 @@ export function addGlobalStylesheetToShadow(shadowRoot) {
34
58
  if (!cssRules)
35
59
  continue;
36
60
  }
37
- catch (e) {
38
- // some stylesheets may not be accessible due to CORS or other restrictions
39
- console.warn('Unable to access stylesheet:', stylesheet, e);
61
+ catch {
62
+ // some stylesheets may not be accessible due to CORS or other restrictions.
63
+ // if the href looks like the nano stylesheet, remember it so we can try to
64
+ // fetch it as a fallback below - ignore unrelated third-party sheets.
65
+ if (stylesheet.href && isLikelyNanoStylesheetHref(stylesheet.href)) {
66
+ inaccessibleHrefs.push(stylesheet.href);
67
+ }
40
68
  continue;
41
69
  }
42
70
  for (rule of cssRules) {
43
- // arbitrary piece of text to check for that appears early in the `nano-components` stylesheet
44
- // this is a bit fragile but does the job
45
- if (rule instanceof CSSLayerBlockRule &&
46
- rule.cssText.indexOf('.nano-toast-stack') > -1) {
47
- globalStylesheet.push(stylesheet);
48
- }
49
71
  if (rule instanceof CSSLayerBlockRule &&
50
- rule.cssText.indexOf('.nano-theme') > -1) {
72
+ cssTextContainsNanoMarker(rule.cssText)) {
51
73
  globalStylesheet.push(stylesheet);
52
74
  }
53
75
  }
@@ -64,5 +86,54 @@ export function addGlobalStylesheetToShadow(shadowRoot) {
64
86
  shadowRoot.adoptedStyleSheets.push(sheet);
65
87
  return;
66
88
  }
89
+ // We couldn't find the global stylesheet via the CSSOM. If there are
90
+ // CORS-restricted stylesheets (e.g. served from a CDN), fall back to
91
+ // fetching their raw text and constructing the stylesheet asynchronously.
92
+ if (inaccessibleHrefs.length) {
93
+ void adoptGlobalStylesheetFromHrefs(inaccessibleHrefs, shadowRoot);
94
+ return;
95
+ }
96
+ console.warn('No global stylesheet found');
97
+ }
98
+ /**
99
+ * Fallback for cross-origin (e.g. CDN-served) stylesheets whose rules cannot be
100
+ * read via the CSSOM. Fetches the raw CSS text and, once the nano stylesheet is
101
+ * found and constructed, adopts it into the given shadow root.
102
+ */
103
+ async function adoptGlobalStylesheetFromHrefs(hrefs, shadowRoot) {
104
+ if (!pendingCSStylesheet) {
105
+ pendingCSStylesheet = buildGlobalStylesheetFromHrefs(hrefs);
106
+ }
107
+ const sheet = await pendingCSStylesheet;
108
+ if (sheet && shadowRoot) {
109
+ shadowRoot.adoptedStyleSheets.push(sheet);
110
+ }
111
+ }
112
+ async function buildGlobalStylesheetFromHrefs(hrefs) {
113
+ // fetch all candidate stylesheets in parallel rather than one-by-one, so we
114
+ // don't serialise the network latency across multiple cross-origin sheets
115
+ const cssTexts = await Promise.all(hrefs.map(async (href) => {
116
+ try {
117
+ const response = await fetch(href);
118
+ if (!response.ok)
119
+ return null;
120
+ return await response.text();
121
+ }
122
+ catch (e) {
123
+ console.warn('Unable to fetch stylesheet:', href, e);
124
+ return null;
125
+ }
126
+ }));
127
+ // keep the original document order and combine every matching stylesheet -
128
+ // the nano styles are split across multiple files (e.g. core.css, light.css,
129
+ // dark.css), so we must adopt all of them, not just the first match
130
+ const matchingCss = cssTexts.filter((text) => !!text && cssTextContainsNanoMarker(text));
131
+ if (matchingCss.length) {
132
+ const sheet = new CSSStyleSheet();
133
+ await sheet.replace(matchingCss.join('\n'));
134
+ cachedCSStylesheet = sheet;
135
+ return sheet;
136
+ }
67
137
  console.warn('No global stylesheet found');
138
+ return null;
68
139
  }
package/dist/components/datalist.js CHANGED
@@ -105,7 +105,9 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
105
105
  const { height, top } = this.nanoDropdown.tetherTo.getBoundingClientRect();
106
106
  this.nanoDropdown.style.setProperty('--max-height', `max(${window.innerHeight - (height + top + 40)}px, 48vw)`);
107
107
  }
108
- this.nanoDropdown.open = this.open;
108
+ if (this.nanoDropdown) {
109
+ this.nanoDropdown.open = this.open;
110
+ }
109
111
  if (this.connectedInput) {
110
112
  this.connectedInput.setAttribute('aria-expanded', this.open.toString());
111
113
  }
@@ -529,18 +531,18 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
529
531
  }
530
532
  }
531
533
  render() {
532
- return (h(Host, { key: '8acb3be76246d665171db96444cff3a5141e1132', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
534
+ return (h(Host, { key: '2e64e78b3582d1c7198f55425f87c115a597beb1', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
533
535
  ? 'Select options from the list below'
534
- : undefined }, h("nano-dropdown", { key: '56c051873a20a3dab17a36eec1a2f040f83247fa', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
536
+ : undefined }, h("nano-dropdown", { key: '3596eb7b1364fb13a8ca137ce846223508ca0775', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
535
537
  dlist__dropdown: true,
536
538
  'dlist--isfiltered': this.isFiltered,
537
- }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '7559b648617c8d32f61c670e4dc78c0d60d36dc4', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
539
+ }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '473e5fff336a3b8d2c0d52fbb85b7bce88cdaff2', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
538
540
  dlist__menu: true,
539
541
  'dlist__menu--open': this.dropwdownOpen,
540
- }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '02bd8ba511db314637e8991d29234a22967cf27d', name: "list-top" }), h("slot", { key: 'cb0234e0dd103293c1f1292af62575dd766af730' }), h("slot", { key: '0adac42b20ee0338de74217e6e91c00be6b5b6a7', name: "internal-opts" }), h("slot", { key: '906255e4e6fdc87fa8bf6e278ad076f179553925', name: "list-bottom" })), h("nano-menu", { key: '9aa978054227c9bb928c06ce93303ceda48cbf29', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
542
+ }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '572df9989a0ea9b70918a79f73084080d0adf975', name: "list-top" }), h("slot", { key: '0cdebdc62aa2aee8ca169aa71ee770310773edc7' }), h("slot", { key: 'f694eae7a6312f8220d7eddb5367830836130c5c', name: "internal-opts" }), h("slot", { key: 'f6f4b2a0c7401799db21f85b14e76a81b43ff751', name: "list-bottom" })), h("nano-menu", { key: 'a7c487506e3a69eb65d60382a1c903196715f2a7', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
541
543
  dlist__menu: true,
542
544
  'dlist__menu--open': this.dropwdownOpen,
543
- } }, h("slot", { key: '4e2ce9dcb39d0c823ed27f13dc8c9a8873f0ca9f', name: "no-result" })), !!this.actvOptEles && (h("div", { key: 'c6bf0c88d7b1fcd24b2882c7db851ffca2e77ba3', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
545
+ } }, h("slot", { key: 'bfadcf697f2c9a76acd7ea557c87022d341d9c48', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '57d347cd46afb73739d100feb35ecad36b48640f', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
544
546
  }
545
547
  static get watchers() { return {
546
548
  "open": ["openWatcher"],
package/dist/components/nano-global-nav.js CHANGED
@@ -98,6 +98,13 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class GlobalNav extends HTMLE
98
98
  return this.myAccountData?.user?.uuid ? this.myAccountData.user : null;
99
99
  }
100
100
  processUserData() {
101
+ // Login & cart are available whether or not the user is logged in,
102
+ // so set them before the logged-out early return.
103
+ if (this.myAccountData) {
104
+ this.loginUrl = this.loginUrl || this.myAccountData.urls?.login;
105
+ this.cartUrl = this.cartUrl || this.myAccountData.urls?.cart;
106
+ this.cartCount = this.cartCount || this.myAccountData.cart?.count;
107
+ }
101
108
  if (!this.myAccountUser) {
102
109
  this.isLoggedIn = false;
103
110
  this.userLinks = [];
@@ -108,12 +115,9 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class GlobalNav extends HTMLE
108
115
  }
109
116
  this.userLinks =
110
117
  this.myAccountData?.links?.filter((link) => link.area === 'profile-panel-list') || [];
111
- this.loginUrl = this.loginUrl || this.myAccountData.urls?.login;
112
118
  this.logoutUrl = this.logoutUrl || this.myAccountData.urls?.logout;
113
119
  this.msgUrl = this.msgUrl || this.myAccountData.urls?.messages;
114
120
  this.msgCount = this.msgCount || this.myAccountData.notifications?.count;
115
- this.cartUrl = this.cartUrl || this.myAccountData.urls?.cart;
116
- this.cartCount = this.cartCount || this.myAccountData.cart?.count;
117
121
  this.isLoggedIn = true;
118
122
  this.nanoUserData.emit(this.myAccountUser);
119
123
  }
@@ -523,21 +527,21 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class GlobalNav extends HTMLE
523
527
  }
524
528
  render() {
525
529
  const bpps = this.bpPartials;
526
- return (h(Host, { key: '53c751962d1ed36bae13be0a3c74b340b4a553bd', class: {
530
+ return (h(Host, { key: '79ca6089ded878867c3febc0add938f4bc93eabd', class: {
527
531
  'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
528
532
  'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
529
533
  'nano-global-nav': true,
530
- } }, h("div", { key: '40ab68a79d28c8ace97c06f3b1d1222e1c21cf0e', class: {
534
+ } }, h("div", { key: '87e6512e1973f4e67437959690e1333936e62cb9', class: {
531
535
  gn: true,
532
536
  'gn__search-open': this.searchBarShown,
533
- } }, h("nano-drawer", { key: '7a4b70e3364f66678843c3b66a46a11b4018d26c', ref: (el) => (this.overflowMenu = el), label: "Main menu", part: "drawer", class: "gn__drawer nano-theme-dark", placement: "start", open: this.overflowOpen, onNanoAfterHide: () => (this.overflowOpen = false), onNanoAfterShow: () => (this.overflowOpen = true) }, h("div", { key: '49a9b1c0de594cbe45f844d16be862fb84b27776', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: 'af7cabec8e9897f5e48d0a3a0c5e47f23b4cf151', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
537
+ } }, h("nano-drawer", { key: '402c74ddc996de4a0568dccd15e2f5e40a25bf7f', ref: (el) => (this.overflowMenu = el), label: "Main menu", part: "drawer", class: "gn__drawer nano-theme-dark", placement: "start", open: this.overflowOpen, onNanoAfterHide: () => (this.overflowOpen = false), onNanoAfterShow: () => (this.overflowOpen = true) }, h("div", { key: '8d4c585f5a1b14b9bb432904c9527c89a1ab269a', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: '3cdd62fbb5664b6ee24c9b4cf440c6ce7a312ebf', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
534
538
  ? bpps.mainMenu.tpl()
535
- : '', h("slot", { key: '25b6d6721170837ae7c908d7db7f3ac0507c0775', name: "overflow" }))), h("div", { key: 'c2ea4f60360ed705d8fefa86712d9fa1fdacb8c6', class: "gn__menu-bar-wrapper" }, h("div", { key: '504deb61564e7de04cf6c437a1692fd456d6bf38', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: 'd83c1e1397e054aac75a7942d0b49c9ea012e1c0', "aria-label": "Global navigation", class: `gn__main-menu ${this.shouldResize ? 'resizing' : ''}`, part: "main-menu", ref: (el) => (this.mainMenu = el) }, this.breakpoint > bpps.mainMenu.breakpoint && (h("nano-icon-button", { key: '201f58efe6e86cef00e45f43b74b805d997e4647', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '2370a4105d6462c6b19a9cd407aa6ad0616f53b4', name: "logo" }, h("a", { key: '82cfdc19c8521f251d9cec4671f8623c4dbd0b42', href: this.logoUrl, class: "gn__logo-link", part: "logo-link" }, this.breakpoint <= bpps.logo.breakpoint ? (h("img", { src: getAssetPath('../nano-assets/ont-logo.svg'), alt: `Oxford Nanopore Technologies logo. Features a stylised representation of a nanopore,
539
+ : '', h("slot", { key: '9e6b2a9d61043fb7a17d21e8904525dfaeb1c35f', name: "overflow" }))), h("div", { key: '015d506e548f826cf2a74f0fb35ffbbb8b666589', class: "gn__menu-bar-wrapper" }, h("div", { key: 'd37bdf198530424948dab02fc31c9c8d587bff71', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: 'ecc35be807c48079fead123dca093fcdeef0ea37', "aria-label": "Global navigation", class: `gn__main-menu ${this.shouldResize ? 'resizing' : ''}`, part: "main-menu", ref: (el) => (this.mainMenu = el) }, this.breakpoint > bpps.mainMenu.breakpoint && (h("nano-icon-button", { key: 'd3d673f2e0c8965d3497ac38dee5dcbe51715d2f', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: 'a3cde52880592ad39c88a13c156214cf232536e0', name: "logo" }, h("a", { key: '03f442de2365b2df4cc617e891f9fdb47c0b553c', href: this.logoUrl, class: "gn__logo-link", part: "logo-link" }, this.breakpoint <= bpps.logo.breakpoint ? (h("img", { src: getAssetPath('../nano-assets/ont-logo.svg'), alt: `Oxford Nanopore Technologies logo. Features a stylised representation of a nanopore,
536
540
  (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--large", width: "152", height: "35", part: "logo logo--large" })) : (h("img", { src: getAssetPath('../nano-assets/ont-wheel.svg'), alt: `Oxford Nanopore Technologies logo. A stylised representation of a nanopore,
537
- (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--small", width: "35", height: "35", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: '7c43301ad5c735c8dae4081d2bb91fef7db41762', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: '12285c67b6773c7bc31897cb0752fb4db549a162', class: "gn__main-menu-actions" }, !this.myAccountData ||
538
- (!!this.searchIndices.length && (h("nano-dropdown", { key: 'f7845d92127df80f548ae65573725b2c1497b703', dialogTitle: "Search Oxford Nanopore Technologies", placement: "bottom", class: "gn__search-dropdown", skidding: -30, distance: 25, open: this.searchBarShown, onNanoAfterShow: this.handleSearchOpenEvent, onNanoAfterHide: this.handleSearchCloseEvent, autoOpen: !!this.searchIndices.length }, h("nano-icon-button", { key: '6ca7605ce6e9829b6155f3e17d9262db9d452642', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), h("form", { key: 'aba9d208a95acae67b2e2d05b6cbf39ac6aed329', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '7d6894101fb8e74e90c712f8768926e4604468bb', part: "search-select", label: "Which site do you wish to search in?", mask: true, hideLabel: true, value: this.activeIndex?.index, onNanoChange: this.handleSearchIndexChangeEvent }, this.searchIndices.map((index) => (h("nano-option", { selected: index.name === this.searchIndex, value: index.index }, index.name || index.index))))), h("nano-input", { key: '8ae65dcf14ec20041c3152fe875923a1bf19ab4e', ref: (ele) => (this.searchInput = ele), part: "search-input", label: "Search Oxford Nanopore Technologies", placeholder: "Search Oxford Nanopore...", hideLabel: true, clearable: true, showInlineError: false, onNanoChange: (e) => {
541
+ (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--small", width: "35", height: "35", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: 'daddd483f4767056f6315fae07b23f3fa42516c9', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: '91ef351b76c6699960c0f356f5f01eb106182e34', class: "gn__main-menu-actions" }, !this.myAccountData ||
542
+ (!!this.searchIndices.length && (h("nano-dropdown", { key: 'd0308a67b45e4337fa574d8d010b7e28f14b3239', dialogTitle: "Search Oxford Nanopore Technologies", placement: "bottom", class: "gn__search-dropdown", skidding: -30, distance: 25, open: this.searchBarShown, onNanoAfterShow: this.handleSearchOpenEvent, onNanoAfterHide: this.handleSearchCloseEvent, autoOpen: !!this.searchIndices.length }, h("nano-icon-button", { key: 'cefaae614f193e02118476a060bfc8eb5ba71d92', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), h("form", { key: 'bda3ff083a6808046f80336b93fa6a9ee7bdf21b', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '0147d8c7add407f1993850ac72a7765c4a5b0504', part: "search-select", label: "Which site do you wish to search in?", mask: true, hideLabel: true, value: this.activeIndex?.index, onNanoChange: this.handleSearchIndexChangeEvent }, this.searchIndices.map((index) => (h("nano-option", { selected: index.name === this.searchIndex, value: index.index }, index.name || index.index))))), h("nano-input", { key: '0513a5ff74d0c0d1b5f88660f8bd1818958face2', ref: (ele) => (this.searchInput = ele), part: "search-input", label: "Search Oxford Nanopore Technologies", placeholder: "Search Oxford Nanopore...", hideLabel: true, clearable: true, showInlineError: false, onNanoChange: (e) => {
539
543
  this.handleSearchTermChangeEvent(e.detail.value);
540
- }, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon-button", { key: 'f232ad693769e872e8fe8a2e42109c2ea5286e02', slot: "end", "icon-name": "light/magnifying-glass", label: "Search", onClick: this.onSearchSubmit }), h("nano-datalist", { key: 'cca09389259f1b63a607a7a0e667f839ae9a2904', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '6a134d0b971806091e973f7c8c1b5ef79ddfab5a', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: '2bb8c2c2a7351cc1d95be9517d4c4db687c11c49' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
544
+ }, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon-button", { key: 'a309cc734af7faec9310983ad85a2a119faaae54', slot: "end", "icon-name": "light/magnifying-glass", label: "Search", onClick: this.onSearchSubmit }), h("nano-datalist", { key: 'e460a1e0b1bcfd0cf1e6a7ab9bdb8b9de3e1eca3', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '586f5f2c0b5a70ee6076da48d795b52def4a9dac', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: '45656109a08eea5467f7ae306f31581a82f785c8' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
541
545
  this.autocompleteResults.hits.map((hit, i) => (h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
542
546
  searchInsight.sendClick({
543
547
  index: this.activeIndex.index,
@@ -547,13 +551,13 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class GlobalNav extends HTMLE
547
551
  positions: [i + 1],
548
552
  });
549
553
  } }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
550
- h("nano-option", { key: '0f453d14dada8aff48749a7fb99ceee46ad4d3ef', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
551
- ])))))), h("div", { key: '44b96146b2cd8d71c832e5f400a3de65cd1a8f04', class: "gn__cart" }, this.cartUrl && [
552
- h("nano-icon-button", { key: '1745e9090c7850789417d70b82ce25b2661b556c', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }),
553
- !!this.cartCount && (h("nano-badge", { key: '997946ee187bba74e880ab485f1a8e43cc74f707', theme: "danger" }, this.cartCount > 9 ? '9+' : this.cartCount)),
554
+ h("nano-option", { key: '1ff8c43585ef9863aacbe489b836889016e14fb3', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
555
+ ])))))), h("div", { key: 'd997f29cc0d38caa6f268ad692194f68d43fa1d8', class: "gn__cart" }, this.cartUrl && [
556
+ h("nano-icon-button", { key: '992788e9a06e19d3a75d4b8d2439f1900bfcde3e', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }),
557
+ !!this.cartCount && (h("nano-badge", { key: 'b7e6532aee69cb21901faaead2cd0e88c18f6e75', theme: "danger" }, this.cartCount > 9 ? '9+' : this.cartCount)),
554
558
  ]), this.breakpoint <= bpps.contact.breakpoint
555
559
  ? bpps.contact.tpl()
556
- : '', this.isLoggedIn ? (h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, h("nano-icon", { name: "light/user" }), h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (h("nano-badge", { theme: "danger" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, typeof this.loginUrl === 'string' ? (h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login")) : (h("button", { onClick: this.loginUrl }, "Login")))))))), h("nano-global-search-results", { key: '41a5c6ee1257b595b391d711841dbab6d6c5ecc0', part: "site-search-results" }, h("div", { key: '94418390bfa82f913fa521e5612effe53b319ab4', class: "gn__site", part: "site-wrapper" }, h("slot", { key: 'd0c7c41fb54d7d57d44a0ae9a79216a4f1780675' }))))));
560
+ : '', this.isLoggedIn ? (h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, h("nano-icon", { name: "light/user" }), h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (h("nano-badge", { theme: "danger" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, typeof this.loginUrl === 'string' ? (h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login")) : (h("button", { onClick: this.loginUrl }, "Login")))))))), h("nano-global-search-results", { key: 'fbdd99411cd64c03f00f64120367bc503b4560ec', part: "site-search-results" }, h("div", { key: '6ba33f25b6af1e5b58426d05b51ef9aaa221daf8', class: "gn__site", part: "site-wrapper" }, h("slot", { key: 'fbf0bf5f7eb0c4b154537e66ce3f4b0acea4a10e' }))))));
557
561
  }
558
562
  static get assetsDirs() { return ["assets"]; }
559
563
  static get watchers() { return {
package/dist/components/style.js CHANGED
@@ -2,6 +2,27 @@
2
2
  * Custom elements for Nanopore-Digital Web applications
3
3
  */
4
4
  let cachedCSStylesheet;
5
+ // de-dupes the async fetch fallback so we only build the stylesheet once even
6
+ // if several components request it before the fetch resolves
7
+ let pendingCSStylesheet = null;
8
+ // arbitrary pieces of text that appear early in the `nano-components` stylesheet
9
+ // this is a bit fragile but does the job
10
+ const NANO_STYLESHEET_MARKERS = ['.nano-toast-stack', '.nano-theme'];
11
+ function cssTextContainsNanoMarker(cssText) {
12
+ return NANO_STYLESHEET_MARKERS.some((marker) => cssText.indexOf(marker) > -1);
13
+ }
14
+ // only cross-origin sheets whose href looks like the nano stylesheet are worth
15
+ // fetching as a fallback - this avoids pulling unrelated third-party sheets over
16
+ // the network (and into shadow roots). The `@nanoporetech-digital/style` package
17
+ // serves bundles such as `core.css` / `nano.css`.
18
+ const NANO_STYLESHEET_HREF_PATTERNS = [
19
+ '@nanoporetech-digital/style',
20
+ '/core.css',
21
+ '/nano.css',
22
+ ];
23
+ function isLikelyNanoStylesheetHref(href) {
24
+ return NANO_STYLESHEET_HREF_PATTERNS.some((pattern) => href.indexOf(pattern) > -1);
25
+ }
5
26
  /**
6
27
  * Adds the global nano-components stylesheets as a constructable stylesheet to a shadow root.
7
28
  * This is useful when shadow DOM enabled components:
@@ -22,6 +43,9 @@ function addGlobalStylesheetToShadow(shadowRoot) {
22
43
  let stylesheet = null;
23
44
  let rule = null;
24
45
  const globalStylesheet = [];
46
+ // stylesheets we couldn't read directly (typically CORS-restricted, e.g.
47
+ // served from a CDN without a `crossorigin` attribute on the `<link>`)
48
+ const inaccessibleHrefs = [];
25
49
  for (stylesheet of globalStylesheets) {
26
50
  if (!(stylesheet instanceof CSSStyleSheet)) {
27
51
  continue;
@@ -34,20 +58,18 @@ function addGlobalStylesheetToShadow(shadowRoot) {
34
58
  if (!cssRules)
35
59
  continue;
36
60
  }
37
- catch (e) {
38
- // some stylesheets may not be accessible due to CORS or other restrictions
39
- console.warn('Unable to access stylesheet:', stylesheet, e);
61
+ catch {
62
+ // some stylesheets may not be accessible due to CORS or other restrictions.
63
+ // if the href looks like the nano stylesheet, remember it so we can try to
64
+ // fetch it as a fallback below - ignore unrelated third-party sheets.
65
+ if (stylesheet.href && isLikelyNanoStylesheetHref(stylesheet.href)) {
66
+ inaccessibleHrefs.push(stylesheet.href);
67
+ }
40
68
  continue;
41
69
  }
42
70
  for (rule of cssRules) {
43
- // arbitrary piece of text to check for that appears early in the `nano-components` stylesheet
44
- // this is a bit fragile but does the job
45
- if (rule instanceof CSSLayerBlockRule &&
46
- rule.cssText.indexOf('.nano-toast-stack') > -1) {
47
- globalStylesheet.push(stylesheet);
48
- }
49
71
  if (rule instanceof CSSLayerBlockRule &&
50
- rule.cssText.indexOf('.nano-theme') > -1) {
72
+ cssTextContainsNanoMarker(rule.cssText)) {
51
73
  globalStylesheet.push(stylesheet);
52
74
  }
53
75
  }
@@ -64,7 +86,56 @@ function addGlobalStylesheetToShadow(shadowRoot) {
64
86
  shadowRoot.adoptedStyleSheets.push(sheet);
65
87
  return;
66
88
  }
89
+ // We couldn't find the global stylesheet via the CSSOM. If there are
90
+ // CORS-restricted stylesheets (e.g. served from a CDN), fall back to
91
+ // fetching their raw text and constructing the stylesheet asynchronously.
92
+ if (inaccessibleHrefs.length) {
93
+ void adoptGlobalStylesheetFromHrefs(inaccessibleHrefs, shadowRoot);
94
+ return;
95
+ }
96
+ console.warn('No global stylesheet found');
97
+ }
98
+ /**
99
+ * Fallback for cross-origin (e.g. CDN-served) stylesheets whose rules cannot be
100
+ * read via the CSSOM. Fetches the raw CSS text and, once the nano stylesheet is
101
+ * found and constructed, adopts it into the given shadow root.
102
+ */
103
+ async function adoptGlobalStylesheetFromHrefs(hrefs, shadowRoot) {
104
+ if (!pendingCSStylesheet) {
105
+ pendingCSStylesheet = buildGlobalStylesheetFromHrefs(hrefs);
106
+ }
107
+ const sheet = await pendingCSStylesheet;
108
+ if (sheet && shadowRoot) {
109
+ shadowRoot.adoptedStyleSheets.push(sheet);
110
+ }
111
+ }
112
+ async function buildGlobalStylesheetFromHrefs(hrefs) {
113
+ // fetch all candidate stylesheets in parallel rather than one-by-one, so we
114
+ // don't serialise the network latency across multiple cross-origin sheets
115
+ const cssTexts = await Promise.all(hrefs.map(async (href) => {
116
+ try {
117
+ const response = await fetch(href);
118
+ if (!response.ok)
119
+ return null;
120
+ return await response.text();
121
+ }
122
+ catch (e) {
123
+ console.warn('Unable to fetch stylesheet:', href, e);
124
+ return null;
125
+ }
126
+ }));
127
+ // keep the original document order and combine every matching stylesheet -
128
+ // the nano styles are split across multiple files (e.g. core.css, light.css,
129
+ // dark.css), so we must adopt all of them, not just the first match
130
+ const matchingCss = cssTexts.filter((text) => !!text && cssTextContainsNanoMarker(text));
131
+ if (matchingCss.length) {
132
+ const sheet = new CSSStyleSheet();
133
+ await sheet.replace(matchingCss.join('\n'));
134
+ cachedCSStylesheet = sheet;
135
+ return sheet;
136
+ }
67
137
  console.warn('No global stylesheet found');
138
+ return null;
68
139
  }
69
140
 
70
141
  export { addGlobalStylesheetToShadow as a };
package/dist/esm/nano-avatar_5.entry.js CHANGED
@@ -12,7 +12,7 @@ import { g as getActiveElement } from './active-element-CKJIkX0R.js';
12
12
  import { d as drag } from './drag-BLOEuv-q.js';
13
13
  import { g as getTabbableElements } from './tabbable-Dwh0pD2q.js';
14
14
  import { s as searchInsight } from './search-insights-8OL2oeQN.js';
15
- import { a as addGlobalStylesheetToShadow } from './style-Ds52s5za.js';
15
+ import { a as addGlobalStylesheetToShadow } from './style-DZBZHpf8.js';
16
16
  import { c as closestElement } from './dom-DiLhOqyz.js';
17
17
  import { a as debounceEvent } from './throttle-C93FMm2Z.js';
18
18
  import { F as FormControlWrap, a as FormControl } from './form-control-DYfvQbOQ.js';
package/dist/esm/nano-breadcrumb.entry.js CHANGED
@@ -2,7 +2,7 @@
2
2
  * Custom elements for Nanopore-Digital Web applications
3
3
  */
4
4
  import { r as registerInstance, a as getElement, h } from './index-RXFO3HxS.js';
5
- import { a as addGlobalStylesheetToShadow } from './style-Ds52s5za.js';
5
+ import { a as addGlobalStylesheetToShadow } from './style-DZBZHpf8.js';
6
6
 
7
7
  const breadcrumbCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--text-color:var(--nano-color-text-link);--text-color-hover:var(--nano-color-text-hover);--text-color-secondary:var(--nano-color-text-default);--text-color-disabled:var(--nano-color-text-disabled);--border-color:var(--nano-color-border-default);--trigger-bg-color:var(--nano-color-background-default);display:block}.breadcrumbs{inline-size:fit-content}nano-menu.breadcrumbs{inline-size:100%}.breadcrumbs-hidden{position:absolute;visibility:hidden;pointer-events:none;block-size:0;overflow:hidden}ol{list-style:none;padding:var(--nano-spacing-l3) 0;margin:0;display:flex;flex-direction:row}li{display:flex;align-items:center;justify-content:flex-start;font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);text-wrap:nowrap;margin-block-end:0}li:not(.return-only li)::after,nano-nav-item::after{content:\"/\";margin:0 var(--nano-spacing-xs);color:var(--border-color)}a.link{color:var(--text-color)}a:not(.link){color:var(--text-color-secondary)}a:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset);z-index:1}a.link:hover{color:var(--text-color-hover)}a.return.link{display:flex;align-items:center;gap:calc(var(--nano-spacing-sm) / 2)}.breadcrumbs__dropdown{inline-size:100%}.breadcrumbs__dropdown[open]::part(trigger){box-shadow:var(--nano-shadow-l1)}.trigger-button{inline-size:100%;display:flex;justify-content:space-between;align-items:center;padding:var(--nano-spacing-l3) var(--nano-spacing-l2);color:var(--text-color);background-color:var(--trigger-bg-color);cursor:pointer;text-align:start;border:none;font-size:var(--nano-font-size-xs)}.trigger-button .trigger-button_label{text-decoration:underline}.trigger-button .trigger-button_label::after{content:\"/\";margin:0 var(--nano-spacing-xs);color:var(--border-color)}.trigger-button:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.trigger-icon{transform:rotate(0deg);transition:var(--nano-transition-x-fast) ease transform}.trigger-icon--open{transform:rotate(180deg)}nano-nav-item::after{display:none !important}.trigger-button_label::after{display:inline-block !important}.return-only{padding:var(--nano-spacing-l3) var(--nano-spacing-l2) !important}";
8
8
 
package/dist/esm/nano-collapsible-comparison.entry.js CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
  import { r as registerInstance, c as createEvent, a as getElement, d as Host } from './index-RXFO3HxS.js';
5
5
  import { h } from './renderer-B_wACs4w.js';
6
- import { a as addGlobalStylesheetToShadow } from './style-Ds52s5za.js';
6
+ import { a as addGlobalStylesheetToShadow } from './style-DZBZHpf8.js';
7
7
 
8
8
  const collapsibleComparisonCss = ":host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }:host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }:host {\n /**\n * @prop --color-bg - Background color of the component. Defaults to var(--nano-color-background-default).\n * @prop --color-border - Border color of the component. Defaults to var(--nano-color-surface-sunken).\n * @prop --outer-spacing - Horizontal padding of the component. Defaults to var(--nano-spacing-l1-default).\n */\n}\n:host .collapsible-comparison {\n background-color: var(--color-bg);\n color: var(--nano-color-text-default);\n padding: var(--outer-spacing) 0;\n container-type: inline-size;\n}\n:host .header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-block-end: var(--nano-spacing-xl);\n}\n:host .headings {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--nano-spacing-xl);\n}\n:host nano-icon-button {\n display: none;\n}\n@container (max-width: 400px) {\n :host nano-cta {\n display: none;\n }\n :host nano-icon-button {\n --color: var(--nano-color-icon-primary);\n display: block;\n margin-inline-start: auto;\n font-size: var(--nano-font-size-xl);\n transition: 0.3s ease transform;\n }\n :host nano-icon-button.open {\n transform: rotate(180deg);\n }\n}";
9
9
 
package/dist/esm/nano-datalist_3.entry.js CHANGED
@@ -101,7 +101,9 @@ const DataList = class {
101
101
  const { height, top } = this.nanoDropdown.tetherTo.getBoundingClientRect();
102
102
  this.nanoDropdown.style.setProperty('--max-height', `max(${window.innerHeight - (height + top + 40)}px, 48vw)`);
103
103
  }
104
- this.nanoDropdown.open = this.open;
104
+ if (this.nanoDropdown) {
105
+ this.nanoDropdown.open = this.open;
106
+ }
105
107
  if (this.connectedInput) {
106
108
  this.connectedInput.setAttribute('aria-expanded', this.open.toString());
107
109
  }
@@ -525,18 +527,18 @@ const DataList = class {
525
527
  }
526
528
  }
527
529
  render() {
528
- return (h(Host, { key: '8acb3be76246d665171db96444cff3a5141e1132', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
530
+ return (h(Host, { key: '2e64e78b3582d1c7198f55425f87c115a597beb1', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
529
531
  ? 'Select options from the list below'
530
- : undefined }, h("nano-dropdown", { key: '56c051873a20a3dab17a36eec1a2f040f83247fa', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
532
+ : undefined }, h("nano-dropdown", { key: '3596eb7b1364fb13a8ca137ce846223508ca0775', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
531
533
  dlist__dropdown: true,
532
534
  'dlist--isfiltered': this.isFiltered,
533
- }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '7559b648617c8d32f61c670e4dc78c0d60d36dc4', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
535
+ }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '473e5fff336a3b8d2c0d52fbb85b7bce88cdaff2', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
534
536
  dlist__menu: true,
535
537
  'dlist__menu--open': this.dropwdownOpen,
536
- }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '02bd8ba511db314637e8991d29234a22967cf27d', name: "list-top" }), h("slot", { key: 'cb0234e0dd103293c1f1292af62575dd766af730' }), h("slot", { key: '0adac42b20ee0338de74217e6e91c00be6b5b6a7', name: "internal-opts" }), h("slot", { key: '906255e4e6fdc87fa8bf6e278ad076f179553925', name: "list-bottom" })), h("nano-menu", { key: '9aa978054227c9bb928c06ce93303ceda48cbf29', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
538
+ }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '572df9989a0ea9b70918a79f73084080d0adf975', name: "list-top" }), h("slot", { key: '0cdebdc62aa2aee8ca169aa71ee770310773edc7' }), h("slot", { key: 'f694eae7a6312f8220d7eddb5367830836130c5c', name: "internal-opts" }), h("slot", { key: 'f6f4b2a0c7401799db21f85b14e76a81b43ff751', name: "list-bottom" })), h("nano-menu", { key: 'a7c487506e3a69eb65d60382a1c903196715f2a7', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
537
539
  dlist__menu: true,
538
540
  'dlist__menu--open': this.dropwdownOpen,
539
- } }, h("slot", { key: '4e2ce9dcb39d0c823ed27f13dc8c9a8873f0ca9f', name: "no-result" })), !!this.actvOptEles && (h("div", { key: 'c6bf0c88d7b1fcd24b2882c7db851ffca2e77ba3', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
541
+ } }, h("slot", { key: 'bfadcf697f2c9a76acd7ea557c87022d341d9c48', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '57d347cd46afb73739d100feb35ecad36b48640f', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
540
542
  }
541
543
  static get watchers() { return {
542
544
  "open": ["openWatcher"],
package/dist/esm/nano-footer.entry.js CHANGED
@@ -2,7 +2,7 @@
2
2
  * Custom elements for Nanopore-Digital Web applications
3
3
  */
4
4
  import { r as registerInstance, a as getElement, h, l as getAssetPath } from './index-RXFO3HxS.js';
5
- import { a as addGlobalStylesheetToShadow } from './style-Ds52s5za.js';
5
+ import { a as addGlobalStylesheetToShadow } from './style-DZBZHpf8.js';
6
6
 
7
7
  const footerCss = ":host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }:host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }:host {\n --col-gap: var(--nano-spacing-l1-default);\n --icon-gap-md: var(--nano-spacing-md);\n --icon-gap-sm: var(--nano-spacing-sm);\n --vertical-padding: var(--nano-spacing-l1-default);\n --horizontal-padding: 0;\n --header-margin: 0 0 var(--nano-spacing-l1-default) 0;\n display: block;\n}\n:host .footer {\n container-type: inline-size;\n container-name: footer-container;\n display: flex;\n flex-direction: column;\n}\n@container footer-container (max-width: 768px) {\n :host .top,\n :host .middle,\n :host .bottom {\n --horizontal-padding: var(--nano-spacing-md);\n --col-gap: var(--nano-spacing-l);\n --vertical-padding: var(--nano-spacing-md);\n }\n :host .top-start,\n :host .top-center,\n :host .top-end {\n --header-margin: 0 0 var(--nano-spacing-md) 0;\n }\n}\n@container footer-container (max-width: 1023px) {\n :host .top,\n :host .middle,\n :host .bottom {\n --horizontal-padding: var(--nano-spacing-l);\n }\n}\n@container footer-container (max-width: 1346px) {\n :host .top,\n :host .middle,\n :host .bottom {\n --horizontal-padding: var(--nano-spacing-l1-default);\n }\n}\n:host .upper {\n border-block-start: 1px solid var(--nano-color-border-default);\n}\n:host .lower {\n background-color: var(--nano-color-surface-special);\n color: var(--nano-color-basic-white);\n}\n:host .top,\n:host .middle,\n:host .bottom {\n display: grid;\n gap: var(--col-gap);\n margin: 0 auto;\n max-inline-size: 1266px;\n}\n:host .top,\n:host .middle {\n grid-template-columns: repeat(3, 1fr);\n padding: var(--vertical-padding) var(--horizontal-padding);\n}\n:host .bottom {\n grid-template-columns: repeat(2, 1fr);\n padding-inline: var(--horizontal-padding);\n padding-block-end: var(--vertical-padding);\n}\n:host .middle-centre a {\n color: inherit;\n}\n:host .middle-centre a:hover {\n color: var(--nano-color-text-link-hover);\n}\n:host .middle-centre a:focus-visible {\n outline: var(--nano-focus-ring);\n outline-offset: var(--nano-focus-ring-offset);\n}\n:host .top-start,\n:host .top-center,\n:host .top-end {\n flex-direction: column;\n}\n:host .middle-start,\n:host .middle-centre,\n:host .middle-end {\n align-items: center;\n}\n:host .middle-start {\n display: flex;\n justify-content: flex-start;\n}\n:host .middle-centre {\n display: flex;\n justify-content: center;\n gap: var(--icon-gap-md);\n flex-wrap: nowrap;\n}\n:host .middle-end {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 20rem));\n gap: var(--icon-gap-sm);\n justify-content: end;\n}\n:host [slot=middle-end] {\n inline-size: 100%;\n}\n:host .bottom-start p,\n:host .bottom-start ::slotted(p), .bottom-start :host::slotted(p) {\n font-weight: var(--nano-font-weight-normal) !important;\n font-size: var(--nano-font-size-xs) !important;\n line-height: var(--nano-line-height-normal) !important;\n letter-spacing: var(--nano-letter-spacing-loose) !important;\n margin-block: 0 !important;\n}\n:host .bottom-end {\n display: flex;\n justify-content: flex-end;\n}\n:host .bottom-end ::slotted(*), .bottom-end :host::slotted(*) {\n --input-font-size: var(--nano-font-size-2xs) !important;\n max-inline-size: 9rem !important;\n}\n@container footer-container (max-width: 1200px) {\n :host .top {\n grid-template-columns: repeat(2, 1fr);\n grid-template-rows: repeat(2, auto);\n }\n :host .top-end {\n grid-row: 2;\n grid-column: 1/-1;\n }\n}\n@container footer-container (max-width: 912px) {\n :host .middle,\n :host .bottom {\n grid-template-columns: 1fr;\n grid-template-rows: 1fr;\n }\n :host .top {\n display: flex;\n flex-direction: column;\n }\n :host .middle-centre {\n flex-wrap: wrap;\n }\n :host .middle-end {\n grid-template-columns: minmax(0, 6.6rem);\n }\n :host .bottom {\n display: flex;\n flex-direction: column-reverse;\n align-items: center;\n }\n :host .middle-start,\n :host .middle-centre,\n :host .middle-end {\n justify-content: center;\n }\n}";
8
8
 
package/dist/esm/nano-global-nav.entry.js CHANGED
@@ -5,7 +5,7 @@ import { a as getElement, r as registerInstance, c as createEvent, d as Host, l
5
5
  import { a as algoliasearch } from './algoliasearch-lite.esm.browser-BTIloVU8.js';
6
6
  import { h } from './renderer-B_wACs4w.js';
7
7
  import { d as debounce } from './throttle-C93FMm2Z.js';
8
- import { a as addGlobalStylesheetToShadow } from './style-Ds52s5za.js';
8
+ import { a as addGlobalStylesheetToShadow } from './style-DZBZHpf8.js';
9
9
  import { s as searchInsight } from './search-insights-8OL2oeQN.js';
10
10
 
11
11
  const globalNavCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--main-menu-bar-bg-color:var(--nano-color-background-default);--main-menu-text-color:var(--nano-color-text-default);--main-menu-hover-text-color:var(--nano-color-text-hover);--main-menu-active-text-color:var(--nano-color-text-primary);--main-menu-active-border-color:var(--nano-color-border-accent);--overflow-bg-color:var(--nano-color-grey-mono-1600);--overflow-text-color:var(--nano-color-basic-white);--overflow-hover-text-color:var(--nano-color-text-hover);--overflow-active-text-color:var(--nano-color-text-primary);display:block;color:var(--main-menu-text-color)}img{max-inline-size:none;display:block;block-size:revert-layer}::slotted(a),:host::slotted(a),a{text-decoration:none}a:has(img){display:inline-block}a:focus{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}nano-drawer:not(:defined){display:none}nano-badge{position:absolute;font-size:0.5625rem;pointer-events:none}.gn__cart{position:relative}.gn__cart nano-badge{inset-block-start:-0.35rem;inset-inline-end:-0.4rem}.gn__login-cta{--bg:transparent;--font-size:var(--nano-font-size-2xs);--padding-v:0.5em}.gn__menu-bar-wrapper{z-index:calc(var(--nano-z-index-menubar) + 1);position:relative}.gn__menu-bar-wrapper::after{content:\"\";position:absolute;block-size:1px;inline-size:100%;inset-inline:0;inset-block-end:-1px;z-index:-3;background-color:var(--nano-color-border-default)}.gn__menu-bar{inline-size:100%;overflow:clip;background-color:var(--main-menu-bar-bg-color)}.gn__menu-bar a{color:var(--main-menu-text-color)}.gn__menu-bar a:hover{color:var(--main-menu-hover-text-color)}.gn__menu-bar a:active{color:var(--main-menu-active-text-color)}.gn__main-menu{display:inline-flex;align-items:center;min-inline-size:100%;padding:var(--nano-spacing-md);transition:opacity var(--nano-transition-x-fast) ease;opacity:1}.gn__main-menu.resizing{transition:none;opacity:0}.gn__main-menu>*{margin-inline-end:var(--nano-spacing-xl)}.gn__main-menu>*:is(slot,slot-fb){display:flex}.gn__main-menu>*:last-child{margin-inline-end:0}.gn__logo--small{min-inline-size:35px}.gn__logo--large{min-inline-size:152px}.gn__overflow-button{--padding:0.5rem 0.875rem 0.5rem 0;margin-inline-end:0.875rem;font-size:1.125rem;position:relative}.gn__overflow-button::after{content:\"\";position:absolute;inline-size:1px;block-size:100%;inset-inline-end:0;background-color:var(--nano-color-fill-neutral-weak);opacity:0.7;inset-block-start:0}.gn__main-menu-links,.gn__main-menu-actions{display:inline-flex;align-items:center}.gn__main-menu-links .nano-icon,.gn__main-menu-links .nano-icon-button,.gn__main-menu-actions .nano-icon,.gn__main-menu-actions .nano-icon-button{--active-color:var(--main-menu-active-text-color);--hover-color:var(--main-menu-hover-text-color);font-size:1rem}.gn__main-menu-links .nano-icon-button:hover,.gn__main-menu-actions .nano-icon-button:hover{color:var(--main-menu-hover-text-color)}.gn__main-menu-links{gap:var(--nano-spacing-xl)}.gn__main-menu-links ::slotted(a),.gn__main-menu-links::slotted(a){color:var(--main-menu-text-color)}.gn__main-menu-links ::slotted(a:hover){color:var(--main-menu-hover-text-color)}.gn__main-menu-links ::slotted(*:active){color:var(--main-menu-active-text-color)}.gn__main-menu-actions{margin-inline-start:auto;font-size:0.9375rem;gap:var(--nano-spacing-md)}.gn__search-dropdown{--overflow:visible;--padding:0;--background:transparent}.gn__search-dropdown .gn__search-button{position:relative}.gn__search-dropdown .gn__search-button::before{content:\"\";position:absolute;background-color:var(--main-menu-active-border-color);block-size:4px;inset-inline:5px 2px;inset-block-end:-1.5625rem;transform:translateZ(0) scaleX(0);transform-origin:0 center;transition:transform var(--nano-transition-x-fast) ease-in-out}.gn__search-open .gn__search-dropdown .gn__search-button::before{transform:translateZ(0) scaleX(1)}.gn__search-form{display:inline-flex;max-inline-size:100vw;inline-size:30.625rem}.gn__search-form .nano-select{--input-bg-color:var(--nano-color-surface-subtle);flex:0}.gn__search-form .nano-select:focus-within{z-index:1}.gn__search-form .nano-select .form-ctrl__input{border-inline-end:none}.gn__search-form .nano-input{flex:1}.gn__search-results{--padding-start:var(--nano-spacing-md);--padding-top:var(--nano-spacing-sm);--padding-bottom:var(--nano-spacing-sm);font-size:var(--nano-font-size-2xs)}.gn__search-loading{display:flex;justify-content:center}.gn__search-result{--padding-start:0.3125rem;--padding-top:var(--nano-spacing-sm);--padding-bottom:var(--nano-spacing-sm);--bg-focus:var(--nano-color-fill-secondary-pressed);--color-focus:var(--nano-color-text-default);--color:var(--nano-color-text-default);font-size:var(--nano-font-size-2xs)}.gn__search-result .search__highlight{font-style:normal;background:var(--nano-color-highlight)}.gn__search-viewall{--bg-focus:var(--nano-color-fill-secondary-pressed);--color-focus:var(--nano-color-text-default);--color:var(--nano-color-fill-primary-pressed)}.gn__search-viewall::part(label){justify-content:flex-end;text-decoration:underline}.gn__user-dropdown-trigger{all:unset;cursor:pointer;color:var(--nano-color-icon-primary);display:flex;white-space:nowrap;gap:var(--nano-spacing-xs);align-items:center;position:relative;padding-inline-start:var(--nano-spacing-md)}.gn__user-dropdown-trigger:hover{color:var(--nano-color-icon-primary-hover)}.gn__user-dropdown-trigger:active{color:var(--nano-color-icon-primary)}.gn__user-dropdown-trigger:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.gn__user-dropdown-trigger::before{content:\"\";position:absolute;inline-size:1px;block-size:100%;inset-inline-start:0;background-color:var(--nano-color-fill-subtle);opacity:0.7;inset-block-start:0}.gn__user-dropdown-trigger .gn__user-dropdown-chevron{transition:rotate var(--nano-transition-x-fast) linear}[open] .gn__user-dropdown-trigger .gn__user-dropdown-chevron{rotate:180deg}.gn__user-dropdown-trigger nano-badge{inset-block-start:-0.7rem;inset-inline-end:-0.7rem}.gn__user-dropdown{--background:var(--overflow-bg-color);--padding:0;--overflow:visible}.gn__user-panel{inline-size:21.25rem;max-inline-size:21.25rem;color:var(--overflow-text-color);padding:var(--nano-spacing-md);background-color:var(--nano-color-surface-subtle)}.gn__user-panel a{color:var(--overflow-text-color)}.gn__user-panel a:hover{text-decoration:underline;color:var(--overflow-hover-text-color)}.gn__user-panel-head{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);padding-block-end:var(--nano-spacing-md);display:flex;align-items:center;gap:var(--nano-spacing-sm);font-size:var(--nano-font-size-xs)}.gn__user-panel-head .gn__user-avatar nano-icon{font-size:2.5rem}.gn__user-panel-body{display:flex;flex-direction:column}.gn__user-panel-body a{position:relative;border-block-end:1px solid rgb(var(--nano-color-base-rgb-1000)/10%);padding-block:var(--nano-spacing-md)}.gn__user-panel-body a:first-child{border-block-start:1px solid rgb(var(--nano-color-base-rgb-1000)/10%)}.gn__user-panel-foot{padding-block-start:var(--nano-spacing-md);display:flex;align-items:center;justify-content:space-between;gap:var(--nano-spacing-md)}.gn__drawer{--panel-background:var(--overflow-bg-color);--header-button-color:var(--overflow-text-color);--body-spacing:0;--header-spacing:var(--nano-spacing-md) 0;--footer-spacing:var(--nano-spacing-md)}.gn__drawer::part(title){display:flex;justify-content:flex-end}.gn__drawer::part(header-actions){order:-1}.gn__drawer-header{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.gn__drawer-menu{display:flex;flex-direction:column;margin:0 var(--nano-spacing-md);padding-block-end:var(--nano-spacing-md);color:var(--overflow-text-color);border-block-start:1px solid rgb(var(--nano-color-base-rgb-1000)/10%);position:relative}.gn__drawer-menu ::slotted(a),.gn__drawer-menu::slotted(a){padding:var(--nano-spacing-md) 0}.gn__drawer-menu ::slotted(a),.gn__drawer-menu ::slotted(.nano-nav-item),.gn__drawer-menu::slotted(a),.gn__drawer-menu::slotted(.nano-nav-item){--padding:var(--nano-spacing-md) 0;display:block;color:inherit !important;border-block-end:1px solid rgb(var(--nano-color-base-rgb-1000)/10%)}.gn__drawer-menu ::slotted(a:hover),.gn__drawer-menu ::slotted(.nano-nav-item:hover){text-decoration:underline;color:var(--overflow-hover-text-color) !important}";
@@ -81,6 +81,13 @@ const GlobalNav = class {
81
81
  return this.myAccountData?.user?.uuid ? this.myAccountData.user : null;
82
82
  }
83
83
  processUserData() {
84
+ // Login & cart are available whether or not the user is logged in,
85
+ // so set them before the logged-out early return.
86
+ if (this.myAccountData) {
87
+ this.loginUrl = this.loginUrl || this.myAccountData.urls?.login;
88
+ this.cartUrl = this.cartUrl || this.myAccountData.urls?.cart;
89
+ this.cartCount = this.cartCount || this.myAccountData.cart?.count;
90
+ }
84
91
  if (!this.myAccountUser) {
85
92
  this.isLoggedIn = false;
86
93
  this.userLinks = [];
@@ -91,12 +98,9 @@ const GlobalNav = class {
91
98
  }
92
99
  this.userLinks =
93
100
  this.myAccountData?.links?.filter((link) => link.area === 'profile-panel-list') || [];
94
- this.loginUrl = this.loginUrl || this.myAccountData.urls?.login;
95
101
  this.logoutUrl = this.logoutUrl || this.myAccountData.urls?.logout;
96
102
  this.msgUrl = this.msgUrl || this.myAccountData.urls?.messages;
97
103
  this.msgCount = this.msgCount || this.myAccountData.notifications?.count;
98
- this.cartUrl = this.cartUrl || this.myAccountData.urls?.cart;
99
- this.cartCount = this.cartCount || this.myAccountData.cart?.count;
100
104
  this.isLoggedIn = true;
101
105
  this.nanoUserData.emit(this.myAccountUser);
102
106
  }
@@ -503,21 +507,21 @@ const GlobalNav = class {
503
507
  }
504
508
  render() {
505
509
  const bpps = this.bpPartials;
506
- return (h(Host, { key: '53c751962d1ed36bae13be0a3c74b340b4a553bd', class: {
510
+ return (h(Host, { key: '79ca6089ded878867c3febc0add938f4bc93eabd', class: {
507
511
  'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
508
512
  'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
509
513
  'nano-global-nav': true,
510
- } }, h("div", { key: '40ab68a79d28c8ace97c06f3b1d1222e1c21cf0e', class: {
514
+ } }, h("div", { key: '87e6512e1973f4e67437959690e1333936e62cb9', class: {
511
515
  gn: true,
512
516
  'gn__search-open': this.searchBarShown,
513
- } }, h("nano-drawer", { key: '7a4b70e3364f66678843c3b66a46a11b4018d26c', ref: (el) => (this.overflowMenu = el), label: "Main menu", part: "drawer", class: "gn__drawer nano-theme-dark", placement: "start", open: this.overflowOpen, onNanoAfterHide: () => (this.overflowOpen = false), onNanoAfterShow: () => (this.overflowOpen = true) }, h("div", { key: '49a9b1c0de594cbe45f844d16be862fb84b27776', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: 'af7cabec8e9897f5e48d0a3a0c5e47f23b4cf151', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
517
+ } }, h("nano-drawer", { key: '402c74ddc996de4a0568dccd15e2f5e40a25bf7f', ref: (el) => (this.overflowMenu = el), label: "Main menu", part: "drawer", class: "gn__drawer nano-theme-dark", placement: "start", open: this.overflowOpen, onNanoAfterHide: () => (this.overflowOpen = false), onNanoAfterShow: () => (this.overflowOpen = true) }, h("div", { key: '8d4c585f5a1b14b9bb432904c9527c89a1ab269a', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: '3cdd62fbb5664b6ee24c9b4cf440c6ce7a312ebf', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
514
518
  ? bpps.mainMenu.tpl()
515
- : '', h("slot", { key: '25b6d6721170837ae7c908d7db7f3ac0507c0775', name: "overflow" }))), h("div", { key: 'c2ea4f60360ed705d8fefa86712d9fa1fdacb8c6', class: "gn__menu-bar-wrapper" }, h("div", { key: '504deb61564e7de04cf6c437a1692fd456d6bf38', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: 'd83c1e1397e054aac75a7942d0b49c9ea012e1c0', "aria-label": "Global navigation", class: `gn__main-menu ${this.shouldResize ? 'resizing' : ''}`, part: "main-menu", ref: (el) => (this.mainMenu = el) }, this.breakpoint > bpps.mainMenu.breakpoint && (h("nano-icon-button", { key: '201f58efe6e86cef00e45f43b74b805d997e4647', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '2370a4105d6462c6b19a9cd407aa6ad0616f53b4', name: "logo" }, h("a", { key: '82cfdc19c8521f251d9cec4671f8623c4dbd0b42', href: this.logoUrl, class: "gn__logo-link", part: "logo-link" }, this.breakpoint <= bpps.logo.breakpoint ? (h("img", { src: getAssetPath('../nano-assets/ont-logo.svg'), alt: `Oxford Nanopore Technologies logo. Features a stylised representation of a nanopore,
519
+ : '', h("slot", { key: '9e6b2a9d61043fb7a17d21e8904525dfaeb1c35f', name: "overflow" }))), h("div", { key: '015d506e548f826cf2a74f0fb35ffbbb8b666589', class: "gn__menu-bar-wrapper" }, h("div", { key: 'd37bdf198530424948dab02fc31c9c8d587bff71', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: 'ecc35be807c48079fead123dca093fcdeef0ea37', "aria-label": "Global navigation", class: `gn__main-menu ${this.shouldResize ? 'resizing' : ''}`, part: "main-menu", ref: (el) => (this.mainMenu = el) }, this.breakpoint > bpps.mainMenu.breakpoint && (h("nano-icon-button", { key: 'd3d673f2e0c8965d3497ac38dee5dcbe51715d2f', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: 'a3cde52880592ad39c88a13c156214cf232536e0', name: "logo" }, h("a", { key: '03f442de2365b2df4cc617e891f9fdb47c0b553c', href: this.logoUrl, class: "gn__logo-link", part: "logo-link" }, this.breakpoint <= bpps.logo.breakpoint ? (h("img", { src: getAssetPath('../nano-assets/ont-logo.svg'), alt: `Oxford Nanopore Technologies logo. Features a stylised representation of a nanopore,
516
520
  (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--large", width: "152", height: "35", part: "logo logo--large" })) : (h("img", { src: getAssetPath('../nano-assets/ont-wheel.svg'), alt: `Oxford Nanopore Technologies logo. A stylised representation of a nanopore,
517
- (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--small", width: "35", height: "35", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: '7c43301ad5c735c8dae4081d2bb91fef7db41762', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: '12285c67b6773c7bc31897cb0752fb4db549a162', class: "gn__main-menu-actions" }, !this.myAccountData ||
518
- (!!this.searchIndices.length && (h("nano-dropdown", { key: 'f7845d92127df80f548ae65573725b2c1497b703', dialogTitle: "Search Oxford Nanopore Technologies", placement: "bottom", class: "gn__search-dropdown", skidding: -30, distance: 25, open: this.searchBarShown, onNanoAfterShow: this.handleSearchOpenEvent, onNanoAfterHide: this.handleSearchCloseEvent, autoOpen: !!this.searchIndices.length }, h("nano-icon-button", { key: '6ca7605ce6e9829b6155f3e17d9262db9d452642', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), h("form", { key: 'aba9d208a95acae67b2e2d05b6cbf39ac6aed329', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '7d6894101fb8e74e90c712f8768926e4604468bb', part: "search-select", label: "Which site do you wish to search in?", mask: true, hideLabel: true, value: this.activeIndex?.index, onNanoChange: this.handleSearchIndexChangeEvent }, this.searchIndices.map((index) => (h("nano-option", { selected: index.name === this.searchIndex, value: index.index }, index.name || index.index))))), h("nano-input", { key: '8ae65dcf14ec20041c3152fe875923a1bf19ab4e', ref: (ele) => (this.searchInput = ele), part: "search-input", label: "Search Oxford Nanopore Technologies", placeholder: "Search Oxford Nanopore...", hideLabel: true, clearable: true, showInlineError: false, onNanoChange: (e) => {
521
+ (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--small", width: "35", height: "35", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: 'daddd483f4767056f6315fae07b23f3fa42516c9', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: '91ef351b76c6699960c0f356f5f01eb106182e34', class: "gn__main-menu-actions" }, !this.myAccountData ||
522
+ (!!this.searchIndices.length && (h("nano-dropdown", { key: 'd0308a67b45e4337fa574d8d010b7e28f14b3239', dialogTitle: "Search Oxford Nanopore Technologies", placement: "bottom", class: "gn__search-dropdown", skidding: -30, distance: 25, open: this.searchBarShown, onNanoAfterShow: this.handleSearchOpenEvent, onNanoAfterHide: this.handleSearchCloseEvent, autoOpen: !!this.searchIndices.length }, h("nano-icon-button", { key: 'cefaae614f193e02118476a060bfc8eb5ba71d92', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), h("form", { key: 'bda3ff083a6808046f80336b93fa6a9ee7bdf21b', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '0147d8c7add407f1993850ac72a7765c4a5b0504', part: "search-select", label: "Which site do you wish to search in?", mask: true, hideLabel: true, value: this.activeIndex?.index, onNanoChange: this.handleSearchIndexChangeEvent }, this.searchIndices.map((index) => (h("nano-option", { selected: index.name === this.searchIndex, value: index.index }, index.name || index.index))))), h("nano-input", { key: '0513a5ff74d0c0d1b5f88660f8bd1818958face2', ref: (ele) => (this.searchInput = ele), part: "search-input", label: "Search Oxford Nanopore Technologies", placeholder: "Search Oxford Nanopore...", hideLabel: true, clearable: true, showInlineError: false, onNanoChange: (e) => {
519
523
  this.handleSearchTermChangeEvent(e.detail.value);
520
- }, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon-button", { key: 'f232ad693769e872e8fe8a2e42109c2ea5286e02', slot: "end", "icon-name": "light/magnifying-glass", label: "Search", onClick: this.onSearchSubmit }), h("nano-datalist", { key: 'cca09389259f1b63a607a7a0e667f839ae9a2904', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '6a134d0b971806091e973f7c8c1b5ef79ddfab5a', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: '2bb8c2c2a7351cc1d95be9517d4c4db687c11c49' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
524
+ }, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon-button", { key: 'a309cc734af7faec9310983ad85a2a119faaae54', slot: "end", "icon-name": "light/magnifying-glass", label: "Search", onClick: this.onSearchSubmit }), h("nano-datalist", { key: 'e460a1e0b1bcfd0cf1e6a7ab9bdb8b9de3e1eca3', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '586f5f2c0b5a70ee6076da48d795b52def4a9dac', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: '45656109a08eea5467f7ae306f31581a82f785c8' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
521
525
  this.autocompleteResults.hits.map((hit, i) => (h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
522
526
  searchInsight.sendClick({
523
527
  index: this.activeIndex.index,
@@ -527,13 +531,13 @@ const GlobalNav = class {
527
531
  positions: [i + 1],
528
532
  });
529
533
  } }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
530
- h("nano-option", { key: '0f453d14dada8aff48749a7fb99ceee46ad4d3ef', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
531
- ])))))), h("div", { key: '44b96146b2cd8d71c832e5f400a3de65cd1a8f04', class: "gn__cart" }, this.cartUrl && [
532
- h("nano-icon-button", { key: '1745e9090c7850789417d70b82ce25b2661b556c', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }),
533
- !!this.cartCount && (h("nano-badge", { key: '997946ee187bba74e880ab485f1a8e43cc74f707', theme: "danger" }, this.cartCount > 9 ? '9+' : this.cartCount)),
534
+ h("nano-option", { key: '1ff8c43585ef9863aacbe489b836889016e14fb3', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
535
+ ])))))), h("div", { key: 'd997f29cc0d38caa6f268ad692194f68d43fa1d8', class: "gn__cart" }, this.cartUrl && [
536
+ h("nano-icon-button", { key: '992788e9a06e19d3a75d4b8d2439f1900bfcde3e', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }),
537
+ !!this.cartCount && (h("nano-badge", { key: 'b7e6532aee69cb21901faaead2cd0e88c18f6e75', theme: "danger" }, this.cartCount > 9 ? '9+' : this.cartCount)),
534
538
  ]), this.breakpoint <= bpps.contact.breakpoint
535
539
  ? bpps.contact.tpl()
536
- : '', this.isLoggedIn ? (h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, h("nano-icon", { name: "light/user" }), h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (h("nano-badge", { theme: "danger" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, typeof this.loginUrl === 'string' ? (h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login")) : (h("button", { onClick: this.loginUrl }, "Login")))))))), h("nano-global-search-results", { key: '41a5c6ee1257b595b391d711841dbab6d6c5ecc0', part: "site-search-results" }, h("div", { key: '94418390bfa82f913fa521e5612effe53b319ab4', class: "gn__site", part: "site-wrapper" }, h("slot", { key: 'd0c7c41fb54d7d57d44a0ae9a79216a4f1780675' }))))));
540
+ : '', this.isLoggedIn ? (h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, h("nano-icon", { name: "light/user" }), h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (h("nano-badge", { theme: "danger" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, typeof this.loginUrl === 'string' ? (h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login")) : (h("button", { onClick: this.loginUrl }, "Login")))))))), h("nano-global-search-results", { key: 'fbdd99411cd64c03f00f64120367bc503b4560ec', part: "site-search-results" }, h("div", { key: '6ba33f25b6af1e5b58426d05b51ef9aaa221daf8', class: "gn__site", part: "site-wrapper" }, h("slot", { key: 'fbf0bf5f7eb0c4b154537e66ce3f4b0acea4a10e' }))))));
537
541
  }
538
542
  static get assetsDirs() { return ["assets"]; }
539
543
  static get watchers() { return {