@nanoporetech-digital/components 9.1.0 → 9.1.2
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-mdd-item.cjs.entry.js +1 -1
- package/dist/cjs/nano-step-breadcrumb.cjs.entry.js +1 -1
- package/dist/cjs/style-CIGbDa5n.js +141 -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/components/mdd/mdd-item.css +32 -30
- package/dist/collection/utils/style.js +79 -10
- package/dist/components/datalist.js +8 -6
- package/dist/components/nano-global-nav.js +19 -15
- package/dist/components/nano-mdd-item.js +1 -1
- package/dist/components/style.js +79 -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-mdd-item.entry.js +1 -1
- package/dist/esm/nano-step-breadcrumb.entry.js +1 -1
- package/dist/esm/style-BVRinbua.js +139 -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-mdd-item.entry.js +1 -1
- package/dist/nano-components/nano-step-breadcrumb.entry.js +1 -1
- package/dist/nano-components/style-BVRinbua.js +4 -0
- package/docs-json.json +7 -7
- package/hydrate/index.js +28 -22
- package/hydrate/index.mjs +28 -22
- 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
package/hydrate/index.js
CHANGED
|
@@ -9115,7 +9115,9 @@ class DataList {
|
|
|
9115
9115
|
const { height, top } = this.nanoDropdown.tetherTo.getBoundingClientRect();
|
|
9116
9116
|
this.nanoDropdown.style.setProperty('--max-height', `max(${window.innerHeight - (height + top + 40)}px, 48vw)`);
|
|
9117
9117
|
}
|
|
9118
|
-
this.nanoDropdown
|
|
9118
|
+
if (this.nanoDropdown) {
|
|
9119
|
+
this.nanoDropdown.open = this.open;
|
|
9120
|
+
}
|
|
9119
9121
|
if (this.connectedInput) {
|
|
9120
9122
|
this.connectedInput.setAttribute('aria-expanded', this.open.toString());
|
|
9121
9123
|
}
|
|
@@ -9535,18 +9537,18 @@ class DataList {
|
|
|
9535
9537
|
}
|
|
9536
9538
|
}
|
|
9537
9539
|
render() {
|
|
9538
|
-
return (h(Host, { key: '
|
|
9540
|
+
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
|
|
9539
9541
|
? 'Select options from the list below'
|
|
9540
|
-
: undefined }, h("nano-dropdown", { key: '
|
|
9542
|
+
: 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: {
|
|
9541
9543
|
dlist__dropdown: true,
|
|
9542
9544
|
'dlist--isfiltered': this.isFiltered,
|
|
9543
|
-
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '
|
|
9545
|
+
}, 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: {
|
|
9544
9546
|
dlist__menu: true,
|
|
9545
9547
|
'dlist__menu--open': this.dropwdownOpen,
|
|
9546
|
-
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '
|
|
9548
|
+
}, 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: {
|
|
9547
9549
|
dlist__menu: true,
|
|
9548
9550
|
'dlist__menu--open': this.dropwdownOpen,
|
|
9549
|
-
} }, h("slot", { key: '
|
|
9551
|
+
} }, 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.")))));
|
|
9550
9552
|
}
|
|
9551
9553
|
static get watchers() { return {
|
|
9552
9554
|
"open": ["openWatcher"],
|
|
@@ -14833,6 +14835,13 @@ class GlobalNav {
|
|
|
14833
14835
|
return this.myAccountData?.user?.uuid ? this.myAccountData.user : null;
|
|
14834
14836
|
}
|
|
14835
14837
|
processUserData() {
|
|
14838
|
+
// Login & cart are available whether or not the user is logged in,
|
|
14839
|
+
// so set them before the logged-out early return.
|
|
14840
|
+
if (this.myAccountData) {
|
|
14841
|
+
this.loginUrl = this.loginUrl || this.myAccountData.urls?.login;
|
|
14842
|
+
this.cartUrl = this.cartUrl || this.myAccountData.urls?.cart;
|
|
14843
|
+
this.cartCount = this.cartCount || this.myAccountData.cart?.count;
|
|
14844
|
+
}
|
|
14836
14845
|
if (!this.myAccountUser) {
|
|
14837
14846
|
this.isLoggedIn = false;
|
|
14838
14847
|
this.userLinks = [];
|
|
@@ -14843,12 +14852,9 @@ class GlobalNav {
|
|
|
14843
14852
|
}
|
|
14844
14853
|
this.userLinks =
|
|
14845
14854
|
this.myAccountData?.links?.filter((link) => link.area === 'profile-panel-list') || [];
|
|
14846
|
-
this.loginUrl = this.loginUrl || this.myAccountData.urls?.login;
|
|
14847
14855
|
this.logoutUrl = this.logoutUrl || this.myAccountData.urls?.logout;
|
|
14848
14856
|
this.msgUrl = this.msgUrl || this.myAccountData.urls?.messages;
|
|
14849
14857
|
this.msgCount = this.msgCount || this.myAccountData.notifications?.count;
|
|
14850
|
-
this.cartUrl = this.cartUrl || this.myAccountData.urls?.cart;
|
|
14851
|
-
this.cartCount = this.cartCount || this.myAccountData.cart?.count;
|
|
14852
14858
|
this.isLoggedIn = true;
|
|
14853
14859
|
this.nanoUserData.emit(this.myAccountUser);
|
|
14854
14860
|
}
|
|
@@ -15254,21 +15260,21 @@ class GlobalNav {
|
|
|
15254
15260
|
}
|
|
15255
15261
|
render() {
|
|
15256
15262
|
const bpps = this.bpPartials;
|
|
15257
|
-
return (h(Host, { key: '
|
|
15263
|
+
return (h(Host, { key: '79ca6089ded878867c3febc0add938f4bc93eabd', class: {
|
|
15258
15264
|
'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
|
|
15259
15265
|
'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
|
|
15260
15266
|
'nano-global-nav': true,
|
|
15261
|
-
} }, h("div", { key: '
|
|
15267
|
+
} }, h("div", { key: '87e6512e1973f4e67437959690e1333936e62cb9', class: {
|
|
15262
15268
|
gn: true,
|
|
15263
15269
|
'gn__search-open': this.searchBarShown,
|
|
15264
|
-
} }, h("nano-drawer", { key: '
|
|
15270
|
+
} }, 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
|
|
15265
15271
|
? bpps.mainMenu.tpl()
|
|
15266
|
-
: '', h("slot", { key: '
|
|
15272
|
+
: '', 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,
|
|
15267
15273
|
(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,
|
|
15268
|
-
(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: '
|
|
15269
|
-
(!!this.searchIndices.length && (h("nano-dropdown", { key: '
|
|
15274
|
+
(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 ||
|
|
15275
|
+
(!!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) => {
|
|
15270
15276
|
this.handleSearchTermChangeEvent(e.detail.value);
|
|
15271
|
-
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon-button", { key: '
|
|
15277
|
+
}, 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 && [
|
|
15272
15278
|
this.autocompleteResults.hits.map((hit, i) => (h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
|
|
15273
15279
|
searchInsight.sendClick({
|
|
15274
15280
|
index: this.activeIndex.index,
|
|
@@ -15278,13 +15284,13 @@ class GlobalNav {
|
|
|
15278
15284
|
positions: [i + 1],
|
|
15279
15285
|
});
|
|
15280
15286
|
} }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
|
|
15281
|
-
h("nano-option", { key: '
|
|
15282
|
-
])))))), h("div", { key: '
|
|
15283
|
-
h("nano-icon-button", { key: '
|
|
15284
|
-
!!this.cartCount && (h("nano-badge", { key: '
|
|
15287
|
+
h("nano-option", { key: '1ff8c43585ef9863aacbe489b836889016e14fb3', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
|
|
15288
|
+
])))))), h("div", { key: 'd997f29cc0d38caa6f268ad692194f68d43fa1d8', class: "gn__cart" }, this.cartUrl && [
|
|
15289
|
+
h("nano-icon-button", { key: '992788e9a06e19d3a75d4b8d2439f1900bfcde3e', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }),
|
|
15290
|
+
!!this.cartCount && (h("nano-badge", { key: 'b7e6532aee69cb21901faaead2cd0e88c18f6e75', theme: "danger" }, this.cartCount > 9 ? '9+' : this.cartCount)),
|
|
15285
15291
|
]), this.breakpoint <= bpps.contact.breakpoint
|
|
15286
15292
|
? bpps.contact.tpl()
|
|
15287
|
-
: '', 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: '
|
|
15293
|
+
: '', 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' }))))));
|
|
15288
15294
|
}
|
|
15289
15295
|
static get assetsDirs() { return ["assets"]; }
|
|
15290
15296
|
static get watchers() { return {
|
|
@@ -19139,7 +19145,7 @@ class Mdd {
|
|
|
19139
19145
|
}; }
|
|
19140
19146
|
}
|
|
19141
19147
|
|
|
19142
|
-
const mddItemCss = ":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}}nano-mdd-item{display:block}nano-mdd-item a:not(nano-content-links a){display:flex;flex-direction:column;gap:var(--nano-spacing-xs);color:var(--nano-color-base-1000);text-decoration:none}@media (width < 1200px){nano-mdd-item a:not(nano-content-links a){font-size:var(--nano-font-size-xs)}}nano-mdd-item a:not(nano-content-links a):hover{text-decoration:underline;color:var(--nano-color-primary-1000)}nano-mdd-item a:not(nano-content-links a)>p{color:var(--nano-color-neutral-1000);font-size:var(--nano-font-size-xs);letter-spacing:var(--nano-letter-spacing-denser);margin:0}@media (width < 1200px){nano-mdd-item a:not(nano-content-links a)>p{font-size:var(--nano-font-size-2xs)}}nano-mdd-item ul{margin:0;padding:0}nano-mdd-item ul li{margin-inline:0;list-style:none;margin-block-end:var(--nano-spacing-l2);line-height:var(--nano-line-height-dense)}nano-mdd-item .
|
|
19148
|
+
const mddItemCss = ":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}}nano-mdd-item{display:block}nano-mdd-item a:not(nano-content-links a){display:flex;flex-direction:column;gap:var(--nano-spacing-xs);color:var(--nano-color-base-1000);text-decoration:none}@media (width < 1200px){nano-mdd-item a:not(nano-content-links a){font-size:var(--nano-font-size-xs)}}nano-mdd-item a:not(nano-content-links a):hover{text-decoration:underline;color:var(--nano-color-primary-1000)}nano-mdd-item a:not(nano-content-links a)>p{color:var(--nano-color-neutral-1000);font-size:var(--nano-font-size-xs);letter-spacing:var(--nano-letter-spacing-denser);margin:0}@media (width < 1200px){nano-mdd-item a:not(nano-content-links a)>p{font-size:var(--nano-font-size-2xs)}}nano-mdd-item ul{margin:0;padding:0}nano-mdd-item ul li{margin-inline:0;list-style:none;margin-block-end:var(--nano-spacing-l2);line-height:var(--nano-line-height-dense)}nano-mdd-item .mdd__link-columns{gap:var(--nano-spacing-xl)}nano-mdd-item .mdd__link-columns:has(>:nth-child(6)){columns:2}nano-mdd-item .mdd__link-columns>*{display:block;margin-block-end:var(--nano-spacing-l2)}nano-mdd-item .mdd__view-all{display:inline-flex;flex-direction:row;align-items:center;gap:0.25em;color:var(--nano-color-primary-1100);font-size:var(--nano-font-size-2xs);text-decoration:underline}nano-mdd-item .mdd__view-all::after{content:\"\";display:block;flex-shrink:0;inline-size:1em;block-size:1em;background-color:currentcolor;-webkit-mask-image:var(--nano-component-icon-chevron);mask-image:var(--nano-component-icon-chevron);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover}nano-mdd-item:not([accordion]) [slot=label]{display:block;color:var(--nano-color-text-neutral);font-size:var(--nano-font-size-2xs);line-height:var(--nano-line-height-normal);letter-spacing:1.2px;text-transform:uppercase;margin-block-end:var(--nano-spacing-md)}nano-mdd-item:not([accordion]) [slot=label]::after{content:\"\";display:block;padding-block-start:var(--nano-spacing-md);border-block-end:1px solid rgb(var(--nano-color-base-rgb-1000)/30%)}nano-mdd-item:not([accordion]) .mdd-item__body{display:flex;flex-direction:column}nano-mdd-item[accordion] nano-details>*:not([slot=label]){padding-inline-start:var(--nano-spacing-md)}nano-mdd-item[accordion] .mdd__link-columns{padding-inline-start:var(--nano-spacing-md);columns:1 !important}nano-mdd-item[accordion] nano-details{border:none;border-block-start:1px solid var(--nano-color-neutral-300)}nano-mdd-item[accordion]:last-child nano-details{border-block-end:1px solid var(--nano-color-neutral-300)}";
|
|
19143
19149
|
|
|
19144
19150
|
/**
|
|
19145
19151
|
* An item within a `nano-mdd`. Renders as a plain labelled column in grid mode,
|
package/hydrate/index.mjs
CHANGED
|
@@ -9113,7 +9113,9 @@ class DataList {
|
|
|
9113
9113
|
const { height, top } = this.nanoDropdown.tetherTo.getBoundingClientRect();
|
|
9114
9114
|
this.nanoDropdown.style.setProperty('--max-height', `max(${window.innerHeight - (height + top + 40)}px, 48vw)`);
|
|
9115
9115
|
}
|
|
9116
|
-
this.nanoDropdown
|
|
9116
|
+
if (this.nanoDropdown) {
|
|
9117
|
+
this.nanoDropdown.open = this.open;
|
|
9118
|
+
}
|
|
9117
9119
|
if (this.connectedInput) {
|
|
9118
9120
|
this.connectedInput.setAttribute('aria-expanded', this.open.toString());
|
|
9119
9121
|
}
|
|
@@ -9533,18 +9535,18 @@ class DataList {
|
|
|
9533
9535
|
}
|
|
9534
9536
|
}
|
|
9535
9537
|
render() {
|
|
9536
|
-
return (h(Host, { key: '
|
|
9538
|
+
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
|
|
9537
9539
|
? 'Select options from the list below'
|
|
9538
|
-
: undefined }, h("nano-dropdown", { key: '
|
|
9540
|
+
: 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: {
|
|
9539
9541
|
dlist__dropdown: true,
|
|
9540
9542
|
'dlist--isfiltered': this.isFiltered,
|
|
9541
|
-
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '
|
|
9543
|
+
}, 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: {
|
|
9542
9544
|
dlist__menu: true,
|
|
9543
9545
|
'dlist__menu--open': this.dropwdownOpen,
|
|
9544
|
-
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '
|
|
9546
|
+
}, 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: {
|
|
9545
9547
|
dlist__menu: true,
|
|
9546
9548
|
'dlist__menu--open': this.dropwdownOpen,
|
|
9547
|
-
} }, h("slot", { key: '
|
|
9549
|
+
} }, 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.")))));
|
|
9548
9550
|
}
|
|
9549
9551
|
static get watchers() { return {
|
|
9550
9552
|
"open": ["openWatcher"],
|
|
@@ -14831,6 +14833,13 @@ class GlobalNav {
|
|
|
14831
14833
|
return this.myAccountData?.user?.uuid ? this.myAccountData.user : null;
|
|
14832
14834
|
}
|
|
14833
14835
|
processUserData() {
|
|
14836
|
+
// Login & cart are available whether or not the user is logged in,
|
|
14837
|
+
// so set them before the logged-out early return.
|
|
14838
|
+
if (this.myAccountData) {
|
|
14839
|
+
this.loginUrl = this.loginUrl || this.myAccountData.urls?.login;
|
|
14840
|
+
this.cartUrl = this.cartUrl || this.myAccountData.urls?.cart;
|
|
14841
|
+
this.cartCount = this.cartCount || this.myAccountData.cart?.count;
|
|
14842
|
+
}
|
|
14834
14843
|
if (!this.myAccountUser) {
|
|
14835
14844
|
this.isLoggedIn = false;
|
|
14836
14845
|
this.userLinks = [];
|
|
@@ -14841,12 +14850,9 @@ class GlobalNav {
|
|
|
14841
14850
|
}
|
|
14842
14851
|
this.userLinks =
|
|
14843
14852
|
this.myAccountData?.links?.filter((link) => link.area === 'profile-panel-list') || [];
|
|
14844
|
-
this.loginUrl = this.loginUrl || this.myAccountData.urls?.login;
|
|
14845
14853
|
this.logoutUrl = this.logoutUrl || this.myAccountData.urls?.logout;
|
|
14846
14854
|
this.msgUrl = this.msgUrl || this.myAccountData.urls?.messages;
|
|
14847
14855
|
this.msgCount = this.msgCount || this.myAccountData.notifications?.count;
|
|
14848
|
-
this.cartUrl = this.cartUrl || this.myAccountData.urls?.cart;
|
|
14849
|
-
this.cartCount = this.cartCount || this.myAccountData.cart?.count;
|
|
14850
14856
|
this.isLoggedIn = true;
|
|
14851
14857
|
this.nanoUserData.emit(this.myAccountUser);
|
|
14852
14858
|
}
|
|
@@ -15252,21 +15258,21 @@ class GlobalNav {
|
|
|
15252
15258
|
}
|
|
15253
15259
|
render() {
|
|
15254
15260
|
const bpps = this.bpPartials;
|
|
15255
|
-
return (h(Host, { key: '
|
|
15261
|
+
return (h(Host, { key: '79ca6089ded878867c3febc0add938f4bc93eabd', class: {
|
|
15256
15262
|
'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
|
|
15257
15263
|
'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
|
|
15258
15264
|
'nano-global-nav': true,
|
|
15259
|
-
} }, h("div", { key: '
|
|
15265
|
+
} }, h("div", { key: '87e6512e1973f4e67437959690e1333936e62cb9', class: {
|
|
15260
15266
|
gn: true,
|
|
15261
15267
|
'gn__search-open': this.searchBarShown,
|
|
15262
|
-
} }, h("nano-drawer", { key: '
|
|
15268
|
+
} }, 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
|
|
15263
15269
|
? bpps.mainMenu.tpl()
|
|
15264
|
-
: '', h("slot", { key: '
|
|
15270
|
+
: '', 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,
|
|
15265
15271
|
(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,
|
|
15266
|
-
(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: '
|
|
15267
|
-
(!!this.searchIndices.length && (h("nano-dropdown", { key: '
|
|
15272
|
+
(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 ||
|
|
15273
|
+
(!!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) => {
|
|
15268
15274
|
this.handleSearchTermChangeEvent(e.detail.value);
|
|
15269
|
-
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon-button", { key: '
|
|
15275
|
+
}, 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 && [
|
|
15270
15276
|
this.autocompleteResults.hits.map((hit, i) => (h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
|
|
15271
15277
|
searchInsight.sendClick({
|
|
15272
15278
|
index: this.activeIndex.index,
|
|
@@ -15276,13 +15282,13 @@ class GlobalNav {
|
|
|
15276
15282
|
positions: [i + 1],
|
|
15277
15283
|
});
|
|
15278
15284
|
} }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
|
|
15279
|
-
h("nano-option", { key: '
|
|
15280
|
-
])))))), h("div", { key: '
|
|
15281
|
-
h("nano-icon-button", { key: '
|
|
15282
|
-
!!this.cartCount && (h("nano-badge", { key: '
|
|
15285
|
+
h("nano-option", { key: '1ff8c43585ef9863aacbe489b836889016e14fb3', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
|
|
15286
|
+
])))))), h("div", { key: 'd997f29cc0d38caa6f268ad692194f68d43fa1d8', class: "gn__cart" }, this.cartUrl && [
|
|
15287
|
+
h("nano-icon-button", { key: '992788e9a06e19d3a75d4b8d2439f1900bfcde3e', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }),
|
|
15288
|
+
!!this.cartCount && (h("nano-badge", { key: 'b7e6532aee69cb21901faaead2cd0e88c18f6e75', theme: "danger" }, this.cartCount > 9 ? '9+' : this.cartCount)),
|
|
15283
15289
|
]), this.breakpoint <= bpps.contact.breakpoint
|
|
15284
15290
|
? bpps.contact.tpl()
|
|
15285
|
-
: '', 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: '
|
|
15291
|
+
: '', 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' }))))));
|
|
15286
15292
|
}
|
|
15287
15293
|
static get assetsDirs() { return ["assets"]; }
|
|
15288
15294
|
static get watchers() { return {
|
|
@@ -19137,7 +19143,7 @@ class Mdd {
|
|
|
19137
19143
|
}; }
|
|
19138
19144
|
}
|
|
19139
19145
|
|
|
19140
|
-
const mddItemCss = ":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}}nano-mdd-item{display:block}nano-mdd-item a:not(nano-content-links a){display:flex;flex-direction:column;gap:var(--nano-spacing-xs);color:var(--nano-color-base-1000);text-decoration:none}@media (width < 1200px){nano-mdd-item a:not(nano-content-links a){font-size:var(--nano-font-size-xs)}}nano-mdd-item a:not(nano-content-links a):hover{text-decoration:underline;color:var(--nano-color-primary-1000)}nano-mdd-item a:not(nano-content-links a)>p{color:var(--nano-color-neutral-1000);font-size:var(--nano-font-size-xs);letter-spacing:var(--nano-letter-spacing-denser);margin:0}@media (width < 1200px){nano-mdd-item a:not(nano-content-links a)>p{font-size:var(--nano-font-size-2xs)}}nano-mdd-item ul{margin:0;padding:0}nano-mdd-item ul li{margin-inline:0;list-style:none;margin-block-end:var(--nano-spacing-l2);line-height:var(--nano-line-height-dense)}nano-mdd-item .
|
|
19146
|
+
const mddItemCss = ":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}}nano-mdd-item{display:block}nano-mdd-item a:not(nano-content-links a){display:flex;flex-direction:column;gap:var(--nano-spacing-xs);color:var(--nano-color-base-1000);text-decoration:none}@media (width < 1200px){nano-mdd-item a:not(nano-content-links a){font-size:var(--nano-font-size-xs)}}nano-mdd-item a:not(nano-content-links a):hover{text-decoration:underline;color:var(--nano-color-primary-1000)}nano-mdd-item a:not(nano-content-links a)>p{color:var(--nano-color-neutral-1000);font-size:var(--nano-font-size-xs);letter-spacing:var(--nano-letter-spacing-denser);margin:0}@media (width < 1200px){nano-mdd-item a:not(nano-content-links a)>p{font-size:var(--nano-font-size-2xs)}}nano-mdd-item ul{margin:0;padding:0}nano-mdd-item ul li{margin-inline:0;list-style:none;margin-block-end:var(--nano-spacing-l2);line-height:var(--nano-line-height-dense)}nano-mdd-item .mdd__link-columns{gap:var(--nano-spacing-xl)}nano-mdd-item .mdd__link-columns:has(>:nth-child(6)){columns:2}nano-mdd-item .mdd__link-columns>*{display:block;margin-block-end:var(--nano-spacing-l2)}nano-mdd-item .mdd__view-all{display:inline-flex;flex-direction:row;align-items:center;gap:0.25em;color:var(--nano-color-primary-1100);font-size:var(--nano-font-size-2xs);text-decoration:underline}nano-mdd-item .mdd__view-all::after{content:\"\";display:block;flex-shrink:0;inline-size:1em;block-size:1em;background-color:currentcolor;-webkit-mask-image:var(--nano-component-icon-chevron);mask-image:var(--nano-component-icon-chevron);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover}nano-mdd-item:not([accordion]) [slot=label]{display:block;color:var(--nano-color-text-neutral);font-size:var(--nano-font-size-2xs);line-height:var(--nano-line-height-normal);letter-spacing:1.2px;text-transform:uppercase;margin-block-end:var(--nano-spacing-md)}nano-mdd-item:not([accordion]) [slot=label]::after{content:\"\";display:block;padding-block-start:var(--nano-spacing-md);border-block-end:1px solid rgb(var(--nano-color-base-rgb-1000)/30%)}nano-mdd-item:not([accordion]) .mdd-item__body{display:flex;flex-direction:column}nano-mdd-item[accordion] nano-details>*:not([slot=label]){padding-inline-start:var(--nano-spacing-md)}nano-mdd-item[accordion] .mdd__link-columns{padding-inline-start:var(--nano-spacing-md);columns:1 !important}nano-mdd-item[accordion] nano-details{border:none;border-block-start:1px solid var(--nano-color-neutral-300)}nano-mdd-item[accordion]:last-child nano-details{border-block-end:1px solid var(--nano-color-neutral-300)}";
|
|
19141
19147
|
|
|
19142
19148
|
/**
|
|
19143
19149
|
* An item within a `nano-mdd`. Renders as a plain labelled column in grid mode,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nanoporetech-digital/components",
|
|
3
|
-
"version": "9.1.
|
|
3
|
+
"version": "9.1.2",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"description": "A collection of Oxford Nanopore corporate / digital webcomponents",
|
|
6
6
|
"type": "module",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"smart-array-filter": "^4.0.2",
|
|
57
57
|
"stencil-wormhole": "3.2.1",
|
|
58
58
|
"tyqs": "^0.1.3",
|
|
59
|
-
"@nanoporetech-digital/style": "9.1.
|
|
59
|
+
"@nanoporetech-digital/style": "9.1.2"
|
|
60
60
|
},
|
|
61
61
|
"devDependencies": {
|
|
62
62
|
"@algolia/client-search": "^4.22.1",
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* Custom elements for Nanopore-Digital Web applications
|
|
3
|
-
*/
|
|
4
|
-
'use strict';
|
|
5
|
-
|
|
6
|
-
let cachedCSStylesheet;
|
|
7
|
-
/**
|
|
8
|
-
* Adds the global nano-components stylesheets as a constructable stylesheet to a shadow root.
|
|
9
|
-
* This is useful when shadow DOM enabled components:
|
|
10
|
-
* - use css-only components
|
|
11
|
-
* - use themed sections within their markup (i.e. `<div class="nano-theme-darK">Always dark themed section</div>`)
|
|
12
|
-
*
|
|
13
|
-
* @param shadowRoot - The shadow root to add the stylesheet to
|
|
14
|
-
*/
|
|
15
|
-
function addGlobalStylesheetToShadow(shadowRoot) {
|
|
16
|
-
if (!shadowRoot)
|
|
17
|
-
return;
|
|
18
|
-
if (cachedCSStylesheet) {
|
|
19
|
-
// we've already constructed the stylesheet
|
|
20
|
-
shadowRoot.adoptedStyleSheets.push(cachedCSStylesheet);
|
|
21
|
-
return;
|
|
22
|
-
}
|
|
23
|
-
const globalStylesheets = document.styleSheets;
|
|
24
|
-
let stylesheet = null;
|
|
25
|
-
let rule = null;
|
|
26
|
-
const globalStylesheet = [];
|
|
27
|
-
for (stylesheet of globalStylesheets) {
|
|
28
|
-
if (!(stylesheet instanceof CSSStyleSheet)) {
|
|
29
|
-
continue;
|
|
30
|
-
}
|
|
31
|
-
let cssRules;
|
|
32
|
-
try {
|
|
33
|
-
// Attempt to access the cssRules of the stylesheet
|
|
34
|
-
cssRules = stylesheet?.cssRules;
|
|
35
|
-
// no cssRules? skip it
|
|
36
|
-
if (!cssRules)
|
|
37
|
-
continue;
|
|
38
|
-
}
|
|
39
|
-
catch (e) {
|
|
40
|
-
// some stylesheets may not be accessible due to CORS or other restrictions
|
|
41
|
-
console.warn('Unable to access stylesheet:', stylesheet, e);
|
|
42
|
-
continue;
|
|
43
|
-
}
|
|
44
|
-
for (rule of cssRules) {
|
|
45
|
-
// arbitrary piece of text to check for that appears early in the `nano-components` stylesheet
|
|
46
|
-
// this is a bit fragile but does the job
|
|
47
|
-
if (rule instanceof CSSLayerBlockRule &&
|
|
48
|
-
rule.cssText.indexOf('.nano-toast-stack') > -1) {
|
|
49
|
-
globalStylesheet.push(stylesheet);
|
|
50
|
-
}
|
|
51
|
-
if (rule instanceof CSSLayerBlockRule &&
|
|
52
|
-
rule.cssText.indexOf('.nano-theme') > -1) {
|
|
53
|
-
globalStylesheet.push(stylesheet);
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
if (globalStylesheet.length) {
|
|
58
|
-
// if we found the global stylesheet, add it to the shadow root
|
|
59
|
-
const sheet = new CSSStyleSheet();
|
|
60
|
-
for (const globalSheet of globalStylesheet) {
|
|
61
|
-
for (const rule of globalSheet.cssRules) {
|
|
62
|
-
sheet.insertRule(rule.cssText);
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
cachedCSStylesheet = sheet;
|
|
66
|
-
shadowRoot.adoptedStyleSheets.push(sheet);
|
|
67
|
-
return;
|
|
68
|
-
}
|
|
69
|
-
console.warn('No global stylesheet found');
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
exports.addGlobalStylesheetToShadow = addGlobalStylesheetToShadow;
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* Custom elements for Nanopore-Digital Web applications
|
|
3
|
-
*/
|
|
4
|
-
let cachedCSStylesheet;
|
|
5
|
-
/**
|
|
6
|
-
* Adds the global nano-components stylesheets as a constructable stylesheet to a shadow root.
|
|
7
|
-
* This is useful when shadow DOM enabled components:
|
|
8
|
-
* - use css-only components
|
|
9
|
-
* - use themed sections within their markup (i.e. `<div class="nano-theme-darK">Always dark themed section</div>`)
|
|
10
|
-
*
|
|
11
|
-
* @param shadowRoot - The shadow root to add the stylesheet to
|
|
12
|
-
*/
|
|
13
|
-
function addGlobalStylesheetToShadow(shadowRoot) {
|
|
14
|
-
if (!shadowRoot)
|
|
15
|
-
return;
|
|
16
|
-
if (cachedCSStylesheet) {
|
|
17
|
-
// we've already constructed the stylesheet
|
|
18
|
-
shadowRoot.adoptedStyleSheets.push(cachedCSStylesheet);
|
|
19
|
-
return;
|
|
20
|
-
}
|
|
21
|
-
const globalStylesheets = document.styleSheets;
|
|
22
|
-
let stylesheet = null;
|
|
23
|
-
let rule = null;
|
|
24
|
-
const globalStylesheet = [];
|
|
25
|
-
for (stylesheet of globalStylesheets) {
|
|
26
|
-
if (!(stylesheet instanceof CSSStyleSheet)) {
|
|
27
|
-
continue;
|
|
28
|
-
}
|
|
29
|
-
let cssRules;
|
|
30
|
-
try {
|
|
31
|
-
// Attempt to access the cssRules of the stylesheet
|
|
32
|
-
cssRules = stylesheet?.cssRules;
|
|
33
|
-
// no cssRules? skip it
|
|
34
|
-
if (!cssRules)
|
|
35
|
-
continue;
|
|
36
|
-
}
|
|
37
|
-
catch (e) {
|
|
38
|
-
// some stylesheets may not be accessible due to CORS or other restrictions
|
|
39
|
-
console.warn('Unable to access stylesheet:', stylesheet, e);
|
|
40
|
-
continue;
|
|
41
|
-
}
|
|
42
|
-
for (rule of cssRules) {
|
|
43
|
-
// arbitrary piece of text to check for that appears early in the `nano-components` stylesheet
|
|
44
|
-
// this is a bit fragile but does the job
|
|
45
|
-
if (rule instanceof CSSLayerBlockRule &&
|
|
46
|
-
rule.cssText.indexOf('.nano-toast-stack') > -1) {
|
|
47
|
-
globalStylesheet.push(stylesheet);
|
|
48
|
-
}
|
|
49
|
-
if (rule instanceof CSSLayerBlockRule &&
|
|
50
|
-
rule.cssText.indexOf('.nano-theme') > -1) {
|
|
51
|
-
globalStylesheet.push(stylesheet);
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
if (globalStylesheet.length) {
|
|
56
|
-
// if we found the global stylesheet, add it to the shadow root
|
|
57
|
-
const sheet = new CSSStyleSheet();
|
|
58
|
-
for (const globalSheet of globalStylesheet) {
|
|
59
|
-
for (const rule of globalSheet.cssRules) {
|
|
60
|
-
sheet.insertRule(rule.cssText);
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
cachedCSStylesheet = sheet;
|
|
64
|
-
shadowRoot.adoptedStyleSheets.push(sheet);
|
|
65
|
-
return;
|
|
66
|
-
}
|
|
67
|
-
console.warn('No global stylesheet found');
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
export { addGlobalStylesheetToShadow as a };
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* Custom elements for Nanopore-Digital Web applications
|
|
3
|
-
*/
|
|
4
|
-
let e;function o(o){if(!o)return;if(e)return void o.adoptedStyleSheets.push(e);const t=document.styleSheets;let n=null,c=null;const l=[];for(n of t){if(!(n instanceof CSSStyleSheet))continue;let e;try{if(e=n?.cssRules,!e)continue}catch(e){console.warn("Unable to access stylesheet:",n,e);continue}for(c of e)c instanceof CSSLayerBlockRule&&c.cssText.indexOf(".nano-toast-stack")>-1&&l.push(n),c instanceof CSSLayerBlockRule&&c.cssText.indexOf(".nano-theme")>-1&&l.push(n)}if(l.length){const t=new CSSStyleSheet;for(const e of l)for(const o of e.cssRules)t.insertRule(o.cssText);return e=t,void o.adoptedStyleSheets.push(t)}console.warn("No global stylesheet found")}export{o as a}
|