@nanoporetech-digital/components 8.0.0-alpha.3 → 8.0.0-alpha.4
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/{fade-CqKYrZYq.js → fade-Dt8ydSYD.js} +1 -1
- package/dist/cjs/{fullscreen-D-fHJ_IJ.js → fullscreen-D_o31hdQ.js} +1 -1
- package/dist/cjs/index-IR1lkhwT.js +2 -2
- package/dist/cjs/{lazyload-DK1ITMfR.js → lazyload-obUQkoFT.js} +1 -1
- package/dist/cjs/loader.cjs.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-components.cjs.js +1 -1
- package/dist/cjs/{nano-data-table-C_KLyFMO.js → nano-data-table-Zj71h_Hm.js} +4 -4
- package/dist/cjs/nano-data-table.cjs.entry.js +1 -1
- package/dist/cjs/nano-datalist_3.cjs.entry.js +2 -2
- package/dist/cjs/nano-global-nav.cjs.entry.js +9 -9
- package/dist/cjs/nano-grid_2.cjs.entry.js +3 -3
- package/dist/cjs/nano-icon_3.cjs.entry.js +2 -2
- package/dist/cjs/{nano-resize-observe_2.cjs.entry.js → nano-resize-observe.cjs.entry.js} +0 -18
- package/dist/cjs/nano-slide.cjs.entry.js +1 -1
- package/dist/cjs/{nano-slides-BhpvytBB.js → nano-slides-BcdSNmlz.js} +7 -7
- package/dist/cjs/nano-slides.cjs.entry.js +1 -1
- package/dist/cjs/nano-sortable.cjs.entry.js +1 -1
- package/dist/cjs/nano-spinner.cjs.entry.js +1 -1
- package/dist/cjs/nano-sticker.cjs.entry.js +2 -2
- package/dist/cjs/nano-tab-content.cjs.entry.js +2 -2
- package/dist/cjs/nano-tab.cjs.entry.js +2 -2
- package/dist/cjs/nano-table.cjs.entry.js +2 -2
- package/dist/cjs/{page-dots-DeSuT5bE.js → page-dots-CUrSK-1M.js} +1 -1
- package/dist/cjs/{table.worker-C5ofbi7M.js → table.worker-D7-NI7ZI.js} +1 -1
- package/dist/collection/collection-manifest.json +0 -1
- package/dist/collection/components/breadcrumb/breadcrumb.css +2 -125
- package/dist/collection/components/breadcrumb/breadcrumb.js +3 -2
- package/dist/collection/components/collapsible-comparison/collapsible-comparison.js +4 -3
- package/dist/collection/components/data-table/table.css +2 -7
- package/dist/collection/components/data-table/table.js +2 -2
- package/dist/collection/components/global-nav/global-nav.js +12 -11
- package/dist/collection/components/img/img.js +3 -3
- package/dist/collection/components/slides/slide.js +1 -1
- package/dist/collection/components/slides/slides.js +3 -3
- package/dist/collection/components/sortable/sortable.js +1 -1
- package/dist/collection/components/spinner/spinner.js +1 -1
- package/dist/collection/components/sticker/sticker.js +2 -2
- package/dist/collection/components/table/table.js +2 -2
- package/dist/collection/components/tabs/tab-content.js +2 -2
- package/dist/collection/components/tabs/tab.js +2 -2
- package/dist/collection/components/tag/tag.js +2 -2
- package/dist/collection/components/tooltip/tooltip.js +2 -2
- package/dist/components/img.js +5 -11
- package/dist/components/nano-breadcrumb.js +4 -3
- package/dist/components/nano-collapsible-comparison.js +4 -3
- package/dist/components/nano-data-table.js +13 -19
- package/dist/components/nano-global-nav.js +12 -11
- package/dist/components/nano-hero.js +6 -12
- package/dist/components/nano-slide.js +1 -1
- package/dist/components/nano-sortable.js +1 -1
- package/dist/components/nano-tab-content.js +2 -2
- package/dist/components/nano-tab.js +2 -2
- package/dist/components/nano-table.js +2 -2
- package/dist/components/slides.js +3 -3
- package/dist/components/spinner.js +1 -1
- package/dist/components/sticker.js +2 -2
- package/dist/components/tag.js +2 -2
- package/dist/components/tooltip.js +2 -2
- package/dist/esm/{fade-CnaZvOTY.js → fade-DcRXMf28.js} +1 -1
- package/dist/esm/{fullscreen-BIFliVxG.js → fullscreen-BQyi4GFz.js} +1 -1
- package/dist/esm/index-DXvE-U_j.js +2 -2
- package/dist/esm/{lazyload-D_Ju_KaC.js → lazyload-C00srsFN.js} +1 -1
- package/dist/esm/loader.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-components.js +1 -1
- package/dist/esm/{nano-data-table-CJbVKIuu.js → nano-data-table-wGnglzmF.js} +4 -4
- package/dist/esm/nano-data-table.entry.js +1 -1
- package/dist/esm/nano-datalist_3.entry.js +2 -2
- package/dist/esm/nano-global-nav.entry.js +9 -9
- package/dist/esm/nano-grid_2.entry.js +3 -3
- package/dist/esm/nano-icon_3.entry.js +2 -2
- package/dist/esm/{nano-resize-observe_2.entry.js → nano-resize-observe.entry.js} +1 -18
- package/dist/esm/nano-slide.entry.js +1 -1
- package/dist/esm/{nano-slides-B9KjZVqC.js → nano-slides-g94uYmWm.js} +7 -7
- package/dist/esm/nano-slides.entry.js +1 -1
- package/dist/esm/nano-sortable.entry.js +1 -1
- package/dist/esm/nano-spinner.entry.js +1 -1
- package/dist/esm/nano-sticker.entry.js +2 -2
- package/dist/esm/nano-tab-content.entry.js +2 -2
- package/dist/esm/nano-tab.entry.js +2 -2
- package/dist/esm/nano-table.entry.js +2 -2
- package/dist/esm/{page-dots-BmS6HUrx.js → page-dots-B947EGDd.js} +1 -1
- package/dist/esm/{table.worker-CsTdjWrS.js → table.worker-DQJ9Zgy3.js} +1 -1
- package/dist/nano-components/{fade-CnaZvOTY.js → fade-DcRXMf28.js} +1 -1
- package/dist/nano-components/{fullscreen-BIFliVxG.js → fullscreen-BQyi4GFz.js} +1 -1
- package/dist/nano-components/{lazyload-D_Ju_KaC.js → lazyload-C00srsFN.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-components.css +126 -0
- package/dist/nano-components/nano-components.esm.js +1 -1
- package/dist/nano-components/{nano-data-table-CJbVKIuu.js → nano-data-table-wGnglzmF.js} +1 -1
- package/dist/nano-components/nano-data-table.entry.js +1 -1
- package/dist/nano-components/nano-datalist_3.entry.js +1 -1
- package/dist/nano-components/nano-global-nav.entry.js +1 -1
- package/dist/nano-components/nano-grid_2.entry.js +1 -1
- package/dist/nano-components/nano-icon_3.entry.js +1 -1
- package/dist/nano-components/nano-resize-observe.entry.js +4 -0
- package/dist/nano-components/nano-slide.entry.js +1 -1
- package/dist/nano-components/{nano-slides-B9KjZVqC.js → nano-slides-g94uYmWm.js} +3 -3
- package/dist/nano-components/nano-slides.entry.js +1 -1
- package/dist/nano-components/nano-sortable.entry.js +1 -1
- package/dist/nano-components/nano-spinner.entry.js +1 -1
- package/dist/nano-components/nano-sticker.entry.js +1 -1
- package/dist/nano-components/nano-tab-content.entry.js +1 -1
- package/dist/nano-components/nano-tab.entry.js +1 -1
- package/dist/nano-components/nano-table.entry.js +1 -1
- package/dist/nano-components/{page-dots-BmS6HUrx.js → page-dots-B947EGDd.js} +1 -1
- package/dist/nano-components/{table.worker-CsTdjWrS.js → table.worker-DQJ9Zgy3.js} +1 -1
- package/dist/style/components.css +1 -1
- package/dist/style/components.css.map +1 -1
- package/dist/style/core.css +1 -1
- package/dist/style/core.css.map +1 -1
- package/dist/style/nano.css +1 -1
- package/dist/style/nano.css.map +1 -1
- package/dist/types/components/collapsible-comparison/collapsible-comparison.d.ts +1 -1
- package/dist/types/components.d.ts +0 -43
- package/docs-json.json +1 -90
- package/docs-vscode.json +0 -13
- package/hydrate/index.js +35 -139
- package/hydrate/index.mjs +35 -139
- package/package.json +2 -2
- package/dist/collection/components/skeleton/skeleton.css +0 -83
- package/dist/collection/components/skeleton/skeleton.js +0 -57
- package/dist/components/nano-skeleton.d.ts +0 -11
- package/dist/components/nano-skeleton.js +0 -9
- package/dist/components/skeleton.js +0 -41
- package/dist/nano-components/nano-resize-observe_2.entry.js +0 -4
- package/dist/types/components/skeleton/skeleton.d.ts +0 -12
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Custom elements for Nanopore-Digital Web applications
|
|
3
3
|
*/
|
|
4
|
-
import { Host, } from "@stencil/core";
|
|
4
|
+
import { Build, Host, } from "@stencil/core";
|
|
5
5
|
import { h } from "../../utils/renderer";
|
|
6
6
|
import { addGlobalStylesheetToShadow } from "../../utils/style";
|
|
7
7
|
/**
|
|
@@ -44,7 +44,8 @@ export class CollapsibleComparison {
|
|
|
44
44
|
this.open = !this.open;
|
|
45
45
|
};
|
|
46
46
|
componentWillLoad() {
|
|
47
|
-
|
|
47
|
+
if (Build.isBrowser)
|
|
48
|
+
addGlobalStylesheetToShadow(this.el.shadowRoot);
|
|
48
49
|
}
|
|
49
50
|
componentDidLoad() {
|
|
50
51
|
if (this.open) {
|
|
@@ -54,7 +55,7 @@ export class CollapsibleComparison {
|
|
|
54
55
|
}
|
|
55
56
|
}
|
|
56
57
|
render() {
|
|
57
|
-
return (h(Host, { key: '
|
|
58
|
+
return (h(Host, { key: '849c3d8630973d94ced90a7fe10506815932d9ab', class: "nano-collapsible-comparison" }, h("div", { key: 'f84d57632fc72fbc266839afd017d0087ba2ed61', class: "collapsible-comparison" }, h("div", { key: '6eeadd3c7ee8ccfacf6eeddd1addcb6f850d8561', part: "header" }, h("div", { key: 'fa7e80984c27a377b485392ada0bdc5bcacc523d', class: "header" }, h("slot", { key: '93e94814f324b460dbb69ae44214e77602e4af8f', name: "heading" }), h("nano-cta", { key: 'ac4faf7dddc1659c80493321ffacf10ccc9587dd', size: "large", icon: this.open ? 'up' : 'down', secondary: true }, h("button", { key: 'b7de49dacb1b827eaf17cfb81349b63d31858251', onClick: this.handleClick }, this.open ? 'Hide' : 'Show', " details")), h("nano-icon-button", { key: '3cddc59e59966562873e7e4999d22ff4db1b4da1', label: `${this.open ? 'Hide' : 'Show'} details`, onClick: this.handleClick, iconName: "light/chevron-down", class: this.open ? 'open' : '' })), h("div", { key: 'a977e27bf6aaea079bb80ca72433e2f2c385c683', class: "headings" }, h("slot", { key: '7793d25823855334f9d5223070ef84a1418fb1c0', name: "comparison-headings" }))), h("div", { key: '08102e78eda50cd562e0c31588a38c363e746e4d', class: "content" }, h("slot", { key: '0318767e2bb809f6db5a2c402438682d6101885a', name: "content" })))));
|
|
58
59
|
}
|
|
59
60
|
static get is() { return "nano-collapsible-comparison"; }
|
|
60
61
|
static get encapsulation() { return "shadow"; }
|
|
@@ -135,19 +135,17 @@
|
|
|
135
135
|
gap: 10px;
|
|
136
136
|
}
|
|
137
137
|
.nano-tbl__progress-bar {
|
|
138
|
-
|
|
138
|
+
--height: 0.2125rem;
|
|
139
139
|
position: sticky;
|
|
140
140
|
inset-block-start: 0;
|
|
141
141
|
inset-inline: 0;
|
|
142
142
|
z-index: 10;
|
|
143
|
-
transition:
|
|
143
|
+
transition: transform 0.25s;
|
|
144
144
|
transform: scale(0);
|
|
145
145
|
inline-size: 100%;
|
|
146
|
-
block-size: 0;
|
|
147
146
|
}
|
|
148
147
|
.nano-tbl__progress-bar--show {
|
|
149
148
|
transform: scale(1);
|
|
150
|
-
block-size: auto;
|
|
151
149
|
}
|
|
152
150
|
.nano-tbl__caption--hide {
|
|
153
151
|
clip-path: inset(50%);
|
|
@@ -321,7 +319,4 @@ tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__th, tbody .nano
|
|
|
321
319
|
.nano-tbl__spinner--show {
|
|
322
320
|
scale: 1;
|
|
323
321
|
position: sticky;
|
|
324
|
-
}
|
|
325
|
-
.nano-tbl .nano-skeleton {
|
|
326
|
-
line-height: var(--nano-line-height-normal);
|
|
327
322
|
}
|
|
@@ -824,14 +824,14 @@ export class NanoDataTable {
|
|
|
824
824
|
[`${CSSNAMESPACE}__progress-bar`]: true,
|
|
825
825
|
[`${CSSNAMESPACE}__progress-bar--show`]: this._loading,
|
|
826
826
|
}
|
|
827
|
-
}), h("table", { "aria-rowcount": this.store.data.state.rows.length, "aria-colcount": this.store.config.state.columns.length, class: `${CSSNAMESPACE}`, ref: (tbl) => (this.tableEle = tbl), id: 'nano-data-table-' + this.renderId }, h("caption", { class: {
|
|
827
|
+
}, h("progress", null)), h("table", { "aria-rowcount": this.store.data.state.rows.length, "aria-colcount": this.store.config.state.columns.length, class: `${CSSNAMESPACE}`, ref: (tbl) => (this.tableEle = tbl), id: 'nano-data-table-' + this.renderId, "aria-busy": this._loading || undefined }, h("caption", { class: {
|
|
828
828
|
[`${CSSNAMESPACE}__caption`]: true,
|
|
829
829
|
[`${CSSNAMESPACE}__caption--hide`]: !this.showCaption,
|
|
830
830
|
} }, h("slot", { name: "caption" }, this.caption)), h("thead", null, h(TableHeadFootRow, { rowRenderer: this.headRender }, this.store.config.state.columns.map((colModel) => [
|
|
831
831
|
h(TableColHead, { column: colModel, headRenderer: this.headRender, onColumnSortClick: this.sortStart, defaults: {
|
|
832
832
|
sortable: this.defaultSort,
|
|
833
833
|
} }),
|
|
834
|
-
]))), this._loading && !this.blocks.length && (h("tbody", { class: `${CSSNAMESPACE}__active ${CSSNAMESPACE}__loading` }, [...Array(this.placeholderSize).keys()].map((rowIndex) => (h("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: () => h("
|
|
834
|
+
]))), this._loading && !this.blocks.length && (h("tbody", { class: `${CSSNAMESPACE}__active ${CSSNAMESPACE}__loading` }, [...Array(this.placeholderSize).keys()].map((rowIndex) => (h("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: () => h("span", { class: "n-loader-skeleton" }, h("span", null, "Content loading")) })))))))), h("tr", { hidden: !!this._loading || !!this.blocks.length }, h("th", { class: `${CSSNAMESPACE}__th`, colSpan: this.store.config.state.columns.length }, h("div", { class: "nano-tbl__cell-content nano-tbl__cell-content--no-result" }, h("slot", { name: "no-results" }, "No results found")))), this.blocks.map((block, blockIndex) => (h("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
|
|
835
835
|
this.blockElements.push(tb);
|
|
836
836
|
}, class: {
|
|
837
837
|
[`${CSSNAMESPACE}__inactive`]: !this.activeBlocks.includes(blockIndex),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Custom elements for Nanopore-Digital Web applications
|
|
3
3
|
*/
|
|
4
|
-
import { Host, getAssetPath, } from "@stencil/core";
|
|
4
|
+
import { Host, getAssetPath, Build, } from "@stencil/core";
|
|
5
5
|
import { h } from "../../utils/renderer";
|
|
6
6
|
import algoliaSearch from "algoliasearch/dist/algoliasearch-lite.esm.browser";
|
|
7
7
|
import { debounce } from "../../utils/throttle";
|
|
@@ -431,7 +431,8 @@ export class GlobalNav {
|
|
|
431
431
|
this.handleMyAccountUrl();
|
|
432
432
|
this.initSearch();
|
|
433
433
|
this.processUserData();
|
|
434
|
-
|
|
434
|
+
if (Build.isBrowser)
|
|
435
|
+
addGlobalStylesheetToShadow(this.host.shadowRoot);
|
|
435
436
|
}
|
|
436
437
|
componentDidRender() {
|
|
437
438
|
this.handleResize();
|
|
@@ -487,20 +488,20 @@ export class GlobalNav {
|
|
|
487
488
|
}
|
|
488
489
|
render() {
|
|
489
490
|
const bpps = this.bpPartials;
|
|
490
|
-
return (h(Host, { key: '
|
|
491
|
+
return (h(Host, { key: '66132ed8841605602bff8c2c750a657ec4d6d83a', class: {
|
|
491
492
|
'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
|
|
492
493
|
'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
|
|
493
494
|
'nano-global-nav': true,
|
|
494
|
-
} }, h("div", { key: '
|
|
495
|
+
} }, h("div", { key: 'c8dfcf4b405c72a14f576fb7b14ce41e8ff49b83', class: {
|
|
495
496
|
gn: true,
|
|
496
497
|
'gn__search-open': this.searchBarShown,
|
|
497
|
-
} }, h("nano-drawer", { key: '
|
|
498
|
+
} }, h("nano-drawer", { key: '741e6dc6df0253450f65e792f45fe2a337bb007d', 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: 'b8d197424ed2d4dff32234457b7836507d9777ba', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: '36ef3c9a323078bfbf4f28682afd4b33475c6d1d', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
|
|
498
499
|
? bpps.mainMenu.tpl()
|
|
499
|
-
: '', h("slot", { key: '
|
|
500
|
+
: '', h("slot", { key: '569277672e49d95702583537c90db8de51d89a35', name: "overflow" }))), h("div", { key: '367e4bfffe6a8359bf49e6a4ea7a69dfdd20e6af', class: "gn__menu-bar-wrapper" }, h("div", { key: 'aca6cb95a4b03c46509cfd6d0a55e722976200e9', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: '8c56fcfde4d896b30a277a00f79de3dfb75d93ef', 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: 'fb8ca915d6460ee871a0a357b8a25d2e720620ac', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '96962d7ccd0d55f5c054dae0e8480398e7ea1415', name: "logo" }, h("a", { key: 'dcfa5d446ef38afb07285172dd5c0269da604d44', 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,
|
|
500
501
|
(a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--large", width: "152", height: "36", part: "logo logo--large" })) : (h("img", { src: getAssetPath('../nano-assets/ont-wheel.svg'), alt: `Oxford Nanopore Technologies logo. A stylised representation of a nanopore,
|
|
501
|
-
(a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--small", width: "36", height: "36", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: '
|
|
502
|
+
(a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--small", width: "36", height: "36", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: 'c4e2a7166c5766eede74e6f9e5763e157c47ac74', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: 'e6bb457db190019f21c1c712bb8c9bab5abec91b', class: "gn__main-menu-actions" }, h("nano-dropdown", { key: 'd46c596a07189f129a1644118560590e70101a2b', 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: '00df8fe73a5c1e5b0e3263ee584549c1b450675f', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), !!this.searchIndices.length && (h("form", { key: 'b03a0c3f58a7a50939ec09258dda85a49157cf48', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '367ed61df9546497f9cef04d833e86f59389f48a', 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: 'd8013a6f1cd8953bc63ba6f518367a4b278197bd', ref: (ele) => (this.searchInput = ele), part: "search-input", label: "Search Oxford Nanopore Technologies", placeholder: "Search Oxford Nanopore...", hideLabel: true, clearable: true, onNanoChange: (e) => {
|
|
502
503
|
this.handleSearchTermChangeEvent(e.detail.value);
|
|
503
|
-
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon", { key: '
|
|
504
|
+
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon", { key: 'fe62a269a2f3ca318ad1e071404f693c9540317b', slot: "end", name: "light/magnifying-glass" }), h("nano-datalist", { key: '87d39b1dc2be07a66b546ba53eea56351bb103ec', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: 'fade49b478eddeb181f332b8db31b0f88c98305f', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: 'e7c946dc5ec1ee76d115fd2575b1288f95d71c43' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
|
|
504
505
|
this.autocompleteResults.hits.map((hit, i) => (h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
|
|
505
506
|
searchInsight.sendClick({
|
|
506
507
|
index: this.activeIndex.index,
|
|
@@ -510,10 +511,10 @@ export class GlobalNav {
|
|
|
510
511
|
positions: [i + 1],
|
|
511
512
|
});
|
|
512
513
|
} }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
|
|
513
|
-
h("nano-option", { key: '
|
|
514
|
-
]))))), h("div", { key: '
|
|
514
|
+
h("nano-option", { key: '74852e060130852064b4987f1de0c8f0fa2a395e', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
|
|
515
|
+
]))))), h("div", { key: 'e66b10d8ce1de533d772bfd66bf7c73511f338ff', class: "gn__cart" }, h("nano-icon-button", { key: '47b8fc7ad91f5ea1048a670407ad602d29eb347f', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }), !!this.cartCount && (h("nano-badge", { key: '75c8ffb6264bd4a390ad77d15c408105d6f77393', theme: "danger", strength: "2" }, this.cartCount > 9 ? '9+' : this.cartCount))), this.breakpoint <= bpps.contact.breakpoint
|
|
515
516
|
? bpps.contact.tpl()
|
|
516
|
-
: '', this.isLoggedIn ? (h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, h("nano-icon", { name: "light/user" }), h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (h("nano-badge", { theme: "danger", strength: "2" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login"))))))), h("div", { key: '
|
|
517
|
+
: '', this.isLoggedIn ? (h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, h("nano-icon", { name: "light/user" }), h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (h("nano-badge", { theme: "danger", strength: "2" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login"))))))), h("div", { key: '798ee16df74983e3d5689639f3320198bd1fe14d', class: "gn__site", part: "site-wrapper" }, h("nano-global-search-results", { key: 'a51edbf9c6bc9b0e34e207e21b4341704032e82f', part: "site-search-results" }, h("slot", { key: '4ae65a7bc4d8897d95e43692b87830cf9f9d8a8f' }))))));
|
|
517
518
|
}
|
|
518
519
|
static get is() { return "nano-global-nav"; }
|
|
519
520
|
static get encapsulation() { return "shadow"; }
|
|
@@ -134,16 +134,16 @@ export class Img {
|
|
|
134
134
|
const bgStyle = this.loadSrc
|
|
135
135
|
? { 'background-image': `url(${this.loadSrc})` }
|
|
136
136
|
: {};
|
|
137
|
-
return (h(Host, { key: 'a9d5cb1d0be8540d7ea690fd13d92b1f5ec614af', class: "nano-img" }, h("div", { key: '1f40afc64a5652f53b224403c59b4f108e5eb044', class: "img" }, h("
|
|
137
|
+
return (h(Host, { key: 'a9d5cb1d0be8540d7ea690fd13d92b1f5ec614af', class: "nano-img" }, h("div", { key: '1f40afc64a5652f53b224403c59b4f108e5eb044', class: "img" }, h("div", { key: '7b3a0b8521888092effb1fc675b0c52bce7faa6f', class: "img__loader n-loader-skeleton" }, "Loading"), !!this.background && (h("div", { key: '1f4d59fc6ff3e0be42f18d1db4a099a32d099872', class: {
|
|
138
138
|
loaded: this.hasLoaded,
|
|
139
139
|
img__bg: true,
|
|
140
140
|
'no-height': this.autoHeight === 'image',
|
|
141
|
-
}, style: bgStyle }, h("slot", { key: '
|
|
141
|
+
}, style: bgStyle }, h("slot", { key: 'd987180d13fa9ef34868c8e962344da9e0f6b876' }))), h("img", { key: 'f3d603cf35bf0c37c4e1eb530e9a9ea7d7e81beb', class: {
|
|
142
142
|
img__image: true,
|
|
143
143
|
loaded: this.hasLoaded,
|
|
144
144
|
hide: this.background,
|
|
145
145
|
'no-height': this.autoHeight === 'content',
|
|
146
|
-
}, decoding: "async", src: Build.isServer ? this.src : this.loadSrc, loading: Build.isServer && this.lazy ? 'lazy' : undefined, alt: this.alt, onLoad: this.onLoad, onError: this.loadError }), h("nano-resize-observe", { key: '
|
|
146
|
+
}, decoding: "async", src: Build.isServer ? this.src : this.loadSrc, loading: Build.isServer && this.lazy ? 'lazy' : undefined, alt: this.alt, onLoad: this.onLoad, onError: this.loadError }), h("nano-resize-observe", { key: 'cf77dadeb8d5b01ef1afff5e6df5eb6aacad13e6', class: "img__observer", onNanoResizeStateChange: this.onResize, states: this.imgStates }))));
|
|
147
147
|
}
|
|
148
148
|
static get is() { return "nano-img"; }
|
|
149
149
|
static get encapsulation() { return "shadow"; }
|
|
@@ -30,7 +30,7 @@ export class Slide {
|
|
|
30
30
|
});
|
|
31
31
|
}
|
|
32
32
|
render() {
|
|
33
|
-
return (h(Host, { key: '
|
|
33
|
+
return (h(Host, { key: 'f45a8a3b8232fdca227e7d53642f31206ff2a6e0', class: "nano-slide" }, h("slot", { key: '248bc7303404576301a477ed36449388190e8417' })));
|
|
34
34
|
}
|
|
35
35
|
static get is() { return "nano-slide"; }
|
|
36
36
|
static get encapsulation() { return "shadow"; }
|
|
@@ -499,15 +499,15 @@ export class Slides {
|
|
|
499
499
|
this.destroyflickity();
|
|
500
500
|
}
|
|
501
501
|
render() {
|
|
502
|
-
return (h(Host, { key: '
|
|
502
|
+
return (h(Host, { key: '0eecdd4b8054bfc79c414f92cc52208cc17030c9', class: "nano-slides" }, h("div", { key: '52d4f9e42fc545c9fbd955f497ff31911e2bae7e', class: {
|
|
503
503
|
slideshow: true,
|
|
504
504
|
ready: this.ready,
|
|
505
505
|
'not-ready': !this.ready,
|
|
506
|
-
}, part: "base" }, h("div", { key: '
|
|
506
|
+
}, part: "base" }, h("div", { key: 'd41c00513b0f7a9a9cb05a5943f368b86af34bdf', ref: (div) => (this.flickityEl = div), class: {
|
|
507
507
|
'flickity-container': true,
|
|
508
508
|
'slides-ready': this.slidesReady,
|
|
509
509
|
'slides-not-ready': !this.slidesReady,
|
|
510
|
-
}, part: "slide-container" }, h("slot", { key: '
|
|
510
|
+
}, part: "slide-container" }, h("slot", { key: 'bebd09c2b27bc7dbae72d5cab15b8fbd77af52a0' })), h("div", { key: '4e5b0c0385dcc3757f889004ec50f7550bc3bfe2', class: "ui-extras" }, h("slot", { key: '6481258c29c5f30c2a47b102e47e9ce75260c712', name: "ui" })))));
|
|
511
511
|
}
|
|
512
512
|
static get is() { return "nano-slides"; }
|
|
513
513
|
static get encapsulation() { return "shadow"; }
|
|
@@ -733,7 +733,7 @@ export class Sortable {
|
|
|
733
733
|
}
|
|
734
734
|
}
|
|
735
735
|
render() {
|
|
736
|
-
return (h(Host, { key: '
|
|
736
|
+
return (h(Host, { key: '108dd7db53821adef114521be6a825561c974137', class: "nano-sortable" }, h("div", { key: '7b23e9a51e5cb366676fb61163b031c0ba693599', class: "sortable__live-region", "aria-live": "polite", "aria-relevant": "additions", "aria-atomic": "true", role: "log", part: "announcements" }, this.ariaTextList.map((str) => (h("div", null, str)))), h("slot", { key: 'a61fca55dd0de8a4dd1611ada70101ca19906528' })));
|
|
737
737
|
}
|
|
738
738
|
static get is() { return "nano-sortable"; }
|
|
739
739
|
static get encapsulation() { return "shadow"; }
|
|
@@ -22,7 +22,7 @@ export class Spinner {
|
|
|
22
22
|
this.hasText = !!this.el.childNodes.length;
|
|
23
23
|
}
|
|
24
24
|
render() {
|
|
25
|
-
return (h(Host, { key: '
|
|
25
|
+
return (h(Host, { key: '50440a7fb87c4e5b54d5b3ab1c5781a77dc580c9', class: "nano-spinner" }, h("div", { key: 'c4508214b1b17c54dadf15bf5d03128f560e99b8', class: "spinner", "aria-busy": "true", "aria-live": "polite" }, h("div", { key: 'ef7f2ac50d9c6f3d8565c692b67d991e175b674a', class: "spinner__loader" }, this.type === 'dna' && (h("div", { key: '269e356d7c35879d969b9308c00ece4bfa5fbc6b', class: "spinner__dna" }, h("div", { key: '727b7efd0f96663381e0634e3ce418c9c410f2fe', class: "spinner__dnatrack spinner__dnatrack--1" }, h("div", { key: '177cf194f19c2eee3a78b9e808637b5f1cd372dd', class: "spinner__dnadot spinner__dnadot--1" }), h("div", { key: '1b4a7b46b153f26db496499cf383eb442213bbba', class: "spinner__dnadot spinner__dnadot--2" })), h("div", { key: 'f2a0b517981107faa2ff467802a024f052247f42', class: "spinner__dnatrack spinner__dnatrack--2" }, h("div", { key: '9240ab7c633a21cc68e3c7848ac1c6a68b86353c', class: "spinner__dnadot spinner__dnadot--3" }), h("div", { key: '24a36e2fc04dfa727899e2fb0d31a0a6ac4d5ea3', class: "spinner__dnadot spinner__dnadot--4" })), h("div", { key: 'c9560b3b7566f57c613483e28adae95de5154801', class: "spinner__dnatrack spinner__dnatrack--3" }, h("div", { key: '9cc8b27ed18bb71b236d9714e74c97420ae102df', class: "spinner__dnadot spinner__dnadot--5" }), h("div", { key: '63e0ce5e9788e643303a8d99ad417a2d4ebf6ede', class: "spinner__dnadot spinner__dnadot--6" })), h("div", { key: 'c23c129f65a6c8bc5f9e0fe7fdc7218d1359cb41', class: "spinner__dnatrack spinner__dnatrack--4" }, h("div", { key: '9f4def6d87deef4c6dcb19952966a73c6783f3b7', class: "spinner__dnadot spinner__dnadot--7" }), h("div", { key: 'cd66a00f3a954c6e87dd66d2701cadc2fb0ba847', class: "spinner__dnadot spinner__dnadot--8" })), h("div", { key: '0a445022fdbbd1701c2d1d950532aeec863699c5', class: "spinner__dnatrack spinner__dnatrack--5" }, h("div", { key: 'd0e880fa837d3ac04dcae98932aff0b96521cdc9', class: "spinner__dnadot spinner__dnadot--9" }), h("div", { key: 'f269a858d997cf7c6f9bb3d981cc9d3a5735a89b', class: "spinner__dnadot spinner__dnadot--10" })))), this.type === 'circle' && h("span", { key: '16f2074c1aa97fe5a541cbcac45b76985c16de9e', class: "spinner__spin" })), this.hasText && (h("div", { class: "spinner__text", key: "spinner-text" }, h("slot", { key: '2dd688af910babb15d020e14a9bde2228adfee98' }))), this.overlay && (h("div", { class: "spinner__overlay", key: "spinner-overlay" })))));
|
|
26
26
|
}
|
|
27
27
|
static get is() { return "nano-spinner"; }
|
|
28
28
|
static get encapsulation() { return "shadow"; }
|
|
@@ -599,12 +599,12 @@ export class Sticker {
|
|
|
599
599
|
this.hasBootstrapped = false;
|
|
600
600
|
}
|
|
601
601
|
render() {
|
|
602
|
-
return (h(Host, { key: '
|
|
602
|
+
return (h(Host, { key: 'e928d991c33b98de7844974084b955c3168b8766', sticky: !this.isRootSticker && !this.stickToEle && this.isSticky, hide: this.hide && this.isStuck, siblings: this.stuckCounter, index: this.stickerIndex, stuck: this.isStuck && this.isSticky, "placed-bottom": this.positions.includes('bottom'), "placed-top": this.positions.includes('top'), "placed-end": this.positions.includes('end'), "placed-start": this.positions.includes('start'), class: "nano-sticker" }, h("div", { key: 'cfdaf007080976d6e556eb66e76e5d6f1bd5cdda', class: {
|
|
603
603
|
sticker: true,
|
|
604
604
|
sticky: this.isRootSticker && this.isSticky,
|
|
605
605
|
stuck: this.isStuck && this.isRootSticker && this.isSticky,
|
|
606
606
|
hide: this.isRootSticker && this.hide && this.isStuck,
|
|
607
|
-
}, ref: (div) => (this.sticker = div) }, h("div", { key: '
|
|
607
|
+
}, ref: (div) => (this.sticker = div) }, h("div", { key: 'be64fd13b426ca2ecd2f0bc2b240271e0f64bdfc', class: "sticker-content", ref: (div) => (this.content = div) }, h("slot", { key: '83903ad04e5465798443ef86fe99ca78940bd45e' })))));
|
|
608
608
|
}
|
|
609
609
|
static get is() { return "nano-sticker"; }
|
|
610
610
|
static get encapsulation() { return "shadow"; }
|
|
@@ -227,10 +227,10 @@ export class NanoTable {
|
|
|
227
227
|
this.cleanUpObservers();
|
|
228
228
|
}
|
|
229
229
|
render() {
|
|
230
|
-
return (h(Host, { key: '
|
|
230
|
+
return (h(Host, { key: 'd3e5a8138e931cb62fefade6b995111d958ad0a5', class: {
|
|
231
231
|
'nano-table': true,
|
|
232
232
|
'nano-table--props-ready': this.propsReady,
|
|
233
|
-
} }, this.scrollable && (h("nano-masked-overflow", { key: '
|
|
233
|
+
} }, this.scrollable && (h("nano-masked-overflow", { key: '6775e115264b8810584bfbaa573558d539a6c14d', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: '297a7ca1929ee780382132ef24ba25f8533c9140', class: "nano-table__overflow" }))), h("slot", { key: '0741a9939e245d5eea38641ed35fb46b4fecf4c5' })));
|
|
234
234
|
}
|
|
235
235
|
static get is() { return "nano-table"; }
|
|
236
236
|
static get encapsulation() { return "scoped"; }
|
|
@@ -24,10 +24,10 @@ export class NanoTabContent {
|
|
|
24
24
|
requestAnimationFrame(() => (this.ready = true));
|
|
25
25
|
}
|
|
26
26
|
render() {
|
|
27
|
-
return (h(Host, { key: '
|
|
27
|
+
return (h(Host, { key: '35d8ae3c3bce8bdfbd59b24ac8d56b2b065121bf', id: this.host.id || this.tabContentId, style: { display: this.active ? 'block' : 'none' }, role: "tabpanel", "aria-hidden": this.active ? 'false' : 'true', class: {
|
|
28
28
|
ready: this.ready,
|
|
29
29
|
'nano-tab-content': true,
|
|
30
|
-
} }, h("div", { key: '
|
|
30
|
+
} }, h("div", { key: 'b12340e8aa22961ab261ebe58e150ea5b2434314', part: "base", class: "nano-tab-content" }, h("slot", { key: 'eea7e936ac8ebe2338720d5878e06372c222fda2' }))));
|
|
31
31
|
}
|
|
32
32
|
static get is() { return "nano-tab-content"; }
|
|
33
33
|
static get encapsulation() { return "shadow"; }
|
|
@@ -51,12 +51,12 @@ export class NanoTab {
|
|
|
51
51
|
}
|
|
52
52
|
};
|
|
53
53
|
render() {
|
|
54
|
-
return (h(Host, { key: '
|
|
54
|
+
return (h(Host, { key: '0a14c43ba8ab38ec19e63fff1b7569d9f10457f0', id: this.host.id || this.tabId, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: "nano-tab" }, h("div", { key: 'bff4ec7769d57b0b5b9e3f936c147023ff7b532c', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
|
|
55
55
|
tab: true,
|
|
56
56
|
'tab--active': this.active,
|
|
57
57
|
'tab--disabled': this.disabled,
|
|
58
58
|
'tab--closable': this.closable,
|
|
59
|
-
} }, h("slot", { key: '
|
|
59
|
+
} }, h("slot", { key: '797a1904ebaaa96585ff47bff275a9643d09a2b8', name: "start" }), h("div", { key: '588cb30e4c7dfa85c99c45ac231db0188cb56005', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "tab__label" }, h("slot", { key: '6ff03454d9735733007f430cdde78010717d8677' })), h("slot", { key: '959a2633b41acdd733aa29d43178ef15784a8652', name: "end" }), this.closable && !this.disabled && (h("nano-icon-button", { key: '02b6b8158044d7be61450b86774bbe9f63575062', label: "Close this tab", iconName: "light/xmark", class: "tab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-button" })))));
|
|
60
60
|
}
|
|
61
61
|
static get is() { return "nano-tab"; }
|
|
62
62
|
static get encapsulation() { return "shadow"; }
|
|
@@ -41,8 +41,8 @@ export class NanoTag {
|
|
|
41
41
|
render() {
|
|
42
42
|
return (this.closable &&
|
|
43
43
|
!this.containsAnchor() && [
|
|
44
|
-
h("slot", { key: '
|
|
45
|
-
h("nano-icon-button", { key: '
|
|
44
|
+
h("slot", { key: '2ef94e5651a0428b93d9d3619ad0440bf70587e2' }),
|
|
45
|
+
h("nano-icon-button", { key: '0ad6bfbe3fd9ab8a796bbe915c6d522986236f1d', label: "Close", "icon-name": "light/xmark-large", onKeyDown: this.onKeyDown, onClick: this.handleClick }),
|
|
46
46
|
]);
|
|
47
47
|
}
|
|
48
48
|
static get is() { return "nano-tag"; }
|
|
@@ -227,10 +227,10 @@ export class Tooltip {
|
|
|
227
227
|
this.popover.destroy();
|
|
228
228
|
}
|
|
229
229
|
render() {
|
|
230
|
-
return (h(Host, { key: '
|
|
230
|
+
return (h(Host, { key: '08c87af28b192ca65f9adf1d62dd83b7e75ae3b5', onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, class: "nano-tooltip" }, h("slot", { key: 'c132792e3f32e824735783e6284f1c12ea3c234a', onSlotchange: this.handleSlotChange }), h("div", { key: 'd27cc6ed095544d4f81680191647ead58ed2cc89', ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner", popover: "manual" }, h("div", { key: 'c002bf4ec9a19eb5631d120498df58956d81e9ba', part: "base", ref: (el) => (this.tooltip = el), class: {
|
|
231
231
|
tooltip: true,
|
|
232
232
|
'tooltip--open': this.open,
|
|
233
|
-
}, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, h("slot", { key: '
|
|
233
|
+
}, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, h("slot", { key: '9f25b5ba1a2732bf2b6f6791bc47fb6c66e08bb6', name: "content", onSlotchange: () => this.setLabel() }, this.content), h("div", { key: '8d9e9b42fc0fb8e6491492b28019c184b7fc4fac', class: "tooltip-arrow", "data-popper-arrow": true })))));
|
|
234
234
|
}
|
|
235
235
|
static get is() { return "nano-tooltip"; }
|
|
236
236
|
static get encapsulation() { return "shadow"; }
|
package/dist/components/img.js
CHANGED
|
@@ -3,8 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { proxyCustomElement, HTMLElement, createEvent, Host, Build } from '@stencil/core/internal/client';
|
|
5
5
|
import { h } from './renderer.js';
|
|
6
|
-
import { d as defineCustomElement$
|
|
7
|
-
import { d as defineCustomElement$1 } from './skeleton.js';
|
|
6
|
+
import { d as defineCustomElement$1 } from './resize-observe.js';
|
|
8
7
|
|
|
9
8
|
const imgCss = ":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{--padding:0;display:inline-block;object-fit:cover;object-position:center;background-size:cover;background-position:center}:host *{border-radius:inherit}:host([background]:not([background=false])){display:block}.img{position:relative;object-fit:inherit;object-position:inherit;background-color:inherit;background-position:inherit;background-size:inherit;background-origin:inherit;background-attachment:inherit;background-repeat:inherit;flex:1 1 100%;display:flex;flex-direction:column;min-block-size:inherit;min-inline-size:inherit;block-size:inherit;inline-size:inherit;max-block-size:inherit;max-inline-size:inherit;aspect-ratio:inherit}.img__loader,.img__observer{position:absolute;inset:0;block-size:100%;inline-size:100%;z-index:-1}.img__image,.img__bg{border-radius:inherit;display:block;opacity:0;transition:0.5s ease opacity, 0.3s ease filter 0.4s;filter:blur(5px);flex:1}.img__image.loaded,.img__bg.loaded{opacity:1;filter:blur(0)}@media not all and (resolution >= 0.001dpcm){@supports (-webkit-appearance: none){.img__image.loaded,.img__bg.loaded{filter:blur(0)}}}.img__image{object-fit:inherit;object-position:inherit;min-block-size:inherit;min-inline-size:inherit;block-size:inherit;inline-size:inherit;max-block-size:inherit;max-inline-size:inherit;aspect-ratio:inherit}.img__image.hide{visibility:hidden}.img__image.hide.no-height{block-size:1px;position:absolute;z-index:-1}.img__bg{background-color:inherit;background-position:inherit;background-size:inherit;background-origin:inherit;background-attachment:inherit;background-repeat:inherit;overflow:auto;padding:var(--padding)}.img__bg.no-height{position:absolute;inset:0}";
|
|
10
9
|
|
|
@@ -143,16 +142,16 @@ const Img = /*@__PURE__*/ proxyCustomElement(class Img extends HTMLElement {
|
|
|
143
142
|
const bgStyle = this.loadSrc
|
|
144
143
|
? { 'background-image': `url(${this.loadSrc})` }
|
|
145
144
|
: {};
|
|
146
|
-
return (h(Host, { key: 'a9d5cb1d0be8540d7ea690fd13d92b1f5ec614af', class: "nano-img" }, h("div", { key: '1f40afc64a5652f53b224403c59b4f108e5eb044', class: "img" }, h("
|
|
145
|
+
return (h(Host, { key: 'a9d5cb1d0be8540d7ea690fd13d92b1f5ec614af', class: "nano-img" }, h("div", { key: '1f40afc64a5652f53b224403c59b4f108e5eb044', class: "img" }, h("div", { key: '7b3a0b8521888092effb1fc675b0c52bce7faa6f', class: "img__loader n-loader-skeleton" }, "Loading"), !!this.background && (h("div", { key: '1f4d59fc6ff3e0be42f18d1db4a099a32d099872', class: {
|
|
147
146
|
loaded: this.hasLoaded,
|
|
148
147
|
img__bg: true,
|
|
149
148
|
'no-height': this.autoHeight === 'image',
|
|
150
|
-
}, style: bgStyle }, h("slot", { key: '
|
|
149
|
+
}, style: bgStyle }, h("slot", { key: 'd987180d13fa9ef34868c8e962344da9e0f6b876' }))), h("img", { key: 'f3d603cf35bf0c37c4e1eb530e9a9ea7d7e81beb', class: {
|
|
151
150
|
img__image: true,
|
|
152
151
|
loaded: this.hasLoaded,
|
|
153
152
|
hide: this.background,
|
|
154
153
|
'no-height': this.autoHeight === 'content',
|
|
155
|
-
}, decoding: "async", src: Build.isServer ? this.src : this.loadSrc, loading: Build.isServer && this.lazy ? 'lazy' : undefined, alt: this.alt, onLoad: this.onLoad, onError: this.loadError }), h("nano-resize-observe", { key: '
|
|
154
|
+
}, decoding: "async", src: Build.isServer ? this.src : this.loadSrc, loading: Build.isServer && this.lazy ? 'lazy' : undefined, alt: this.alt, onLoad: this.onLoad, onError: this.loadError }), h("nano-resize-observe", { key: 'cf77dadeb8d5b01ef1afff5e6df5eb6aacad13e6', class: "img__observer", onNanoResizeStateChange: this.onResize, states: this.imgStates }))));
|
|
156
155
|
}
|
|
157
156
|
static get watchers() { return {
|
|
158
157
|
"_src": ["_srcChanged"],
|
|
@@ -183,7 +182,7 @@ function defineCustomElement() {
|
|
|
183
182
|
if (typeof customElements === "undefined") {
|
|
184
183
|
return;
|
|
185
184
|
}
|
|
186
|
-
const components = ["nano-img", "nano-resize-observe"
|
|
185
|
+
const components = ["nano-img", "nano-resize-observe"];
|
|
187
186
|
components.forEach(tagName => { switch (tagName) {
|
|
188
187
|
case "nano-img":
|
|
189
188
|
if (!customElements.get(tagName)) {
|
|
@@ -191,11 +190,6 @@ function defineCustomElement() {
|
|
|
191
190
|
}
|
|
192
191
|
break;
|
|
193
192
|
case "nano-resize-observe":
|
|
194
|
-
if (!customElements.get(tagName)) {
|
|
195
|
-
defineCustomElement$2();
|
|
196
|
-
}
|
|
197
|
-
break;
|
|
198
|
-
case "nano-skeleton":
|
|
199
193
|
if (!customElements.get(tagName)) {
|
|
200
194
|
defineCustomElement$1();
|
|
201
195
|
}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Custom elements for Nanopore-Digital Web applications
|
|
3
3
|
*/
|
|
4
|
-
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
|
|
4
|
+
import { proxyCustomElement, HTMLElement, Build, h } from '@stencil/core/internal/client';
|
|
5
5
|
import { a as addGlobalStylesheetToShadow } from './style.js';
|
|
6
6
|
import { d as defineCustomElement$5 } from './dropdown.js';
|
|
7
7
|
import { d as defineCustomElement$4 } from './icon.js';
|
|
8
8
|
import { d as defineCustomElement$3 } from './menu.js';
|
|
9
9
|
import { d as defineCustomElement$2 } from './nav-item.js';
|
|
10
10
|
|
|
11
|
-
const breadcrumbCss = ":host
|
|
11
|
+
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}}";
|
|
12
12
|
|
|
13
13
|
const NanoBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class NanoBreadcrumb extends HTMLElement {
|
|
14
14
|
constructor() {
|
|
@@ -22,7 +22,8 @@ const NanoBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class NanoBreadcrumb e
|
|
|
22
22
|
isOpen = false;
|
|
23
23
|
componentWillLoad() {
|
|
24
24
|
// add global styles to shadow DOM
|
|
25
|
-
|
|
25
|
+
if (Build.isBrowser)
|
|
26
|
+
addGlobalStylesheetToShadow(this.el?.shadowRoot);
|
|
26
27
|
}
|
|
27
28
|
render() {
|
|
28
29
|
const returnBreadcrumb = this.breadcrumbs?.find((breadcrumb) => breadcrumb.return);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Custom elements for Nanopore-Digital Web applications
|
|
3
3
|
*/
|
|
4
|
-
import { proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
|
|
4
|
+
import { proxyCustomElement, HTMLElement, createEvent, Build, Host } from '@stencil/core/internal/client';
|
|
5
5
|
import { h } from './renderer.js';
|
|
6
6
|
import { a as addGlobalStylesheetToShadow } from './style.js';
|
|
7
7
|
import { d as defineCustomElement$5 } from './cta.js';
|
|
@@ -45,7 +45,8 @@ const CollapsibleComparison = /*@__PURE__*/ proxyCustomElement(class Collapsible
|
|
|
45
45
|
this.open = !this.open;
|
|
46
46
|
};
|
|
47
47
|
componentWillLoad() {
|
|
48
|
-
|
|
48
|
+
if (Build.isBrowser)
|
|
49
|
+
addGlobalStylesheetToShadow(this.el.shadowRoot);
|
|
49
50
|
}
|
|
50
51
|
componentDidLoad() {
|
|
51
52
|
if (this.open) {
|
|
@@ -55,7 +56,7 @@ const CollapsibleComparison = /*@__PURE__*/ proxyCustomElement(class Collapsible
|
|
|
55
56
|
}
|
|
56
57
|
}
|
|
57
58
|
render() {
|
|
58
|
-
return (h(Host, { key: '
|
|
59
|
+
return (h(Host, { key: '849c3d8630973d94ced90a7fe10506815932d9ab', class: "nano-collapsible-comparison" }, h("div", { key: 'f84d57632fc72fbc266839afd017d0087ba2ed61', class: "collapsible-comparison" }, h("div", { key: '6eeadd3c7ee8ccfacf6eeddd1addcb6f850d8561', part: "header" }, h("div", { key: 'fa7e80984c27a377b485392ada0bdc5bcacc523d', class: "header" }, h("slot", { key: '93e94814f324b460dbb69ae44214e77602e4af8f', name: "heading" }), h("nano-cta", { key: 'ac4faf7dddc1659c80493321ffacf10ccc9587dd', size: "large", icon: this.open ? 'up' : 'down', secondary: true }, h("button", { key: 'b7de49dacb1b827eaf17cfb81349b63d31858251', onClick: this.handleClick }, this.open ? 'Hide' : 'Show', " details")), h("nano-icon-button", { key: '3cddc59e59966562873e7e4999d22ff4db1b4da1', label: `${this.open ? 'Hide' : 'Show'} details`, onClick: this.handleClick, iconName: "light/chevron-down", class: this.open ? 'open' : '' })), h("div", { key: 'a977e27bf6aaea079bb80ca72433e2f2c385c683', class: "headings" }, h("slot", { key: '7793d25823855334f9d5223070ef84a1418fb1c0', name: "comparison-headings" }))), h("div", { key: '08102e78eda50cd562e0c31588a38c363e746e4d', class: "content" }, h("slot", { key: '0318767e2bb809f6db5a2c402438682d6101885a', name: "content" })))));
|
|
59
60
|
}
|
|
60
61
|
static get watchers() { return {
|
|
61
62
|
"open": ["handleOpenChange"]
|