@nanoporetech-digital/components 9.1.1 → 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-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/utils/style.js +79 -10
- package/dist/components/datalist.js +8 -6
- package/dist/components/nano-global-nav.js +19 -15
- 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-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-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 +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
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 {
|
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}
|