@nanoporetech-digital/components 8.19.0 → 8.20.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/nano-global-nav.cjs.entry.js +36 -22
- package/dist/collection/components/breadcrumb/breadcrumb.js +1 -1
- package/dist/collection/components/global-nav/global-nav.js +41 -27
- package/dist/components/nano-global-nav.js +36 -22
- package/dist/esm/nano-global-nav.entry.js +36 -22
- package/dist/nano-components/nano-global-nav.entry.js +1 -1
- package/dist/types/components/global-nav/global-nav.d.ts +3 -3
- package/dist/types/components.d.ts +6 -6
- package/docs-json.json +15 -9
- package/docs-vscode.json +1 -1
- package/hydrate/index.js +37 -23
- package/hydrate/index.mjs +37 -23
- package/package.json +2 -2
- /package/dist/types/builds/{7a-7ssxC → x6knoJK1}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/generate-vue-component.d.ts +0 -0
- /package/dist/types/builds/{7a-7ssxC → x6knoJK1}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/index.d.ts +0 -0
- /package/dist/types/builds/{7a-7ssxC → x6knoJK1}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/output-vue.d.ts +0 -0
- /package/dist/types/builds/{7a-7ssxC → x6knoJK1}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/plugin.d.ts +0 -0
- /package/dist/types/builds/{7a-7ssxC → x6knoJK1}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/types.d.ts +0 -0
- /package/dist/types/builds/{7a-7ssxC → x6knoJK1}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/utils.d.ts +0 -0
- /package/dist/types/builds/{7a-7ssxC → x6knoJK1}/0/Digital/nano-components/packages/components/.stencil/stencil.config.d.ts +0 -0
- /package/dist/types/builds/{7a-7ssxC → x6knoJK1}/0/Digital/nano-components/packages/components/.stencil/stencil.config.prod.d.ts +0 -0
- /package/dist/types/builds/{7a-7ssxC → x6knoJK1}/0/Digital/nano-components/packages/components/.stencil/testing/mocks/intersection-observer.d.ts +0 -0
- /package/dist/types/builds/{7a-7ssxC → x6knoJK1}/0/Digital/nano-components/packages/components/.stencil/wdio.conf.d.ts +0 -0
|
@@ -30,7 +30,7 @@ const GlobalNav = class {
|
|
|
30
30
|
/** Url to the Nanopore contact page */
|
|
31
31
|
contactUrl = 'https://nanoporetech.com/contact';
|
|
32
32
|
_sessionRedirect = window.location.href;
|
|
33
|
-
/** A url to take the user after login
|
|
33
|
+
/** A url to take the user after login or logout. Defaults to current URL. Is automatically URI encoded */
|
|
34
34
|
get sessionRedirect() {
|
|
35
35
|
return encodeURIComponent(this._sessionRedirect);
|
|
36
36
|
}
|
|
@@ -89,15 +89,22 @@ const GlobalNav = class {
|
|
|
89
89
|
return this.myAccountData?.user?.uuid ? this.myAccountData.user : null;
|
|
90
90
|
}
|
|
91
91
|
processUserData() {
|
|
92
|
-
if (!this.myAccountUser)
|
|
92
|
+
if (!this.myAccountUser) {
|
|
93
|
+
this.isLoggedIn = false;
|
|
94
|
+
this.userLinks = [];
|
|
95
|
+
this.msgUrl = '';
|
|
96
|
+
this.msgCount = 0;
|
|
97
|
+
this.nanoUserData.emit(null);
|
|
93
98
|
return;
|
|
94
|
-
|
|
95
|
-
this.
|
|
96
|
-
|
|
97
|
-
this.
|
|
98
|
-
this.
|
|
99
|
-
this.
|
|
100
|
-
this.
|
|
99
|
+
}
|
|
100
|
+
this.userLinks =
|
|
101
|
+
this.myAccountData?.links?.filter((link) => link.area === 'profile-panel-list') || [];
|
|
102
|
+
this.loginUrl = this.loginUrl || this.myAccountData.urls?.login;
|
|
103
|
+
this.logoutUrl = this.logoutUrl || this.myAccountData.urls?.logout;
|
|
104
|
+
this.msgUrl = this.msgUrl || this.myAccountData.urls?.messages;
|
|
105
|
+
this.msgCount = this.msgCount || this.myAccountData.notifications?.count;
|
|
106
|
+
this.cartUrl = this.cartUrl || this.myAccountData.urls?.cart;
|
|
107
|
+
this.cartCount = this.cartCount || this.myAccountData.cart?.count;
|
|
101
108
|
this.isLoggedIn = true;
|
|
102
109
|
this.nanoUserData.emit(this.myAccountUser);
|
|
103
110
|
}
|
|
@@ -439,14 +446,18 @@ const GlobalNav = class {
|
|
|
439
446
|
return;
|
|
440
447
|
return (renderer.h("div", { part: "user-panel", class: `gn__user-panel nano-theme-dark` }, renderer.h("div", { class: "gn__user-panel-head", slot: "label" }, renderer.h("nano-avatar", { initials: this.myAccountUser.first_name?.charAt(0) +
|
|
441
448
|
this.myAccountUser.last_name?.charAt(0) }, this.myAccountUser.small_avatar_url &&
|
|
442
|
-
!this.myAccountUser.small_avatar_url.includes('generic') && (renderer.h("img", { src: this.myAccountUser.small_avatar_url, alt: "User Avatar", height: 40, width: 40 }))), renderer.h("div", null, this.myAccountUser.name, renderer.h("br", null), this.myAccountUser.job_title
|
|
449
|
+
!this.myAccountUser.small_avatar_url.includes('generic') && (renderer.h("img", { src: this.myAccountUser.small_avatar_url, alt: "User Avatar", height: 40, width: 40 }))), renderer.h("div", null, this.myAccountUser.name, renderer.h("br", null), this.myAccountUser.job_title && this.myAccountUser?.company
|
|
450
|
+
? `${this.myAccountUser.job_title}, ${this.myAccountUser.company}`
|
|
451
|
+
: this.myAccountUser.job_title ||
|
|
452
|
+
this.myAccountUser.company ||
|
|
453
|
+
'')), renderer.h("div", { class: "gn__user-panel-body" }, this.userLinks.map((link) => (renderer.h("a", { href: link.address, target: link.target || undefined }, link.title, (link.title === 'Messages' ||
|
|
443
454
|
link.address.includes(this.msgUrl) ||
|
|
444
455
|
this.msgUrl.includes(link.address)) &&
|
|
445
|
-
this.msgCount > 0 && (renderer.h("nano-badge", { theme: "danger", strength: "2" }, this.msgCount)))))), renderer.h("div", { class: "gn__user-panel-foot" }, renderer.h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, renderer.h("a", { href: this.formatLoginLink(this.logoutUrl) }, "Logout")))));
|
|
456
|
+
this.msgCount > 0 && (renderer.h("nano-badge", { theme: "danger", strength: "2" }, this.msgCount)))))), renderer.h("div", { class: "gn__user-panel-foot" }, renderer.h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, typeof this.logoutUrl === 'string' ? (renderer.h("a", { href: this.formatLoginLink(this.logoutUrl) }, "Logout")) : (renderer.h("button", { onClick: this.logoutUrl }, "Logout"))))));
|
|
446
457
|
}
|
|
447
458
|
bpPartials = {
|
|
448
459
|
contact: {
|
|
449
|
-
tpl: () => renderer.h("a", { href: this.contactUrl }, "Contact"),
|
|
460
|
+
tpl: () => this.contactUrl && renderer.h("a", { href: this.contactUrl }, "Contact"),
|
|
450
461
|
breakpoint: 0,
|
|
451
462
|
},
|
|
452
463
|
mainMenu: {
|
|
@@ -484,21 +495,21 @@ const GlobalNav = class {
|
|
|
484
495
|
}
|
|
485
496
|
render() {
|
|
486
497
|
const bpps = this.bpPartials;
|
|
487
|
-
return (renderer.h(index.Host, { key: '
|
|
498
|
+
return (renderer.h(index.Host, { key: '6f3ecd6fac6825f4b137592e1becb86046278542', class: {
|
|
488
499
|
'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
|
|
489
500
|
'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
|
|
490
501
|
'nano-global-nav': true,
|
|
491
|
-
} }, renderer.h("div", { key: '
|
|
502
|
+
} }, renderer.h("div", { key: '8ecbd0ecc9ac93f1a1dd5defa8f119874f623daf', class: {
|
|
492
503
|
gn: true,
|
|
493
504
|
'gn__search-open': this.searchBarShown,
|
|
494
|
-
} }, renderer.h("nano-drawer", { key: '
|
|
505
|
+
} }, renderer.h("nano-drawer", { key: '728b760496d041fc5f1d78905081e7fe59b7047c', 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: 'd1b99ae15e00511594abf476a06f8374d4fad508', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), renderer.h("nav", { key: '97debdda75a0d7d9f2a6e23306fa93bd2d73de06', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
|
|
495
506
|
? bpps.mainMenu.tpl()
|
|
496
|
-
: '', renderer.h("slot", { key: '
|
|
507
|
+
: '', renderer.h("slot", { key: 'd500a55cb220088df7af00b356f902a3d80fb47d', name: "overflow" }))), renderer.h("div", { key: 'c1454d4666561a77a850d9328d13795d5f989d89', class: "gn__menu-bar-wrapper" }, renderer.h("div", { key: 'f32f9a8302ad3501ae3d9e8afdf2ed7d59297335', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, renderer.h("nav", { key: '8605e4bf473e4b34e3890ddaf69c555abc397716', "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: '04aaa626447c7377fadcd8d374fa9120ef5fea62', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), renderer.h("slot", { key: '3f858438db16a112c2dee67ee8b865afba9180fe', name: "logo" }, renderer.h("a", { key: 'ddc758422fb964b2644e825c98ec0aec832895db', 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,
|
|
497
508
|
(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: "36", 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,
|
|
498
|
-
(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: "36", height: "36", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (renderer.h("div", { key: '
|
|
499
|
-
(!!this.searchIndices.length && (renderer.h("nano-dropdown", { key: '
|
|
509
|
+
(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: "36", height: "36", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (renderer.h("div", { key: 'c48d4d74b18f876cffee723a8da0bd4d82300b7b', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), renderer.h("div", { key: 'e433743c122dc9e4427de3f0fdd7067bcd52f558', class: "gn__main-menu-actions" }, !this.myAccountData ||
|
|
510
|
+
(!!this.searchIndices.length && (renderer.h("nano-dropdown", { key: 'e6c5655701e5a91409f5fad4f45efd868cbd1a50', 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: '8de3fb7f465103bda3063e96876345701d942a01', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), renderer.h("form", { key: '18fca7445c9471089e013cea8d83aa749e655aab', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (renderer.h("nano-select", { key: '7b37f759f2a24d8686d46a3ebbcb3afaa54cbbee', 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: '93838bee803808b06f56c14886975cd3fc8ab827', 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) => {
|
|
500
511
|
this.handleSearchTermChangeEvent(e.detail.value);
|
|
501
|
-
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, renderer.h("nano-icon", { key: '
|
|
512
|
+
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, renderer.h("nano-icon", { key: 'd39203dd3727a34b60c5c71fc6b9a14c23ef2465', slot: "end", name: "light/magnifying-glass" }), renderer.h("nano-datalist", { key: '9826082e21b53f54254c8f2490b3b42c215edacb', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (renderer.h("div", { key: '65f17640b43bce0f44e59f092b7c8ef562f02e19', slot: "no-result", class: "gn__search-loading" }, renderer.h("nano-spinner", { key: 'f0162dd8c60aae95e35d9e02770a9398bede0828' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
|
|
502
513
|
this.autocompleteResults.hits.map((hit, i) => (renderer.h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
|
|
503
514
|
searchInsights.searchInsight.sendClick({
|
|
504
515
|
index: this.activeIndex.index,
|
|
@@ -508,10 +519,13 @@ const GlobalNav = class {
|
|
|
508
519
|
positions: [i + 1],
|
|
509
520
|
});
|
|
510
521
|
} }, renderer.h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
|
|
511
|
-
renderer.h("nano-option", { key: '
|
|
512
|
-
])))))), renderer.h("div", { key: '
|
|
522
|
+
renderer.h("nano-option", { key: 'ddf176669705bb04a45575ee1bf8897d46ae9704', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
|
|
523
|
+
])))))), renderer.h("div", { key: 'f84317012affbf6aa952810f627ca318f042dd0b', class: "gn__cart" }, this.cartUrl && [
|
|
524
|
+
renderer.h("nano-icon-button", { key: 'c656b17e3ee2462900fc855c8128b2e92e3ad4cb', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }),
|
|
525
|
+
this.cartCount && (renderer.h("nano-badge", { key: '878066adbf28890694e65f651031e35912b30f06', theme: "danger", strength: "2" }, this.cartCount > 9 ? '9+' : this.cartCount)),
|
|
526
|
+
]), this.breakpoint <= bpps.contact.breakpoint
|
|
513
527
|
? bpps.contact.tpl()
|
|
514
|
-
: '', 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", strength: "2" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (renderer.h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, renderer.h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login"))))))), renderer.h("nano-global-search-results", { key: '
|
|
528
|
+
: '', 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", strength: "2" }, 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: 'afb40b7671b51b72cc58ce006b6ed163fb1d1e78', part: "site-search-results" }, renderer.h("div", { key: '660f6ad6fb20ca8c88118b44bdb2b44b3a06f19b', class: "gn__site", part: "site-wrapper" }, renderer.h("slot", { key: 'fcd45d11fb7fcdcf986940f8a4bda1287635856a' }))))));
|
|
515
529
|
}
|
|
516
530
|
static get assetsDirs() { return ["assets"]; }
|
|
517
531
|
static get watchers() { return {
|
|
@@ -89,7 +89,7 @@ export class NanoBreadcrumb {
|
|
|
89
89
|
"references": {
|
|
90
90
|
"Breadcrumb": {
|
|
91
91
|
"location": "local",
|
|
92
|
-
"path": "/builds/
|
|
92
|
+
"path": "/builds/x6knoJK1/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
|
|
93
93
|
"id": "src/components/breadcrumb/breadcrumb.tsx::Breadcrumb"
|
|
94
94
|
}
|
|
95
95
|
}
|
|
@@ -50,7 +50,7 @@ export class GlobalNav {
|
|
|
50
50
|
/** Url to the Nanopore contact page */
|
|
51
51
|
contactUrl = 'https://nanoporetech.com/contact';
|
|
52
52
|
_sessionRedirect = window.location.href;
|
|
53
|
-
/** A url to take the user after login
|
|
53
|
+
/** A url to take the user after login or logout. Defaults to current URL. Is automatically URI encoded */
|
|
54
54
|
get sessionRedirect() {
|
|
55
55
|
return encodeURIComponent(this._sessionRedirect);
|
|
56
56
|
}
|
|
@@ -109,15 +109,22 @@ export class GlobalNav {
|
|
|
109
109
|
return this.myAccountData?.user?.uuid ? this.myAccountData.user : null;
|
|
110
110
|
}
|
|
111
111
|
processUserData() {
|
|
112
|
-
if (!this.myAccountUser)
|
|
112
|
+
if (!this.myAccountUser) {
|
|
113
|
+
this.isLoggedIn = false;
|
|
114
|
+
this.userLinks = [];
|
|
115
|
+
this.msgUrl = '';
|
|
116
|
+
this.msgCount = 0;
|
|
117
|
+
this.nanoUserData.emit(null);
|
|
113
118
|
return;
|
|
114
|
-
|
|
115
|
-
this.
|
|
116
|
-
|
|
117
|
-
this.
|
|
118
|
-
this.
|
|
119
|
-
this.
|
|
120
|
-
this.
|
|
119
|
+
}
|
|
120
|
+
this.userLinks =
|
|
121
|
+
this.myAccountData?.links?.filter((link) => link.area === 'profile-panel-list') || [];
|
|
122
|
+
this.loginUrl = this.loginUrl || this.myAccountData.urls?.login;
|
|
123
|
+
this.logoutUrl = this.logoutUrl || this.myAccountData.urls?.logout;
|
|
124
|
+
this.msgUrl = this.msgUrl || this.myAccountData.urls?.messages;
|
|
125
|
+
this.msgCount = this.msgCount || this.myAccountData.notifications?.count;
|
|
126
|
+
this.cartUrl = this.cartUrl || this.myAccountData.urls?.cart;
|
|
127
|
+
this.cartCount = this.cartCount || this.myAccountData.cart?.count;
|
|
121
128
|
this.isLoggedIn = true;
|
|
122
129
|
this.nanoUserData.emit(this.myAccountUser);
|
|
123
130
|
}
|
|
@@ -455,14 +462,18 @@ export class GlobalNav {
|
|
|
455
462
|
return;
|
|
456
463
|
return (h("div", { part: "user-panel", class: `gn__user-panel nano-theme-dark` }, h("div", { class: "gn__user-panel-head", slot: "label" }, h("nano-avatar", { initials: this.myAccountUser.first_name?.charAt(0) +
|
|
457
464
|
this.myAccountUser.last_name?.charAt(0) }, this.myAccountUser.small_avatar_url &&
|
|
458
|
-
!this.myAccountUser.small_avatar_url.includes('generic') && (h("img", { src: this.myAccountUser.small_avatar_url, alt: "User Avatar", height: 40, width: 40 }))), h("div", null, this.myAccountUser.name, h("br", null), this.myAccountUser.job_title
|
|
465
|
+
!this.myAccountUser.small_avatar_url.includes('generic') && (h("img", { src: this.myAccountUser.small_avatar_url, alt: "User Avatar", height: 40, width: 40 }))), h("div", null, this.myAccountUser.name, h("br", null), this.myAccountUser.job_title && this.myAccountUser?.company
|
|
466
|
+
? `${this.myAccountUser.job_title}, ${this.myAccountUser.company}`
|
|
467
|
+
: this.myAccountUser.job_title ||
|
|
468
|
+
this.myAccountUser.company ||
|
|
469
|
+
'')), h("div", { class: "gn__user-panel-body" }, this.userLinks.map((link) => (h("a", { href: link.address, target: link.target || undefined }, link.title, (link.title === 'Messages' ||
|
|
459
470
|
link.address.includes(this.msgUrl) ||
|
|
460
471
|
this.msgUrl.includes(link.address)) &&
|
|
461
|
-
this.msgCount > 0 && (h("nano-badge", { theme: "danger", strength: "2" }, this.msgCount)))))), h("div", { class: "gn__user-panel-foot" }, h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, h("a", { href: this.formatLoginLink(this.logoutUrl) }, "Logout")))));
|
|
472
|
+
this.msgCount > 0 && (h("nano-badge", { theme: "danger", strength: "2" }, this.msgCount)))))), h("div", { class: "gn__user-panel-foot" }, h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, typeof this.logoutUrl === 'string' ? (h("a", { href: this.formatLoginLink(this.logoutUrl) }, "Logout")) : (h("button", { onClick: this.logoutUrl }, "Logout"))))));
|
|
462
473
|
}
|
|
463
474
|
bpPartials = {
|
|
464
475
|
contact: {
|
|
465
|
-
tpl: () => h("a", { href: this.contactUrl }, "Contact"),
|
|
476
|
+
tpl: () => this.contactUrl && h("a", { href: this.contactUrl }, "Contact"),
|
|
466
477
|
breakpoint: 0,
|
|
467
478
|
},
|
|
468
479
|
mainMenu: {
|
|
@@ -500,21 +511,21 @@ export class GlobalNav {
|
|
|
500
511
|
}
|
|
501
512
|
render() {
|
|
502
513
|
const bpps = this.bpPartials;
|
|
503
|
-
return (h(Host, { key: '
|
|
514
|
+
return (h(Host, { key: '6f3ecd6fac6825f4b137592e1becb86046278542', class: {
|
|
504
515
|
'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
|
|
505
516
|
'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
|
|
506
517
|
'nano-global-nav': true,
|
|
507
|
-
} }, h("div", { key: '
|
|
518
|
+
} }, h("div", { key: '8ecbd0ecc9ac93f1a1dd5defa8f119874f623daf', class: {
|
|
508
519
|
gn: true,
|
|
509
520
|
'gn__search-open': this.searchBarShown,
|
|
510
|
-
} }, h("nano-drawer", { key: '
|
|
521
|
+
} }, h("nano-drawer", { key: '728b760496d041fc5f1d78905081e7fe59b7047c', 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: 'd1b99ae15e00511594abf476a06f8374d4fad508', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: '97debdda75a0d7d9f2a6e23306fa93bd2d73de06', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
|
|
511
522
|
? bpps.mainMenu.tpl()
|
|
512
|
-
: '', h("slot", { key: '
|
|
523
|
+
: '', h("slot", { key: 'd500a55cb220088df7af00b356f902a3d80fb47d', name: "overflow" }))), h("div", { key: 'c1454d4666561a77a850d9328d13795d5f989d89', class: "gn__menu-bar-wrapper" }, h("div", { key: 'f32f9a8302ad3501ae3d9e8afdf2ed7d59297335', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: '8605e4bf473e4b34e3890ddaf69c555abc397716', "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: '04aaa626447c7377fadcd8d374fa9120ef5fea62', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '3f858438db16a112c2dee67ee8b865afba9180fe', name: "logo" }, h("a", { key: 'ddc758422fb964b2644e825c98ec0aec832895db', 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,
|
|
513
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--large", width: "152", height: "36", part: "logo logo--large" })) : (h("img", { src: getAssetPath('../nano-assets/ont-wheel.svg'), alt: `Oxford Nanopore Technologies logo. A stylised representation of a nanopore,
|
|
514
|
-
(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: "36", height: "36", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: '
|
|
515
|
-
(!!this.searchIndices.length && (h("nano-dropdown", { key: '
|
|
525
|
+
(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: "36", height: "36", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: 'c48d4d74b18f876cffee723a8da0bd4d82300b7b', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: 'e433743c122dc9e4427de3f0fdd7067bcd52f558', class: "gn__main-menu-actions" }, !this.myAccountData ||
|
|
526
|
+
(!!this.searchIndices.length && (h("nano-dropdown", { key: 'e6c5655701e5a91409f5fad4f45efd868cbd1a50', 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: '8de3fb7f465103bda3063e96876345701d942a01', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), h("form", { key: '18fca7445c9471089e013cea8d83aa749e655aab', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '7b37f759f2a24d8686d46a3ebbcb3afaa54cbbee', 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: '93838bee803808b06f56c14886975cd3fc8ab827', 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) => {
|
|
516
527
|
this.handleSearchTermChangeEvent(e.detail.value);
|
|
517
|
-
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon", { key: '
|
|
528
|
+
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon", { key: 'd39203dd3727a34b60c5c71fc6b9a14c23ef2465', slot: "end", name: "light/magnifying-glass" }), h("nano-datalist", { key: '9826082e21b53f54254c8f2490b3b42c215edacb', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '65f17640b43bce0f44e59f092b7c8ef562f02e19', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: 'f0162dd8c60aae95e35d9e02770a9398bede0828' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
|
|
518
529
|
this.autocompleteResults.hits.map((hit, i) => (h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
|
|
519
530
|
searchInsight.sendClick({
|
|
520
531
|
index: this.activeIndex.index,
|
|
@@ -524,10 +535,13 @@ export class GlobalNav {
|
|
|
524
535
|
positions: [i + 1],
|
|
525
536
|
});
|
|
526
537
|
} }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
|
|
527
|
-
h("nano-option", { key: '
|
|
528
|
-
])))))), h("div", { key: '
|
|
538
|
+
h("nano-option", { key: 'ddf176669705bb04a45575ee1bf8897d46ae9704', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
|
|
539
|
+
])))))), h("div", { key: 'f84317012affbf6aa952810f627ca318f042dd0b', class: "gn__cart" }, this.cartUrl && [
|
|
540
|
+
h("nano-icon-button", { key: 'c656b17e3ee2462900fc855c8128b2e92e3ad4cb', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }),
|
|
541
|
+
this.cartCount && (h("nano-badge", { key: '878066adbf28890694e65f651031e35912b30f06', theme: "danger", strength: "2" }, this.cartCount > 9 ? '9+' : this.cartCount)),
|
|
542
|
+
]), this.breakpoint <= bpps.contact.breakpoint
|
|
529
543
|
? bpps.contact.tpl()
|
|
530
|
-
: '', 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", strength: "2" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login"))))))), h("nano-global-search-results", { key: '
|
|
544
|
+
: '', 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", strength: "2" }, 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: 'afb40b7671b51b72cc58ce006b6ed163fb1d1e78', part: "site-search-results" }, h("div", { key: '660f6ad6fb20ca8c88118b44bdb2b44b3a06f19b', class: "gn__site", part: "site-wrapper" }, h("slot", { key: 'fcd45d11fb7fcdcf986940f8a4bda1287635856a' }))))));
|
|
531
545
|
}
|
|
532
546
|
static get is() { return "nano-global-nav"; }
|
|
533
547
|
static get encapsulation() { return "shadow"; }
|
|
@@ -609,8 +623,8 @@ export class GlobalNav {
|
|
|
609
623
|
"attribute": "login-url",
|
|
610
624
|
"mutable": true,
|
|
611
625
|
"complexType": {
|
|
612
|
-
"original": "string",
|
|
613
|
-
"resolved": "string",
|
|
626
|
+
"original": "string | (() => void)",
|
|
627
|
+
"resolved": "(() => void) | string",
|
|
614
628
|
"references": {}
|
|
615
629
|
},
|
|
616
630
|
"required": false,
|
|
@@ -629,8 +643,8 @@ export class GlobalNav {
|
|
|
629
643
|
"attribute": "logout-url",
|
|
630
644
|
"mutable": true,
|
|
631
645
|
"complexType": {
|
|
632
|
-
"original": "string",
|
|
633
|
-
"resolved": "string",
|
|
646
|
+
"original": "string | (() => void)",
|
|
647
|
+
"resolved": "(() => void) | string",
|
|
634
648
|
"references": {}
|
|
635
649
|
},
|
|
636
650
|
"required": false,
|
|
@@ -677,7 +691,7 @@ export class GlobalNav {
|
|
|
677
691
|
"optional": false,
|
|
678
692
|
"docs": {
|
|
679
693
|
"tags": [],
|
|
680
|
-
"text": "A url to take the user after login
|
|
694
|
+
"text": "A url to take the user after login or logout. Defaults to current URL. Is automatically URI encoded"
|
|
681
695
|
},
|
|
682
696
|
"getter": true,
|
|
683
697
|
"setter": true,
|
|
@@ -45,7 +45,7 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class GlobalNav extends HTMLE
|
|
|
45
45
|
/** Url to the Nanopore contact page */
|
|
46
46
|
contactUrl = 'https://nanoporetech.com/contact';
|
|
47
47
|
_sessionRedirect = window.location.href;
|
|
48
|
-
/** A url to take the user after login
|
|
48
|
+
/** A url to take the user after login or logout. Defaults to current URL. Is automatically URI encoded */
|
|
49
49
|
get sessionRedirect() {
|
|
50
50
|
return encodeURIComponent(this._sessionRedirect);
|
|
51
51
|
}
|
|
@@ -104,15 +104,22 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class GlobalNav extends HTMLE
|
|
|
104
104
|
return this.myAccountData?.user?.uuid ? this.myAccountData.user : null;
|
|
105
105
|
}
|
|
106
106
|
processUserData() {
|
|
107
|
-
if (!this.myAccountUser)
|
|
107
|
+
if (!this.myAccountUser) {
|
|
108
|
+
this.isLoggedIn = false;
|
|
109
|
+
this.userLinks = [];
|
|
110
|
+
this.msgUrl = '';
|
|
111
|
+
this.msgCount = 0;
|
|
112
|
+
this.nanoUserData.emit(null);
|
|
108
113
|
return;
|
|
109
|
-
|
|
110
|
-
this.
|
|
111
|
-
|
|
112
|
-
this.
|
|
113
|
-
this.
|
|
114
|
-
this.
|
|
115
|
-
this.
|
|
114
|
+
}
|
|
115
|
+
this.userLinks =
|
|
116
|
+
this.myAccountData?.links?.filter((link) => link.area === 'profile-panel-list') || [];
|
|
117
|
+
this.loginUrl = this.loginUrl || this.myAccountData.urls?.login;
|
|
118
|
+
this.logoutUrl = this.logoutUrl || this.myAccountData.urls?.logout;
|
|
119
|
+
this.msgUrl = this.msgUrl || this.myAccountData.urls?.messages;
|
|
120
|
+
this.msgCount = this.msgCount || this.myAccountData.notifications?.count;
|
|
121
|
+
this.cartUrl = this.cartUrl || this.myAccountData.urls?.cart;
|
|
122
|
+
this.cartCount = this.cartCount || this.myAccountData.cart?.count;
|
|
116
123
|
this.isLoggedIn = true;
|
|
117
124
|
this.nanoUserData.emit(this.myAccountUser);
|
|
118
125
|
}
|
|
@@ -457,14 +464,18 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class GlobalNav extends HTMLE
|
|
|
457
464
|
return;
|
|
458
465
|
return (h("div", { part: "user-panel", class: `gn__user-panel nano-theme-dark` }, h("div", { class: "gn__user-panel-head", slot: "label" }, h("nano-avatar", { initials: this.myAccountUser.first_name?.charAt(0) +
|
|
459
466
|
this.myAccountUser.last_name?.charAt(0) }, this.myAccountUser.small_avatar_url &&
|
|
460
|
-
!this.myAccountUser.small_avatar_url.includes('generic') && (h("img", { src: this.myAccountUser.small_avatar_url, alt: "User Avatar", height: 40, width: 40 }))), h("div", null, this.myAccountUser.name, h("br", null), this.myAccountUser.job_title
|
|
467
|
+
!this.myAccountUser.small_avatar_url.includes('generic') && (h("img", { src: this.myAccountUser.small_avatar_url, alt: "User Avatar", height: 40, width: 40 }))), h("div", null, this.myAccountUser.name, h("br", null), this.myAccountUser.job_title && this.myAccountUser?.company
|
|
468
|
+
? `${this.myAccountUser.job_title}, ${this.myAccountUser.company}`
|
|
469
|
+
: this.myAccountUser.job_title ||
|
|
470
|
+
this.myAccountUser.company ||
|
|
471
|
+
'')), h("div", { class: "gn__user-panel-body" }, this.userLinks.map((link) => (h("a", { href: link.address, target: link.target || undefined }, link.title, (link.title === 'Messages' ||
|
|
461
472
|
link.address.includes(this.msgUrl) ||
|
|
462
473
|
this.msgUrl.includes(link.address)) &&
|
|
463
|
-
this.msgCount > 0 && (h("nano-badge", { theme: "danger", strength: "2" }, this.msgCount)))))), h("div", { class: "gn__user-panel-foot" }, h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, h("a", { href: this.formatLoginLink(this.logoutUrl) }, "Logout")))));
|
|
474
|
+
this.msgCount > 0 && (h("nano-badge", { theme: "danger", strength: "2" }, this.msgCount)))))), h("div", { class: "gn__user-panel-foot" }, h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, typeof this.logoutUrl === 'string' ? (h("a", { href: this.formatLoginLink(this.logoutUrl) }, "Logout")) : (h("button", { onClick: this.logoutUrl }, "Logout"))))));
|
|
464
475
|
}
|
|
465
476
|
bpPartials = {
|
|
466
477
|
contact: {
|
|
467
|
-
tpl: () => h("a", { href: this.contactUrl }, "Contact"),
|
|
478
|
+
tpl: () => this.contactUrl && h("a", { href: this.contactUrl }, "Contact"),
|
|
468
479
|
breakpoint: 0,
|
|
469
480
|
},
|
|
470
481
|
mainMenu: {
|
|
@@ -502,21 +513,21 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class GlobalNav extends HTMLE
|
|
|
502
513
|
}
|
|
503
514
|
render() {
|
|
504
515
|
const bpps = this.bpPartials;
|
|
505
|
-
return (h(Host, { key: '
|
|
516
|
+
return (h(Host, { key: '6f3ecd6fac6825f4b137592e1becb86046278542', class: {
|
|
506
517
|
'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
|
|
507
518
|
'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
|
|
508
519
|
'nano-global-nav': true,
|
|
509
|
-
} }, h("div", { key: '
|
|
520
|
+
} }, h("div", { key: '8ecbd0ecc9ac93f1a1dd5defa8f119874f623daf', class: {
|
|
510
521
|
gn: true,
|
|
511
522
|
'gn__search-open': this.searchBarShown,
|
|
512
|
-
} }, h("nano-drawer", { key: '
|
|
523
|
+
} }, h("nano-drawer", { key: '728b760496d041fc5f1d78905081e7fe59b7047c', 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: 'd1b99ae15e00511594abf476a06f8374d4fad508', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: '97debdda75a0d7d9f2a6e23306fa93bd2d73de06', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
|
|
513
524
|
? bpps.mainMenu.tpl()
|
|
514
|
-
: '', h("slot", { key: '
|
|
525
|
+
: '', h("slot", { key: 'd500a55cb220088df7af00b356f902a3d80fb47d', name: "overflow" }))), h("div", { key: 'c1454d4666561a77a850d9328d13795d5f989d89', class: "gn__menu-bar-wrapper" }, h("div", { key: 'f32f9a8302ad3501ae3d9e8afdf2ed7d59297335', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: '8605e4bf473e4b34e3890ddaf69c555abc397716', "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: '04aaa626447c7377fadcd8d374fa9120ef5fea62', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '3f858438db16a112c2dee67ee8b865afba9180fe', name: "logo" }, h("a", { key: 'ddc758422fb964b2644e825c98ec0aec832895db', 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,
|
|
515
526
|
(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: "36", part: "logo logo--large" })) : (h("img", { src: getAssetPath('../nano-assets/ont-wheel.svg'), alt: `Oxford Nanopore Technologies logo. A stylised representation of a nanopore,
|
|
516
|
-
(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: "36", height: "36", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: '
|
|
517
|
-
(!!this.searchIndices.length && (h("nano-dropdown", { key: '
|
|
527
|
+
(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: "36", height: "36", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: 'c48d4d74b18f876cffee723a8da0bd4d82300b7b', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: 'e433743c122dc9e4427de3f0fdd7067bcd52f558', class: "gn__main-menu-actions" }, !this.myAccountData ||
|
|
528
|
+
(!!this.searchIndices.length && (h("nano-dropdown", { key: 'e6c5655701e5a91409f5fad4f45efd868cbd1a50', 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: '8de3fb7f465103bda3063e96876345701d942a01', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), h("form", { key: '18fca7445c9471089e013cea8d83aa749e655aab', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '7b37f759f2a24d8686d46a3ebbcb3afaa54cbbee', 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: '93838bee803808b06f56c14886975cd3fc8ab827', 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) => {
|
|
518
529
|
this.handleSearchTermChangeEvent(e.detail.value);
|
|
519
|
-
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon", { key: '
|
|
530
|
+
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon", { key: 'd39203dd3727a34b60c5c71fc6b9a14c23ef2465', slot: "end", name: "light/magnifying-glass" }), h("nano-datalist", { key: '9826082e21b53f54254c8f2490b3b42c215edacb', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '65f17640b43bce0f44e59f092b7c8ef562f02e19', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: 'f0162dd8c60aae95e35d9e02770a9398bede0828' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
|
|
520
531
|
this.autocompleteResults.hits.map((hit, i) => (h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
|
|
521
532
|
searchInsight.sendClick({
|
|
522
533
|
index: this.activeIndex.index,
|
|
@@ -526,10 +537,13 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class GlobalNav extends HTMLE
|
|
|
526
537
|
positions: [i + 1],
|
|
527
538
|
});
|
|
528
539
|
} }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
|
|
529
|
-
h("nano-option", { key: '
|
|
530
|
-
])))))), h("div", { key: '
|
|
540
|
+
h("nano-option", { key: 'ddf176669705bb04a45575ee1bf8897d46ae9704', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
|
|
541
|
+
])))))), h("div", { key: 'f84317012affbf6aa952810f627ca318f042dd0b', class: "gn__cart" }, this.cartUrl && [
|
|
542
|
+
h("nano-icon-button", { key: 'c656b17e3ee2462900fc855c8128b2e92e3ad4cb', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }),
|
|
543
|
+
this.cartCount && (h("nano-badge", { key: '878066adbf28890694e65f651031e35912b30f06', theme: "danger", strength: "2" }, this.cartCount > 9 ? '9+' : this.cartCount)),
|
|
544
|
+
]), this.breakpoint <= bpps.contact.breakpoint
|
|
531
545
|
? bpps.contact.tpl()
|
|
532
|
-
: '', 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", strength: "2" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login"))))))), h("nano-global-search-results", { key: '
|
|
546
|
+
: '', 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", strength: "2" }, 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: 'afb40b7671b51b72cc58ce006b6ed163fb1d1e78', part: "site-search-results" }, h("div", { key: '660f6ad6fb20ca8c88118b44bdb2b44b3a06f19b', class: "gn__site", part: "site-wrapper" }, h("slot", { key: 'fcd45d11fb7fcdcf986940f8a4bda1287635856a' }))))));
|
|
533
547
|
}
|
|
534
548
|
static get assetsDirs() { return ["assets"]; }
|
|
535
549
|
static get watchers() { return {
|