@nanoporetech-digital/components 9.1.6 → 9.1.7
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.
- package/dist/cjs/nano-dropdown_2.cjs.entry.js +5 -4
- package/dist/cjs/nano-global-nav.cjs.entry.js +14 -13
- package/dist/collection/components/dropdown/dropdown.js +5 -4
- package/dist/collection/components/global-nav/global-nav.js +14 -13
- package/dist/components/dropdown.js +5 -4
- package/dist/components/nano-global-nav.js +14 -13
- package/dist/esm/nano-dropdown_2.entry.js +5 -4
- package/dist/esm/nano-global-nav.entry.js +14 -13
- package/dist/nano-components/nano-dropdown_2.entry.js +1 -1
- package/dist/nano-components/nano-global-nav.entry.js +1 -1
- package/docs-json.json +1 -1
- package/hydrate/index.js +19 -17
- package/hydrate/index.mjs +19 -17
- package/package.json +2 -2
|
@@ -31,7 +31,8 @@ const Dropdown = class {
|
|
|
31
31
|
positioner;
|
|
32
32
|
accessibleTrigger;
|
|
33
33
|
didLoad = false;
|
|
34
|
-
|
|
34
|
+
// only set when opened via keyboard; consumed (and reset) once the open transition ends
|
|
35
|
+
focusFirstEle = false;
|
|
35
36
|
get menu() {
|
|
36
37
|
return this.host.querySelector(renderer.transformTag('nano-menu'));
|
|
37
38
|
}
|
|
@@ -365,12 +366,12 @@ const Dropdown = class {
|
|
|
365
366
|
this.popover.destroy();
|
|
366
367
|
}
|
|
367
368
|
render() {
|
|
368
|
-
return (renderer.h(index.Host, { key: '
|
|
369
|
+
return (renderer.h(index.Host, { key: '00d9c9f79a99c0e2f926e4e8482cd1f06badfa73', class: "nano-dropdown" }, renderer.h("div", { key: 'b63f546d7d45cac07dded72bf666b4153df7e874', part: "base", id: this.dropdownId, class: {
|
|
369
370
|
dropdown: true,
|
|
370
371
|
'dropdown--open': this.open,
|
|
371
|
-
} }, renderer.h("span", { key: '
|
|
372
|
+
} }, renderer.h("span", { key: '7dc63a96ced0d342ee725ce6cfe84af479d75ebc', part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onKeyDown: this.handleTriggerKeyDown, onClick: this.togglePanel }, renderer.h("slot", { key: 'aee47edcef94de976c86780a91ae49e5052e8fc0', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), renderer.h("div", { key: '3bbcc7e43091542e909827c00cf84b36baef806c', ref: (el) => (this.positioner = el), class: "dropdown__positioner", popover: "manual", id: this.dropdownId + '-positioner' }, renderer.h("div", { key: 'a94cd6ea9bbaaa3a8b743035746252666253fa17', ref: (el) => (this.panel = el), part: "panel", class: `dropdown__panel ${this.placement.split('-').join(' ')}`, "aria-hidden": !this.open, role: this.host.getAttribute('role') === 'group' ? 'group' : 'dialog', "aria-modal": this.host.getAttribute('role') === 'group' ? undefined : 'true', "aria-labelledby": this.dialogTitle ? this.labelId : undefined, tabIndex: this.isOverflowing() ? 0 : undefined }, this.dialogTitle && (renderer.h("span", { key: '39622ee9886cd0094891032b4c939c6e420cd19d', id: this.labelId, class: "dropdown__accessible-title", "aria-live": this.host.getAttribute('role') === 'group'
|
|
372
373
|
? undefined
|
|
373
|
-
: 'polite' }, this.dialogTitle)), renderer.h("slot", { key: '
|
|
374
|
+
: 'polite' }, this.dialogTitle)), renderer.h("slot", { key: '39b7b9392d4649e6141dec80a95c56a9f176ac5d' }))))));
|
|
374
375
|
}
|
|
375
376
|
static get watchers() { return {
|
|
376
377
|
"open": ["handleOpenChange"],
|
|
@@ -57,7 +57,8 @@ const GlobalNav = class {
|
|
|
57
57
|
this.myAccountData = (await Promise.resolve().then(function () { return require('./local-logged-out-DYEfc64n.js'); }));
|
|
58
58
|
return;
|
|
59
59
|
}
|
|
60
|
-
|
|
60
|
+
// MyAccount is cross-origin; send its session cookies or the user always appears logged out
|
|
61
|
+
fetch(this.myAccountUrl + '/nav_bar_data.json', { credentials: 'include' })
|
|
61
62
|
.then((res) => res.json())
|
|
62
63
|
.then((data) => {
|
|
63
64
|
this.myAccountData = data;
|
|
@@ -509,21 +510,21 @@ const GlobalNav = class {
|
|
|
509
510
|
}
|
|
510
511
|
render() {
|
|
511
512
|
const bpps = this.bpPartials;
|
|
512
|
-
return (renderer.h(index.Host, { key: '
|
|
513
|
+
return (renderer.h(index.Host, { key: '08fd38cc2711a83d40053e7ca147ce3a9ef38ce3', class: {
|
|
513
514
|
'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
|
|
514
515
|
'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
|
|
515
516
|
'nano-global-nav': true,
|
|
516
|
-
} }, renderer.h("div", { key: '
|
|
517
|
+
} }, renderer.h("div", { key: '63b69c051b64880f07dc2c309064a3fd9e4490e3', class: {
|
|
517
518
|
gn: true,
|
|
518
519
|
'gn__search-open': this.searchBarShown,
|
|
519
|
-
} }, renderer.h("nano-drawer", { key: '
|
|
520
|
+
} }, renderer.h("nano-drawer", { key: 'a1db81578932ba08842ab49a3ff0a34f9d2afd73', 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) }, renderer.h("div", { key: '3ee1efdef44a84b0fbf3434392e2fcb617abbfab', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), renderer.h("nav", { key: 'bea757cb52809fc472dbd5055b00462801f2a2a9', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
|
|
520
521
|
? bpps.mainMenu.tpl()
|
|
521
|
-
: '', renderer.h("slot", { key: '
|
|
522
|
+
: '', renderer.h("slot", { key: '571b994b306beacf7342536beb6bbde5c261a677', name: "overflow" }))), renderer.h("div", { key: '1bfbaa6397db0959e781a62a824b79929ac82468', class: "gn__menu-bar-wrapper" }, renderer.h("div", { key: '4dff6a82f085798b3ebd30bb01b960b9c2065b46', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, renderer.h("nav", { key: '3e56113c9377dba138ec7b37f31f144d337fc707', "aria-label": "Global navigation", class: `gn__main-menu ${this.shouldResize ? 'resizing' : ''}`, part: "main-menu", ref: (el) => (this.mainMenu = el) }, this.breakpoint > bpps.mainMenu.breakpoint && (renderer.h("nano-icon-button", { key: '3667ae378b645ae6440126c591f6fe656a9b783e', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), renderer.h("slot", { key: '742068e692bdd49fd0999568db15df4d84d74084', name: "logo" }, renderer.h("a", { key: '4584b27ecd617f2d176074f84626b2759bcdd164', href: this.logoUrl, class: "gn__logo-link", part: "logo-link" }, this.breakpoint <= bpps.logo.breakpoint ? (renderer.h("img", { src: index.getAssetPath('../nano-assets/ont-logo.svg'), alt: `Oxford Nanopore Technologies logo. Features a stylised representation of a nanopore,
|
|
522
523
|
(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" })) : (renderer.h("img", { src: index.getAssetPath('../nano-assets/ont-wheel.svg'), alt: `Oxford Nanopore Technologies logo. A stylised representation of a nanopore,
|
|
523
|
-
(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 && (renderer.h("div", { key: '
|
|
524
|
-
(!!this.searchIndices.length && (renderer.h("nano-dropdown", { key: '
|
|
524
|
+
(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 && (renderer.h("div", { key: 'a03353f5db8f5fd8cbb02219c1f63d04e74c8ca8', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), renderer.h("div", { key: '5579bee39208817f0fffb5ae97b9cf6b192bbcd6', class: "gn__main-menu-actions" }, !this.myAccountData ||
|
|
525
|
+
(!!this.searchIndices.length && (renderer.h("nano-dropdown", { key: '838047989bda4a5991bbe8a2bd4f8530524918d5', 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 }, renderer.h("nano-icon-button", { key: '05c65d9f0d6e6570e3bef62ca535da36655ce021', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), renderer.h("form", { key: '2562ec900848f8f7b4f4f9f696a187a14a457f7d', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (renderer.h("nano-select", { key: '181f2d8f7fa89439f57af21b489beccda196cf34', 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) => (renderer.h("nano-option", { selected: index.name === this.searchIndex, value: index.index }, index.name || index.index))))), renderer.h("nano-input", { key: '2163e7a28516ba6e9f0c3d7e2e6a64b6fea3a9f0', 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) => {
|
|
525
526
|
this.handleSearchTermChangeEvent(e.detail.value);
|
|
526
|
-
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, renderer.h("nano-icon-button", { key: '
|
|
527
|
+
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, renderer.h("nano-icon-button", { key: '6d85d49f3da82a2e970a8d54b778e0c9ef6ce563', slot: "end", "icon-name": "light/magnifying-glass", label: "Search", onClick: this.onSearchSubmit }), renderer.h("nano-datalist", { key: '70928f0886130da02bb02c88f75b8d55650612f2', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (renderer.h("div", { key: '223c85ed29b119cddb61d7e6cb88a7a4e3e15e8f', slot: "no-result", class: "gn__search-loading" }, renderer.h("nano-spinner", { key: 'cf014da5a7f18f2d84251f825a1718c270a68162' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
|
|
527
528
|
this.autocompleteResults.hits.map((hit, i) => (renderer.h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
|
|
528
529
|
searchInsights.searchInsight.sendClick({
|
|
529
530
|
index: this.activeIndex.index,
|
|
@@ -533,13 +534,13 @@ const GlobalNav = class {
|
|
|
533
534
|
positions: [i + 1],
|
|
534
535
|
});
|
|
535
536
|
} }, renderer.h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
|
|
536
|
-
renderer.h("nano-option", { key: '
|
|
537
|
-
])))))), renderer.h("div", { key: '
|
|
538
|
-
renderer.h("nano-icon-button", { key: '
|
|
539
|
-
!!this.cartCount && (renderer.h("nano-badge", { key: '
|
|
537
|
+
renderer.h("nano-option", { key: 'ca2e52576b2faa6f35c2377591212c7a37c2355e', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
|
|
538
|
+
])))))), renderer.h("div", { key: '558eea256b3807c8066cfad3d303dfdd23cc7af2', class: "gn__cart" }, this.cartUrl && [
|
|
539
|
+
renderer.h("nano-icon-button", { key: '64fa87c0f21a947bed221ac4cf4f1996cd39f00c', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }),
|
|
540
|
+
!!this.cartCount && (renderer.h("nano-badge", { key: '26f65729803a1f345c83603a481321c86e770e33', theme: "danger" }, this.cartCount > 9 ? '9+' : this.cartCount)),
|
|
540
541
|
]), this.breakpoint <= bpps.contact.breakpoint
|
|
541
542
|
? bpps.contact.tpl()
|
|
542
|
-
: '', this.isLoggedIn ? (renderer.h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, renderer.h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, renderer.h("nano-icon", { name: "light/user" }), renderer.h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (renderer.h("nano-badge", { theme: "danger" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (renderer.h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, typeof this.loginUrl === 'string' ? (renderer.h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login")) : (renderer.h("button", { onClick: this.loginUrl }, "Login")))))))), renderer.h("nano-global-search-results", { key: '
|
|
543
|
+
: '', this.isLoggedIn ? (renderer.h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, renderer.h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, renderer.h("nano-icon", { name: "light/user" }), renderer.h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (renderer.h("nano-badge", { theme: "danger" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (renderer.h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, typeof this.loginUrl === 'string' ? (renderer.h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login")) : (renderer.h("button", { onClick: this.loginUrl }, "Login")))))))), renderer.h("nano-global-search-results", { key: '60e0568f58c6a277b6a09c3541bb561b0dab1026', part: "site-search-results" }, renderer.h("div", { key: '743e3f716d1af6337ee95a8e48b017e7f9875770', class: "gn__site", part: "site-wrapper" }, renderer.h("slot", { key: 'fc1621f5b67db233aa7332d7a7d0334563ee7cd9' }))))));
|
|
543
544
|
}
|
|
544
545
|
static get assetsDirs() { return ["assets"]; }
|
|
545
546
|
static get watchers() { return {
|
|
@@ -30,7 +30,8 @@ export class Dropdown {
|
|
|
30
30
|
positioner;
|
|
31
31
|
accessibleTrigger;
|
|
32
32
|
didLoad = false;
|
|
33
|
-
|
|
33
|
+
// only set when opened via keyboard; consumed (and reset) once the open transition ends
|
|
34
|
+
focusFirstEle = false;
|
|
34
35
|
get menu() {
|
|
35
36
|
return this.host.querySelector(transformTag('nano-menu'));
|
|
36
37
|
}
|
|
@@ -367,12 +368,12 @@ export class Dropdown {
|
|
|
367
368
|
this.popover.destroy();
|
|
368
369
|
}
|
|
369
370
|
render() {
|
|
370
|
-
return (h(Host, { key: '
|
|
371
|
+
return (h(Host, { key: '00d9c9f79a99c0e2f926e4e8482cd1f06badfa73', class: "nano-dropdown" }, h("div", { key: 'b63f546d7d45cac07dded72bf666b4153df7e874', part: "base", id: this.dropdownId, class: {
|
|
371
372
|
dropdown: true,
|
|
372
373
|
'dropdown--open': this.open,
|
|
373
|
-
} }, h("span", { key: '
|
|
374
|
+
} }, h("span", { key: '7dc63a96ced0d342ee725ce6cfe84af479d75ebc', part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onKeyDown: this.handleTriggerKeyDown, onClick: this.togglePanel }, h("slot", { key: 'aee47edcef94de976c86780a91ae49e5052e8fc0', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: '3bbcc7e43091542e909827c00cf84b36baef806c', ref: (el) => (this.positioner = el), class: "dropdown__positioner", popover: "manual", id: this.dropdownId + '-positioner' }, h("div", { key: 'a94cd6ea9bbaaa3a8b743035746252666253fa17', ref: (el) => (this.panel = el), part: "panel", class: `dropdown__panel ${this.placement.split('-').join(' ')}`, "aria-hidden": !this.open, role: this.host.getAttribute('role') === 'group' ? 'group' : 'dialog', "aria-modal": this.host.getAttribute('role') === 'group' ? undefined : 'true', "aria-labelledby": this.dialogTitle ? this.labelId : undefined, tabIndex: this.isOverflowing() ? 0 : undefined }, this.dialogTitle && (h("span", { key: '39622ee9886cd0094891032b4c939c6e420cd19d', id: this.labelId, class: "dropdown__accessible-title", "aria-live": this.host.getAttribute('role') === 'group'
|
|
374
375
|
? undefined
|
|
375
|
-
: 'polite' }, this.dialogTitle)), h("slot", { key: '
|
|
376
|
+
: 'polite' }, this.dialogTitle)), h("slot", { key: '39b7b9392d4649e6141dec80a95c56a9f176ac5d' }))))));
|
|
376
377
|
}
|
|
377
378
|
static get is() { return "nano-dropdown"; }
|
|
378
379
|
static get encapsulation() { return "shadow"; }
|
|
@@ -77,7 +77,8 @@ export class GlobalNav {
|
|
|
77
77
|
this.myAccountData = (await import(`./assets/local-logged-out.json`));
|
|
78
78
|
return;
|
|
79
79
|
}
|
|
80
|
-
|
|
80
|
+
// MyAccount is cross-origin; send its session cookies or the user always appears logged out
|
|
81
|
+
fetch(this.myAccountUrl + '/nav_bar_data.json', { credentials: 'include' })
|
|
81
82
|
.then((res) => res.json())
|
|
82
83
|
.then((data) => {
|
|
83
84
|
this.myAccountData = data;
|
|
@@ -525,21 +526,21 @@ export class GlobalNav {
|
|
|
525
526
|
}
|
|
526
527
|
render() {
|
|
527
528
|
const bpps = this.bpPartials;
|
|
528
|
-
return (h(Host, { key: '
|
|
529
|
+
return (h(Host, { key: '08fd38cc2711a83d40053e7ca147ce3a9ef38ce3', class: {
|
|
529
530
|
'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
|
|
530
531
|
'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
|
|
531
532
|
'nano-global-nav': true,
|
|
532
|
-
} }, h("div", { key: '
|
|
533
|
+
} }, h("div", { key: '63b69c051b64880f07dc2c309064a3fd9e4490e3', class: {
|
|
533
534
|
gn: true,
|
|
534
535
|
'gn__search-open': this.searchBarShown,
|
|
535
|
-
} }, h("nano-drawer", { key: '
|
|
536
|
+
} }, h("nano-drawer", { key: 'a1db81578932ba08842ab49a3ff0a34f9d2afd73', 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: '3ee1efdef44a84b0fbf3434392e2fcb617abbfab', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: 'bea757cb52809fc472dbd5055b00462801f2a2a9', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
|
|
536
537
|
? bpps.mainMenu.tpl()
|
|
537
|
-
: '', h("slot", { key: '
|
|
538
|
+
: '', h("slot", { key: '571b994b306beacf7342536beb6bbde5c261a677', name: "overflow" }))), h("div", { key: '1bfbaa6397db0959e781a62a824b79929ac82468', class: "gn__menu-bar-wrapper" }, h("div", { key: '4dff6a82f085798b3ebd30bb01b960b9c2065b46', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: '3e56113c9377dba138ec7b37f31f144d337fc707', "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: '3667ae378b645ae6440126c591f6fe656a9b783e', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '742068e692bdd49fd0999568db15df4d84d74084', name: "logo" }, h("a", { key: '4584b27ecd617f2d176074f84626b2759bcdd164', 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,
|
|
538
539
|
(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,
|
|
539
|
-
(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: '
|
|
540
|
-
(!!this.searchIndices.length && (h("nano-dropdown", { key: '
|
|
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--small", width: "35", height: "35", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: 'a03353f5db8f5fd8cbb02219c1f63d04e74c8ca8', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: '5579bee39208817f0fffb5ae97b9cf6b192bbcd6', class: "gn__main-menu-actions" }, !this.myAccountData ||
|
|
541
|
+
(!!this.searchIndices.length && (h("nano-dropdown", { key: '838047989bda4a5991bbe8a2bd4f8530524918d5', 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: '05c65d9f0d6e6570e3bef62ca535da36655ce021', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), h("form", { key: '2562ec900848f8f7b4f4f9f696a187a14a457f7d', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '181f2d8f7fa89439f57af21b489beccda196cf34', 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: '2163e7a28516ba6e9f0c3d7e2e6a64b6fea3a9f0', 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
542
|
this.handleSearchTermChangeEvent(e.detail.value);
|
|
542
|
-
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon-button", { key: '
|
|
543
|
+
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon-button", { key: '6d85d49f3da82a2e970a8d54b778e0c9ef6ce563', slot: "end", "icon-name": "light/magnifying-glass", label: "Search", onClick: this.onSearchSubmit }), h("nano-datalist", { key: '70928f0886130da02bb02c88f75b8d55650612f2', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '223c85ed29b119cddb61d7e6cb88a7a4e3e15e8f', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: 'cf014da5a7f18f2d84251f825a1718c270a68162' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
|
|
543
544
|
this.autocompleteResults.hits.map((hit, i) => (h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
|
|
544
545
|
searchInsight.sendClick({
|
|
545
546
|
index: this.activeIndex.index,
|
|
@@ -549,13 +550,13 @@ export class GlobalNav {
|
|
|
549
550
|
positions: [i + 1],
|
|
550
551
|
});
|
|
551
552
|
} }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
|
|
552
|
-
h("nano-option", { key: '
|
|
553
|
-
])))))), h("div", { key: '
|
|
554
|
-
h("nano-icon-button", { key: '
|
|
555
|
-
!!this.cartCount && (h("nano-badge", { key: '
|
|
553
|
+
h("nano-option", { key: 'ca2e52576b2faa6f35c2377591212c7a37c2355e', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
|
|
554
|
+
])))))), h("div", { key: '558eea256b3807c8066cfad3d303dfdd23cc7af2', class: "gn__cart" }, this.cartUrl && [
|
|
555
|
+
h("nano-icon-button", { key: '64fa87c0f21a947bed221ac4cf4f1996cd39f00c', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }),
|
|
556
|
+
!!this.cartCount && (h("nano-badge", { key: '26f65729803a1f345c83603a481321c86e770e33', theme: "danger" }, this.cartCount > 9 ? '9+' : this.cartCount)),
|
|
556
557
|
]), this.breakpoint <= bpps.contact.breakpoint
|
|
557
558
|
? bpps.contact.tpl()
|
|
558
|
-
: '', 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: '
|
|
559
|
+
: '', 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: '60e0568f58c6a277b6a09c3541bb561b0dab1026', part: "site-search-results" }, h("div", { key: '743e3f716d1af6337ee95a8e48b017e7f9875770', class: "gn__site", part: "site-wrapper" }, h("slot", { key: 'fc1621f5b67db233aa7332d7a7d0334563ee7cd9' }))))));
|
|
559
560
|
}
|
|
560
561
|
static get is() { return "nano-global-nav"; }
|
|
561
562
|
static get encapsulation() { return "shadow"; }
|
|
@@ -29,7 +29,8 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
|
|
|
29
29
|
positioner;
|
|
30
30
|
accessibleTrigger;
|
|
31
31
|
didLoad = false;
|
|
32
|
-
|
|
32
|
+
// only set when opened via keyboard; consumed (and reset) once the open transition ends
|
|
33
|
+
focusFirstEle = false;
|
|
33
34
|
get menu() {
|
|
34
35
|
return this.host.querySelector(transformTag('nano-menu'));
|
|
35
36
|
}
|
|
@@ -366,12 +367,12 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
|
|
|
366
367
|
this.popover.destroy();
|
|
367
368
|
}
|
|
368
369
|
render() {
|
|
369
|
-
return (h(Host, { key: '
|
|
370
|
+
return (h(Host, { key: '00d9c9f79a99c0e2f926e4e8482cd1f06badfa73', class: "nano-dropdown" }, h("div", { key: 'b63f546d7d45cac07dded72bf666b4153df7e874', part: "base", id: this.dropdownId, class: {
|
|
370
371
|
dropdown: true,
|
|
371
372
|
'dropdown--open': this.open,
|
|
372
|
-
} }, h("span", { key: '
|
|
373
|
+
} }, h("span", { key: '7dc63a96ced0d342ee725ce6cfe84af479d75ebc', part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onKeyDown: this.handleTriggerKeyDown, onClick: this.togglePanel }, h("slot", { key: 'aee47edcef94de976c86780a91ae49e5052e8fc0', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: '3bbcc7e43091542e909827c00cf84b36baef806c', ref: (el) => (this.positioner = el), class: "dropdown__positioner", popover: "manual", id: this.dropdownId + '-positioner' }, h("div", { key: 'a94cd6ea9bbaaa3a8b743035746252666253fa17', ref: (el) => (this.panel = el), part: "panel", class: `dropdown__panel ${this.placement.split('-').join(' ')}`, "aria-hidden": !this.open, role: this.host.getAttribute('role') === 'group' ? 'group' : 'dialog', "aria-modal": this.host.getAttribute('role') === 'group' ? undefined : 'true', "aria-labelledby": this.dialogTitle ? this.labelId : undefined, tabIndex: this.isOverflowing() ? 0 : undefined }, this.dialogTitle && (h("span", { key: '39622ee9886cd0094891032b4c939c6e420cd19d', id: this.labelId, class: "dropdown__accessible-title", "aria-live": this.host.getAttribute('role') === 'group'
|
|
373
374
|
? undefined
|
|
374
|
-
: 'polite' }, this.dialogTitle)), h("slot", { key: '
|
|
375
|
+
: 'polite' }, this.dialogTitle)), h("slot", { key: '39b7b9392d4649e6141dec80a95c56a9f176ac5d' }))))));
|
|
375
376
|
}
|
|
376
377
|
static get watchers() { return {
|
|
377
378
|
"open": ["handleOpenChange"],
|
|
@@ -72,7 +72,8 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class GlobalNav extends HTMLE
|
|
|
72
72
|
this.myAccountData = (await import('./local-logged-out.js'));
|
|
73
73
|
return;
|
|
74
74
|
}
|
|
75
|
-
|
|
75
|
+
// MyAccount is cross-origin; send its session cookies or the user always appears logged out
|
|
76
|
+
fetch(this.myAccountUrl + '/nav_bar_data.json', { credentials: 'include' })
|
|
76
77
|
.then((res) => res.json())
|
|
77
78
|
.then((data) => {
|
|
78
79
|
this.myAccountData = data;
|
|
@@ -527,21 +528,21 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class GlobalNav extends HTMLE
|
|
|
527
528
|
}
|
|
528
529
|
render() {
|
|
529
530
|
const bpps = this.bpPartials;
|
|
530
|
-
return (h(Host, { key: '
|
|
531
|
+
return (h(Host, { key: '08fd38cc2711a83d40053e7ca147ce3a9ef38ce3', class: {
|
|
531
532
|
'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
|
|
532
533
|
'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
|
|
533
534
|
'nano-global-nav': true,
|
|
534
|
-
} }, h("div", { key: '
|
|
535
|
+
} }, h("div", { key: '63b69c051b64880f07dc2c309064a3fd9e4490e3', class: {
|
|
535
536
|
gn: true,
|
|
536
537
|
'gn__search-open': this.searchBarShown,
|
|
537
|
-
} }, h("nano-drawer", { key: '
|
|
538
|
+
} }, h("nano-drawer", { key: 'a1db81578932ba08842ab49a3ff0a34f9d2afd73', 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: '3ee1efdef44a84b0fbf3434392e2fcb617abbfab', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: 'bea757cb52809fc472dbd5055b00462801f2a2a9', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
|
|
538
539
|
? bpps.mainMenu.tpl()
|
|
539
|
-
: '', h("slot", { key: '
|
|
540
|
+
: '', h("slot", { key: '571b994b306beacf7342536beb6bbde5c261a677', name: "overflow" }))), h("div", { key: '1bfbaa6397db0959e781a62a824b79929ac82468', class: "gn__menu-bar-wrapper" }, h("div", { key: '4dff6a82f085798b3ebd30bb01b960b9c2065b46', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: '3e56113c9377dba138ec7b37f31f144d337fc707', "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: '3667ae378b645ae6440126c591f6fe656a9b783e', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '742068e692bdd49fd0999568db15df4d84d74084', name: "logo" }, h("a", { key: '4584b27ecd617f2d176074f84626b2759bcdd164', 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,
|
|
540
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--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,
|
|
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: '
|
|
542
|
-
(!!this.searchIndices.length && (h("nano-dropdown", { key: '
|
|
542
|
+
(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: 'a03353f5db8f5fd8cbb02219c1f63d04e74c8ca8', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: '5579bee39208817f0fffb5ae97b9cf6b192bbcd6', class: "gn__main-menu-actions" }, !this.myAccountData ||
|
|
543
|
+
(!!this.searchIndices.length && (h("nano-dropdown", { key: '838047989bda4a5991bbe8a2bd4f8530524918d5', 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: '05c65d9f0d6e6570e3bef62ca535da36655ce021', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), h("form", { key: '2562ec900848f8f7b4f4f9f696a187a14a457f7d', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '181f2d8f7fa89439f57af21b489beccda196cf34', 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: '2163e7a28516ba6e9f0c3d7e2e6a64b6fea3a9f0', 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) => {
|
|
543
544
|
this.handleSearchTermChangeEvent(e.detail.value);
|
|
544
|
-
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon-button", { key: '
|
|
545
|
+
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon-button", { key: '6d85d49f3da82a2e970a8d54b778e0c9ef6ce563', slot: "end", "icon-name": "light/magnifying-glass", label: "Search", onClick: this.onSearchSubmit }), h("nano-datalist", { key: '70928f0886130da02bb02c88f75b8d55650612f2', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '223c85ed29b119cddb61d7e6cb88a7a4e3e15e8f', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: 'cf014da5a7f18f2d84251f825a1718c270a68162' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
|
|
545
546
|
this.autocompleteResults.hits.map((hit, i) => (h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
|
|
546
547
|
searchInsight.sendClick({
|
|
547
548
|
index: this.activeIndex.index,
|
|
@@ -551,13 +552,13 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class GlobalNav extends HTMLE
|
|
|
551
552
|
positions: [i + 1],
|
|
552
553
|
});
|
|
553
554
|
} }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
|
|
554
|
-
h("nano-option", { key: '
|
|
555
|
-
])))))), h("div", { key: '
|
|
556
|
-
h("nano-icon-button", { key: '
|
|
557
|
-
!!this.cartCount && (h("nano-badge", { key: '
|
|
555
|
+
h("nano-option", { key: 'ca2e52576b2faa6f35c2377591212c7a37c2355e', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
|
|
556
|
+
])))))), h("div", { key: '558eea256b3807c8066cfad3d303dfdd23cc7af2', class: "gn__cart" }, this.cartUrl && [
|
|
557
|
+
h("nano-icon-button", { key: '64fa87c0f21a947bed221ac4cf4f1996cd39f00c', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }),
|
|
558
|
+
!!this.cartCount && (h("nano-badge", { key: '26f65729803a1f345c83603a481321c86e770e33', theme: "danger" }, this.cartCount > 9 ? '9+' : this.cartCount)),
|
|
558
559
|
]), this.breakpoint <= bpps.contact.breakpoint
|
|
559
560
|
? bpps.contact.tpl()
|
|
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: '
|
|
561
|
+
: '', 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: '60e0568f58c6a277b6a09c3541bb561b0dab1026', part: "site-search-results" }, h("div", { key: '743e3f716d1af6337ee95a8e48b017e7f9875770', class: "gn__site", part: "site-wrapper" }, h("slot", { key: 'fc1621f5b67db233aa7332d7a7d0334563ee7cd9' }))))));
|
|
561
562
|
}
|
|
562
563
|
static get assetsDirs() { return ["assets"]; }
|
|
563
564
|
static get watchers() { return {
|
|
@@ -29,7 +29,8 @@ const Dropdown = class {
|
|
|
29
29
|
positioner;
|
|
30
30
|
accessibleTrigger;
|
|
31
31
|
didLoad = false;
|
|
32
|
-
|
|
32
|
+
// only set when opened via keyboard; consumed (and reset) once the open transition ends
|
|
33
|
+
focusFirstEle = false;
|
|
33
34
|
get menu() {
|
|
34
35
|
return this.host.querySelector(transformTag('nano-menu'));
|
|
35
36
|
}
|
|
@@ -363,12 +364,12 @@ const Dropdown = class {
|
|
|
363
364
|
this.popover.destroy();
|
|
364
365
|
}
|
|
365
366
|
render() {
|
|
366
|
-
return (h(Host, { key: '
|
|
367
|
+
return (h(Host, { key: '00d9c9f79a99c0e2f926e4e8482cd1f06badfa73', class: "nano-dropdown" }, h("div", { key: 'b63f546d7d45cac07dded72bf666b4153df7e874', part: "base", id: this.dropdownId, class: {
|
|
367
368
|
dropdown: true,
|
|
368
369
|
'dropdown--open': this.open,
|
|
369
|
-
} }, h("span", { key: '
|
|
370
|
+
} }, h("span", { key: '7dc63a96ced0d342ee725ce6cfe84af479d75ebc', part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onKeyDown: this.handleTriggerKeyDown, onClick: this.togglePanel }, h("slot", { key: 'aee47edcef94de976c86780a91ae49e5052e8fc0', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: '3bbcc7e43091542e909827c00cf84b36baef806c', ref: (el) => (this.positioner = el), class: "dropdown__positioner", popover: "manual", id: this.dropdownId + '-positioner' }, h("div", { key: 'a94cd6ea9bbaaa3a8b743035746252666253fa17', ref: (el) => (this.panel = el), part: "panel", class: `dropdown__panel ${this.placement.split('-').join(' ')}`, "aria-hidden": !this.open, role: this.host.getAttribute('role') === 'group' ? 'group' : 'dialog', "aria-modal": this.host.getAttribute('role') === 'group' ? undefined : 'true', "aria-labelledby": this.dialogTitle ? this.labelId : undefined, tabIndex: this.isOverflowing() ? 0 : undefined }, this.dialogTitle && (h("span", { key: '39622ee9886cd0094891032b4c939c6e420cd19d', id: this.labelId, class: "dropdown__accessible-title", "aria-live": this.host.getAttribute('role') === 'group'
|
|
370
371
|
? undefined
|
|
371
|
-
: 'polite' }, this.dialogTitle)), h("slot", { key: '
|
|
372
|
+
: 'polite' }, this.dialogTitle)), h("slot", { key: '39b7b9392d4649e6141dec80a95c56a9f176ac5d' }))))));
|
|
372
373
|
}
|
|
373
374
|
static get watchers() { return {
|
|
374
375
|
"open": ["handleOpenChange"],
|
|
@@ -55,7 +55,8 @@ const GlobalNav = class {
|
|
|
55
55
|
this.myAccountData = (await import('./local-logged-out-BuucpKxf.js'));
|
|
56
56
|
return;
|
|
57
57
|
}
|
|
58
|
-
|
|
58
|
+
// MyAccount is cross-origin; send its session cookies or the user always appears logged out
|
|
59
|
+
fetch(this.myAccountUrl + '/nav_bar_data.json', { credentials: 'include' })
|
|
59
60
|
.then((res) => res.json())
|
|
60
61
|
.then((data) => {
|
|
61
62
|
this.myAccountData = data;
|
|
@@ -507,21 +508,21 @@ const GlobalNav = class {
|
|
|
507
508
|
}
|
|
508
509
|
render() {
|
|
509
510
|
const bpps = this.bpPartials;
|
|
510
|
-
return (h(Host, { key: '
|
|
511
|
+
return (h(Host, { key: '08fd38cc2711a83d40053e7ca147ce3a9ef38ce3', class: {
|
|
511
512
|
'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
|
|
512
513
|
'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
|
|
513
514
|
'nano-global-nav': true,
|
|
514
|
-
} }, h("div", { key: '
|
|
515
|
+
} }, h("div", { key: '63b69c051b64880f07dc2c309064a3fd9e4490e3', class: {
|
|
515
516
|
gn: true,
|
|
516
517
|
'gn__search-open': this.searchBarShown,
|
|
517
|
-
} }, h("nano-drawer", { key: '
|
|
518
|
+
} }, h("nano-drawer", { key: 'a1db81578932ba08842ab49a3ff0a34f9d2afd73', 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: '3ee1efdef44a84b0fbf3434392e2fcb617abbfab', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: 'bea757cb52809fc472dbd5055b00462801f2a2a9', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
|
|
518
519
|
? bpps.mainMenu.tpl()
|
|
519
|
-
: '', h("slot", { key: '
|
|
520
|
+
: '', h("slot", { key: '571b994b306beacf7342536beb6bbde5c261a677', name: "overflow" }))), h("div", { key: '1bfbaa6397db0959e781a62a824b79929ac82468', class: "gn__menu-bar-wrapper" }, h("div", { key: '4dff6a82f085798b3ebd30bb01b960b9c2065b46', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: '3e56113c9377dba138ec7b37f31f144d337fc707', "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: '3667ae378b645ae6440126c591f6fe656a9b783e', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '742068e692bdd49fd0999568db15df4d84d74084', name: "logo" }, h("a", { key: '4584b27ecd617f2d176074f84626b2759bcdd164', 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,
|
|
520
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--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,
|
|
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: '
|
|
522
|
-
(!!this.searchIndices.length && (h("nano-dropdown", { key: '
|
|
522
|
+
(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: 'a03353f5db8f5fd8cbb02219c1f63d04e74c8ca8', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: '5579bee39208817f0fffb5ae97b9cf6b192bbcd6', class: "gn__main-menu-actions" }, !this.myAccountData ||
|
|
523
|
+
(!!this.searchIndices.length && (h("nano-dropdown", { key: '838047989bda4a5991bbe8a2bd4f8530524918d5', 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: '05c65d9f0d6e6570e3bef62ca535da36655ce021', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), h("form", { key: '2562ec900848f8f7b4f4f9f696a187a14a457f7d', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '181f2d8f7fa89439f57af21b489beccda196cf34', 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: '2163e7a28516ba6e9f0c3d7e2e6a64b6fea3a9f0', 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) => {
|
|
523
524
|
this.handleSearchTermChangeEvent(e.detail.value);
|
|
524
|
-
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon-button", { key: '
|
|
525
|
+
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon-button", { key: '6d85d49f3da82a2e970a8d54b778e0c9ef6ce563', slot: "end", "icon-name": "light/magnifying-glass", label: "Search", onClick: this.onSearchSubmit }), h("nano-datalist", { key: '70928f0886130da02bb02c88f75b8d55650612f2', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '223c85ed29b119cddb61d7e6cb88a7a4e3e15e8f', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: 'cf014da5a7f18f2d84251f825a1718c270a68162' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
|
|
525
526
|
this.autocompleteResults.hits.map((hit, i) => (h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
|
|
526
527
|
searchInsight.sendClick({
|
|
527
528
|
index: this.activeIndex.index,
|
|
@@ -531,13 +532,13 @@ const GlobalNav = class {
|
|
|
531
532
|
positions: [i + 1],
|
|
532
533
|
});
|
|
533
534
|
} }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
|
|
534
|
-
h("nano-option", { key: '
|
|
535
|
-
])))))), h("div", { key: '
|
|
536
|
-
h("nano-icon-button", { key: '
|
|
537
|
-
!!this.cartCount && (h("nano-badge", { key: '
|
|
535
|
+
h("nano-option", { key: 'ca2e52576b2faa6f35c2377591212c7a37c2355e', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
|
|
536
|
+
])))))), h("div", { key: '558eea256b3807c8066cfad3d303dfdd23cc7af2', class: "gn__cart" }, this.cartUrl && [
|
|
537
|
+
h("nano-icon-button", { key: '64fa87c0f21a947bed221ac4cf4f1996cd39f00c', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }),
|
|
538
|
+
!!this.cartCount && (h("nano-badge", { key: '26f65729803a1f345c83603a481321c86e770e33', theme: "danger" }, this.cartCount > 9 ? '9+' : this.cartCount)),
|
|
538
539
|
]), this.breakpoint <= bpps.contact.breakpoint
|
|
539
540
|
? bpps.contact.tpl()
|
|
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: '
|
|
541
|
+
: '', 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: '60e0568f58c6a277b6a09c3541bb561b0dab1026', part: "site-search-results" }, h("div", { key: '743e3f716d1af6337ee95a8e48b017e7f9875770', class: "gn__site", part: "site-wrapper" }, h("slot", { key: 'fc1621f5b67db233aa7332d7a7d0334563ee7cd9' }))))));
|
|
541
542
|
}
|
|
542
543
|
static get assetsDirs() { return ["assets"]; }
|
|
543
544
|
static get watchers() { return {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Custom elements for Nanopore-Digital Web applications
|
|
3
3
|
*/
|
|
4
|
-
import{r as t,c as i,a as e,d as o}from"./index-RXFO3HxS.js";import{f as n,g as s}from"./active-element-CKJIkX0R.js";import{P as a}from"./popover-DNdFZ1hX.js";import{a as r,g as h}from"./tabbable-Dwh0pD2q.js";import{t as d,h as l}from"./renderer-B_wACs4w.js";import{g as p}from"./dom-DiLhOqyz.js";import{g as c}from"./slot-Cj55s-OG.js";let m=0;const u=class{constructor(e){t(this,e),this.nanoShow=i(this,"nanoShow",7),this.nanoAfterShow=i(this,"nanoAfterShow",7),this.nanoHide=i(this,"nanoHide",7),this.nanoAfterHide=i(this,"nanoAfterHide",7)}dropdownId="dropdown-"+m++;labelId=this.dropdownId+"-title";ignoreOpenWatcher=!1;panel;popover;trigger;positioner;accessibleTrigger;didLoad=!1;focusFirstEle=!0;get menu(){return this.host.querySelector(d("nano-menu"))}get host(){return e(this)}autoOpen=!0;open=!1;handleOpenChange(){this.ignoreOpenWatcher||(this.open?this.show():this.hide(),this.accessibleTrigger?this.accessibleTrigger.setAttribute("aria-expanded",this.open.toString()):this.updateAccessibleTrigger())}closeOnSelect=!0;containingElement;tetherTo=null;handleTetherToChange(){this.createPopover(),this.updateAccessibleTrigger()}placement="bottom-start";distance=5;skidding=0;hoist=!1;handlePopoverOptionsChange(){this.popover&&this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,skidding:this.skidding,distance:this.distance})}dialogTitle;nanoShow;nanoAfterShow;nanoHide;nanoAfterHide;eventType;secondaryOpen(t){t.detail.secondaryMenu&&(t.stopPropagation(),this.panel.classList.add("loading"),this.panel.addEventListener("transitionend",(()=>{this.panel.classList.remove("loading")}),{once:!0}),this.panel.style.minHeight=t.detail.secondaryMenu.scrollHeight+"px")}secondaryClose(t){t.detail.secondaryMenu&&(t.stopPropagation(),t.target.parentElement&&(this.panel.style.minHeight=t.target.parentElement.scrollHeight+"px"))}handlePanelSelect(t){this.closeOnSelect&&t.target.tagName.toLowerCase()===d("nano-menu")&&this.hide()}async show(){if(this.ignoreOpenWatcher=!0,this.open=!0,this.nanoShow.emit().defaultPrevented)return this.open=!1,void(this.ignoreOpenWatcher=!1);"function"==typeof this.positioner?.showPopover?(this.hoist=!0,this.popover.show(),this.positioner.showPopover()):this.popover.show(),this.ignoreOpenWatcher=!1,document.addEventListener("mousedown",this.handleDocumentMouseDown),document.addEventListener("keydown",this.handleDocumentKeyDown)}async hide(){if(this.ignoreOpenWatcher=!0,this.open=!1,this.nanoHide.emit().defaultPrevented)return this.open=!0,void(this.ignoreOpenWatcher=!1);this.popover&&this.popover.hide(),this.ignoreOpenWatcher=!1,document.removeEventListener("mousedown",this.handleDocumentMouseDown),document.removeEventListener("keydown",this.handleDocumentKeyDown)}afterHide(){"function"==typeof this.positioner?.hidePopover&&this.positioner.hidePopover(),this.panel.scrollTop=0,this.accessibleTrigger&&n(this.containingElement,this.trigger)&&this.accessibleTrigger.focus()}togglePanel=()=>{this.autoOpen&&(this.open?this.hide():this.show())};updateAccessibleTrigger(){if(!this.didLoad)return;let t;this.accessibleTrigger=null,t=this.tetherTo?r(this.tetherTo):Array.from(this.host.querySelectorAll('[slot="trigger"]')).map(r)[0],t&&!t.getAttribute("aria-haspopup")&&(t.setAttribute("aria-haspopup","true"),t.setAttribute("aria-expanded",this.open?"true":"false"),this.accessibleTrigger=t)}handleDocumentKeyDown(t){if("Escape"!==t.key)if("Tab"===t.key)setTimeout((()=>{n(this.containingElement,this.trigger,t)||this.hide()}));else{if(this.menu&&(this.placement.match(/bottom|top/)&&["ArrowDown","ArrowUp"].includes(t.key)||this.placement.match(/right|left/)&&["ArrowRight","ArrowLeft"].includes(t.key)))return!this.open||n(this.containingElement,this.trigger,t)?"NANO-DROPDOWN"===this.containingElement.tagName&&this.containingElement.placement.match(/right|left/)&&"NANO-DROPDOWN"===this.trigger.getRootNode()?.host?.tagName?void this.hide():void 0:(t.preventDefault(),this.menu.setFocus(),void(this.focusFirstEle=!0));const i=t.composedPath();if(this.menu&&i.length&&!i.find((t=>t!==this.menu)))return void this.menu.dispatchEvent(new KeyboardEvent(t.type,t))}else this.hide()}handleDocumentMouseDown(t){n(this.containingElement,this.trigger,t)||this.hide()}handleTriggerKeyDown=t=>{(this.placement.match(/bottom|top/)&&["ArrowDown","ArrowUp"," ","Enter"].includes(t.key)||this.placement.match(/right|left/)&&["ArrowRight","ArrowLeft"," ","Enter"].includes(t.key))&&(this.show(),t.preventDefault(),t.stopPropagation(),this.menu&&(this.menu.setFocus(),this.focusFirstEle=!0))};handleTriggerSlotChange=()=>{this.updateAccessibleTrigger()};createPopover(){(this.tetherTo||this.trigger)&&this.positioner&&(this.popover&&(this.open&&this.hide(),this.popover.destroy(),this.popover=null),this.popover=new a(this.tetherTo||this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:()=>{this.nanoAfterHide.emit()},onAfterShow:()=>{this.nanoAfterShow.emit()},onTransitionEnd:()=>{this.open?this.menu&&(this.menu.showActiveElement(),this.focusFirstEle&&(this.menu.setFocus(),this.focusFirstEle=!1)):this.afterHide()}}),this.open&&this.show())}isOverflowing(){return["auto","scroll"].includes(window.getComputedStyle(this.host).getPropertyValue("--overflow"))}connectedCallback(){this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this),this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this),this.containingElement||(this.containingElement=this.host)}componentDidLoad(){this.didLoad=!0,this.createPopover(),setTimeout((()=>this.updateAccessibleTrigger()),100)}disconnectedCallback(){this.host.isConnected&&this.hide(),this.popover&&this.popover.destroy()}render(){return l(o,{key:"c0ed4b8b03d27f7437c148c8df305886c6cf29d9",class:"nano-dropdown"},l("div",{key:"27165586e2caa99ba746e7db3aa1574f0e9d1576",part:"base",id:this.dropdownId,class:{dropdown:!0,"dropdown--open":this.open}},l("span",{key:"b401a4d341e786ae4fe8c54adf06f8da1be4f531",part:"trigger",class:"dropdown__trigger",ref:t=>this.trigger=t,onKeyDown:this.handleTriggerKeyDown,onClick:this.togglePanel},l("slot",{key:"bd61e0f2d5e164b21d3ecba81c63ec72b0b7cc6f",name:"trigger",onSlotchange:this.handleTriggerSlotChange})),l("div",{key:"e0cb2a8823490b70f6aa01073d3873fa785fd763",ref:t=>this.positioner=t,class:"dropdown__positioner",popover:"manual",id:this.dropdownId+"-positioner"},l("div",{key:"3f1b7e3911cd7616ff85d042fc0d1e3e358f36c2",ref:t=>this.panel=t,part:"panel",class:`dropdown__panel ${this.placement.split("-").join(" ")}`,"aria-hidden":!this.open,role:"group"===this.host.getAttribute("role")?"group":"dialog","aria-modal":"group"===this.host.getAttribute("role")?void 0:"true","aria-labelledby":this.dialogTitle?this.labelId:void 0,tabIndex:this.isOverflowing()?0:void 0},this.dialogTitle&&l("span",{key:"19cc4dd331a4c2cbdc73a05687681cb2830fff0c",id:this.labelId,class:"dropdown__accessible-title","aria-live":"group"===this.host.getAttribute("role")?void 0:"polite"},this.dialogTitle),l("slot",{key:"5da1881086c31481463b3b7244552e17ee66d997"})))))}static get watchers(){return{open:["handleOpenChange"],tetherTo:["handleTetherToChange"],placement:["handlePopoverOptionsChange"],distance:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"]}}};u.style=":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{--width:auto;--border:none;--border-radius:0px;--background:var(--nano-color-surface-subtle);--padding:0 0;--overflow:auto;--dropdown-z-index:var(--nano-z-index-dropdown);--min-width:0;--max-height:none;--box-shadow:var(--nano-shadow-l2);--menu-height:calc(100vh - 200px);display:inline-block}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-inline-size:var(--min-width);border:0;background:none;padding:0;overflow:visible;color:unset}.dropdown__positioner::backdrop{display:none}.dropdown__positioner[popover],.dropdown__positioner:popover-open{inset:unset}@media (width <= 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-inline-size:var(--min-width);inline-size:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentcolor;box-shadow:var(--box-shadow);opacity:0;transition:var(--nano-transition-x-fast) ease opacity, var(--nano-transition-x-fast) ease transform, var(--nano-transition-fast) ease min-block-size;min-block-size:20px;overflow:var(--overflow);max-block-size:var(--max-height);box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(.nano-menu){max-block-size:var(--menu-height)}.dropdown__accessible-title{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}";const f=class{constructor(e){t(this,e),this.nanoFocus=i(this,"nanoFocus",7),this.nanoBlur=i(this,"nanoBlur",7),this.nanoSelect=i(this,"nanoSelect",7)}ignoreMouseEvents=!1;ignoreMouseTimeout;menu;typeToSelect="";typeToSelectTimeout;get el(){return e(this)}get hasFocus(){return this._hasFocus}_hasFocus=!1;type;_type;label;nanoFocus;nanoBlur;nanoSelect;async setFocus(){this.menu?.focus&&this.menu.focus({preventScroll:!0})}async removeFocus(){this.menu?.blur&&this.menu.blur()}async showActiveElement(){this.selectedItem&&this.selectedItem.scrollIntoView({block:"nearest"})}async resetActiveItem(){this.getItems.filter((t=>t.tagName.toLowerCase()===d("nano-option"))).map((t=>t.setAttribute("tabindex","-1")))}get getItems(){let t;if("listbox"===this._type)t=p(this.el,`${d("nano-nav-item")}, ${d("nano-option")}`,"slot");else{const i=this.el.querySelectorAll("[open]");t=h(i[i.length-1]||this.el)}return t.filter((t=>!t.disabled&&!t.hidden))}get activeItem(){const t=s();return this.getItems.find((i=>"0"===i.getAttribute("tabindex")||i===t||i===document.activeElement||i.classList.contains("has-focus")))}get selectedItem(){return this.getItems.find((t=>t.selected))}async setActiveFocusItem(t,i=!0,e=!1){const o=this.getItems,n=t||o.find((t=>t.selected))||o[0];o.filter((t=>t.tagName.toLowerCase()===d("nano-option"))).map((t=>t.setAttribute("tabindex",t===n?"0":"-1"))),i&&(n?e?n.focus({preventScroll:!0}):n.setFocus?n.setFocus():n.focus():this.hasFocus||this.menu.focus({preventScroll:e}))}handleBlur(t){if(!this.hasFocus)return;let i;if(t.key){if("Tab"!==t.key)return;i=s()&&s().closest(this.el.tagName.toLowerCase())===this.el}else i=!!t.composedPath().find((t=>t===this.el));i||(this.resetActiveItem(),this._hasFocus=!1,this.nanoBlur.emit())}handleFocus=()=>{this._hasFocus=!0,this.setActiveFocusItem(this.selectedItem||this.getItems[0]),this.nanoFocus.emit()};handleClick=t=>{const i=t.target.closest(d("nano-nav-item"));i&&!i.disabled&&this.nanoSelect.emit(i)};handleKeyDown=t=>{switch(clearTimeout(this.ignoreMouseTimeout),this.ignoreMouseTimeout=setTimeout((()=>this.ignoreMouseEvents=!1),500),this.ignoreMouseEvents=!0,t.key){case" ":this.activeItem&&(t.stopPropagation(),"BUTTON"!==this.activeItem.nodeName&&this.activeItem.click());break;case"ArrowDown":case"ArrowUp":case"PageDown":case"PageUp":case"Home":case"End":{const i=this.getItems;let e=i.indexOf(this.activeItem);if(i.length)return t.preventDefault(),"ArrowDown"===t.key?e++:"ArrowUp"===t.key?e--:"Home"===t.key||"PageUp"===t.key?e=0:"End"!==t.key&&"PageDown"!==t.key||(e=i.length-1),e<0&&(e=i.length-1),e>i.length-1&&(e=0),this.setActiveFocusItem(i[e]),void(i[e]&&i[e].scrollIntoView({block:"nearest"}));break}}if(" "===t.key||/^[a-z0-9]+$/i.test(t.key)){clearTimeout(this.typeToSelectTimeout),this.typeToSelectTimeout=setTimeout((()=>this.typeToSelect=""),750),this.typeToSelect+=t.key;const i=this.getItems;for(const t of i)if(c(t).toLowerCase().trim().substring(0,this.typeToSelect.length)===this.typeToSelect){this.setActiveFocusItem(t);break}}};handleMouseOver=t=>{const i=t.target,e=i.closest(d("nano-nav-item"))||i.closest(d("nano-option"))||i.closest("a");e&&!this.ignoreMouseEvents&&this.setActiveFocusItem(e,!0,!0)};handleSlotContent=()=>{if(this._type=this.type||null,!this._type){let t,i=0;h(this.el).forEach((e=>{"A"===e.tagName||"link"===e.role?t++:i++})),this._type=t>i?"nav":"menu"}"nav"!==this._type&&(p(this.el,`*:not(${d("nano-nav-item")}, a, ${d("nano-option")}, ${d("nano-dropdown")})`,!0).forEach((t=>{this.getItems.indexOf(t)<0&&t.setAttribute("role","none")})),this.el.querySelectorAll(`a, ${d("nano-dropdown")}`).forEach((t=>{t.setAttribute("role","A"===t.tagName?"menuitem":"group")})))};componentWillLoad(){this.handleSlotContent()}render(){return l(o,{key:"40403e7a4f942f8fa8594edc9ceb24f33aba6979",role:"listbox"===this._type?"group":this._type,class:"nano-menu"},l("div",{key:"561716ed34aa038cebacb31dc3b8562829f062e4",onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onFocus:this.handleFocus,"aria-label":this.label?this.label:void 0,ref:t=>this.menu=t,part:"base",class:{menu:!0,["menu--"+this._type]:!0,"menu--has-focus":this.hasFocus},tabIndex:-1,role:"group"},l("slot",{key:"e36d4071433a6e7ddd700aee284868856cbd82ff",onSlotchange:this.handleSlotContent})))}};f.style=":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{--padding:var(--nano-spacing-sm) var(--nano-spacing-sm);--font-size:1rem;--background:var(--nano-color-surface-subtle);--nav-item-padding:var(--padding);display:block;background:var(--background);color:var(--nano-color-text-default);overflow-x:clip}.menu{font-size:var(--font-size);overscroll-behavior:none;min-inline-size:var(--width);position:relative}.menu:focus{outline:none}::slotted(*:not(.nano-nav-item,.nano-option,hr,slot)){padding:var(--padding);display:block}";export{u as nano_dropdown,f as nano_menu}
|
|
4
|
+
import{r as t,c as i,a as e,d as o}from"./index-RXFO3HxS.js";import{f as n,g as s}from"./active-element-CKJIkX0R.js";import{P as a}from"./popover-DNdFZ1hX.js";import{a as r,g as h}from"./tabbable-Dwh0pD2q.js";import{t as d,h as l}from"./renderer-B_wACs4w.js";import{g as p}from"./dom-DiLhOqyz.js";import{g as c}from"./slot-Cj55s-OG.js";let m=0;const u=class{constructor(e){t(this,e),this.nanoShow=i(this,"nanoShow",7),this.nanoAfterShow=i(this,"nanoAfterShow",7),this.nanoHide=i(this,"nanoHide",7),this.nanoAfterHide=i(this,"nanoAfterHide",7)}dropdownId="dropdown-"+m++;labelId=this.dropdownId+"-title";ignoreOpenWatcher=!1;panel;popover;trigger;positioner;accessibleTrigger;didLoad=!1;focusFirstEle=!1;get menu(){return this.host.querySelector(d("nano-menu"))}get host(){return e(this)}autoOpen=!0;open=!1;handleOpenChange(){this.ignoreOpenWatcher||(this.open?this.show():this.hide(),this.accessibleTrigger?this.accessibleTrigger.setAttribute("aria-expanded",this.open.toString()):this.updateAccessibleTrigger())}closeOnSelect=!0;containingElement;tetherTo=null;handleTetherToChange(){this.createPopover(),this.updateAccessibleTrigger()}placement="bottom-start";distance=5;skidding=0;hoist=!1;handlePopoverOptionsChange(){this.popover&&this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,skidding:this.skidding,distance:this.distance})}dialogTitle;nanoShow;nanoAfterShow;nanoHide;nanoAfterHide;eventType;secondaryOpen(t){t.detail.secondaryMenu&&(t.stopPropagation(),this.panel.classList.add("loading"),this.panel.addEventListener("transitionend",(()=>{this.panel.classList.remove("loading")}),{once:!0}),this.panel.style.minHeight=t.detail.secondaryMenu.scrollHeight+"px")}secondaryClose(t){t.detail.secondaryMenu&&(t.stopPropagation(),t.target.parentElement&&(this.panel.style.minHeight=t.target.parentElement.scrollHeight+"px"))}handlePanelSelect(t){this.closeOnSelect&&t.target.tagName.toLowerCase()===d("nano-menu")&&this.hide()}async show(){if(this.ignoreOpenWatcher=!0,this.open=!0,this.nanoShow.emit().defaultPrevented)return this.open=!1,void(this.ignoreOpenWatcher=!1);"function"==typeof this.positioner?.showPopover?(this.hoist=!0,this.popover.show(),this.positioner.showPopover()):this.popover.show(),this.ignoreOpenWatcher=!1,document.addEventListener("mousedown",this.handleDocumentMouseDown),document.addEventListener("keydown",this.handleDocumentKeyDown)}async hide(){if(this.ignoreOpenWatcher=!0,this.open=!1,this.nanoHide.emit().defaultPrevented)return this.open=!0,void(this.ignoreOpenWatcher=!1);this.popover&&this.popover.hide(),this.ignoreOpenWatcher=!1,document.removeEventListener("mousedown",this.handleDocumentMouseDown),document.removeEventListener("keydown",this.handleDocumentKeyDown)}afterHide(){"function"==typeof this.positioner?.hidePopover&&this.positioner.hidePopover(),this.panel.scrollTop=0,this.accessibleTrigger&&n(this.containingElement,this.trigger)&&this.accessibleTrigger.focus()}togglePanel=()=>{this.autoOpen&&(this.open?this.hide():this.show())};updateAccessibleTrigger(){if(!this.didLoad)return;let t;this.accessibleTrigger=null,t=this.tetherTo?r(this.tetherTo):Array.from(this.host.querySelectorAll('[slot="trigger"]')).map(r)[0],t&&!t.getAttribute("aria-haspopup")&&(t.setAttribute("aria-haspopup","true"),t.setAttribute("aria-expanded",this.open?"true":"false"),this.accessibleTrigger=t)}handleDocumentKeyDown(t){if("Escape"!==t.key)if("Tab"===t.key)setTimeout((()=>{n(this.containingElement,this.trigger,t)||this.hide()}));else{if(this.menu&&(this.placement.match(/bottom|top/)&&["ArrowDown","ArrowUp"].includes(t.key)||this.placement.match(/right|left/)&&["ArrowRight","ArrowLeft"].includes(t.key)))return!this.open||n(this.containingElement,this.trigger,t)?"NANO-DROPDOWN"===this.containingElement.tagName&&this.containingElement.placement.match(/right|left/)&&"NANO-DROPDOWN"===this.trigger.getRootNode()?.host?.tagName?void this.hide():void 0:(t.preventDefault(),this.menu.setFocus(),void(this.focusFirstEle=!0));const i=t.composedPath();if(this.menu&&i.length&&!i.find((t=>t!==this.menu)))return void this.menu.dispatchEvent(new KeyboardEvent(t.type,t))}else this.hide()}handleDocumentMouseDown(t){n(this.containingElement,this.trigger,t)||this.hide()}handleTriggerKeyDown=t=>{(this.placement.match(/bottom|top/)&&["ArrowDown","ArrowUp"," ","Enter"].includes(t.key)||this.placement.match(/right|left/)&&["ArrowRight","ArrowLeft"," ","Enter"].includes(t.key))&&(this.show(),t.preventDefault(),t.stopPropagation(),this.menu&&(this.menu.setFocus(),this.focusFirstEle=!0))};handleTriggerSlotChange=()=>{this.updateAccessibleTrigger()};createPopover(){(this.tetherTo||this.trigger)&&this.positioner&&(this.popover&&(this.open&&this.hide(),this.popover.destroy(),this.popover=null),this.popover=new a(this.tetherTo||this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:()=>{this.nanoAfterHide.emit()},onAfterShow:()=>{this.nanoAfterShow.emit()},onTransitionEnd:()=>{this.open?this.menu&&(this.menu.showActiveElement(),this.focusFirstEle&&(this.menu.setFocus(),this.focusFirstEle=!1)):this.afterHide()}}),this.open&&this.show())}isOverflowing(){return["auto","scroll"].includes(window.getComputedStyle(this.host).getPropertyValue("--overflow"))}connectedCallback(){this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this),this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this),this.containingElement||(this.containingElement=this.host)}componentDidLoad(){this.didLoad=!0,this.createPopover(),setTimeout((()=>this.updateAccessibleTrigger()),100)}disconnectedCallback(){this.host.isConnected&&this.hide(),this.popover&&this.popover.destroy()}render(){return l(o,{key:"00d9c9f79a99c0e2f926e4e8482cd1f06badfa73",class:"nano-dropdown"},l("div",{key:"b63f546d7d45cac07dded72bf666b4153df7e874",part:"base",id:this.dropdownId,class:{dropdown:!0,"dropdown--open":this.open}},l("span",{key:"7dc63a96ced0d342ee725ce6cfe84af479d75ebc",part:"trigger",class:"dropdown__trigger",ref:t=>this.trigger=t,onKeyDown:this.handleTriggerKeyDown,onClick:this.togglePanel},l("slot",{key:"aee47edcef94de976c86780a91ae49e5052e8fc0",name:"trigger",onSlotchange:this.handleTriggerSlotChange})),l("div",{key:"3bbcc7e43091542e909827c00cf84b36baef806c",ref:t=>this.positioner=t,class:"dropdown__positioner",popover:"manual",id:this.dropdownId+"-positioner"},l("div",{key:"a94cd6ea9bbaaa3a8b743035746252666253fa17",ref:t=>this.panel=t,part:"panel",class:`dropdown__panel ${this.placement.split("-").join(" ")}`,"aria-hidden":!this.open,role:"group"===this.host.getAttribute("role")?"group":"dialog","aria-modal":"group"===this.host.getAttribute("role")?void 0:"true","aria-labelledby":this.dialogTitle?this.labelId:void 0,tabIndex:this.isOverflowing()?0:void 0},this.dialogTitle&&l("span",{key:"39622ee9886cd0094891032b4c939c6e420cd19d",id:this.labelId,class:"dropdown__accessible-title","aria-live":"group"===this.host.getAttribute("role")?void 0:"polite"},this.dialogTitle),l("slot",{key:"39b7b9392d4649e6141dec80a95c56a9f176ac5d"})))))}static get watchers(){return{open:["handleOpenChange"],tetherTo:["handleTetherToChange"],placement:["handlePopoverOptionsChange"],distance:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"]}}};u.style=":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{--width:auto;--border:none;--border-radius:0px;--background:var(--nano-color-surface-subtle);--padding:0 0;--overflow:auto;--dropdown-z-index:var(--nano-z-index-dropdown);--min-width:0;--max-height:none;--box-shadow:var(--nano-shadow-l2);--menu-height:calc(100vh - 200px);display:inline-block}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-inline-size:var(--min-width);border:0;background:none;padding:0;overflow:visible;color:unset}.dropdown__positioner::backdrop{display:none}.dropdown__positioner[popover],.dropdown__positioner:popover-open{inset:unset}@media (width <= 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-inline-size:var(--min-width);inline-size:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentcolor;box-shadow:var(--box-shadow);opacity:0;transition:var(--nano-transition-x-fast) ease opacity, var(--nano-transition-x-fast) ease transform, var(--nano-transition-fast) ease min-block-size;min-block-size:20px;overflow:var(--overflow);max-block-size:var(--max-height);box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(.nano-menu){max-block-size:var(--menu-height)}.dropdown__accessible-title{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}";const b=class{constructor(e){t(this,e),this.nanoFocus=i(this,"nanoFocus",7),this.nanoBlur=i(this,"nanoBlur",7),this.nanoSelect=i(this,"nanoSelect",7)}ignoreMouseEvents=!1;ignoreMouseTimeout;menu;typeToSelect="";typeToSelectTimeout;get el(){return e(this)}get hasFocus(){return this._hasFocus}_hasFocus=!1;type;_type;label;nanoFocus;nanoBlur;nanoSelect;async setFocus(){this.menu?.focus&&this.menu.focus({preventScroll:!0})}async removeFocus(){this.menu?.blur&&this.menu.blur()}async showActiveElement(){this.selectedItem&&this.selectedItem.scrollIntoView({block:"nearest"})}async resetActiveItem(){this.getItems.filter((t=>t.tagName.toLowerCase()===d("nano-option"))).map((t=>t.setAttribute("tabindex","-1")))}get getItems(){let t;if("listbox"===this._type)t=p(this.el,`${d("nano-nav-item")}, ${d("nano-option")}`,"slot");else{const i=this.el.querySelectorAll("[open]");t=h(i[i.length-1]||this.el)}return t.filter((t=>!t.disabled&&!t.hidden))}get activeItem(){const t=s();return this.getItems.find((i=>"0"===i.getAttribute("tabindex")||i===t||i===document.activeElement||i.classList.contains("has-focus")))}get selectedItem(){return this.getItems.find((t=>t.selected))}async setActiveFocusItem(t,i=!0,e=!1){const o=this.getItems,n=t||o.find((t=>t.selected))||o[0];o.filter((t=>t.tagName.toLowerCase()===d("nano-option"))).map((t=>t.setAttribute("tabindex",t===n?"0":"-1"))),i&&(n?e?n.focus({preventScroll:!0}):n.setFocus?n.setFocus():n.focus():this.hasFocus||this.menu.focus({preventScroll:e}))}handleBlur(t){if(!this.hasFocus)return;let i;if(t.key){if("Tab"!==t.key)return;i=s()&&s().closest(this.el.tagName.toLowerCase())===this.el}else i=!!t.composedPath().find((t=>t===this.el));i||(this.resetActiveItem(),this._hasFocus=!1,this.nanoBlur.emit())}handleFocus=()=>{this._hasFocus=!0,this.setActiveFocusItem(this.selectedItem||this.getItems[0]),this.nanoFocus.emit()};handleClick=t=>{const i=t.target.closest(d("nano-nav-item"));i&&!i.disabled&&this.nanoSelect.emit(i)};handleKeyDown=t=>{switch(clearTimeout(this.ignoreMouseTimeout),this.ignoreMouseTimeout=setTimeout((()=>this.ignoreMouseEvents=!1),500),this.ignoreMouseEvents=!0,t.key){case" ":this.activeItem&&(t.stopPropagation(),"BUTTON"!==this.activeItem.nodeName&&this.activeItem.click());break;case"ArrowDown":case"ArrowUp":case"PageDown":case"PageUp":case"Home":case"End":{const i=this.getItems;let e=i.indexOf(this.activeItem);if(i.length)return t.preventDefault(),"ArrowDown"===t.key?e++:"ArrowUp"===t.key?e--:"Home"===t.key||"PageUp"===t.key?e=0:"End"!==t.key&&"PageDown"!==t.key||(e=i.length-1),e<0&&(e=i.length-1),e>i.length-1&&(e=0),this.setActiveFocusItem(i[e]),void(i[e]&&i[e].scrollIntoView({block:"nearest"}));break}}if(" "===t.key||/^[a-z0-9]+$/i.test(t.key)){clearTimeout(this.typeToSelectTimeout),this.typeToSelectTimeout=setTimeout((()=>this.typeToSelect=""),750),this.typeToSelect+=t.key;const i=this.getItems;for(const t of i)if(c(t).toLowerCase().trim().substring(0,this.typeToSelect.length)===this.typeToSelect){this.setActiveFocusItem(t);break}}};handleMouseOver=t=>{const i=t.target,e=i.closest(d("nano-nav-item"))||i.closest(d("nano-option"))||i.closest("a");e&&!this.ignoreMouseEvents&&this.setActiveFocusItem(e,!0,!0)};handleSlotContent=()=>{if(this._type=this.type||null,!this._type){let t,i=0;h(this.el).forEach((e=>{"A"===e.tagName||"link"===e.role?t++:i++})),this._type=t>i?"nav":"menu"}"nav"!==this._type&&(p(this.el,`*:not(${d("nano-nav-item")}, a, ${d("nano-option")}, ${d("nano-dropdown")})`,!0).forEach((t=>{this.getItems.indexOf(t)<0&&t.setAttribute("role","none")})),this.el.querySelectorAll(`a, ${d("nano-dropdown")}`).forEach((t=>{t.setAttribute("role","A"===t.tagName?"menuitem":"group")})))};componentWillLoad(){this.handleSlotContent()}render(){return l(o,{key:"40403e7a4f942f8fa8594edc9ceb24f33aba6979",role:"listbox"===this._type?"group":this._type,class:"nano-menu"},l("div",{key:"561716ed34aa038cebacb31dc3b8562829f062e4",onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onFocus:this.handleFocus,"aria-label":this.label?this.label:void 0,ref:t=>this.menu=t,part:"base",class:{menu:!0,["menu--"+this._type]:!0,"menu--has-focus":this.hasFocus},tabIndex:-1,role:"group"},l("slot",{key:"e36d4071433a6e7ddd700aee284868856cbd82ff",onSlotchange:this.handleSlotContent})))}};b.style=":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{--padding:var(--nano-spacing-sm) var(--nano-spacing-sm);--font-size:1rem;--background:var(--nano-color-surface-subtle);--nav-item-padding:var(--padding);display:block;background:var(--background);color:var(--nano-color-text-default);overflow-x:clip}.menu{font-size:var(--font-size);overscroll-behavior:none;min-inline-size:var(--width);position:relative}.menu:focus{outline:none}::slotted(*:not(.nano-nav-item,.nano-option,hr,slot)){padding:var(--padding);display:block}";export{u as nano_dropdown,b as nano_menu}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Custom elements for Nanopore-Digital Web applications
|
|
3
3
|
*/
|
|
4
|
-
import{a as n,r as e,c as a,d as t,l as o}from"./index-RXFO3HxS.js";import{a as i}from"./algoliasearch-lite.esm.browser-BTIloVU8.js";import{h as r}from"./renderer-B_wACs4w.js";import{d as s}from"./throttle-C93FMm2Z.js";import{a as l}from"./style-DZBZHpf8.js";import{s as c}from"./search-insights-8OL2oeQN.js";const h=class{get host(){return n(this)}overflowMenu;overflowOpen=!1;logoUrl=location.protocol+"//"+location.host;cartUrl="";msgUrl="";loginUrl="";logoutUrl="";contactUrl="https://nanoporetech.com/contact";sessionRedirect=window.location.href;cartCount=0;msgCount=0;async openOverflowMenu(){this.overflowOpen=!0}async closeOverflowMenu(){this.overflowOpen=!1}myAccountUrl;async handleMyAccountUrl(){this.myAccountUrl&&("local-logged-in"!==this.myAccountUrl?"local-logged-out"!==this.myAccountUrl?fetch(this.myAccountUrl+"/nav_bar_data.json").then((n=>n.json())).then((n=>{this.myAccountData=n})).catch((n=>{console.error("Error fetching MyAccount data",n)})):this.myAccountData=await import("./local-logged-out-BuucpKxf.js"):this.myAccountData=await import("./local-logged-in-B3A7tw10.js"))}myAccountData;nanoUserData;userLinks=[];isLoggedIn=!1;get myAccountUser(){return this.myAccountData?.user?.uuid?this.myAccountData.user:null}processUserData(){if(this.myAccountData&&(this.loginUrl=this.loginUrl||this.myAccountData.urls?.login,this.cartUrl=this.cartUrl||this.myAccountData.urls?.cart,this.cartCount=this.cartCount||this.myAccountData.cart?.count),!this.myAccountUser)return this.isLoggedIn=!1,this.userLinks=[],this.msgUrl="",this.msgCount=0,void this.nanoUserData.emit(null);this.userLinks=this.myAccountData?.links?.filter((n=>"profile-panel-list"===n.area))||[],this.logoutUrl=this.logoutUrl||this.myAccountData.urls?.logout,this.msgUrl=this.msgUrl||this.myAccountData.urls?.messages,this.msgCount=this.msgCount||this.myAccountData.notifications?.count,this.isLoggedIn=!0,this.nanoUserData.emit(this.myAccountUser)}formatLoginLink(n){if(!n)return"";if(!this.sessionRedirect)return n;const e=encodeURIComponent(this.sessionRedirect);return n.endsWith("=")?n+e:n.includes("?")?n+"&RelayState="+e:n+"?RelayState="+e}resizeObserver;cachedWidth;mainMenu;_mainMenuBar;get mainMenuBar(){return this._mainMenuBar}set mainMenuBar(n){this._mainMenuBar!==n&&(this._mainMenuBar=n,this.addMainmenuRo())}async triggerResize(){this.shouldResize=!0,this.breakpoint=0}shouldResize=!0;breakpoint=0;breakpointChanged(){this.breakpoint<this.bpPartials.mainMenu.breakpoint&&!1===this.shouldResize&&(this.overflowOpen=!1),this.setNavItemHover()}setNavItemHover(){const n=this.breakpoint<=this.bpPartials.mainMenu.breakpoint;this.host.querySelectorAll("nano-nav-item").forEach((e=>{e.openOnHover=n})),this.host.querySelectorAll("nano-mdd").forEach((e=>{e.accordion=!n}))}debounceResetResize=s((()=>{this.shouldResize=!1}),300);addMainmenuRo(){this.removeMainmenuRo(),(this.resizeObserver=new ResizeObserver((()=>{this.shouldResize||this.mainMenuBar.clientWidth>=this.cachedWidth&&0===this.breakpoint||this.mainMenuBar.clientWidth<=this.cachedWidth&&this.mainMenuBar.clientWidth>=this.mainMenu.scrollWidth||(this.shouldResize=!0,this.breakpoint=0)}))).observe(this.mainMenuBar)}removeMainmenuRo(){this.resizeObserver&&(this.mainMenuBar?this.resizeObserver.unobserve(this.mainMenuBar):this.resizeObserver.disconnect())}handleResize=()=>{this.shouldResize&&(this.breakpoint<4&&this.mainMenu.scrollWidth>this.mainMenuBar.clientWidth?this.breakpoint++:(this.cachedWidth=this.mainMenuBar.clientWidth,this.debounceResetResize()))};algoliaClient;searchResults;searchInput;activeIndex;autocompleteResults;searchForm;searchIndices=[];searchBarShown=!1;searchLoading=!1;_searchValue="";nanoSearchResult;nanoSearchError;nanoSearchReset;searchIndex="All";get searchValue(){return this._searchValue}set searchValue(n){n&&this.host.componentOnReady().then((()=>{this.searchBarShown=!0,this.handleSearchTermChangeEvent(n)}))}async submitSearch(){this.onSearchSubmit()}handleSearchIndex(){if(this.searchIndices?.length){if(this.searchIndex)return this.activeIndex=this.searchIndices.find((n=>n.name===this.searchIndex))||this.searchIndices[0],this.activeIndex;this.activeIndex=this.searchIndices[0]}}initSearch(){if(!this.myAccountData)return;const{search:n}=this.myAccountData;n?.app_id&&n?.api_key&&(this.algoliaClient=i(n.app_id,n.api_key),c.init(n.app_id,n.api_key).then((()=>{this.myAccountUser&&c.setUser(this.myAccountUser.uuid)})),this.searchIndices=this.myAccountData.search.indeces,this.searchIndices.forEach((n=>{n.algoliaIndex=this.algoliaClient.initIndex(n.index)})),this.searchIndex||(this.searchIndex=this.searchIndices[0].name))}onSearchSubmit=async n=>{if(n&&n.preventDefault(),!this.activeIndex||!this.myAccountData||this._searchValue?.length<3)return;this.searchResults||await this.doAlgoliaSearch();const{search:e}=this.myAccountData,a=this.searchResults?.results.find((n=>this.activeIndex.index===n.index)),{index:t,domain:o,filters:i,query:r,replicas:s}=a;this.searchBarShown=!1,this.nanoSearchResult.emit({meta:{indexTitle:a.indexName,index:t,domain:o,filters:i,query:r,replicas:s},client:{apiKey:e.api_key,appId:e.app_id}})};async doAlgoliaSearch(){if(this.searchResults=null,!this.algoliaClient)return;const n=this.searchIndices.map((n=>{const e={clickAnalytics:!0,attributesToSnippet:["body:5","title:8"],indexName:n.index,query:this._searchValue,facets:n.filters,hitsPerPage:5,filters:""};return"Community"===n.name&&(e.filters="created > "+Math.floor((Date.now()-631152e5)/1e3)),e}));try{this.searchLoading=!0,this.searchResults=this.processSearchResults(await this.algoliaClient.search(n))}catch(n){console.error(n),this.nanoSearchError.emit(n)}return this.searchLoading=!1,this.searchResults}processSearchResults(n){const e=n,a=n;return e?.results?(e.results.forEach(((n,a)=>{n={...n,indexName:this.searchIndices[a].name,selected:this.activeIndex.name===this.searchIndices[a].name,domain:this.activeIndex.domain||null,domains:this.myAccountData.domains||null,allGroup:!!this.searchIndices[a].allGroup,filters:this.searchIndices[a].filters,replicas:this.activeIndex.replicas},e.results[a]=this.processSearchResults(n)})),e):(a.hits.map((n=>{n.url&&!n.url.match(/^http/)&&(n.url=location.protocol+"//"+this.domainFor(n.origin)+n.url)})),a)}domainFor(n){if(!this.myAccountData)return"";const e=this.myAccountData.domains.find((e=>e.origin===n));return e?e.domain:""}async setAutocompleteResults(){this.autocompleteResults=null,this._searchValue.length<3?this._searchValue.length||this.nanoSearchReset.emit():this.autocompleteResults=(await this.doAlgoliaSearch())?.results.find((n=>n.selected))}autocompleteSnippet(n){return n._snippetResult?.title?.value||n.title}handleSearchOpenEvent=n=>{n.target.classList.contains("gn__search-dropdown")&&this.searchInput&&(this.searchInput.setFocus(),this.searchBarShown=!0)};handleSearchCloseEvent=n=>{n.target.classList.contains("gn__search-dropdown")&&requestAnimationFrame((()=>this.searchBarShown=!1))};handleSearchTermInputEvent=n=>{"input"===n.detail.type&&this.searchInput.value.length>=3&&(this.autocompleteResults=null,this.searchLoading=!0)};handleSearchTermChangeEvent=n=>{this._searchValue!==n&&(this._searchValue=n,this.setAutocompleteResults())};handleSearchIndexChangeEvent=n=>{if(!n.detail?.value?.length)return;const e=n.detail.value;if(this.activeIndex.index===e)return;const a=this.searchIndices.find((n=>n.index===e));a&&a.algoliaIndex&&(this.searchIndex=a.name,this._searchValue.length>=3&&(this.searchInput.setFocus(),this.searchBarShown=!0,this.setAutocompleteResults()))};constructor(n){e(this,n),this.nanoUserData=a(this,"nanoUserData",7),this.nanoSearchResult=a(this,"nanoSearchResult",7),this.nanoSearchError=a(this,"nanoSearchError",7),this.nanoSearchReset=a(this,"nanoSearchReset",7),this.handleResize=s(this.handleResize,75)}componentWillLoad(){this.handleMyAccountUrl(),this.initSearch(),this.processUserData(),l(this.host.shadowRoot)}componentDidRender(){this.handleResize(),this.setNavItemHover()}loggedInPanel(){if(this.isLoggedIn&&this.myAccountUser)return r("div",{part:"user-panel",class:"gn__user-panel nano-theme-dark"},r("div",{class:"gn__user-panel-head",slot:"label"},r("nano-avatar",{initials:this.myAccountUser.first_name?.charAt(0)+this.myAccountUser.last_name?.charAt(0)},this.myAccountUser.small_avatar_url&&!this.myAccountUser.small_avatar_url.includes("generic")&&r("img",{src:this.myAccountUser.small_avatar_url,alt:"User Avatar",height:40,width:40})),r("div",null,this.myAccountUser.name,r("br",null),this.myAccountUser.job_title&&this.myAccountUser?.company?`${this.myAccountUser.job_title}, ${this.myAccountUser.company}`:this.myAccountUser.job_title||this.myAccountUser.company||"")),r("div",{class:"gn__user-panel-body"},this.userLinks.map((n=>r("a",{href:n.address,target:n.target||void 0},n.title,("Messages"===n.title||n.address.includes(this.msgUrl)||this.msgUrl.includes(n.address))&&this.msgCount>0&&r("nano-badge",{theme:"danger"},this.msgCount))))),r("div",{class:"gn__user-panel-foot"},r("nano-cta",{secondary:!0,size:"small",icon:"false",class:"gn__login-cta"},"string"==typeof this.logoutUrl?r("a",{href:this.formatLoginLink(this.logoutUrl)},"Logout"):r("button",{onClick:this.logoutUrl},"Logout"))))}bpPartials={contact:{tpl:()=>this.contactUrl&&r("a",{href:this.contactUrl},"Contact"),breakpoint:0},mainMenu:{tpl:()=>r("slot",{name:"menu"}),breakpoint:1},logo:{tpl:()=>{},breakpoint:2}};noResultPartial(){if(this.searchLoading||this.autocompleteResults?.hits.length||this._searchValue.length<3)return;const n=[];return"All"===this.searchIndex?(n.push(r("div",{slot:"no-result",class:"gn__search-no-results"},'No results matching for "',r("strong",null,this._searchValue),'" Try another phrase')),n):(this.searchResults?.results.forEach((e=>{e.hits.length&&n.push(r("nano-option",{class:"gn__search-result",onNanoSelect:n=>{n.preventDefault(),this.searchIndex=e.indexName,this.onSearchSubmit(n)}},'Show results for "',r("strong",null,this._searchValue),'" in ',r("strong",null,e.indexName)))})),n.unshift(r("div",{slot:n.length?"list-top":"no-result",class:"gn__search-no-results"},'No results matching for "',r("strong",null,this._searchValue),'" in'," ",r("strong",null,this.searchIndex),". Try another phrase")),n)}render(){const n=this.bpPartials;return r(t,{key:"79ca6089ded878867c3febc0add938f4bc93eabd",class:{"overflow-menu":this.breakpoint>n.mainMenu.breakpoint,"bar-menu":this.breakpoint<=n.mainMenu.breakpoint,"nano-global-nav":!0}},r("div",{key:"87e6512e1973f4e67437959690e1333936e62cb9",class:{gn:!0,"gn__search-open":this.searchBarShown}},r("nano-drawer",{key:"402c74ddc996de4a0568dccd15e2f5e40a25bf7f",ref:n=>this.overflowMenu=n,label:"Main menu",part:"drawer",class:"gn__drawer nano-theme-dark",placement:"start",open:this.overflowOpen,onNanoAfterHide:()=>this.overflowOpen=!1,onNanoAfterShow:()=>this.overflowOpen=!0},r("div",{key:"8d4c585f5a1b14b9bb432904c9527c89a1ab269a",class:"gn__drawer-header",part:"overflow-header",slot:"label"},"Main menu"),r("nav",{key:"3cdd62fbb5664b6ee24c9b4cf440c6ce7a312ebf",class:"gn__drawer-menu",part:"overflow-menu"},this.breakpoint>n.mainMenu.breakpoint?n.mainMenu.tpl():"",r("slot",{key:"9e6b2a9d61043fb7a17d21e8904525dfaeb1c35f",name:"overflow"}))),r("div",{key:"015d506e548f826cf2a74f0fb35ffbbb8b666589",class:"gn__menu-bar-wrapper"},r("div",{key:"d37bdf198530424948dab02fc31c9c8d587bff71",class:"gn__menu-bar",part:"menu-bar",ref:n=>this.mainMenuBar=n},r("nav",{key:"ecc35be807c48079fead123dca093fcdeef0ea37","aria-label":"Global navigation",class:"gn__main-menu "+(this.shouldResize?"resizing":""),part:"main-menu",ref:n=>this.mainMenu=n},this.breakpoint>n.mainMenu.breakpoint&&r("nano-icon-button",{key:"d3d673f2e0c8965d3497ac38dee5dcbe51715d2f",class:"gn__overflow-button",iconName:"light/bars",label:"Open Menu",onClick:()=>this.overflowMenu.show()}),r("slot",{key:"a3cde52880592ad39c88a13c156214cf232536e0",name:"logo"},r("a",{key:"03f442de2365b2df4cc617e891f9fdb47c0b553c",href:this.logoUrl,class:"gn__logo-link",part:"logo-link"},r("img",this.breakpoint<=n.logo.breakpoint?{src:o("../nano-assets/ont-logo.svg"),alt:"Oxford Nanopore Technologies logo. Features a stylised representation of a nanopore,\n (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"}:{src:o("../nano-assets/ont-wheel.svg"),alt:"Oxford Nanopore Technologies logo. A stylised representation of a nanopore,\n (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<=n.mainMenu.breakpoint&&r("div",{key:"daddd483f4767056f6315fae07b23f3fa42516c9",class:"gn__main-menu-links"},n.mainMenu.tpl()),r("div",{key:"91ef351b76c6699960c0f356f5f01eb106182e34",class:"gn__main-menu-actions"},!this.myAccountData||!!this.searchIndices.length&&r("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},r("nano-icon-button",{key:"cefaae614f193e02118476a060bfc8eb5ba71d92",class:"gn__search-button",slot:"trigger",iconName:"light/magnifying-glass",label:"Search"}),r("form",{key:"bda3ff083a6808046f80336b93fa6a9ee7bdf21b",ref:n=>this.searchForm=n,class:"gn__search-form",part:"search-form",onSubmit:this.onSearchSubmit},this.searchIndices.length>1&&r("nano-select",{key:"0147d8c7add407f1993850ac72a7765c4a5b0504",part:"search-select",label:"Which site do you wish to search in?",mask:!0,hideLabel:!0,value:this.activeIndex?.index,onNanoChange:this.handleSearchIndexChangeEvent},this.searchIndices.map((n=>r("nano-option",{selected:n.name===this.searchIndex,value:n.index},n.name||n.index)))),r("nano-input",{key:"0513a5ff74d0c0d1b5f88660f8bd1818958face2",ref:n=>this.searchInput=n,part:"search-input",label:"Search Oxford Nanopore Technologies",placeholder:"Search Oxford Nanopore...",hideLabel:!0,clearable:!0,showInlineError:!1,onNanoChange:n=>{this.handleSearchTermChangeEvent(n.detail.value)},onNanoInput:this.handleSearchTermInputEvent,debounce:500,value:this._searchValue},r("nano-icon-button",{key:"a309cc734af7faec9310983ad85a2a119faaae54",slot:"end","icon-name":"light/magnifying-glass",label:"Search",onClick:this.onSearchSubmit}),r("nano-datalist",{key:"e460a1e0b1bcfd0cf1e6a7ab9bdb8b9de3e1eca3",class:"gn__search-results",onNanoSelect:n=>n.preventDefault(),dropDownConfig:{tetherTo:this.searchForm},disableFilter:!0},this.searchLoading&&r("div",{key:"586f5f2c0b5a70ee6076da48d795b52def4a9dac",slot:"no-result",class:"gn__search-loading"},r("nano-spinner",{key:"45656109a08eea5467f7ae306f31581a82f785c8"},"Searching...")),this.noResultPartial(),!!this.autocompleteResults?.hits.length&&[this.autocompleteResults.hits.map(((n,e)=>r("nano-option",{href:n.url,class:"gn__search-result",onClick:()=>{c.sendClick({index:this.activeIndex.index,eventName:"Global nav quick search - search result clicked",queryID:this.autocompleteResults.queryID,objectIDs:[n.objectID],positions:[e+1]})}},r("span",{innerHTML:this.autocompleteSnippet(n)})))),r("nano-option",{key:"1ff8c43585ef9863aacbe489b836889016e14fb3",class:"gn__search-viewall",onNanoSelect:this.onSearchSubmit},"View all results")])))),r("div",{key:"d997f29cc0d38caa6f268ad692194f68d43fa1d8",class:"gn__cart"},this.cartUrl&&[r("nano-icon-button",{key:"992788e9a06e19d3a75d4b8d2439f1900bfcde3e",iconName:"light/cart-shopping",label:"View your cart",href:this.cartUrl}),!!this.cartCount&&r("nano-badge",{key:"b7e6532aee69cb21901faaead2cd0e88c18f6e75",theme:"danger"},this.cartCount>9?"9+":this.cartCount)]),this.breakpoint<=n.contact.breakpoint?n.contact.tpl():"",this.isLoggedIn?r("nano-dropdown",{dialogTitle:"User menu",class:"gn__user-dropdown",distance:10,placement:"bottom-end"},r("button",{slot:"trigger",class:"gn__user-dropdown-trigger"},r("nano-icon",{name:"light/user"}),r("nano-icon",{name:"light/chevron-down",class:"gn__user-dropdown-chevron"}),!!this.msgCount&&r("nano-badge",{theme:"danger"},this.msgCount>9?"9+":this.msgCount)),this.loggedInPanel()):r("nano-cta",{secondary:!0,size:"small",icon:"false",class:"gn__login-cta"},"string"==typeof this.loginUrl?r("a",{href:this.formatLoginLink(this.loginUrl)},"Login"):r("button",{onClick:this.loginUrl},"Login")))))),r("nano-global-search-results",{key:"fbdd99411cd64c03f00f64120367bc503b4560ec",part:"site-search-results"},r("div",{key:"6ba33f25b6af1e5b58426d05b51ef9aaa221daf8",class:"gn__site",part:"site-wrapper"},r("slot",{key:"fbf0bf5f7eb0c4b154537e66ce3f4b0acea4a10e"})))))}static get assetsDirs(){return["assets"]}static get watchers(){return{myAccountUrl:["handleMyAccountUrl"],myAccountData:["processUserData","initSearch"],shouldResize:["breakpointChanged"],breakpoint:["breakpointChanged"],searchIndices:["handleSearchIndex"],searchIndex:["handleSearchIndex"]}}};h.style=':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}';export{h as nano_global_nav}
|
|
4
|
+
import{a as n,r as e,c as a,d as t,l as o}from"./index-RXFO3HxS.js";import{a as i}from"./algoliasearch-lite.esm.browser-BTIloVU8.js";import{h as r}from"./renderer-B_wACs4w.js";import{d as s}from"./throttle-C93FMm2Z.js";import{a as l}from"./style-DZBZHpf8.js";import{s as c}from"./search-insights-8OL2oeQN.js";const h=class{get host(){return n(this)}overflowMenu;overflowOpen=!1;logoUrl=location.protocol+"//"+location.host;cartUrl="";msgUrl="";loginUrl="";logoutUrl="";contactUrl="https://nanoporetech.com/contact";sessionRedirect=window.location.href;cartCount=0;msgCount=0;async openOverflowMenu(){this.overflowOpen=!0}async closeOverflowMenu(){this.overflowOpen=!1}myAccountUrl;async handleMyAccountUrl(){this.myAccountUrl&&("local-logged-in"!==this.myAccountUrl?"local-logged-out"!==this.myAccountUrl?fetch(this.myAccountUrl+"/nav_bar_data.json",{credentials:"include"}).then((n=>n.json())).then((n=>{this.myAccountData=n})).catch((n=>{console.error("Error fetching MyAccount data",n)})):this.myAccountData=await import("./local-logged-out-BuucpKxf.js"):this.myAccountData=await import("./local-logged-in-B3A7tw10.js"))}myAccountData;nanoUserData;userLinks=[];isLoggedIn=!1;get myAccountUser(){return this.myAccountData?.user?.uuid?this.myAccountData.user:null}processUserData(){if(this.myAccountData&&(this.loginUrl=this.loginUrl||this.myAccountData.urls?.login,this.cartUrl=this.cartUrl||this.myAccountData.urls?.cart,this.cartCount=this.cartCount||this.myAccountData.cart?.count),!this.myAccountUser)return this.isLoggedIn=!1,this.userLinks=[],this.msgUrl="",this.msgCount=0,void this.nanoUserData.emit(null);this.userLinks=this.myAccountData?.links?.filter((n=>"profile-panel-list"===n.area))||[],this.logoutUrl=this.logoutUrl||this.myAccountData.urls?.logout,this.msgUrl=this.msgUrl||this.myAccountData.urls?.messages,this.msgCount=this.msgCount||this.myAccountData.notifications?.count,this.isLoggedIn=!0,this.nanoUserData.emit(this.myAccountUser)}formatLoginLink(n){if(!n)return"";if(!this.sessionRedirect)return n;const e=encodeURIComponent(this.sessionRedirect);return n.endsWith("=")?n+e:n.includes("?")?n+"&RelayState="+e:n+"?RelayState="+e}resizeObserver;cachedWidth;mainMenu;_mainMenuBar;get mainMenuBar(){return this._mainMenuBar}set mainMenuBar(n){this._mainMenuBar!==n&&(this._mainMenuBar=n,this.addMainmenuRo())}async triggerResize(){this.shouldResize=!0,this.breakpoint=0}shouldResize=!0;breakpoint=0;breakpointChanged(){this.breakpoint<this.bpPartials.mainMenu.breakpoint&&!1===this.shouldResize&&(this.overflowOpen=!1),this.setNavItemHover()}setNavItemHover(){const n=this.breakpoint<=this.bpPartials.mainMenu.breakpoint;this.host.querySelectorAll("nano-nav-item").forEach((e=>{e.openOnHover=n})),this.host.querySelectorAll("nano-mdd").forEach((e=>{e.accordion=!n}))}debounceResetResize=s((()=>{this.shouldResize=!1}),300);addMainmenuRo(){this.removeMainmenuRo(),(this.resizeObserver=new ResizeObserver((()=>{this.shouldResize||this.mainMenuBar.clientWidth>=this.cachedWidth&&0===this.breakpoint||this.mainMenuBar.clientWidth<=this.cachedWidth&&this.mainMenuBar.clientWidth>=this.mainMenu.scrollWidth||(this.shouldResize=!0,this.breakpoint=0)}))).observe(this.mainMenuBar)}removeMainmenuRo(){this.resizeObserver&&(this.mainMenuBar?this.resizeObserver.unobserve(this.mainMenuBar):this.resizeObserver.disconnect())}handleResize=()=>{this.shouldResize&&(this.breakpoint<4&&this.mainMenu.scrollWidth>this.mainMenuBar.clientWidth?this.breakpoint++:(this.cachedWidth=this.mainMenuBar.clientWidth,this.debounceResetResize()))};algoliaClient;searchResults;searchInput;activeIndex;autocompleteResults;searchForm;searchIndices=[];searchBarShown=!1;searchLoading=!1;_searchValue="";nanoSearchResult;nanoSearchError;nanoSearchReset;searchIndex="All";get searchValue(){return this._searchValue}set searchValue(n){n&&this.host.componentOnReady().then((()=>{this.searchBarShown=!0,this.handleSearchTermChangeEvent(n)}))}async submitSearch(){this.onSearchSubmit()}handleSearchIndex(){if(this.searchIndices?.length){if(this.searchIndex)return this.activeIndex=this.searchIndices.find((n=>n.name===this.searchIndex))||this.searchIndices[0],this.activeIndex;this.activeIndex=this.searchIndices[0]}}initSearch(){if(!this.myAccountData)return;const{search:n}=this.myAccountData;n?.app_id&&n?.api_key&&(this.algoliaClient=i(n.app_id,n.api_key),c.init(n.app_id,n.api_key).then((()=>{this.myAccountUser&&c.setUser(this.myAccountUser.uuid)})),this.searchIndices=this.myAccountData.search.indeces,this.searchIndices.forEach((n=>{n.algoliaIndex=this.algoliaClient.initIndex(n.index)})),this.searchIndex||(this.searchIndex=this.searchIndices[0].name))}onSearchSubmit=async n=>{if(n&&n.preventDefault(),!this.activeIndex||!this.myAccountData||this._searchValue?.length<3)return;this.searchResults||await this.doAlgoliaSearch();const{search:e}=this.myAccountData,a=this.searchResults?.results.find((n=>this.activeIndex.index===n.index)),{index:t,domain:o,filters:i,query:r,replicas:s}=a;this.searchBarShown=!1,this.nanoSearchResult.emit({meta:{indexTitle:a.indexName,index:t,domain:o,filters:i,query:r,replicas:s},client:{apiKey:e.api_key,appId:e.app_id}})};async doAlgoliaSearch(){if(this.searchResults=null,!this.algoliaClient)return;const n=this.searchIndices.map((n=>{const e={clickAnalytics:!0,attributesToSnippet:["body:5","title:8"],indexName:n.index,query:this._searchValue,facets:n.filters,hitsPerPage:5,filters:""};return"Community"===n.name&&(e.filters="created > "+Math.floor((Date.now()-631152e5)/1e3)),e}));try{this.searchLoading=!0,this.searchResults=this.processSearchResults(await this.algoliaClient.search(n))}catch(n){console.error(n),this.nanoSearchError.emit(n)}return this.searchLoading=!1,this.searchResults}processSearchResults(n){const e=n,a=n;return e?.results?(e.results.forEach(((n,a)=>{n={...n,indexName:this.searchIndices[a].name,selected:this.activeIndex.name===this.searchIndices[a].name,domain:this.activeIndex.domain||null,domains:this.myAccountData.domains||null,allGroup:!!this.searchIndices[a].allGroup,filters:this.searchIndices[a].filters,replicas:this.activeIndex.replicas},e.results[a]=this.processSearchResults(n)})),e):(a.hits.map((n=>{n.url&&!n.url.match(/^http/)&&(n.url=location.protocol+"//"+this.domainFor(n.origin)+n.url)})),a)}domainFor(n){if(!this.myAccountData)return"";const e=this.myAccountData.domains.find((e=>e.origin===n));return e?e.domain:""}async setAutocompleteResults(){this.autocompleteResults=null,this._searchValue.length<3?this._searchValue.length||this.nanoSearchReset.emit():this.autocompleteResults=(await this.doAlgoliaSearch())?.results.find((n=>n.selected))}autocompleteSnippet(n){return n._snippetResult?.title?.value||n.title}handleSearchOpenEvent=n=>{n.target.classList.contains("gn__search-dropdown")&&this.searchInput&&(this.searchInput.setFocus(),this.searchBarShown=!0)};handleSearchCloseEvent=n=>{n.target.classList.contains("gn__search-dropdown")&&requestAnimationFrame((()=>this.searchBarShown=!1))};handleSearchTermInputEvent=n=>{"input"===n.detail.type&&this.searchInput.value.length>=3&&(this.autocompleteResults=null,this.searchLoading=!0)};handleSearchTermChangeEvent=n=>{this._searchValue!==n&&(this._searchValue=n,this.setAutocompleteResults())};handleSearchIndexChangeEvent=n=>{if(!n.detail?.value?.length)return;const e=n.detail.value;if(this.activeIndex.index===e)return;const a=this.searchIndices.find((n=>n.index===e));a&&a.algoliaIndex&&(this.searchIndex=a.name,this._searchValue.length>=3&&(this.searchInput.setFocus(),this.searchBarShown=!0,this.setAutocompleteResults()))};constructor(n){e(this,n),this.nanoUserData=a(this,"nanoUserData",7),this.nanoSearchResult=a(this,"nanoSearchResult",7),this.nanoSearchError=a(this,"nanoSearchError",7),this.nanoSearchReset=a(this,"nanoSearchReset",7),this.handleResize=s(this.handleResize,75)}componentWillLoad(){this.handleMyAccountUrl(),this.initSearch(),this.processUserData(),l(this.host.shadowRoot)}componentDidRender(){this.handleResize(),this.setNavItemHover()}loggedInPanel(){if(this.isLoggedIn&&this.myAccountUser)return r("div",{part:"user-panel",class:"gn__user-panel nano-theme-dark"},r("div",{class:"gn__user-panel-head",slot:"label"},r("nano-avatar",{initials:this.myAccountUser.first_name?.charAt(0)+this.myAccountUser.last_name?.charAt(0)},this.myAccountUser.small_avatar_url&&!this.myAccountUser.small_avatar_url.includes("generic")&&r("img",{src:this.myAccountUser.small_avatar_url,alt:"User Avatar",height:40,width:40})),r("div",null,this.myAccountUser.name,r("br",null),this.myAccountUser.job_title&&this.myAccountUser?.company?`${this.myAccountUser.job_title}, ${this.myAccountUser.company}`:this.myAccountUser.job_title||this.myAccountUser.company||"")),r("div",{class:"gn__user-panel-body"},this.userLinks.map((n=>r("a",{href:n.address,target:n.target||void 0},n.title,("Messages"===n.title||n.address.includes(this.msgUrl)||this.msgUrl.includes(n.address))&&this.msgCount>0&&r("nano-badge",{theme:"danger"},this.msgCount))))),r("div",{class:"gn__user-panel-foot"},r("nano-cta",{secondary:!0,size:"small",icon:"false",class:"gn__login-cta"},"string"==typeof this.logoutUrl?r("a",{href:this.formatLoginLink(this.logoutUrl)},"Logout"):r("button",{onClick:this.logoutUrl},"Logout"))))}bpPartials={contact:{tpl:()=>this.contactUrl&&r("a",{href:this.contactUrl},"Contact"),breakpoint:0},mainMenu:{tpl:()=>r("slot",{name:"menu"}),breakpoint:1},logo:{tpl:()=>{},breakpoint:2}};noResultPartial(){if(this.searchLoading||this.autocompleteResults?.hits.length||this._searchValue.length<3)return;const n=[];return"All"===this.searchIndex?(n.push(r("div",{slot:"no-result",class:"gn__search-no-results"},'No results matching for "',r("strong",null,this._searchValue),'" Try another phrase')),n):(this.searchResults?.results.forEach((e=>{e.hits.length&&n.push(r("nano-option",{class:"gn__search-result",onNanoSelect:n=>{n.preventDefault(),this.searchIndex=e.indexName,this.onSearchSubmit(n)}},'Show results for "',r("strong",null,this._searchValue),'" in ',r("strong",null,e.indexName)))})),n.unshift(r("div",{slot:n.length?"list-top":"no-result",class:"gn__search-no-results"},'No results matching for "',r("strong",null,this._searchValue),'" in'," ",r("strong",null,this.searchIndex),". Try another phrase")),n)}render(){const n=this.bpPartials;return r(t,{key:"08fd38cc2711a83d40053e7ca147ce3a9ef38ce3",class:{"overflow-menu":this.breakpoint>n.mainMenu.breakpoint,"bar-menu":this.breakpoint<=n.mainMenu.breakpoint,"nano-global-nav":!0}},r("div",{key:"63b69c051b64880f07dc2c309064a3fd9e4490e3",class:{gn:!0,"gn__search-open":this.searchBarShown}},r("nano-drawer",{key:"a1db81578932ba08842ab49a3ff0a34f9d2afd73",ref:n=>this.overflowMenu=n,label:"Main menu",part:"drawer",class:"gn__drawer nano-theme-dark",placement:"start",open:this.overflowOpen,onNanoAfterHide:()=>this.overflowOpen=!1,onNanoAfterShow:()=>this.overflowOpen=!0},r("div",{key:"3ee1efdef44a84b0fbf3434392e2fcb617abbfab",class:"gn__drawer-header",part:"overflow-header",slot:"label"},"Main menu"),r("nav",{key:"bea757cb52809fc472dbd5055b00462801f2a2a9",class:"gn__drawer-menu",part:"overflow-menu"},this.breakpoint>n.mainMenu.breakpoint?n.mainMenu.tpl():"",r("slot",{key:"571b994b306beacf7342536beb6bbde5c261a677",name:"overflow"}))),r("div",{key:"1bfbaa6397db0959e781a62a824b79929ac82468",class:"gn__menu-bar-wrapper"},r("div",{key:"4dff6a82f085798b3ebd30bb01b960b9c2065b46",class:"gn__menu-bar",part:"menu-bar",ref:n=>this.mainMenuBar=n},r("nav",{key:"3e56113c9377dba138ec7b37f31f144d337fc707","aria-label":"Global navigation",class:"gn__main-menu "+(this.shouldResize?"resizing":""),part:"main-menu",ref:n=>this.mainMenu=n},this.breakpoint>n.mainMenu.breakpoint&&r("nano-icon-button",{key:"3667ae378b645ae6440126c591f6fe656a9b783e",class:"gn__overflow-button",iconName:"light/bars",label:"Open Menu",onClick:()=>this.overflowMenu.show()}),r("slot",{key:"742068e692bdd49fd0999568db15df4d84d74084",name:"logo"},r("a",{key:"4584b27ecd617f2d176074f84626b2759bcdd164",href:this.logoUrl,class:"gn__logo-link",part:"logo-link"},r("img",this.breakpoint<=n.logo.breakpoint?{src:o("../nano-assets/ont-logo.svg"),alt:"Oxford Nanopore Technologies logo. Features a stylised representation of a nanopore,\n (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"}:{src:o("../nano-assets/ont-wheel.svg"),alt:"Oxford Nanopore Technologies logo. A stylised representation of a nanopore,\n (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<=n.mainMenu.breakpoint&&r("div",{key:"a03353f5db8f5fd8cbb02219c1f63d04e74c8ca8",class:"gn__main-menu-links"},n.mainMenu.tpl()),r("div",{key:"5579bee39208817f0fffb5ae97b9cf6b192bbcd6",class:"gn__main-menu-actions"},!this.myAccountData||!!this.searchIndices.length&&r("nano-dropdown",{key:"838047989bda4a5991bbe8a2bd4f8530524918d5",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},r("nano-icon-button",{key:"05c65d9f0d6e6570e3bef62ca535da36655ce021",class:"gn__search-button",slot:"trigger",iconName:"light/magnifying-glass",label:"Search"}),r("form",{key:"2562ec900848f8f7b4f4f9f696a187a14a457f7d",ref:n=>this.searchForm=n,class:"gn__search-form",part:"search-form",onSubmit:this.onSearchSubmit},this.searchIndices.length>1&&r("nano-select",{key:"181f2d8f7fa89439f57af21b489beccda196cf34",part:"search-select",label:"Which site do you wish to search in?",mask:!0,hideLabel:!0,value:this.activeIndex?.index,onNanoChange:this.handleSearchIndexChangeEvent},this.searchIndices.map((n=>r("nano-option",{selected:n.name===this.searchIndex,value:n.index},n.name||n.index)))),r("nano-input",{key:"2163e7a28516ba6e9f0c3d7e2e6a64b6fea3a9f0",ref:n=>this.searchInput=n,part:"search-input",label:"Search Oxford Nanopore Technologies",placeholder:"Search Oxford Nanopore...",hideLabel:!0,clearable:!0,showInlineError:!1,onNanoChange:n=>{this.handleSearchTermChangeEvent(n.detail.value)},onNanoInput:this.handleSearchTermInputEvent,debounce:500,value:this._searchValue},r("nano-icon-button",{key:"6d85d49f3da82a2e970a8d54b778e0c9ef6ce563",slot:"end","icon-name":"light/magnifying-glass",label:"Search",onClick:this.onSearchSubmit}),r("nano-datalist",{key:"70928f0886130da02bb02c88f75b8d55650612f2",class:"gn__search-results",onNanoSelect:n=>n.preventDefault(),dropDownConfig:{tetherTo:this.searchForm},disableFilter:!0},this.searchLoading&&r("div",{key:"223c85ed29b119cddb61d7e6cb88a7a4e3e15e8f",slot:"no-result",class:"gn__search-loading"},r("nano-spinner",{key:"cf014da5a7f18f2d84251f825a1718c270a68162"},"Searching...")),this.noResultPartial(),!!this.autocompleteResults?.hits.length&&[this.autocompleteResults.hits.map(((n,e)=>r("nano-option",{href:n.url,class:"gn__search-result",onClick:()=>{c.sendClick({index:this.activeIndex.index,eventName:"Global nav quick search - search result clicked",queryID:this.autocompleteResults.queryID,objectIDs:[n.objectID],positions:[e+1]})}},r("span",{innerHTML:this.autocompleteSnippet(n)})))),r("nano-option",{key:"ca2e52576b2faa6f35c2377591212c7a37c2355e",class:"gn__search-viewall",onNanoSelect:this.onSearchSubmit},"View all results")])))),r("div",{key:"558eea256b3807c8066cfad3d303dfdd23cc7af2",class:"gn__cart"},this.cartUrl&&[r("nano-icon-button",{key:"64fa87c0f21a947bed221ac4cf4f1996cd39f00c",iconName:"light/cart-shopping",label:"View your cart",href:this.cartUrl}),!!this.cartCount&&r("nano-badge",{key:"26f65729803a1f345c83603a481321c86e770e33",theme:"danger"},this.cartCount>9?"9+":this.cartCount)]),this.breakpoint<=n.contact.breakpoint?n.contact.tpl():"",this.isLoggedIn?r("nano-dropdown",{dialogTitle:"User menu",class:"gn__user-dropdown",distance:10,placement:"bottom-end"},r("button",{slot:"trigger",class:"gn__user-dropdown-trigger"},r("nano-icon",{name:"light/user"}),r("nano-icon",{name:"light/chevron-down",class:"gn__user-dropdown-chevron"}),!!this.msgCount&&r("nano-badge",{theme:"danger"},this.msgCount>9?"9+":this.msgCount)),this.loggedInPanel()):r("nano-cta",{secondary:!0,size:"small",icon:"false",class:"gn__login-cta"},"string"==typeof this.loginUrl?r("a",{href:this.formatLoginLink(this.loginUrl)},"Login"):r("button",{onClick:this.loginUrl},"Login")))))),r("nano-global-search-results",{key:"60e0568f58c6a277b6a09c3541bb561b0dab1026",part:"site-search-results"},r("div",{key:"743e3f716d1af6337ee95a8e48b017e7f9875770",class:"gn__site",part:"site-wrapper"},r("slot",{key:"fc1621f5b67db233aa7332d7a7d0334563ee7cd9"})))))}static get assetsDirs(){return["assets"]}static get watchers(){return{myAccountUrl:["handleMyAccountUrl"],myAccountData:["processUserData","initSearch"],shouldResize:["breakpointChanged"],breakpoint:["breakpointChanged"],searchIndices:["handleSearchIndex"],searchIndex:["handleSearchIndex"]}}};h.style=':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}';export{h as nano_global_nav}
|
package/docs-json.json
CHANGED
package/hydrate/index.js
CHANGED
|
@@ -13006,7 +13006,8 @@ class Dropdown {
|
|
|
13006
13006
|
positioner;
|
|
13007
13007
|
accessibleTrigger;
|
|
13008
13008
|
didLoad = false;
|
|
13009
|
-
|
|
13009
|
+
// only set when opened via keyboard; consumed (and reset) once the open transition ends
|
|
13010
|
+
focusFirstEle = false;
|
|
13010
13011
|
get menu() {
|
|
13011
13012
|
return this.host.querySelector(transformTag('nano-menu'));
|
|
13012
13013
|
}
|
|
@@ -13340,12 +13341,12 @@ class Dropdown {
|
|
|
13340
13341
|
this.popover.destroy();
|
|
13341
13342
|
}
|
|
13342
13343
|
render() {
|
|
13343
|
-
return (h(Host, { key: '
|
|
13344
|
+
return (h(Host, { key: '00d9c9f79a99c0e2f926e4e8482cd1f06badfa73', class: "nano-dropdown" }, h("div", { key: 'b63f546d7d45cac07dded72bf666b4153df7e874', part: "base", id: this.dropdownId, class: {
|
|
13344
13345
|
dropdown: true,
|
|
13345
13346
|
'dropdown--open': this.open,
|
|
13346
|
-
} }, h("span", { key: '
|
|
13347
|
+
} }, h("span", { key: '7dc63a96ced0d342ee725ce6cfe84af479d75ebc', part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onKeyDown: this.handleTriggerKeyDown, onClick: this.togglePanel }, h("slot", { key: 'aee47edcef94de976c86780a91ae49e5052e8fc0', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: '3bbcc7e43091542e909827c00cf84b36baef806c', ref: (el) => (this.positioner = el), class: "dropdown__positioner", popover: "manual", id: this.dropdownId + '-positioner' }, h("div", { key: 'a94cd6ea9bbaaa3a8b743035746252666253fa17', ref: (el) => (this.panel = el), part: "panel", class: `dropdown__panel ${this.placement.split('-').join(' ')}`, "aria-hidden": !this.open, role: this.host.getAttribute('role') === 'group' ? 'group' : 'dialog', "aria-modal": this.host.getAttribute('role') === 'group' ? undefined : 'true', "aria-labelledby": this.dialogTitle ? this.labelId : undefined, tabIndex: this.isOverflowing() ? 0 : undefined }, this.dialogTitle && (h("span", { key: '39622ee9886cd0094891032b4c939c6e420cd19d', id: this.labelId, class: "dropdown__accessible-title", "aria-live": this.host.getAttribute('role') === 'group'
|
|
13347
13348
|
? undefined
|
|
13348
|
-
: 'polite' }, this.dialogTitle)), h("slot", { key: '
|
|
13349
|
+
: 'polite' }, this.dialogTitle)), h("slot", { key: '39b7b9392d4649e6141dec80a95c56a9f176ac5d' }))))));
|
|
13349
13350
|
}
|
|
13350
13351
|
static get watchers() { return {
|
|
13351
13352
|
"open": ["handleOpenChange"],
|
|
@@ -14815,7 +14816,8 @@ class GlobalNav {
|
|
|
14815
14816
|
this.myAccountData = (await Promise.resolve().then(function () { return localLoggedOut$1; }));
|
|
14816
14817
|
return;
|
|
14817
14818
|
}
|
|
14818
|
-
|
|
14819
|
+
// MyAccount is cross-origin; send its session cookies or the user always appears logged out
|
|
14820
|
+
fetch(this.myAccountUrl + '/nav_bar_data.json', { credentials: 'include' })
|
|
14819
14821
|
.then((res) => res.json())
|
|
14820
14822
|
.then((data) => {
|
|
14821
14823
|
this.myAccountData = data;
|
|
@@ -15266,21 +15268,21 @@ class GlobalNav {
|
|
|
15266
15268
|
}
|
|
15267
15269
|
render() {
|
|
15268
15270
|
const bpps = this.bpPartials;
|
|
15269
|
-
return (h(Host, { key: '
|
|
15271
|
+
return (h(Host, { key: '08fd38cc2711a83d40053e7ca147ce3a9ef38ce3', class: {
|
|
15270
15272
|
'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
|
|
15271
15273
|
'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
|
|
15272
15274
|
'nano-global-nav': true,
|
|
15273
|
-
} }, h("div", { key: '
|
|
15275
|
+
} }, h("div", { key: '63b69c051b64880f07dc2c309064a3fd9e4490e3', class: {
|
|
15274
15276
|
gn: true,
|
|
15275
15277
|
'gn__search-open': this.searchBarShown,
|
|
15276
|
-
} }, h("nano-drawer", { key: '
|
|
15278
|
+
} }, h("nano-drawer", { key: 'a1db81578932ba08842ab49a3ff0a34f9d2afd73', 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: '3ee1efdef44a84b0fbf3434392e2fcb617abbfab', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: 'bea757cb52809fc472dbd5055b00462801f2a2a9', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
|
|
15277
15279
|
? bpps.mainMenu.tpl()
|
|
15278
|
-
: '', h("slot", { key: '
|
|
15280
|
+
: '', h("slot", { key: '571b994b306beacf7342536beb6bbde5c261a677', name: "overflow" }))), h("div", { key: '1bfbaa6397db0959e781a62a824b79929ac82468', class: "gn__menu-bar-wrapper" }, h("div", { key: '4dff6a82f085798b3ebd30bb01b960b9c2065b46', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: '3e56113c9377dba138ec7b37f31f144d337fc707', "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: '3667ae378b645ae6440126c591f6fe656a9b783e', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '742068e692bdd49fd0999568db15df4d84d74084', name: "logo" }, h("a", { key: '4584b27ecd617f2d176074f84626b2759bcdd164', 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,
|
|
15279
15281
|
(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,
|
|
15280
|
-
(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: '
|
|
15281
|
-
(!!this.searchIndices.length && (h("nano-dropdown", { key: '
|
|
15282
|
+
(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: 'a03353f5db8f5fd8cbb02219c1f63d04e74c8ca8', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: '5579bee39208817f0fffb5ae97b9cf6b192bbcd6', class: "gn__main-menu-actions" }, !this.myAccountData ||
|
|
15283
|
+
(!!this.searchIndices.length && (h("nano-dropdown", { key: '838047989bda4a5991bbe8a2bd4f8530524918d5', 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: '05c65d9f0d6e6570e3bef62ca535da36655ce021', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), h("form", { key: '2562ec900848f8f7b4f4f9f696a187a14a457f7d', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '181f2d8f7fa89439f57af21b489beccda196cf34', 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: '2163e7a28516ba6e9f0c3d7e2e6a64b6fea3a9f0', 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) => {
|
|
15282
15284
|
this.handleSearchTermChangeEvent(e.detail.value);
|
|
15283
|
-
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon-button", { key: '
|
|
15285
|
+
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon-button", { key: '6d85d49f3da82a2e970a8d54b778e0c9ef6ce563', slot: "end", "icon-name": "light/magnifying-glass", label: "Search", onClick: this.onSearchSubmit }), h("nano-datalist", { key: '70928f0886130da02bb02c88f75b8d55650612f2', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '223c85ed29b119cddb61d7e6cb88a7a4e3e15e8f', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: 'cf014da5a7f18f2d84251f825a1718c270a68162' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
|
|
15284
15286
|
this.autocompleteResults.hits.map((hit, i) => (h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
|
|
15285
15287
|
searchInsight.sendClick({
|
|
15286
15288
|
index: this.activeIndex.index,
|
|
@@ -15290,13 +15292,13 @@ class GlobalNav {
|
|
|
15290
15292
|
positions: [i + 1],
|
|
15291
15293
|
});
|
|
15292
15294
|
} }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
|
|
15293
|
-
h("nano-option", { key: '
|
|
15294
|
-
])))))), h("div", { key: '
|
|
15295
|
-
h("nano-icon-button", { key: '
|
|
15296
|
-
!!this.cartCount && (h("nano-badge", { key: '
|
|
15295
|
+
h("nano-option", { key: 'ca2e52576b2faa6f35c2377591212c7a37c2355e', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
|
|
15296
|
+
])))))), h("div", { key: '558eea256b3807c8066cfad3d303dfdd23cc7af2', class: "gn__cart" }, this.cartUrl && [
|
|
15297
|
+
h("nano-icon-button", { key: '64fa87c0f21a947bed221ac4cf4f1996cd39f00c', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }),
|
|
15298
|
+
!!this.cartCount && (h("nano-badge", { key: '26f65729803a1f345c83603a481321c86e770e33', theme: "danger" }, this.cartCount > 9 ? '9+' : this.cartCount)),
|
|
15297
15299
|
]), this.breakpoint <= bpps.contact.breakpoint
|
|
15298
15300
|
? bpps.contact.tpl()
|
|
15299
|
-
: '', 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: '
|
|
15301
|
+
: '', 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: '60e0568f58c6a277b6a09c3541bb561b0dab1026', part: "site-search-results" }, h("div", { key: '743e3f716d1af6337ee95a8e48b017e7f9875770', class: "gn__site", part: "site-wrapper" }, h("slot", { key: 'fc1621f5b67db233aa7332d7a7d0334563ee7cd9' }))))));
|
|
15300
15302
|
}
|
|
15301
15303
|
static get assetsDirs() { return ["assets"]; }
|
|
15302
15304
|
static get watchers() { return {
|
package/hydrate/index.mjs
CHANGED
|
@@ -13004,7 +13004,8 @@ class Dropdown {
|
|
|
13004
13004
|
positioner;
|
|
13005
13005
|
accessibleTrigger;
|
|
13006
13006
|
didLoad = false;
|
|
13007
|
-
|
|
13007
|
+
// only set when opened via keyboard; consumed (and reset) once the open transition ends
|
|
13008
|
+
focusFirstEle = false;
|
|
13008
13009
|
get menu() {
|
|
13009
13010
|
return this.host.querySelector(transformTag('nano-menu'));
|
|
13010
13011
|
}
|
|
@@ -13338,12 +13339,12 @@ class Dropdown {
|
|
|
13338
13339
|
this.popover.destroy();
|
|
13339
13340
|
}
|
|
13340
13341
|
render() {
|
|
13341
|
-
return (h(Host, { key: '
|
|
13342
|
+
return (h(Host, { key: '00d9c9f79a99c0e2f926e4e8482cd1f06badfa73', class: "nano-dropdown" }, h("div", { key: 'b63f546d7d45cac07dded72bf666b4153df7e874', part: "base", id: this.dropdownId, class: {
|
|
13342
13343
|
dropdown: true,
|
|
13343
13344
|
'dropdown--open': this.open,
|
|
13344
|
-
} }, h("span", { key: '
|
|
13345
|
+
} }, h("span", { key: '7dc63a96ced0d342ee725ce6cfe84af479d75ebc', part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onKeyDown: this.handleTriggerKeyDown, onClick: this.togglePanel }, h("slot", { key: 'aee47edcef94de976c86780a91ae49e5052e8fc0', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: '3bbcc7e43091542e909827c00cf84b36baef806c', ref: (el) => (this.positioner = el), class: "dropdown__positioner", popover: "manual", id: this.dropdownId + '-positioner' }, h("div", { key: 'a94cd6ea9bbaaa3a8b743035746252666253fa17', ref: (el) => (this.panel = el), part: "panel", class: `dropdown__panel ${this.placement.split('-').join(' ')}`, "aria-hidden": !this.open, role: this.host.getAttribute('role') === 'group' ? 'group' : 'dialog', "aria-modal": this.host.getAttribute('role') === 'group' ? undefined : 'true', "aria-labelledby": this.dialogTitle ? this.labelId : undefined, tabIndex: this.isOverflowing() ? 0 : undefined }, this.dialogTitle && (h("span", { key: '39622ee9886cd0094891032b4c939c6e420cd19d', id: this.labelId, class: "dropdown__accessible-title", "aria-live": this.host.getAttribute('role') === 'group'
|
|
13345
13346
|
? undefined
|
|
13346
|
-
: 'polite' }, this.dialogTitle)), h("slot", { key: '
|
|
13347
|
+
: 'polite' }, this.dialogTitle)), h("slot", { key: '39b7b9392d4649e6141dec80a95c56a9f176ac5d' }))))));
|
|
13347
13348
|
}
|
|
13348
13349
|
static get watchers() { return {
|
|
13349
13350
|
"open": ["handleOpenChange"],
|
|
@@ -14813,7 +14814,8 @@ class GlobalNav {
|
|
|
14813
14814
|
this.myAccountData = (await Promise.resolve().then(function () { return localLoggedOut$1; }));
|
|
14814
14815
|
return;
|
|
14815
14816
|
}
|
|
14816
|
-
|
|
14817
|
+
// MyAccount is cross-origin; send its session cookies or the user always appears logged out
|
|
14818
|
+
fetch(this.myAccountUrl + '/nav_bar_data.json', { credentials: 'include' })
|
|
14817
14819
|
.then((res) => res.json())
|
|
14818
14820
|
.then((data) => {
|
|
14819
14821
|
this.myAccountData = data;
|
|
@@ -15264,21 +15266,21 @@ class GlobalNav {
|
|
|
15264
15266
|
}
|
|
15265
15267
|
render() {
|
|
15266
15268
|
const bpps = this.bpPartials;
|
|
15267
|
-
return (h(Host, { key: '
|
|
15269
|
+
return (h(Host, { key: '08fd38cc2711a83d40053e7ca147ce3a9ef38ce3', class: {
|
|
15268
15270
|
'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
|
|
15269
15271
|
'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
|
|
15270
15272
|
'nano-global-nav': true,
|
|
15271
|
-
} }, h("div", { key: '
|
|
15273
|
+
} }, h("div", { key: '63b69c051b64880f07dc2c309064a3fd9e4490e3', class: {
|
|
15272
15274
|
gn: true,
|
|
15273
15275
|
'gn__search-open': this.searchBarShown,
|
|
15274
|
-
} }, h("nano-drawer", { key: '
|
|
15276
|
+
} }, h("nano-drawer", { key: 'a1db81578932ba08842ab49a3ff0a34f9d2afd73', 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: '3ee1efdef44a84b0fbf3434392e2fcb617abbfab', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: 'bea757cb52809fc472dbd5055b00462801f2a2a9', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
|
|
15275
15277
|
? bpps.mainMenu.tpl()
|
|
15276
|
-
: '', h("slot", { key: '
|
|
15278
|
+
: '', h("slot", { key: '571b994b306beacf7342536beb6bbde5c261a677', name: "overflow" }))), h("div", { key: '1bfbaa6397db0959e781a62a824b79929ac82468', class: "gn__menu-bar-wrapper" }, h("div", { key: '4dff6a82f085798b3ebd30bb01b960b9c2065b46', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: '3e56113c9377dba138ec7b37f31f144d337fc707', "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: '3667ae378b645ae6440126c591f6fe656a9b783e', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '742068e692bdd49fd0999568db15df4d84d74084', name: "logo" }, h("a", { key: '4584b27ecd617f2d176074f84626b2759bcdd164', 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,
|
|
15277
15279
|
(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,
|
|
15278
|
-
(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: '
|
|
15279
|
-
(!!this.searchIndices.length && (h("nano-dropdown", { key: '
|
|
15280
|
+
(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: 'a03353f5db8f5fd8cbb02219c1f63d04e74c8ca8', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: '5579bee39208817f0fffb5ae97b9cf6b192bbcd6', class: "gn__main-menu-actions" }, !this.myAccountData ||
|
|
15281
|
+
(!!this.searchIndices.length && (h("nano-dropdown", { key: '838047989bda4a5991bbe8a2bd4f8530524918d5', 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: '05c65d9f0d6e6570e3bef62ca535da36655ce021', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), h("form", { key: '2562ec900848f8f7b4f4f9f696a187a14a457f7d', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '181f2d8f7fa89439f57af21b489beccda196cf34', 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: '2163e7a28516ba6e9f0c3d7e2e6a64b6fea3a9f0', 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) => {
|
|
15280
15282
|
this.handleSearchTermChangeEvent(e.detail.value);
|
|
15281
|
-
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon-button", { key: '
|
|
15283
|
+
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon-button", { key: '6d85d49f3da82a2e970a8d54b778e0c9ef6ce563', slot: "end", "icon-name": "light/magnifying-glass", label: "Search", onClick: this.onSearchSubmit }), h("nano-datalist", { key: '70928f0886130da02bb02c88f75b8d55650612f2', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '223c85ed29b119cddb61d7e6cb88a7a4e3e15e8f', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: 'cf014da5a7f18f2d84251f825a1718c270a68162' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
|
|
15282
15284
|
this.autocompleteResults.hits.map((hit, i) => (h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
|
|
15283
15285
|
searchInsight.sendClick({
|
|
15284
15286
|
index: this.activeIndex.index,
|
|
@@ -15288,13 +15290,13 @@ class GlobalNav {
|
|
|
15288
15290
|
positions: [i + 1],
|
|
15289
15291
|
});
|
|
15290
15292
|
} }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
|
|
15291
|
-
h("nano-option", { key: '
|
|
15292
|
-
])))))), h("div", { key: '
|
|
15293
|
-
h("nano-icon-button", { key: '
|
|
15294
|
-
!!this.cartCount && (h("nano-badge", { key: '
|
|
15293
|
+
h("nano-option", { key: 'ca2e52576b2faa6f35c2377591212c7a37c2355e', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
|
|
15294
|
+
])))))), h("div", { key: '558eea256b3807c8066cfad3d303dfdd23cc7af2', class: "gn__cart" }, this.cartUrl && [
|
|
15295
|
+
h("nano-icon-button", { key: '64fa87c0f21a947bed221ac4cf4f1996cd39f00c', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }),
|
|
15296
|
+
!!this.cartCount && (h("nano-badge", { key: '26f65729803a1f345c83603a481321c86e770e33', theme: "danger" }, this.cartCount > 9 ? '9+' : this.cartCount)),
|
|
15295
15297
|
]), this.breakpoint <= bpps.contact.breakpoint
|
|
15296
15298
|
? bpps.contact.tpl()
|
|
15297
|
-
: '', 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: '
|
|
15299
|
+
: '', 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: '60e0568f58c6a277b6a09c3541bb561b0dab1026', part: "site-search-results" }, h("div", { key: '743e3f716d1af6337ee95a8e48b017e7f9875770', class: "gn__site", part: "site-wrapper" }, h("slot", { key: 'fc1621f5b67db233aa7332d7a7d0334563ee7cd9' }))))));
|
|
15298
15300
|
}
|
|
15299
15301
|
static get assetsDirs() { return ["assets"]; }
|
|
15300
15302
|
static get watchers() { return {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nanoporetech-digital/components",
|
|
3
|
-
"version": "9.1.
|
|
3
|
+
"version": "9.1.7",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"description": "A collection of Oxford Nanopore corporate / digital webcomponents",
|
|
6
6
|
"type": "module",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"smart-array-filter": "^4.0.2",
|
|
57
57
|
"stencil-wormhole": "3.2.1",
|
|
58
58
|
"tyqs": "^0.1.3",
|
|
59
|
-
"@nanoporetech-digital/style": "9.1.
|
|
59
|
+
"@nanoporetech-digital/style": "9.1.7"
|
|
60
60
|
},
|
|
61
61
|
"devDependencies": {
|
|
62
62
|
"@algolia/client-search": "^4.22.1",
|