@nanoporetech-digital/components 9.1.5 → 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-file-upload.cjs.entry.js +10 -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/file-upload/file-upload.js +10 -4
- package/dist/collection/components/global-nav/global-nav.js +14 -13
- package/dist/components/dropdown.js +5 -4
- package/dist/components/nano-file-upload.js +10 -4
- package/dist/components/nano-global-nav.js +14 -13
- package/dist/esm/nano-dropdown_2.entry.js +5 -4
- package/dist/esm/nano-file-upload.entry.js +10 -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-file-upload.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 +29 -21
- package/hydrate/index.mjs +29 -21
- 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"],
|
|
@@ -230,10 +230,16 @@ const FileUpload = class {
|
|
|
230
230
|
checkFileSize(size) {
|
|
231
231
|
return size / 1000000 <= this.maxFileSize;
|
|
232
232
|
}
|
|
233
|
-
checkFileType(
|
|
233
|
+
checkFileType(file) {
|
|
234
234
|
if (!this.accept)
|
|
235
235
|
return true;
|
|
236
|
-
|
|
236
|
+
const type = file.type;
|
|
237
|
+
if (type) {
|
|
238
|
+
return !!this.accept.match(type) && this.accept.match(type).length > 0;
|
|
239
|
+
}
|
|
240
|
+
return this.accept
|
|
241
|
+
.split(',')
|
|
242
|
+
.some((accepted) => file.name.endsWith(accepted.trim()));
|
|
237
243
|
}
|
|
238
244
|
validate = () => {
|
|
239
245
|
this.errorMessage = '';
|
|
@@ -255,7 +261,7 @@ const FileUpload = class {
|
|
|
255
261
|
this.maxFileSize +
|
|
256
262
|
'Mb';
|
|
257
263
|
}
|
|
258
|
-
else if (!this.checkFileType(fileItem.file
|
|
264
|
+
else if (!this.checkFileType(fileItem.file)) {
|
|
259
265
|
listeItemError = `File type is not allowed (${this.accept})`;
|
|
260
266
|
}
|
|
261
267
|
fileItem.validationMessage = listeItemError;
|
|
@@ -419,7 +425,7 @@ const FileUpload = class {
|
|
|
419
425
|
];
|
|
420
426
|
};
|
|
421
427
|
render() {
|
|
422
|
-
return (renderer.h(index.Host, { key: '
|
|
428
|
+
return (renderer.h(index.Host, { key: '72dede3cd11629374dc390f030af0a9412a6af70', class: "nano-file-upload" }, renderer.h("div", { key: '913c23888d43555a1cbfae0d973c848f01e733dc', class: {
|
|
423
429
|
'file-upload': true,
|
|
424
430
|
'file-upload--dragging': this.isDragging,
|
|
425
431
|
'file-upload--focus': this.hasFocus,
|
|
@@ -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"; }
|
|
@@ -228,10 +228,16 @@ export class FileUpload {
|
|
|
228
228
|
checkFileSize(size) {
|
|
229
229
|
return size / 1000000 <= this.maxFileSize;
|
|
230
230
|
}
|
|
231
|
-
checkFileType(
|
|
231
|
+
checkFileType(file) {
|
|
232
232
|
if (!this.accept)
|
|
233
233
|
return true;
|
|
234
|
-
|
|
234
|
+
const type = file.type;
|
|
235
|
+
if (type) {
|
|
236
|
+
return !!this.accept.match(type) && this.accept.match(type).length > 0;
|
|
237
|
+
}
|
|
238
|
+
return this.accept
|
|
239
|
+
.split(',')
|
|
240
|
+
.some((accepted) => file.name.endsWith(accepted.trim()));
|
|
235
241
|
}
|
|
236
242
|
validate = () => {
|
|
237
243
|
this.errorMessage = '';
|
|
@@ -253,7 +259,7 @@ export class FileUpload {
|
|
|
253
259
|
this.maxFileSize +
|
|
254
260
|
'Mb';
|
|
255
261
|
}
|
|
256
|
-
else if (!this.checkFileType(fileItem.file
|
|
262
|
+
else if (!this.checkFileType(fileItem.file)) {
|
|
257
263
|
listeItemError = `File type is not allowed (${this.accept})`;
|
|
258
264
|
}
|
|
259
265
|
fileItem.validationMessage = listeItemError;
|
|
@@ -417,7 +423,7 @@ export class FileUpload {
|
|
|
417
423
|
];
|
|
418
424
|
};
|
|
419
425
|
render() {
|
|
420
|
-
return (h(Host, { key: '
|
|
426
|
+
return (h(Host, { key: '72dede3cd11629374dc390f030af0a9412a6af70', class: "nano-file-upload" }, h("div", { key: '913c23888d43555a1cbfae0d973c848f01e733dc', class: {
|
|
421
427
|
'file-upload': true,
|
|
422
428
|
'file-upload--dragging': this.isDragging,
|
|
423
429
|
'file-upload--focus': this.hasFocus,
|
|
@@ -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"],
|
|
@@ -233,10 +233,16 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
|
|
|
233
233
|
checkFileSize(size) {
|
|
234
234
|
return size / 1000000 <= this.maxFileSize;
|
|
235
235
|
}
|
|
236
|
-
checkFileType(
|
|
236
|
+
checkFileType(file) {
|
|
237
237
|
if (!this.accept)
|
|
238
238
|
return true;
|
|
239
|
-
|
|
239
|
+
const type = file.type;
|
|
240
|
+
if (type) {
|
|
241
|
+
return !!this.accept.match(type) && this.accept.match(type).length > 0;
|
|
242
|
+
}
|
|
243
|
+
return this.accept
|
|
244
|
+
.split(',')
|
|
245
|
+
.some((accepted) => file.name.endsWith(accepted.trim()));
|
|
240
246
|
}
|
|
241
247
|
validate = () => {
|
|
242
248
|
this.errorMessage = '';
|
|
@@ -258,7 +264,7 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
|
|
|
258
264
|
this.maxFileSize +
|
|
259
265
|
'Mb';
|
|
260
266
|
}
|
|
261
|
-
else if (!this.checkFileType(fileItem.file
|
|
267
|
+
else if (!this.checkFileType(fileItem.file)) {
|
|
262
268
|
listeItemError = `File type is not allowed (${this.accept})`;
|
|
263
269
|
}
|
|
264
270
|
fileItem.validationMessage = listeItemError;
|
|
@@ -422,7 +428,7 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
|
|
|
422
428
|
];
|
|
423
429
|
};
|
|
424
430
|
render() {
|
|
425
|
-
return (h(Host, { key: '
|
|
431
|
+
return (h(Host, { key: '72dede3cd11629374dc390f030af0a9412a6af70', class: "nano-file-upload" }, h("div", { key: '913c23888d43555a1cbfae0d973c848f01e733dc', class: {
|
|
426
432
|
'file-upload': true,
|
|
427
433
|
'file-upload--dragging': this.isDragging,
|
|
428
434
|
'file-upload--focus': this.hasFocus,
|
|
@@ -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"],
|
|
@@ -228,10 +228,16 @@ const FileUpload = class {
|
|
|
228
228
|
checkFileSize(size) {
|
|
229
229
|
return size / 1000000 <= this.maxFileSize;
|
|
230
230
|
}
|
|
231
|
-
checkFileType(
|
|
231
|
+
checkFileType(file) {
|
|
232
232
|
if (!this.accept)
|
|
233
233
|
return true;
|
|
234
|
-
|
|
234
|
+
const type = file.type;
|
|
235
|
+
if (type) {
|
|
236
|
+
return !!this.accept.match(type) && this.accept.match(type).length > 0;
|
|
237
|
+
}
|
|
238
|
+
return this.accept
|
|
239
|
+
.split(',')
|
|
240
|
+
.some((accepted) => file.name.endsWith(accepted.trim()));
|
|
235
241
|
}
|
|
236
242
|
validate = () => {
|
|
237
243
|
this.errorMessage = '';
|
|
@@ -253,7 +259,7 @@ const FileUpload = class {
|
|
|
253
259
|
this.maxFileSize +
|
|
254
260
|
'Mb';
|
|
255
261
|
}
|
|
256
|
-
else if (!this.checkFileType(fileItem.file
|
|
262
|
+
else if (!this.checkFileType(fileItem.file)) {
|
|
257
263
|
listeItemError = `File type is not allowed (${this.accept})`;
|
|
258
264
|
}
|
|
259
265
|
fileItem.validationMessage = listeItemError;
|
|
@@ -417,7 +423,7 @@ const FileUpload = class {
|
|
|
417
423
|
];
|
|
418
424
|
};
|
|
419
425
|
render() {
|
|
420
|
-
return (h(Host, { key: '
|
|
426
|
+
return (h(Host, { key: '72dede3cd11629374dc390f030af0a9412a6af70', class: "nano-file-upload" }, h("div", { key: '913c23888d43555a1cbfae0d973c848f01e733dc', class: {
|
|
421
427
|
'file-upload': true,
|
|
422
428
|
'file-upload--dragging': this.isDragging,
|
|
423
429
|
'file-upload--focus': this.hasFocus,
|