@nanoporetech-digital/components 9.1.1 → 9.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/nano-avatar_5.cjs.entry.js +1 -1
- package/dist/cjs/nano-breadcrumb.cjs.entry.js +1 -1
- package/dist/cjs/nano-collapsible-comparison.cjs.entry.js +1 -1
- package/dist/cjs/nano-datalist_3.cjs.entry.js +8 -6
- package/dist/cjs/nano-footer.cjs.entry.js +1 -1
- package/dist/cjs/nano-global-nav.cjs.entry.js +20 -16
- package/dist/cjs/nano-step-breadcrumb.cjs.entry.js +1 -1
- package/dist/cjs/style-CQ5MIH25.js +143 -0
- package/dist/collection/components/cta/cta.js +1 -1
- package/dist/collection/components/datalist/datalist.js +8 -6
- package/dist/collection/components/global-nav/global-nav.js +19 -15
- package/dist/collection/utils/style.js +81 -10
- package/dist/components/datalist.js +8 -6
- package/dist/components/nano-global-nav.js +19 -15
- package/dist/components/style.js +81 -10
- package/dist/esm/nano-avatar_5.entry.js +1 -1
- package/dist/esm/nano-breadcrumb.entry.js +1 -1
- package/dist/esm/nano-collapsible-comparison.entry.js +1 -1
- package/dist/esm/nano-datalist_3.entry.js +8 -6
- package/dist/esm/nano-footer.entry.js +1 -1
- package/dist/esm/nano-global-nav.entry.js +20 -16
- package/dist/esm/nano-step-breadcrumb.entry.js +1 -1
- package/dist/esm/style-DZBZHpf8.js +141 -0
- package/dist/nano-components/nano-avatar_5.entry.js +1 -1
- package/dist/nano-components/nano-breadcrumb.entry.js +1 -1
- package/dist/nano-components/nano-collapsible-comparison.entry.js +1 -1
- package/dist/nano-components/nano-datalist_3.entry.js +1 -1
- package/dist/nano-components/nano-footer.entry.js +1 -1
- package/dist/nano-components/nano-global-nav.entry.js +1 -1
- package/dist/nano-components/nano-step-breadcrumb.entry.js +1 -1
- package/dist/nano-components/style-DZBZHpf8.js +4 -0
- package/docs-json.json +7 -7
- package/hydrate/index.js +27 -21
- package/hydrate/index.mjs +27 -21
- package/package.json +2 -2
- package/dist/cjs/style-Du-L-qMa.js +0 -72
- package/dist/esm/style-Ds52s5za.js +0 -70
- package/dist/nano-components/style-Ds52s5za.js +0 -4
|
@@ -14,7 +14,7 @@ var activeElement = require('./active-element-Vtuxns0n.js');
|
|
|
14
14
|
var drag = require('./drag-B5XXLJW9.js');
|
|
15
15
|
var tabbable = require('./tabbable-BXxsn02Z.js');
|
|
16
16
|
var searchInsights = require('./search-insights-BtxuX7Wv.js');
|
|
17
|
-
var style = require('./style-
|
|
17
|
+
var style = require('./style-CQ5MIH25.js');
|
|
18
18
|
var dom = require('./dom-CIEcUG2R.js');
|
|
19
19
|
var throttle = require('./throttle-CrRDOkln.js');
|
|
20
20
|
var formControl = require('./form-control-DdnBRckY.js');
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
'use strict';
|
|
5
5
|
|
|
6
6
|
var index = require('./index-C7Ikbhe3.js');
|
|
7
|
-
var style = require('./style-
|
|
7
|
+
var style = require('./style-CQ5MIH25.js');
|
|
8
8
|
|
|
9
9
|
const breadcrumbCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--text-color:var(--nano-color-text-link);--text-color-hover:var(--nano-color-text-hover);--text-color-secondary:var(--nano-color-text-default);--text-color-disabled:var(--nano-color-text-disabled);--border-color:var(--nano-color-border-default);--trigger-bg-color:var(--nano-color-background-default);display:block}.breadcrumbs{inline-size:fit-content}nano-menu.breadcrumbs{inline-size:100%}.breadcrumbs-hidden{position:absolute;visibility:hidden;pointer-events:none;block-size:0;overflow:hidden}ol{list-style:none;padding:var(--nano-spacing-l3) 0;margin:0;display:flex;flex-direction:row}li{display:flex;align-items:center;justify-content:flex-start;font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);text-wrap:nowrap;margin-block-end:0}li:not(.return-only li)::after,nano-nav-item::after{content:\"/\";margin:0 var(--nano-spacing-xs);color:var(--border-color)}a.link{color:var(--text-color)}a:not(.link){color:var(--text-color-secondary)}a:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset);z-index:1}a.link:hover{color:var(--text-color-hover)}a.return.link{display:flex;align-items:center;gap:calc(var(--nano-spacing-sm) / 2)}.breadcrumbs__dropdown{inline-size:100%}.breadcrumbs__dropdown[open]::part(trigger){box-shadow:var(--nano-shadow-l1)}.trigger-button{inline-size:100%;display:flex;justify-content:space-between;align-items:center;padding:var(--nano-spacing-l3) var(--nano-spacing-l2);color:var(--text-color);background-color:var(--trigger-bg-color);cursor:pointer;text-align:start;border:none;font-size:var(--nano-font-size-xs)}.trigger-button .trigger-button_label{text-decoration:underline}.trigger-button .trigger-button_label::after{content:\"/\";margin:0 var(--nano-spacing-xs);color:var(--border-color)}.trigger-button:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.trigger-icon{transform:rotate(0deg);transition:var(--nano-transition-x-fast) ease transform}.trigger-icon--open{transform:rotate(180deg)}nano-nav-item::after{display:none !important}.trigger-button_label::after{display:inline-block !important}.return-only{padding:var(--nano-spacing-l3) var(--nano-spacing-l2) !important}";
|
|
10
10
|
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
var index = require('./index-C7Ikbhe3.js');
|
|
7
7
|
var renderer = require('./renderer-bX7EsIYR.js');
|
|
8
|
-
var style = require('./style-
|
|
8
|
+
var style = require('./style-CQ5MIH25.js');
|
|
9
9
|
|
|
10
10
|
const collapsibleComparisonCss = ":host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }:host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }:host {\n /**\n * @prop --color-bg - Background color of the component. Defaults to var(--nano-color-background-default).\n * @prop --color-border - Border color of the component. Defaults to var(--nano-color-surface-sunken).\n * @prop --outer-spacing - Horizontal padding of the component. Defaults to var(--nano-spacing-l1-default).\n */\n}\n:host .collapsible-comparison {\n background-color: var(--color-bg);\n color: var(--nano-color-text-default);\n padding: var(--outer-spacing) 0;\n container-type: inline-size;\n}\n:host .header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-block-end: var(--nano-spacing-xl);\n}\n:host .headings {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--nano-spacing-xl);\n}\n:host nano-icon-button {\n display: none;\n}\n@container (max-width: 400px) {\n :host nano-cta {\n display: none;\n }\n :host nano-icon-button {\n --color: var(--nano-color-icon-primary);\n display: block;\n margin-inline-start: auto;\n font-size: var(--nano-font-size-xl);\n transition: 0.3s ease transform;\n }\n :host nano-icon-button.open {\n transform: rotate(180deg);\n }\n}";
|
|
11
11
|
|
|
@@ -103,7 +103,9 @@ const DataList = class {
|
|
|
103
103
|
const { height, top } = this.nanoDropdown.tetherTo.getBoundingClientRect();
|
|
104
104
|
this.nanoDropdown.style.setProperty('--max-height', `max(${window.innerHeight - (height + top + 40)}px, 48vw)`);
|
|
105
105
|
}
|
|
106
|
-
this.nanoDropdown
|
|
106
|
+
if (this.nanoDropdown) {
|
|
107
|
+
this.nanoDropdown.open = this.open;
|
|
108
|
+
}
|
|
107
109
|
if (this.connectedInput) {
|
|
108
110
|
this.connectedInput.setAttribute('aria-expanded', this.open.toString());
|
|
109
111
|
}
|
|
@@ -527,18 +529,18 @@ const DataList = class {
|
|
|
527
529
|
}
|
|
528
530
|
}
|
|
529
531
|
render() {
|
|
530
|
-
return (renderer.h(index.Host, { key: '
|
|
532
|
+
return (renderer.h(index.Host, { key: '2e64e78b3582d1c7198f55425f87c115a597beb1', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
|
|
531
533
|
? 'Select options from the list below'
|
|
532
|
-
: undefined }, renderer.h("nano-dropdown", { key: '
|
|
534
|
+
: undefined }, renderer.h("nano-dropdown", { key: '3596eb7b1364fb13a8ca137ce846223508ca0775', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
|
|
533
535
|
dlist__dropdown: true,
|
|
534
536
|
'dlist--isfiltered': this.isFiltered,
|
|
535
|
-
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, renderer.h("nano-menu", { key: '
|
|
537
|
+
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, renderer.h("nano-menu", { key: '473e5fff336a3b8d2c0d52fbb85b7bce88cdaff2', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
|
|
536
538
|
dlist__menu: true,
|
|
537
539
|
'dlist__menu--open': this.dropwdownOpen,
|
|
538
|
-
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, renderer.h("slot", { key: '
|
|
540
|
+
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, renderer.h("slot", { key: '572df9989a0ea9b70918a79f73084080d0adf975', name: "list-top" }), renderer.h("slot", { key: '0cdebdc62aa2aee8ca169aa71ee770310773edc7' }), renderer.h("slot", { key: 'f694eae7a6312f8220d7eddb5367830836130c5c', name: "internal-opts" }), renderer.h("slot", { key: 'f6f4b2a0c7401799db21f85b14e76a81b43ff751', name: "list-bottom" })), renderer.h("nano-menu", { key: 'a7c487506e3a69eb65d60382a1c903196715f2a7', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
|
|
539
541
|
dlist__menu: true,
|
|
540
542
|
'dlist__menu--open': this.dropwdownOpen,
|
|
541
|
-
} }, renderer.h("slot", { key: '
|
|
543
|
+
} }, renderer.h("slot", { key: 'bfadcf697f2c9a76acd7ea557c87022d341d9c48', name: "no-result" })), !!this.actvOptEles && (renderer.h("div", { key: '57d347cd46afb73739d100feb35ecad36b48640f', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
|
|
542
544
|
}
|
|
543
545
|
static get watchers() { return {
|
|
544
546
|
"open": ["openWatcher"],
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
'use strict';
|
|
5
5
|
|
|
6
6
|
var index = require('./index-C7Ikbhe3.js');
|
|
7
|
-
var style = require('./style-
|
|
7
|
+
var style = require('./style-CQ5MIH25.js');
|
|
8
8
|
|
|
9
9
|
const footerCss = ":host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }:host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }:host {\n --col-gap: var(--nano-spacing-l1-default);\n --icon-gap-md: var(--nano-spacing-md);\n --icon-gap-sm: var(--nano-spacing-sm);\n --vertical-padding: var(--nano-spacing-l1-default);\n --horizontal-padding: 0;\n --header-margin: 0 0 var(--nano-spacing-l1-default) 0;\n display: block;\n}\n:host .footer {\n container-type: inline-size;\n container-name: footer-container;\n display: flex;\n flex-direction: column;\n}\n@container footer-container (max-width: 768px) {\n :host .top,\n :host .middle,\n :host .bottom {\n --horizontal-padding: var(--nano-spacing-md);\n --col-gap: var(--nano-spacing-l);\n --vertical-padding: var(--nano-spacing-md);\n }\n :host .top-start,\n :host .top-center,\n :host .top-end {\n --header-margin: 0 0 var(--nano-spacing-md) 0;\n }\n}\n@container footer-container (max-width: 1023px) {\n :host .top,\n :host .middle,\n :host .bottom {\n --horizontal-padding: var(--nano-spacing-l);\n }\n}\n@container footer-container (max-width: 1346px) {\n :host .top,\n :host .middle,\n :host .bottom {\n --horizontal-padding: var(--nano-spacing-l1-default);\n }\n}\n:host .upper {\n border-block-start: 1px solid var(--nano-color-border-default);\n}\n:host .lower {\n background-color: var(--nano-color-surface-special);\n color: var(--nano-color-basic-white);\n}\n:host .top,\n:host .middle,\n:host .bottom {\n display: grid;\n gap: var(--col-gap);\n margin: 0 auto;\n max-inline-size: 1266px;\n}\n:host .top,\n:host .middle {\n grid-template-columns: repeat(3, 1fr);\n padding: var(--vertical-padding) var(--horizontal-padding);\n}\n:host .bottom {\n grid-template-columns: repeat(2, 1fr);\n padding-inline: var(--horizontal-padding);\n padding-block-end: var(--vertical-padding);\n}\n:host .middle-centre a {\n color: inherit;\n}\n:host .middle-centre a:hover {\n color: var(--nano-color-text-link-hover);\n}\n:host .middle-centre a:focus-visible {\n outline: var(--nano-focus-ring);\n outline-offset: var(--nano-focus-ring-offset);\n}\n:host .top-start,\n:host .top-center,\n:host .top-end {\n flex-direction: column;\n}\n:host .middle-start,\n:host .middle-centre,\n:host .middle-end {\n align-items: center;\n}\n:host .middle-start {\n display: flex;\n justify-content: flex-start;\n}\n:host .middle-centre {\n display: flex;\n justify-content: center;\n gap: var(--icon-gap-md);\n flex-wrap: nowrap;\n}\n:host .middle-end {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 20rem));\n gap: var(--icon-gap-sm);\n justify-content: end;\n}\n:host [slot=middle-end] {\n inline-size: 100%;\n}\n:host .bottom-start p,\n:host .bottom-start ::slotted(p), .bottom-start :host::slotted(p) {\n font-weight: var(--nano-font-weight-normal) !important;\n font-size: var(--nano-font-size-xs) !important;\n line-height: var(--nano-line-height-normal) !important;\n letter-spacing: var(--nano-letter-spacing-loose) !important;\n margin-block: 0 !important;\n}\n:host .bottom-end {\n display: flex;\n justify-content: flex-end;\n}\n:host .bottom-end ::slotted(*), .bottom-end :host::slotted(*) {\n --input-font-size: var(--nano-font-size-2xs) !important;\n max-inline-size: 9rem !important;\n}\n@container footer-container (max-width: 1200px) {\n :host .top {\n grid-template-columns: repeat(2, 1fr);\n grid-template-rows: repeat(2, auto);\n }\n :host .top-end {\n grid-row: 2;\n grid-column: 1/-1;\n }\n}\n@container footer-container (max-width: 912px) {\n :host .middle,\n :host .bottom {\n grid-template-columns: 1fr;\n grid-template-rows: 1fr;\n }\n :host .top {\n display: flex;\n flex-direction: column;\n }\n :host .middle-centre {\n flex-wrap: wrap;\n }\n :host .middle-end {\n grid-template-columns: minmax(0, 6.6rem);\n }\n :host .bottom {\n display: flex;\n flex-direction: column-reverse;\n align-items: center;\n }\n :host .middle-start,\n :host .middle-centre,\n :host .middle-end {\n justify-content: center;\n }\n}";
|
|
10
10
|
|
|
@@ -7,7 +7,7 @@ var index = require('./index-C7Ikbhe3.js');
|
|
|
7
7
|
var algoliasearchLite_esm_browser = require('./algoliasearch-lite.esm.browser-CEon6pM5.js');
|
|
8
8
|
var renderer = require('./renderer-bX7EsIYR.js');
|
|
9
9
|
var throttle = require('./throttle-CrRDOkln.js');
|
|
10
|
-
var style = require('./style-
|
|
10
|
+
var style = require('./style-CQ5MIH25.js');
|
|
11
11
|
var searchInsights = require('./search-insights-BtxuX7Wv.js');
|
|
12
12
|
|
|
13
13
|
const globalNavCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--main-menu-bar-bg-color:var(--nano-color-background-default);--main-menu-text-color:var(--nano-color-text-default);--main-menu-hover-text-color:var(--nano-color-text-hover);--main-menu-active-text-color:var(--nano-color-text-primary);--main-menu-active-border-color:var(--nano-color-border-accent);--overflow-bg-color:var(--nano-color-grey-mono-1600);--overflow-text-color:var(--nano-color-basic-white);--overflow-hover-text-color:var(--nano-color-text-hover);--overflow-active-text-color:var(--nano-color-text-primary);display:block;color:var(--main-menu-text-color)}img{max-inline-size:none;display:block;block-size:revert-layer}::slotted(a),:host::slotted(a),a{text-decoration:none}a:has(img){display:inline-block}a:focus{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}nano-drawer:not(:defined){display:none}nano-badge{position:absolute;font-size:0.5625rem;pointer-events:none}.gn__cart{position:relative}.gn__cart nano-badge{inset-block-start:-0.35rem;inset-inline-end:-0.4rem}.gn__login-cta{--bg:transparent;--font-size:var(--nano-font-size-2xs);--padding-v:0.5em}.gn__menu-bar-wrapper{z-index:calc(var(--nano-z-index-menubar) + 1);position:relative}.gn__menu-bar-wrapper::after{content:\"\";position:absolute;block-size:1px;inline-size:100%;inset-inline:0;inset-block-end:-1px;z-index:-3;background-color:var(--nano-color-border-default)}.gn__menu-bar{inline-size:100%;overflow:clip;background-color:var(--main-menu-bar-bg-color)}.gn__menu-bar a{color:var(--main-menu-text-color)}.gn__menu-bar a:hover{color:var(--main-menu-hover-text-color)}.gn__menu-bar a:active{color:var(--main-menu-active-text-color)}.gn__main-menu{display:inline-flex;align-items:center;min-inline-size:100%;padding:var(--nano-spacing-md);transition:opacity var(--nano-transition-x-fast) ease;opacity:1}.gn__main-menu.resizing{transition:none;opacity:0}.gn__main-menu>*{margin-inline-end:var(--nano-spacing-xl)}.gn__main-menu>*:is(slot,slot-fb){display:flex}.gn__main-menu>*:last-child{margin-inline-end:0}.gn__logo--small{min-inline-size:35px}.gn__logo--large{min-inline-size:152px}.gn__overflow-button{--padding:0.5rem 0.875rem 0.5rem 0;margin-inline-end:0.875rem;font-size:1.125rem;position:relative}.gn__overflow-button::after{content:\"\";position:absolute;inline-size:1px;block-size:100%;inset-inline-end:0;background-color:var(--nano-color-fill-neutral-weak);opacity:0.7;inset-block-start:0}.gn__main-menu-links,.gn__main-menu-actions{display:inline-flex;align-items:center}.gn__main-menu-links .nano-icon,.gn__main-menu-links .nano-icon-button,.gn__main-menu-actions .nano-icon,.gn__main-menu-actions .nano-icon-button{--active-color:var(--main-menu-active-text-color);--hover-color:var(--main-menu-hover-text-color);font-size:1rem}.gn__main-menu-links .nano-icon-button:hover,.gn__main-menu-actions .nano-icon-button:hover{color:var(--main-menu-hover-text-color)}.gn__main-menu-links{gap:var(--nano-spacing-xl)}.gn__main-menu-links ::slotted(a),.gn__main-menu-links::slotted(a){color:var(--main-menu-text-color)}.gn__main-menu-links ::slotted(a:hover){color:var(--main-menu-hover-text-color)}.gn__main-menu-links ::slotted(*:active){color:var(--main-menu-active-text-color)}.gn__main-menu-actions{margin-inline-start:auto;font-size:0.9375rem;gap:var(--nano-spacing-md)}.gn__search-dropdown{--overflow:visible;--padding:0;--background:transparent}.gn__search-dropdown .gn__search-button{position:relative}.gn__search-dropdown .gn__search-button::before{content:\"\";position:absolute;background-color:var(--main-menu-active-border-color);block-size:4px;inset-inline:5px 2px;inset-block-end:-1.5625rem;transform:translateZ(0) scaleX(0);transform-origin:0 center;transition:transform var(--nano-transition-x-fast) ease-in-out}.gn__search-open .gn__search-dropdown .gn__search-button::before{transform:translateZ(0) scaleX(1)}.gn__search-form{display:inline-flex;max-inline-size:100vw;inline-size:30.625rem}.gn__search-form .nano-select{--input-bg-color:var(--nano-color-surface-subtle);flex:0}.gn__search-form .nano-select:focus-within{z-index:1}.gn__search-form .nano-select .form-ctrl__input{border-inline-end:none}.gn__search-form .nano-input{flex:1}.gn__search-results{--padding-start:var(--nano-spacing-md);--padding-top:var(--nano-spacing-sm);--padding-bottom:var(--nano-spacing-sm);font-size:var(--nano-font-size-2xs)}.gn__search-loading{display:flex;justify-content:center}.gn__search-result{--padding-start:0.3125rem;--padding-top:var(--nano-spacing-sm);--padding-bottom:var(--nano-spacing-sm);--bg-focus:var(--nano-color-fill-secondary-pressed);--color-focus:var(--nano-color-text-default);--color:var(--nano-color-text-default);font-size:var(--nano-font-size-2xs)}.gn__search-result .search__highlight{font-style:normal;background:var(--nano-color-highlight)}.gn__search-viewall{--bg-focus:var(--nano-color-fill-secondary-pressed);--color-focus:var(--nano-color-text-default);--color:var(--nano-color-fill-primary-pressed)}.gn__search-viewall::part(label){justify-content:flex-end;text-decoration:underline}.gn__user-dropdown-trigger{all:unset;cursor:pointer;color:var(--nano-color-icon-primary);display:flex;white-space:nowrap;gap:var(--nano-spacing-xs);align-items:center;position:relative;padding-inline-start:var(--nano-spacing-md)}.gn__user-dropdown-trigger:hover{color:var(--nano-color-icon-primary-hover)}.gn__user-dropdown-trigger:active{color:var(--nano-color-icon-primary)}.gn__user-dropdown-trigger:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.gn__user-dropdown-trigger::before{content:\"\";position:absolute;inline-size:1px;block-size:100%;inset-inline-start:0;background-color:var(--nano-color-fill-subtle);opacity:0.7;inset-block-start:0}.gn__user-dropdown-trigger .gn__user-dropdown-chevron{transition:rotate var(--nano-transition-x-fast) linear}[open] .gn__user-dropdown-trigger .gn__user-dropdown-chevron{rotate:180deg}.gn__user-dropdown-trigger nano-badge{inset-block-start:-0.7rem;inset-inline-end:-0.7rem}.gn__user-dropdown{--background:var(--overflow-bg-color);--padding:0;--overflow:visible}.gn__user-panel{inline-size:21.25rem;max-inline-size:21.25rem;color:var(--overflow-text-color);padding:var(--nano-spacing-md);background-color:var(--nano-color-surface-subtle)}.gn__user-panel a{color:var(--overflow-text-color)}.gn__user-panel a:hover{text-decoration:underline;color:var(--overflow-hover-text-color)}.gn__user-panel-head{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);padding-block-end:var(--nano-spacing-md);display:flex;align-items:center;gap:var(--nano-spacing-sm);font-size:var(--nano-font-size-xs)}.gn__user-panel-head .gn__user-avatar nano-icon{font-size:2.5rem}.gn__user-panel-body{display:flex;flex-direction:column}.gn__user-panel-body a{position:relative;border-block-end:1px solid rgb(var(--nano-color-base-rgb-1000)/10%);padding-block:var(--nano-spacing-md)}.gn__user-panel-body a:first-child{border-block-start:1px solid rgb(var(--nano-color-base-rgb-1000)/10%)}.gn__user-panel-foot{padding-block-start:var(--nano-spacing-md);display:flex;align-items:center;justify-content:space-between;gap:var(--nano-spacing-md)}.gn__drawer{--panel-background:var(--overflow-bg-color);--header-button-color:var(--overflow-text-color);--body-spacing:0;--header-spacing:var(--nano-spacing-md) 0;--footer-spacing:var(--nano-spacing-md)}.gn__drawer::part(title){display:flex;justify-content:flex-end}.gn__drawer::part(header-actions){order:-1}.gn__drawer-header{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.gn__drawer-menu{display:flex;flex-direction:column;margin:0 var(--nano-spacing-md);padding-block-end:var(--nano-spacing-md);color:var(--overflow-text-color);border-block-start:1px solid rgb(var(--nano-color-base-rgb-1000)/10%);position:relative}.gn__drawer-menu ::slotted(a),.gn__drawer-menu::slotted(a){padding:var(--nano-spacing-md) 0}.gn__drawer-menu ::slotted(a),.gn__drawer-menu ::slotted(.nano-nav-item),.gn__drawer-menu::slotted(a),.gn__drawer-menu::slotted(.nano-nav-item){--padding:var(--nano-spacing-md) 0;display:block;color:inherit !important;border-block-end:1px solid rgb(var(--nano-color-base-rgb-1000)/10%)}.gn__drawer-menu ::slotted(a:hover),.gn__drawer-menu ::slotted(.nano-nav-item:hover){text-decoration:underline;color:var(--overflow-hover-text-color) !important}";
|
|
@@ -83,6 +83,13 @@ const GlobalNav = class {
|
|
|
83
83
|
return this.myAccountData?.user?.uuid ? this.myAccountData.user : null;
|
|
84
84
|
}
|
|
85
85
|
processUserData() {
|
|
86
|
+
// Login & cart are available whether or not the user is logged in,
|
|
87
|
+
// so set them before the logged-out early return.
|
|
88
|
+
if (this.myAccountData) {
|
|
89
|
+
this.loginUrl = this.loginUrl || this.myAccountData.urls?.login;
|
|
90
|
+
this.cartUrl = this.cartUrl || this.myAccountData.urls?.cart;
|
|
91
|
+
this.cartCount = this.cartCount || this.myAccountData.cart?.count;
|
|
92
|
+
}
|
|
86
93
|
if (!this.myAccountUser) {
|
|
87
94
|
this.isLoggedIn = false;
|
|
88
95
|
this.userLinks = [];
|
|
@@ -93,12 +100,9 @@ const GlobalNav = class {
|
|
|
93
100
|
}
|
|
94
101
|
this.userLinks =
|
|
95
102
|
this.myAccountData?.links?.filter((link) => link.area === 'profile-panel-list') || [];
|
|
96
|
-
this.loginUrl = this.loginUrl || this.myAccountData.urls?.login;
|
|
97
103
|
this.logoutUrl = this.logoutUrl || this.myAccountData.urls?.logout;
|
|
98
104
|
this.msgUrl = this.msgUrl || this.myAccountData.urls?.messages;
|
|
99
105
|
this.msgCount = this.msgCount || this.myAccountData.notifications?.count;
|
|
100
|
-
this.cartUrl = this.cartUrl || this.myAccountData.urls?.cart;
|
|
101
|
-
this.cartCount = this.cartCount || this.myAccountData.cart?.count;
|
|
102
106
|
this.isLoggedIn = true;
|
|
103
107
|
this.nanoUserData.emit(this.myAccountUser);
|
|
104
108
|
}
|
|
@@ -505,21 +509,21 @@ const GlobalNav = class {
|
|
|
505
509
|
}
|
|
506
510
|
render() {
|
|
507
511
|
const bpps = this.bpPartials;
|
|
508
|
-
return (renderer.h(index.Host, { key: '
|
|
512
|
+
return (renderer.h(index.Host, { key: '79ca6089ded878867c3febc0add938f4bc93eabd', class: {
|
|
509
513
|
'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
|
|
510
514
|
'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
|
|
511
515
|
'nano-global-nav': true,
|
|
512
|
-
} }, renderer.h("div", { key: '
|
|
516
|
+
} }, renderer.h("div", { key: '87e6512e1973f4e67437959690e1333936e62cb9', class: {
|
|
513
517
|
gn: true,
|
|
514
518
|
'gn__search-open': this.searchBarShown,
|
|
515
|
-
} }, renderer.h("nano-drawer", { key: '
|
|
519
|
+
} }, renderer.h("nano-drawer", { key: '402c74ddc996de4a0568dccd15e2f5e40a25bf7f', ref: (el) => (this.overflowMenu = el), label: "Main menu", part: "drawer", class: "gn__drawer nano-theme-dark", placement: "start", open: this.overflowOpen, onNanoAfterHide: () => (this.overflowOpen = false), onNanoAfterShow: () => (this.overflowOpen = true) }, renderer.h("div", { key: '8d4c585f5a1b14b9bb432904c9527c89a1ab269a', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), renderer.h("nav", { key: '3cdd62fbb5664b6ee24c9b4cf440c6ce7a312ebf', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
|
|
516
520
|
? bpps.mainMenu.tpl()
|
|
517
|
-
: '', renderer.h("slot", { key: '
|
|
521
|
+
: '', renderer.h("slot", { key: '9e6b2a9d61043fb7a17d21e8904525dfaeb1c35f', name: "overflow" }))), renderer.h("div", { key: '015d506e548f826cf2a74f0fb35ffbbb8b666589', class: "gn__menu-bar-wrapper" }, renderer.h("div", { key: 'd37bdf198530424948dab02fc31c9c8d587bff71', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, renderer.h("nav", { key: 'ecc35be807c48079fead123dca093fcdeef0ea37', "aria-label": "Global navigation", class: `gn__main-menu ${this.shouldResize ? 'resizing' : ''}`, part: "main-menu", ref: (el) => (this.mainMenu = el) }, this.breakpoint > bpps.mainMenu.breakpoint && (renderer.h("nano-icon-button", { key: 'd3d673f2e0c8965d3497ac38dee5dcbe51715d2f', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), renderer.h("slot", { key: 'a3cde52880592ad39c88a13c156214cf232536e0', name: "logo" }, renderer.h("a", { key: '03f442de2365b2df4cc617e891f9fdb47c0b553c', 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,
|
|
518
522
|
(a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--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,
|
|
519
|
-
(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: '
|
|
520
|
-
(!!this.searchIndices.length && (renderer.h("nano-dropdown", { key: '
|
|
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: 'daddd483f4767056f6315fae07b23f3fa42516c9', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), renderer.h("div", { key: '91ef351b76c6699960c0f356f5f01eb106182e34', class: "gn__main-menu-actions" }, !this.myAccountData ||
|
|
524
|
+
(!!this.searchIndices.length && (renderer.h("nano-dropdown", { key: 'd0308a67b45e4337fa574d8d010b7e28f14b3239', dialogTitle: "Search Oxford Nanopore Technologies", placement: "bottom", class: "gn__search-dropdown", skidding: -30, distance: 25, open: this.searchBarShown, onNanoAfterShow: this.handleSearchOpenEvent, onNanoAfterHide: this.handleSearchCloseEvent, autoOpen: !!this.searchIndices.length }, renderer.h("nano-icon-button", { key: 'cefaae614f193e02118476a060bfc8eb5ba71d92', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), renderer.h("form", { key: 'bda3ff083a6808046f80336b93fa6a9ee7bdf21b', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (renderer.h("nano-select", { key: '0147d8c7add407f1993850ac72a7765c4a5b0504', part: "search-select", label: "Which site do you wish to search in?", mask: true, hideLabel: true, value: this.activeIndex?.index, onNanoChange: this.handleSearchIndexChangeEvent }, this.searchIndices.map((index) => (renderer.h("nano-option", { selected: index.name === this.searchIndex, value: index.index }, index.name || index.index))))), renderer.h("nano-input", { key: '0513a5ff74d0c0d1b5f88660f8bd1818958face2', ref: (ele) => (this.searchInput = ele), part: "search-input", label: "Search Oxford Nanopore Technologies", placeholder: "Search Oxford Nanopore...", hideLabel: true, clearable: true, showInlineError: false, onNanoChange: (e) => {
|
|
521
525
|
this.handleSearchTermChangeEvent(e.detail.value);
|
|
522
|
-
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, renderer.h("nano-icon-button", { key: '
|
|
526
|
+
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, renderer.h("nano-icon-button", { key: 'a309cc734af7faec9310983ad85a2a119faaae54', slot: "end", "icon-name": "light/magnifying-glass", label: "Search", onClick: this.onSearchSubmit }), renderer.h("nano-datalist", { key: 'e460a1e0b1bcfd0cf1e6a7ab9bdb8b9de3e1eca3', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (renderer.h("div", { key: '586f5f2c0b5a70ee6076da48d795b52def4a9dac', slot: "no-result", class: "gn__search-loading" }, renderer.h("nano-spinner", { key: '45656109a08eea5467f7ae306f31581a82f785c8' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
|
|
523
527
|
this.autocompleteResults.hits.map((hit, i) => (renderer.h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
|
|
524
528
|
searchInsights.searchInsight.sendClick({
|
|
525
529
|
index: this.activeIndex.index,
|
|
@@ -529,13 +533,13 @@ const GlobalNav = class {
|
|
|
529
533
|
positions: [i + 1],
|
|
530
534
|
});
|
|
531
535
|
} }, renderer.h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
|
|
532
|
-
renderer.h("nano-option", { key: '
|
|
533
|
-
])))))), renderer.h("div", { key: '
|
|
534
|
-
renderer.h("nano-icon-button", { key: '
|
|
535
|
-
!!this.cartCount && (renderer.h("nano-badge", { key: '
|
|
536
|
+
renderer.h("nano-option", { key: '1ff8c43585ef9863aacbe489b836889016e14fb3', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
|
|
537
|
+
])))))), renderer.h("div", { key: 'd997f29cc0d38caa6f268ad692194f68d43fa1d8', class: "gn__cart" }, this.cartUrl && [
|
|
538
|
+
renderer.h("nano-icon-button", { key: '992788e9a06e19d3a75d4b8d2439f1900bfcde3e', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }),
|
|
539
|
+
!!this.cartCount && (renderer.h("nano-badge", { key: 'b7e6532aee69cb21901faaead2cd0e88c18f6e75', theme: "danger" }, this.cartCount > 9 ? '9+' : this.cartCount)),
|
|
536
540
|
]), this.breakpoint <= bpps.contact.breakpoint
|
|
537
541
|
? bpps.contact.tpl()
|
|
538
|
-
: '', 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: '
|
|
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: 'fbdd99411cd64c03f00f64120367bc503b4560ec', part: "site-search-results" }, renderer.h("div", { key: '6ba33f25b6af1e5b58426d05b51ef9aaa221daf8', class: "gn__site", part: "site-wrapper" }, renderer.h("slot", { key: 'fbf0bf5f7eb0c4b154537e66ce3f4b0acea4a10e' }))))));
|
|
539
543
|
}
|
|
540
544
|
static get assetsDirs() { return ["assets"]; }
|
|
541
545
|
static get watchers() { return {
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
var index = require('./index-C7Ikbhe3.js');
|
|
7
7
|
var renderer = require('./renderer-bX7EsIYR.js');
|
|
8
8
|
var constructibleStyle = require('./constructible-style-CRdAciHm.js');
|
|
9
|
-
var style = require('./style-
|
|
9
|
+
var style = require('./style-CQ5MIH25.js');
|
|
10
10
|
|
|
11
11
|
const stepBreadcrumbCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:block;--background:var(--nano-color-background-default)}.step-wrapper{container-type:inline-size}.step-list.desktop{display:flex;flex-direction:row;align-items:center;justify-content:space-between;list-style:none;padding:0;margin:0;position:relative;z-index:1}.step-list.desktop::before{content:\"\";display:block;flex-grow:1;block-size:1px;background-color:var(--nano-color-fill-neutral-weak);position:absolute;inset-block-start:50%;z-index:-1;inset-inline-start:0;inline-size:100%}.step-item-wrapper{flex:0 1 auto;display:inline-flex;align-items:center;cursor:pointer}.step-item-wrapper:last-of-type{flex:0 1 auto}.step-item-wrapper:last-of-type .step-item{padding-inline-end:0}.step-item-wrapper:first-of-type::before{display:none}.step-item-wrapper:first-of-type .step-item{padding-inline-start:0}.step-item-wrapper::before{content:\"\";grid-column:2;grid-row:1;inline-size:0.4rem;block-size:0.4rem;place-self:center end;inset-block-start:0.5px;position:relative;border-inline-end:1px solid var(--nano-color-fill-neutral-weak);border-block-end:1px solid var(--nano-color-fill-neutral-weak);rotate:-45deg}:dir(rtl) .step-item-wrapper::after{rotate:45deg}.step-item{all:unset;display:inline-flex;align-items:center;gap:var(--nano-spacing-sm);background-color:var(--background);padding:0 var(--nano-spacing-sm);position:relative}.step-item:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset);z-index:1}.step-item.step-item--disabled{cursor:not-allowed}.step-item.step-item--disabled>*{opacity:0.5}.step-item-icon{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);display:inline-flex;align-items:center;justify-content:center;inline-size:1.5rem;block-size:1.5rem;border-radius:var(--nano-border-radius-circle);background-color:transparent;color:var(--nano-color-text-default);border:1px solid var(--nano-color-fill-neutral-weak)}.step-item--complete .step-item-icon{background-color:var(--nano-color-fill-success);color:var(--nano-color-basic-white);border:none}.step-item--active .step-item-icon{background-color:var(--nano-color-fill-primary);color:var(--nano-color-basic-white);border:none}.step-dropdown{inline-size:100%;min-inline-size:300px}.step-trigger{all:unset;display:inline-flex;gap:var(--nano-spacing-md);align-items:center;inline-size:100%;cursor:pointer}.step-trigger-text{display:flex;flex-direction:column}.step-trigger-now{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-xl);line-height:var(--nano-line-height-denser);text-wrap:balance;color:var(--nano-color-text-default)}.step-trigger-next{font-size:var(--nano-font-size-2xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);color:var(--nano-color-fill-neutral)}.step-trigger-icon{margin-inline-start:auto;color:var(--nano-color-fill-primary);transition:var(--nano-transition-x-fast) rotate}[open] .step-trigger-icon{rotate:180deg}.step-progress-circle{--size:64px;--thickness:4px;inline-size:var(--size);min-inline-size:var(--size);aspect-ratio:1/1;border-radius:50%;display:grid;place-items:center;position:relative}.step-progress-circle::before{content:\"\";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--nano-color-fill-success) calc(var(--value) / var(--max) * 360deg), var(--nano-color-surface-neutral) 0);-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), black 90%);mask:radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), black 90%)}.step-progress-title{font-size:var(--nano-font-size-sm);line-height:var(--nano-line-height-normal);font-weight:var(--nano-font-weight-bold);white-space:nowrap;color:var(--nano-color-fill-neutral)}.step-progress-title strong{color:var(--nano-color-text-default)}";
|
|
12
12
|
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* Custom elements for Nanopore-Digital Web applications
|
|
3
|
+
*/
|
|
4
|
+
'use strict';
|
|
5
|
+
|
|
6
|
+
let cachedCSStylesheet;
|
|
7
|
+
// de-dupes the async fetch fallback so we only build the stylesheet once even
|
|
8
|
+
// if several components request it before the fetch resolves
|
|
9
|
+
let pendingCSStylesheet = null;
|
|
10
|
+
// arbitrary pieces of text that appear early in the `nano-components` stylesheet
|
|
11
|
+
// this is a bit fragile but does the job
|
|
12
|
+
const NANO_STYLESHEET_MARKERS = ['.nano-toast-stack', '.nano-theme'];
|
|
13
|
+
function cssTextContainsNanoMarker(cssText) {
|
|
14
|
+
return NANO_STYLESHEET_MARKERS.some((marker) => cssText.indexOf(marker) > -1);
|
|
15
|
+
}
|
|
16
|
+
// only cross-origin sheets whose href looks like the nano stylesheet are worth
|
|
17
|
+
// fetching as a fallback - this avoids pulling unrelated third-party sheets over
|
|
18
|
+
// the network (and into shadow roots). The `@nanoporetech-digital/style` package
|
|
19
|
+
// serves bundles such as `core.css` / `nano.css`.
|
|
20
|
+
const NANO_STYLESHEET_HREF_PATTERNS = [
|
|
21
|
+
'@nanoporetech-digital/style',
|
|
22
|
+
'/core.css',
|
|
23
|
+
'/nano.css',
|
|
24
|
+
];
|
|
25
|
+
function isLikelyNanoStylesheetHref(href) {
|
|
26
|
+
return NANO_STYLESHEET_HREF_PATTERNS.some((pattern) => href.indexOf(pattern) > -1);
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* Adds the global nano-components stylesheets as a constructable stylesheet to a shadow root.
|
|
30
|
+
* This is useful when shadow DOM enabled components:
|
|
31
|
+
* - use css-only components
|
|
32
|
+
* - use themed sections within their markup (i.e. `<div class="nano-theme-darK">Always dark themed section</div>`)
|
|
33
|
+
*
|
|
34
|
+
* @param shadowRoot - The shadow root to add the stylesheet to
|
|
35
|
+
*/
|
|
36
|
+
function addGlobalStylesheetToShadow(shadowRoot) {
|
|
37
|
+
if (!shadowRoot)
|
|
38
|
+
return;
|
|
39
|
+
if (cachedCSStylesheet) {
|
|
40
|
+
// we've already constructed the stylesheet
|
|
41
|
+
shadowRoot.adoptedStyleSheets.push(cachedCSStylesheet);
|
|
42
|
+
return;
|
|
43
|
+
}
|
|
44
|
+
const globalStylesheets = document.styleSheets;
|
|
45
|
+
let stylesheet = null;
|
|
46
|
+
let rule = null;
|
|
47
|
+
const globalStylesheet = [];
|
|
48
|
+
// stylesheets we couldn't read directly (typically CORS-restricted, e.g.
|
|
49
|
+
// served from a CDN without a `crossorigin` attribute on the `<link>`)
|
|
50
|
+
const inaccessibleHrefs = [];
|
|
51
|
+
for (stylesheet of globalStylesheets) {
|
|
52
|
+
if (!(stylesheet instanceof CSSStyleSheet)) {
|
|
53
|
+
continue;
|
|
54
|
+
}
|
|
55
|
+
let cssRules;
|
|
56
|
+
try {
|
|
57
|
+
// Attempt to access the cssRules of the stylesheet
|
|
58
|
+
cssRules = stylesheet?.cssRules;
|
|
59
|
+
// no cssRules? skip it
|
|
60
|
+
if (!cssRules)
|
|
61
|
+
continue;
|
|
62
|
+
}
|
|
63
|
+
catch {
|
|
64
|
+
// some stylesheets may not be accessible due to CORS or other restrictions.
|
|
65
|
+
// if the href looks like the nano stylesheet, remember it so we can try to
|
|
66
|
+
// fetch it as a fallback below - ignore unrelated third-party sheets.
|
|
67
|
+
if (stylesheet.href && isLikelyNanoStylesheetHref(stylesheet.href)) {
|
|
68
|
+
inaccessibleHrefs.push(stylesheet.href);
|
|
69
|
+
}
|
|
70
|
+
continue;
|
|
71
|
+
}
|
|
72
|
+
for (rule of cssRules) {
|
|
73
|
+
if (rule instanceof CSSLayerBlockRule &&
|
|
74
|
+
cssTextContainsNanoMarker(rule.cssText)) {
|
|
75
|
+
globalStylesheet.push(stylesheet);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
if (globalStylesheet.length) {
|
|
80
|
+
// if we found the global stylesheet, add it to the shadow root
|
|
81
|
+
const sheet = new CSSStyleSheet();
|
|
82
|
+
for (const globalSheet of globalStylesheet) {
|
|
83
|
+
for (const rule of globalSheet.cssRules) {
|
|
84
|
+
sheet.insertRule(rule.cssText);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
cachedCSStylesheet = sheet;
|
|
88
|
+
shadowRoot.adoptedStyleSheets.push(sheet);
|
|
89
|
+
return;
|
|
90
|
+
}
|
|
91
|
+
// We couldn't find the global stylesheet via the CSSOM. If there are
|
|
92
|
+
// CORS-restricted stylesheets (e.g. served from a CDN), fall back to
|
|
93
|
+
// fetching their raw text and constructing the stylesheet asynchronously.
|
|
94
|
+
if (inaccessibleHrefs.length) {
|
|
95
|
+
void adoptGlobalStylesheetFromHrefs(inaccessibleHrefs, shadowRoot);
|
|
96
|
+
return;
|
|
97
|
+
}
|
|
98
|
+
console.warn('No global stylesheet found');
|
|
99
|
+
}
|
|
100
|
+
/**
|
|
101
|
+
* Fallback for cross-origin (e.g. CDN-served) stylesheets whose rules cannot be
|
|
102
|
+
* read via the CSSOM. Fetches the raw CSS text and, once the nano stylesheet is
|
|
103
|
+
* found and constructed, adopts it into the given shadow root.
|
|
104
|
+
*/
|
|
105
|
+
async function adoptGlobalStylesheetFromHrefs(hrefs, shadowRoot) {
|
|
106
|
+
if (!pendingCSStylesheet) {
|
|
107
|
+
pendingCSStylesheet = buildGlobalStylesheetFromHrefs(hrefs);
|
|
108
|
+
}
|
|
109
|
+
const sheet = await pendingCSStylesheet;
|
|
110
|
+
if (sheet && shadowRoot) {
|
|
111
|
+
shadowRoot.adoptedStyleSheets.push(sheet);
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
async function buildGlobalStylesheetFromHrefs(hrefs) {
|
|
115
|
+
// fetch all candidate stylesheets in parallel rather than one-by-one, so we
|
|
116
|
+
// don't serialise the network latency across multiple cross-origin sheets
|
|
117
|
+
const cssTexts = await Promise.all(hrefs.map(async (href) => {
|
|
118
|
+
try {
|
|
119
|
+
const response = await fetch(href);
|
|
120
|
+
if (!response.ok)
|
|
121
|
+
return null;
|
|
122
|
+
return await response.text();
|
|
123
|
+
}
|
|
124
|
+
catch (e) {
|
|
125
|
+
console.warn('Unable to fetch stylesheet:', href, e);
|
|
126
|
+
return null;
|
|
127
|
+
}
|
|
128
|
+
}));
|
|
129
|
+
// keep the original document order and combine every matching stylesheet -
|
|
130
|
+
// the nano styles are split across multiple files (e.g. core.css, light.css,
|
|
131
|
+
// dark.css), so we must adopt all of them, not just the first match
|
|
132
|
+
const matchingCss = cssTexts.filter((text) => !!text && cssTextContainsNanoMarker(text));
|
|
133
|
+
if (matchingCss.length) {
|
|
134
|
+
const sheet = new CSSStyleSheet();
|
|
135
|
+
await sheet.replace(matchingCss.join('\n'));
|
|
136
|
+
cachedCSStylesheet = sheet;
|
|
137
|
+
return sheet;
|
|
138
|
+
}
|
|
139
|
+
console.warn('No global stylesheet found');
|
|
140
|
+
return null;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
exports.addGlobalStylesheetToShadow = addGlobalStylesheetToShadow;
|
|
@@ -53,7 +53,7 @@ export class NanoCta {
|
|
|
53
53
|
"mutable": false,
|
|
54
54
|
"complexType": {
|
|
55
55
|
"original": "Omit<'success' | 'warning', Color>",
|
|
56
|
-
"resolved": "{ readonly [x: number]: string; [Symbol.iterator]: () => IterableIterator<string>; search: { (regexp: string | RegExp): number; (searcher: { [Symbol.search](string: string): number; }): number; }; replace: { (searchValue: string | RegExp, replaceValue: string): string; (searchValue: string | RegExp, replacer: (substring: string, ...args: any[]) => string): string; (searchValue: { [Symbol.replace](string: string, replaceValue: string): string; }, replaceValue: string): string; (searchValue: { [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string; }, replacer: (substring: string, ...args: any[]) => string): string; }; link: (url: string) => string; small: () => string; sub: () => string; sup: () => string; big: () => string; blink: () => string; strike: () => string;
|
|
56
|
+
"resolved": "{ readonly [x: number]: string; [Symbol.iterator]: () => IterableIterator<string>; search: { (regexp: string | RegExp): number; (searcher: { [Symbol.search](string: string): number; }): number; }; replace: { (searchValue: string | RegExp, replaceValue: string): string; (searchValue: string | RegExp, replacer: (substring: string, ...args: any[]) => string): string; (searchValue: { [Symbol.replace](string: string, replaceValue: string): string; }, replaceValue: string): string; (searchValue: { [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string; }, replacer: (substring: string, ...args: any[]) => string): string; }; link: (url: string) => string; small: () => string; sub: () => string; sup: () => string; big: () => string; blink: () => string; strike: () => string; readonly length: number; toString: () => string; concat: (...strings: string[]) => string; slice: (start?: number, end?: number) => string; indexOf: (searchString: string, position?: number) => number; lastIndexOf: (searchString: string, position?: number) => number; includes: (searchString: string, position?: number) => boolean; at: (index: number) => string; charAt: (pos: number) => string; charCodeAt: (index: number) => number; localeCompare: { (that: string): number; (that: string, locales?: string | string[], options?: CollatorOptions): number; (that: string, locales?: LocalesArgument, options?: CollatorOptions): number; }; match: { (regexp: string | RegExp): RegExpMatchArray; (matcher: { [Symbol.match](string: string): RegExpMatchArray; }): RegExpMatchArray; }; split: { (separator: string | RegExp, limit?: number): string[]; (splitter: { [Symbol.split](string: string, limit?: number): string[]; }, limit?: number): string[]; }; substring: (start: number, end?: number) => string; toLowerCase: () => string; toLocaleLowerCase: { (locales?: string | string[]): string; (locales?: LocalesArgument): string; }; toUpperCase: () => string; toLocaleUpperCase: { (locales?: string | string[]): string; (locales?: LocalesArgument): string; }; trim: () => string; substr: (from: number, length?: number) => string; codePointAt: (pos: number) => number; endsWith: (searchString: string, endPosition?: number) => boolean; normalize: { (form: \"NFC\" | \"NFD\" | \"NFKC\" | \"NFKD\"): string; (form?: string): string; }; repeat: (count: number) => string; startsWith: (searchString: string, position?: number) => boolean; anchor: (name: string) => string; bold: () => string; fixed: () => string; fontcolor: (color: string) => string; fontsize: { (size: number): string; (size: string): string; }; italics: () => string; padStart: (maxLength: number, fillString?: string) => string; padEnd: (maxLength: number, fillString?: string) => string; trimEnd: () => string; trimStart: () => string; trimLeft: () => string; trimRight: () => string; matchAll: (regexp: RegExp) => IterableIterator<RegExpExecArray>; replaceAll: { (searchValue: string | RegExp, replaceValue: string): string; (searchValue: string | RegExp, replacer: (substring: string, ...args: any[]) => string): string; }; valueOf: () => string; }",
|
|
57
57
|
"references": {
|
|
58
58
|
"Omit": {
|
|
59
59
|
"location": "global",
|
|
@@ -109,7 +109,9 @@ export class DataList {
|
|
|
109
109
|
const { height, top } = this.nanoDropdown.tetherTo.getBoundingClientRect();
|
|
110
110
|
this.nanoDropdown.style.setProperty('--max-height', `max(${window.innerHeight - (height + top + 40)}px, 48vw)`);
|
|
111
111
|
}
|
|
112
|
-
this.nanoDropdown
|
|
112
|
+
if (this.nanoDropdown) {
|
|
113
|
+
this.nanoDropdown.open = this.open;
|
|
114
|
+
}
|
|
113
115
|
if (this.connectedInput) {
|
|
114
116
|
this.connectedInput.setAttribute('aria-expanded', this.open.toString());
|
|
115
117
|
}
|
|
@@ -533,18 +535,18 @@ export class DataList {
|
|
|
533
535
|
}
|
|
534
536
|
}
|
|
535
537
|
render() {
|
|
536
|
-
return (h(Host, { key: '
|
|
538
|
+
return (h(Host, { key: '2e64e78b3582d1c7198f55425f87c115a597beb1', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
|
|
537
539
|
? 'Select options from the list below'
|
|
538
|
-
: undefined }, h("nano-dropdown", { key: '
|
|
540
|
+
: undefined }, h("nano-dropdown", { key: '3596eb7b1364fb13a8ca137ce846223508ca0775', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
|
|
539
541
|
dlist__dropdown: true,
|
|
540
542
|
'dlist--isfiltered': this.isFiltered,
|
|
541
|
-
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '
|
|
543
|
+
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '473e5fff336a3b8d2c0d52fbb85b7bce88cdaff2', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
|
|
542
544
|
dlist__menu: true,
|
|
543
545
|
'dlist__menu--open': this.dropwdownOpen,
|
|
544
|
-
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '
|
|
546
|
+
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '572df9989a0ea9b70918a79f73084080d0adf975', name: "list-top" }), h("slot", { key: '0cdebdc62aa2aee8ca169aa71ee770310773edc7' }), h("slot", { key: 'f694eae7a6312f8220d7eddb5367830836130c5c', name: "internal-opts" }), h("slot", { key: 'f6f4b2a0c7401799db21f85b14e76a81b43ff751', name: "list-bottom" })), h("nano-menu", { key: 'a7c487506e3a69eb65d60382a1c903196715f2a7', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
|
|
545
547
|
dlist__menu: true,
|
|
546
548
|
'dlist__menu--open': this.dropwdownOpen,
|
|
547
|
-
} }, h("slot", { key: '
|
|
549
|
+
} }, h("slot", { key: 'bfadcf697f2c9a76acd7ea557c87022d341d9c48', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '57d347cd46afb73739d100feb35ecad36b48640f', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
|
|
548
550
|
}
|
|
549
551
|
static get is() { return "nano-datalist"; }
|
|
550
552
|
static get encapsulation() { return "shadow"; }
|
|
@@ -103,6 +103,13 @@ export class GlobalNav {
|
|
|
103
103
|
return this.myAccountData?.user?.uuid ? this.myAccountData.user : null;
|
|
104
104
|
}
|
|
105
105
|
processUserData() {
|
|
106
|
+
// Login & cart are available whether or not the user is logged in,
|
|
107
|
+
// so set them before the logged-out early return.
|
|
108
|
+
if (this.myAccountData) {
|
|
109
|
+
this.loginUrl = this.loginUrl || this.myAccountData.urls?.login;
|
|
110
|
+
this.cartUrl = this.cartUrl || this.myAccountData.urls?.cart;
|
|
111
|
+
this.cartCount = this.cartCount || this.myAccountData.cart?.count;
|
|
112
|
+
}
|
|
106
113
|
if (!this.myAccountUser) {
|
|
107
114
|
this.isLoggedIn = false;
|
|
108
115
|
this.userLinks = [];
|
|
@@ -113,12 +120,9 @@ export class GlobalNav {
|
|
|
113
120
|
}
|
|
114
121
|
this.userLinks =
|
|
115
122
|
this.myAccountData?.links?.filter((link) => link.area === 'profile-panel-list') || [];
|
|
116
|
-
this.loginUrl = this.loginUrl || this.myAccountData.urls?.login;
|
|
117
123
|
this.logoutUrl = this.logoutUrl || this.myAccountData.urls?.logout;
|
|
118
124
|
this.msgUrl = this.msgUrl || this.myAccountData.urls?.messages;
|
|
119
125
|
this.msgCount = this.msgCount || this.myAccountData.notifications?.count;
|
|
120
|
-
this.cartUrl = this.cartUrl || this.myAccountData.urls?.cart;
|
|
121
|
-
this.cartCount = this.cartCount || this.myAccountData.cart?.count;
|
|
122
126
|
this.isLoggedIn = true;
|
|
123
127
|
this.nanoUserData.emit(this.myAccountUser);
|
|
124
128
|
}
|
|
@@ -521,21 +525,21 @@ export class GlobalNav {
|
|
|
521
525
|
}
|
|
522
526
|
render() {
|
|
523
527
|
const bpps = this.bpPartials;
|
|
524
|
-
return (h(Host, { key: '
|
|
528
|
+
return (h(Host, { key: '79ca6089ded878867c3febc0add938f4bc93eabd', class: {
|
|
525
529
|
'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
|
|
526
530
|
'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
|
|
527
531
|
'nano-global-nav': true,
|
|
528
|
-
} }, h("div", { key: '
|
|
532
|
+
} }, h("div", { key: '87e6512e1973f4e67437959690e1333936e62cb9', class: {
|
|
529
533
|
gn: true,
|
|
530
534
|
'gn__search-open': this.searchBarShown,
|
|
531
|
-
} }, h("nano-drawer", { key: '
|
|
535
|
+
} }, h("nano-drawer", { key: '402c74ddc996de4a0568dccd15e2f5e40a25bf7f', ref: (el) => (this.overflowMenu = el), label: "Main menu", part: "drawer", class: "gn__drawer nano-theme-dark", placement: "start", open: this.overflowOpen, onNanoAfterHide: () => (this.overflowOpen = false), onNanoAfterShow: () => (this.overflowOpen = true) }, h("div", { key: '8d4c585f5a1b14b9bb432904c9527c89a1ab269a', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: '3cdd62fbb5664b6ee24c9b4cf440c6ce7a312ebf', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
|
|
532
536
|
? bpps.mainMenu.tpl()
|
|
533
|
-
: '', h("slot", { key: '
|
|
537
|
+
: '', h("slot", { key: '9e6b2a9d61043fb7a17d21e8904525dfaeb1c35f', name: "overflow" }))), h("div", { key: '015d506e548f826cf2a74f0fb35ffbbb8b666589', class: "gn__menu-bar-wrapper" }, h("div", { key: 'd37bdf198530424948dab02fc31c9c8d587bff71', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: 'ecc35be807c48079fead123dca093fcdeef0ea37', "aria-label": "Global navigation", class: `gn__main-menu ${this.shouldResize ? 'resizing' : ''}`, part: "main-menu", ref: (el) => (this.mainMenu = el) }, this.breakpoint > bpps.mainMenu.breakpoint && (h("nano-icon-button", { key: 'd3d673f2e0c8965d3497ac38dee5dcbe51715d2f', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: 'a3cde52880592ad39c88a13c156214cf232536e0', name: "logo" }, h("a", { key: '03f442de2365b2df4cc617e891f9fdb47c0b553c', href: this.logoUrl, class: "gn__logo-link", part: "logo-link" }, this.breakpoint <= bpps.logo.breakpoint ? (h("img", { src: getAssetPath('../nano-assets/ont-logo.svg'), alt: `Oxford Nanopore Technologies logo. Features a stylised representation of a nanopore,
|
|
534
538
|
(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,
|
|
535
|
-
(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: '
|
|
536
|
-
(!!this.searchIndices.length && (h("nano-dropdown", { key: '
|
|
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: 'daddd483f4767056f6315fae07b23f3fa42516c9', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: '91ef351b76c6699960c0f356f5f01eb106182e34', class: "gn__main-menu-actions" }, !this.myAccountData ||
|
|
540
|
+
(!!this.searchIndices.length && (h("nano-dropdown", { key: 'd0308a67b45e4337fa574d8d010b7e28f14b3239', dialogTitle: "Search Oxford Nanopore Technologies", placement: "bottom", class: "gn__search-dropdown", skidding: -30, distance: 25, open: this.searchBarShown, onNanoAfterShow: this.handleSearchOpenEvent, onNanoAfterHide: this.handleSearchCloseEvent, autoOpen: !!this.searchIndices.length }, h("nano-icon-button", { key: 'cefaae614f193e02118476a060bfc8eb5ba71d92', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), h("form", { key: 'bda3ff083a6808046f80336b93fa6a9ee7bdf21b', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '0147d8c7add407f1993850ac72a7765c4a5b0504', part: "search-select", label: "Which site do you wish to search in?", mask: true, hideLabel: true, value: this.activeIndex?.index, onNanoChange: this.handleSearchIndexChangeEvent }, this.searchIndices.map((index) => (h("nano-option", { selected: index.name === this.searchIndex, value: index.index }, index.name || index.index))))), h("nano-input", { key: '0513a5ff74d0c0d1b5f88660f8bd1818958face2', ref: (ele) => (this.searchInput = ele), part: "search-input", label: "Search Oxford Nanopore Technologies", placeholder: "Search Oxford Nanopore...", hideLabel: true, clearable: true, showInlineError: false, onNanoChange: (e) => {
|
|
537
541
|
this.handleSearchTermChangeEvent(e.detail.value);
|
|
538
|
-
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon-button", { key: '
|
|
542
|
+
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon-button", { key: 'a309cc734af7faec9310983ad85a2a119faaae54', slot: "end", "icon-name": "light/magnifying-glass", label: "Search", onClick: this.onSearchSubmit }), h("nano-datalist", { key: 'e460a1e0b1bcfd0cf1e6a7ab9bdb8b9de3e1eca3', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '586f5f2c0b5a70ee6076da48d795b52def4a9dac', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: '45656109a08eea5467f7ae306f31581a82f785c8' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
|
|
539
543
|
this.autocompleteResults.hits.map((hit, i) => (h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
|
|
540
544
|
searchInsight.sendClick({
|
|
541
545
|
index: this.activeIndex.index,
|
|
@@ -545,13 +549,13 @@ export class GlobalNav {
|
|
|
545
549
|
positions: [i + 1],
|
|
546
550
|
});
|
|
547
551
|
} }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
|
|
548
|
-
h("nano-option", { key: '
|
|
549
|
-
])))))), h("div", { key: '
|
|
550
|
-
h("nano-icon-button", { key: '
|
|
551
|
-
!!this.cartCount && (h("nano-badge", { key: '
|
|
552
|
+
h("nano-option", { key: '1ff8c43585ef9863aacbe489b836889016e14fb3', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
|
|
553
|
+
])))))), h("div", { key: 'd997f29cc0d38caa6f268ad692194f68d43fa1d8', class: "gn__cart" }, this.cartUrl && [
|
|
554
|
+
h("nano-icon-button", { key: '992788e9a06e19d3a75d4b8d2439f1900bfcde3e', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }),
|
|
555
|
+
!!this.cartCount && (h("nano-badge", { key: 'b7e6532aee69cb21901faaead2cd0e88c18f6e75', theme: "danger" }, this.cartCount > 9 ? '9+' : this.cartCount)),
|
|
552
556
|
]), this.breakpoint <= bpps.contact.breakpoint
|
|
553
557
|
? bpps.contact.tpl()
|
|
554
|
-
: '', 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: '
|
|
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: 'fbdd99411cd64c03f00f64120367bc503b4560ec', part: "site-search-results" }, h("div", { key: '6ba33f25b6af1e5b58426d05b51ef9aaa221daf8', class: "gn__site", part: "site-wrapper" }, h("slot", { key: 'fbf0bf5f7eb0c4b154537e66ce3f4b0acea4a10e' }))))));
|
|
555
559
|
}
|
|
556
560
|
static get is() { return "nano-global-nav"; }
|
|
557
561
|
static get encapsulation() { return "shadow"; }
|