@nanoporetech-digital/components 9.1.6 → 9.1.8
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-datalist_3.cjs.entry.js +13 -5
- 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/datalist/datalist.js +13 -5
- package/dist/collection/components/dropdown/dropdown.js +5 -4
- package/dist/collection/components/global-nav/global-nav.js +14 -13
- package/dist/components/datalist.js +13 -5
- package/dist/components/dropdown.js +5 -4
- package/dist/components/nano-global-nav.js +14 -13
- package/dist/esm/nano-datalist_3.entry.js +13 -5
- 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-datalist_3.entry.js +1 -1
- 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 +32 -22
- package/hydrate/index.mjs +32 -22
- package/package.json +2 -2
|
@@ -468,6 +468,14 @@ const DataList = class {
|
|
|
468
468
|
this.listBox.setFocus();
|
|
469
469
|
return;
|
|
470
470
|
}
|
|
471
|
+
// When select, mirror native select behaviour. Enter on an open list confirms the
|
|
472
|
+
// (type-to-select) value - already applied - and closes
|
|
473
|
+
if (this.type === 'select' && this.open && e.key === 'Enter') {
|
|
474
|
+
e.preventDefault();
|
|
475
|
+
this.shouldOpen = false;
|
|
476
|
+
this.manageDropdownDisplay();
|
|
477
|
+
return;
|
|
478
|
+
}
|
|
471
479
|
this.shouldOpen = true;
|
|
472
480
|
// open dropdown if possible
|
|
473
481
|
this.manageDropdownDisplay();
|
|
@@ -529,18 +537,18 @@ const DataList = class {
|
|
|
529
537
|
}
|
|
530
538
|
}
|
|
531
539
|
render() {
|
|
532
|
-
return (renderer.h(index.Host, { key: '
|
|
540
|
+
return (renderer.h(index.Host, { key: '1fff00ce17443af0cc012034202f5b9534c3eb8e', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
|
|
533
541
|
? 'Select options from the list below'
|
|
534
|
-
: undefined }, renderer.h("nano-dropdown", { key: '
|
|
542
|
+
: undefined }, renderer.h("nano-dropdown", { key: 'aa52b8a9e448a27b572b533c8a66b582fc631b74', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
|
|
535
543
|
dlist__dropdown: true,
|
|
536
544
|
'dlist--isfiltered': this.isFiltered,
|
|
537
|
-
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, renderer.h("nano-menu", { key: '
|
|
545
|
+
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, renderer.h("nano-menu", { key: 'cefe1e472c018fcf612ea6d30e0a591f0dbfad70', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
|
|
538
546
|
dlist__menu: true,
|
|
539
547
|
'dlist__menu--open': this.dropwdownOpen,
|
|
540
|
-
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, renderer.h("slot", { key: '
|
|
548
|
+
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, renderer.h("slot", { key: '75b377c49d3b3e0f172135e0d705dfe92bcac5aa', name: "list-top" }), renderer.h("slot", { key: 'd89f6cf631fc6faeddf447be926339c85649ff93' }), renderer.h("slot", { key: '782d7373362170ba28647c1302746ee1ae606f87', name: "internal-opts" }), renderer.h("slot", { key: 'e3cf0d800b7219bdce24259eed1134f01349b40c', name: "list-bottom" })), renderer.h("nano-menu", { key: 'e9aafef02fe4d3157629840451da1ff0110a9b8d', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
|
|
541
549
|
dlist__menu: true,
|
|
542
550
|
'dlist__menu--open': this.dropwdownOpen,
|
|
543
|
-
} }, renderer.h("slot", { key: '
|
|
551
|
+
} }, renderer.h("slot", { key: '34cf56ecb0c0a818f151cd8e1cc7e25e0bc04f1c', name: "no-result" })), !!this.actvOptEles && (renderer.h("div", { key: '89aaba1550af0b0a273179bf16a31904840552d4', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
|
|
544
552
|
}
|
|
545
553
|
static get watchers() { return {
|
|
546
554
|
"open": ["openWatcher"],
|
|
@@ -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 {
|
|
@@ -474,6 +474,14 @@ export class DataList {
|
|
|
474
474
|
this.listBox.setFocus();
|
|
475
475
|
return;
|
|
476
476
|
}
|
|
477
|
+
// When select, mirror native select behaviour. Enter on an open list confirms the
|
|
478
|
+
// (type-to-select) value - already applied - and closes
|
|
479
|
+
if (this.type === 'select' && this.open && e.key === 'Enter') {
|
|
480
|
+
e.preventDefault();
|
|
481
|
+
this.shouldOpen = false;
|
|
482
|
+
this.manageDropdownDisplay();
|
|
483
|
+
return;
|
|
484
|
+
}
|
|
477
485
|
this.shouldOpen = true;
|
|
478
486
|
// open dropdown if possible
|
|
479
487
|
this.manageDropdownDisplay();
|
|
@@ -535,18 +543,18 @@ export class DataList {
|
|
|
535
543
|
}
|
|
536
544
|
}
|
|
537
545
|
render() {
|
|
538
|
-
return (h(Host, { key: '
|
|
546
|
+
return (h(Host, { key: '1fff00ce17443af0cc012034202f5b9534c3eb8e', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
|
|
539
547
|
? 'Select options from the list below'
|
|
540
|
-
: undefined }, h("nano-dropdown", { key: '
|
|
548
|
+
: undefined }, h("nano-dropdown", { key: 'aa52b8a9e448a27b572b533c8a66b582fc631b74', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
|
|
541
549
|
dlist__dropdown: true,
|
|
542
550
|
'dlist--isfiltered': this.isFiltered,
|
|
543
|
-
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '
|
|
551
|
+
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: 'cefe1e472c018fcf612ea6d30e0a591f0dbfad70', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
|
|
544
552
|
dlist__menu: true,
|
|
545
553
|
'dlist__menu--open': this.dropwdownOpen,
|
|
546
|
-
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '
|
|
554
|
+
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '75b377c49d3b3e0f172135e0d705dfe92bcac5aa', name: "list-top" }), h("slot", { key: 'd89f6cf631fc6faeddf447be926339c85649ff93' }), h("slot", { key: '782d7373362170ba28647c1302746ee1ae606f87', name: "internal-opts" }), h("slot", { key: 'e3cf0d800b7219bdce24259eed1134f01349b40c', name: "list-bottom" })), h("nano-menu", { key: 'e9aafef02fe4d3157629840451da1ff0110a9b8d', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
|
|
547
555
|
dlist__menu: true,
|
|
548
556
|
'dlist__menu--open': this.dropwdownOpen,
|
|
549
|
-
} }, h("slot", { key: '
|
|
557
|
+
} }, h("slot", { key: '34cf56ecb0c0a818f151cd8e1cc7e25e0bc04f1c', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '89aaba1550af0b0a273179bf16a31904840552d4', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
|
|
550
558
|
}
|
|
551
559
|
static get is() { return "nano-datalist"; }
|
|
552
560
|
static get encapsulation() { return "shadow"; }
|
|
@@ -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"; }
|
|
@@ -470,6 +470,14 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
|
|
|
470
470
|
this.listBox.setFocus();
|
|
471
471
|
return;
|
|
472
472
|
}
|
|
473
|
+
// When select, mirror native select behaviour. Enter on an open list confirms the
|
|
474
|
+
// (type-to-select) value - already applied - and closes
|
|
475
|
+
if (this.type === 'select' && this.open && e.key === 'Enter') {
|
|
476
|
+
e.preventDefault();
|
|
477
|
+
this.shouldOpen = false;
|
|
478
|
+
this.manageDropdownDisplay();
|
|
479
|
+
return;
|
|
480
|
+
}
|
|
473
481
|
this.shouldOpen = true;
|
|
474
482
|
// open dropdown if possible
|
|
475
483
|
this.manageDropdownDisplay();
|
|
@@ -531,18 +539,18 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
|
|
|
531
539
|
}
|
|
532
540
|
}
|
|
533
541
|
render() {
|
|
534
|
-
return (h(Host, { key: '
|
|
542
|
+
return (h(Host, { key: '1fff00ce17443af0cc012034202f5b9534c3eb8e', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
|
|
535
543
|
? 'Select options from the list below'
|
|
536
|
-
: undefined }, h("nano-dropdown", { key: '
|
|
544
|
+
: undefined }, h("nano-dropdown", { key: 'aa52b8a9e448a27b572b533c8a66b582fc631b74', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
|
|
537
545
|
dlist__dropdown: true,
|
|
538
546
|
'dlist--isfiltered': this.isFiltered,
|
|
539
|
-
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '
|
|
547
|
+
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: 'cefe1e472c018fcf612ea6d30e0a591f0dbfad70', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
|
|
540
548
|
dlist__menu: true,
|
|
541
549
|
'dlist__menu--open': this.dropwdownOpen,
|
|
542
|
-
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '
|
|
550
|
+
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '75b377c49d3b3e0f172135e0d705dfe92bcac5aa', name: "list-top" }), h("slot", { key: 'd89f6cf631fc6faeddf447be926339c85649ff93' }), h("slot", { key: '782d7373362170ba28647c1302746ee1ae606f87', name: "internal-opts" }), h("slot", { key: 'e3cf0d800b7219bdce24259eed1134f01349b40c', name: "list-bottom" })), h("nano-menu", { key: 'e9aafef02fe4d3157629840451da1ff0110a9b8d', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
|
|
543
551
|
dlist__menu: true,
|
|
544
552
|
'dlist__menu--open': this.dropwdownOpen,
|
|
545
|
-
} }, h("slot", { key: '
|
|
553
|
+
} }, h("slot", { key: '34cf56ecb0c0a818f151cd8e1cc7e25e0bc04f1c', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '89aaba1550af0b0a273179bf16a31904840552d4', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
|
|
546
554
|
}
|
|
547
555
|
static get watchers() { return {
|
|
548
556
|
"open": ["openWatcher"],
|
|
@@ -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 {
|
|
@@ -466,6 +466,14 @@ const DataList = class {
|
|
|
466
466
|
this.listBox.setFocus();
|
|
467
467
|
return;
|
|
468
468
|
}
|
|
469
|
+
// When select, mirror native select behaviour. Enter on an open list confirms the
|
|
470
|
+
// (type-to-select) value - already applied - and closes
|
|
471
|
+
if (this.type === 'select' && this.open && e.key === 'Enter') {
|
|
472
|
+
e.preventDefault();
|
|
473
|
+
this.shouldOpen = false;
|
|
474
|
+
this.manageDropdownDisplay();
|
|
475
|
+
return;
|
|
476
|
+
}
|
|
469
477
|
this.shouldOpen = true;
|
|
470
478
|
// open dropdown if possible
|
|
471
479
|
this.manageDropdownDisplay();
|
|
@@ -527,18 +535,18 @@ const DataList = class {
|
|
|
527
535
|
}
|
|
528
536
|
}
|
|
529
537
|
render() {
|
|
530
|
-
return (h(Host, { key: '
|
|
538
|
+
return (h(Host, { key: '1fff00ce17443af0cc012034202f5b9534c3eb8e', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
|
|
531
539
|
? 'Select options from the list below'
|
|
532
|
-
: undefined }, h("nano-dropdown", { key: '
|
|
540
|
+
: undefined }, h("nano-dropdown", { key: 'aa52b8a9e448a27b572b533c8a66b582fc631b74', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
|
|
533
541
|
dlist__dropdown: true,
|
|
534
542
|
'dlist--isfiltered': this.isFiltered,
|
|
535
|
-
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '
|
|
543
|
+
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: 'cefe1e472c018fcf612ea6d30e0a591f0dbfad70', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
|
|
536
544
|
dlist__menu: true,
|
|
537
545
|
'dlist__menu--open': this.dropwdownOpen,
|
|
538
|
-
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '
|
|
546
|
+
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '75b377c49d3b3e0f172135e0d705dfe92bcac5aa', name: "list-top" }), h("slot", { key: 'd89f6cf631fc6faeddf447be926339c85649ff93' }), h("slot", { key: '782d7373362170ba28647c1302746ee1ae606f87', name: "internal-opts" }), h("slot", { key: 'e3cf0d800b7219bdce24259eed1134f01349b40c', name: "list-bottom" })), h("nano-menu", { key: 'e9aafef02fe4d3157629840451da1ff0110a9b8d', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
|
|
539
547
|
dlist__menu: true,
|
|
540
548
|
'dlist__menu--open': this.dropwdownOpen,
|
|
541
|
-
} }, h("slot", { key: '
|
|
549
|
+
} }, h("slot", { key: '34cf56ecb0c0a818f151cd8e1cc7e25e0bc04f1c', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '89aaba1550af0b0a273179bf16a31904840552d4', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
|
|
542
550
|
}
|
|
543
551
|
static get watchers() { return {
|
|
544
552
|
"open": ["openWatcher"],
|
|
@@ -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"],
|