@nanoporetech-digital/components 8.3.2 → 8.4.1
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/constructible-style-BsHBb9au.js +133 -0
- package/dist/cjs/{fade-BzBFJiQK.js → fade-DBuNbJEw.js} +1 -1
- package/dist/cjs/{fullscreen-Cz3eYnOp.js → fullscreen-Bk4jXSN0.js} +1 -1
- package/dist/cjs/index-DGttnXif.js +28 -16
- package/dist/cjs/{lazyload-DIFYejbf.js → lazyload-gQqOMvpr.js} +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/nano-accordion.cjs.entry.js +28 -9
- package/dist/cjs/nano-avatar_5.cjs.entry.js +11 -11
- package/dist/cjs/nano-components.cjs.js +1 -1
- package/dist/cjs/{nano-data-table-DFEflpc4.js → nano-data-table-BHQIpW0N.js} +31 -1
- package/dist/cjs/nano-data-table.cjs.entry.js +1 -1
- package/dist/cjs/nano-details.cjs.entry.js +6 -4
- package/dist/cjs/nano-field-validator.cjs.entry.js +4 -2
- package/dist/cjs/nano-footer.cjs.entry.js +2 -2
- package/dist/cjs/nano-global-nav.cjs.entry.js +22 -21
- package/dist/cjs/nano-grid-item.cjs.entry.js +1 -1
- package/dist/cjs/nano-grid_2.cjs.entry.js +6 -130
- package/dist/cjs/nano-hero.cjs.entry.js +4 -4
- package/dist/cjs/{nano-icon_3.cjs.entry.js → nano-icon-button_2.cjs.entry.js} +2 -320
- package/dist/cjs/nano-icon.cjs.entry.js +326 -0
- package/dist/cjs/nano-in-page-nav.cjs.entry.js +1 -1
- package/dist/cjs/nano-increment.cjs.entry.js +1 -1
- package/dist/cjs/nano-intersection-observe.cjs.entry.js +1 -1
- package/dist/cjs/nano-masked-overflow.cjs.entry.js +3 -3
- package/dist/cjs/nano-menu-drawer.cjs.entry.js +2 -2
- package/dist/cjs/nano-more-less.cjs.entry.js +2 -2
- package/dist/cjs/nano-rating.cjs.entry.js +4 -4
- package/dist/cjs/nano-resize-observe.cjs.entry.js +2 -2
- package/dist/cjs/nano-slide.cjs.entry.js +1 -1
- package/dist/cjs/{nano-slides-C576PTmo.js → nano-slides-C73bSG0h.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-step-accordion.cjs.entry.js +101 -0
- package/dist/cjs/nano-step-breadcrumb.cjs.entry.js +133 -0
- 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-Clb2QknR.js → page-dots-BLPta5z5.js} +1 -1
- package/dist/cjs/{table.worker-DxRLPmU9.js → table.worker-BeE8kdSf.js} +1 -1
- package/dist/collection/collection-manifest.json +2 -0
- package/dist/collection/components/accordion/accordion.js +51 -13
- package/dist/collection/components/breadcrumb/breadcrumb.js +1 -1
- package/dist/collection/components/data-table/table.js +1 -13
- package/dist/collection/components/details/details.js +9 -6
- package/dist/collection/components/field-validator/field-validator.js +4 -2
- package/dist/collection/components/footer/footer.css +7 -7
- package/dist/collection/components/footer/footer.js +2 -1
- package/dist/collection/components/global-nav/global-nav.js +23 -22
- package/dist/collection/components/global-search-results/global-search-results.js +4 -4
- package/dist/collection/components/grid/grid-item.js +1 -1
- package/dist/collection/components/grid/grid.js +1 -1
- package/dist/collection/components/hero/hero.js +4 -4
- package/dist/collection/components/icon/icon.js +1 -1
- package/dist/collection/components/icon/validate.js +1 -1
- package/dist/collection/components/img/img.js +3 -3
- package/dist/collection/components/in-page-nav/in-page-nav.js +1 -1
- package/dist/collection/components/increment/increment.js +1 -1
- package/dist/collection/components/intersection-observe/intersection-observe.js +1 -1
- package/dist/collection/components/masked-overflow/masked-overflow.js +3 -3
- package/dist/collection/components/menu-drawer/menu-drawer.js +2 -2
- package/dist/collection/components/more-less/more-less.js +2 -2
- package/dist/collection/components/rating/rating.js +4 -4
- package/dist/collection/components/resize-observe/resize-observe.js +2 -2
- package/dist/collection/components/select/select.js +7 -7
- 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/step-accordion/step-accordion.css +138 -0
- package/dist/collection/components/step-accordion/step-accordion.js +190 -0
- package/dist/collection/components/step-breadcrumb/step-breadcrumb.css +231 -0
- package/dist/collection/components/step-breadcrumb/step-breadcrumb.js +222 -0
- 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/tooltip/tooltip.js +2 -2
- package/dist/collection/utils/constructible-style.js +2 -2
- package/dist/collection/utils/performance.js +17 -0
- package/dist/components/accordion.js +80 -0
- package/dist/components/constructible-style.js +131 -0
- package/dist/components/details.js +6 -4
- package/dist/components/global-search-results.js +4 -4
- package/dist/components/grid.js +5 -129
- package/dist/components/icon.js +2 -2
- package/dist/components/img.js +3 -3
- package/dist/components/masked-overflow.js +3 -3
- package/dist/components/nano-accordion.js +1 -56
- package/dist/components/nano-data-table.js +30 -0
- package/dist/components/nano-field-validator.js +4 -2
- package/dist/components/nano-footer.js +2 -2
- package/dist/components/nano-global-nav.js +22 -21
- package/dist/components/nano-grid-item.js +1 -1
- package/dist/components/nano-hero.js +4 -4
- package/dist/components/nano-in-page-nav.js +1 -1
- package/dist/components/nano-increment.js +1 -1
- package/dist/components/nano-intersection-observe.js +1 -1
- package/dist/components/nano-menu-drawer.js +2 -2
- package/dist/components/nano-more-less.js +2 -2
- package/dist/components/nano-rating.js +4 -4
- package/dist/components/nano-slide.js +1 -1
- package/dist/components/nano-sortable.js +1 -1
- package/dist/components/nano-step-accordion.d.ts +11 -0
- package/dist/components/nano-step-accordion.js +141 -0
- package/dist/components/nano-step-breadcrumb.d.ts +11 -0
- package/dist/components/nano-step-breadcrumb.js +181 -0
- 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/resize-observe.js +2 -2
- package/dist/components/select.js +7 -7
- package/dist/components/slides.js +3 -3
- package/dist/components/sticker.js +2 -2
- package/dist/components/tooltip.js +2 -2
- package/dist/esm/constructible-style-B2_GfhhS.js +131 -0
- package/dist/esm/{fade-D4P3XGVa.js → fade-C0NluV0K.js} +1 -1
- package/dist/esm/{fullscreen-Cfl6LvH2.js → fullscreen-Ck_w6MCZ.js} +1 -1
- package/dist/esm/index-BM3Om9WE.js +28 -16
- package/dist/esm/{lazyload-CQYknGN2.js → lazyload-DddTyM-A.js} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/nano-accordion.entry.js +28 -9
- package/dist/esm/nano-avatar_5.entry.js +11 -11
- package/dist/esm/nano-components.js +1 -1
- package/dist/esm/{nano-data-table-Bqk8ZUaL.js → nano-data-table-CWliPF7Y.js} +31 -1
- package/dist/esm/nano-data-table.entry.js +1 -1
- package/dist/esm/nano-details.entry.js +6 -4
- package/dist/esm/nano-field-validator.entry.js +4 -2
- package/dist/esm/nano-footer.entry.js +2 -2
- package/dist/esm/nano-global-nav.entry.js +22 -21
- package/dist/esm/nano-grid-item.entry.js +1 -1
- package/dist/esm/nano-grid_2.entry.js +7 -131
- package/dist/esm/nano-hero.entry.js +4 -4
- package/dist/esm/{nano-icon_3.entry.js → nano-icon-button_2.entry.js} +4 -321
- package/dist/esm/nano-icon.entry.js +324 -0
- package/dist/esm/nano-in-page-nav.entry.js +1 -1
- package/dist/esm/nano-increment.entry.js +1 -1
- package/dist/esm/nano-intersection-observe.entry.js +1 -1
- package/dist/esm/nano-masked-overflow.entry.js +3 -3
- package/dist/esm/nano-menu-drawer.entry.js +2 -2
- package/dist/esm/nano-more-less.entry.js +2 -2
- package/dist/esm/nano-rating.entry.js +4 -4
- package/dist/esm/nano-resize-observe.entry.js +2 -2
- package/dist/esm/nano-slide.entry.js +1 -1
- package/dist/esm/{nano-slides-DcJWApi6.js → nano-slides-BiPGpe5F.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-step-accordion.entry.js +99 -0
- package/dist/esm/nano-step-breadcrumb.entry.js +131 -0
- 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-kX7jiD3G.js → page-dots-WKehEjjM.js} +1 -1
- package/dist/esm/{table.worker-a52UkSRM.js → table.worker-DJks4i_l.js} +1 -1
- package/dist/nano-components/constructible-style-B2_GfhhS.js +4 -0
- package/dist/nano-components/{fade-D4P3XGVa.js → fade-C0NluV0K.js} +1 -1
- package/dist/nano-components/{fullscreen-Cfl6LvH2.js → fullscreen-Ck_w6MCZ.js} +1 -1
- package/dist/nano-components/{lazyload-CQYknGN2.js → lazyload-DddTyM-A.js} +1 -1
- package/dist/nano-components/nano-accordion.entry.js +1 -1
- package/dist/nano-components/nano-avatar_5.entry.js +1 -1
- package/dist/nano-components/nano-components.css +32 -1
- package/dist/nano-components/nano-components.esm.js +1 -1
- package/dist/nano-components/nano-data-table-CWliPF7Y.js +4 -0
- package/dist/nano-components/nano-data-table.entry.js +1 -1
- package/dist/nano-components/nano-details.entry.js +1 -1
- package/dist/nano-components/nano-field-validator.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-grid-item.entry.js +1 -1
- package/dist/nano-components/nano-grid_2.entry.js +1 -1
- package/dist/nano-components/nano-hero.entry.js +1 -1
- package/dist/nano-components/nano-icon-button_2.entry.js +4 -0
- package/dist/nano-components/nano-icon.entry.js +4 -0
- package/dist/nano-components/nano-in-page-nav.entry.js +1 -1
- package/dist/nano-components/nano-increment.entry.js +1 -1
- package/dist/nano-components/nano-intersection-observe.entry.js +1 -1
- package/dist/nano-components/nano-masked-overflow.entry.js +1 -1
- package/dist/nano-components/nano-menu-drawer.entry.js +1 -1
- package/dist/nano-components/nano-more-less.entry.js +1 -1
- package/dist/nano-components/nano-rating.entry.js +1 -1
- package/dist/nano-components/nano-resize-observe.entry.js +1 -1
- package/dist/nano-components/nano-slide.entry.js +1 -1
- package/dist/nano-components/{nano-slides-DcJWApi6.js → nano-slides-BiPGpe5F.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-step-accordion.entry.js +4 -0
- package/dist/nano-components/nano-step-breadcrumb.entry.js +4 -0
- 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-kX7jiD3G.js → page-dots-WKehEjjM.js} +1 -1
- package/dist/nano-components/{table.worker-a52UkSRM.js → table.worker-DJks4i_l.js} +1 -1
- package/dist/stencil.config.js +1 -0
- 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/accordion/accordion.d.ts +10 -4
- package/dist/types/components/details/details.d.ts +3 -2
- package/dist/types/components/footer/footer.d.ts +1 -0
- package/dist/types/components/global-nav/global-nav.d.ts +1 -1
- package/dist/types/components/step-accordion/step-accordion.d.ts +38 -0
- package/dist/types/components/step-breadcrumb/step-breadcrumb.d.ts +37 -0
- package/dist/types/components.d.ts +174 -4
- package/dist/types/utils/performance.d.ts +1 -0
- package/docs-json.json +352 -18
- package/docs-vscode.json +41 -2
- package/hydrate/index.js +404 -99
- package/hydrate/index.mjs +404 -99
- package/package.json +2 -2
- package/dist/nano-components/nano-data-table-Bqk8ZUaL.js +0 -4
- package/dist/nano-components/nano-icon_3.entry.js +0 -4
- /package/dist/types/builds/{x6knoJK1 → QrfEi4pt}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/generate-vue-component.d.ts +0 -0
- /package/dist/types/builds/{x6knoJK1 → QrfEi4pt}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/index.d.ts +0 -0
- /package/dist/types/builds/{x6knoJK1 → QrfEi4pt}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/output-vue.d.ts +0 -0
- /package/dist/types/builds/{x6knoJK1 → QrfEi4pt}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/plugin.d.ts +0 -0
- /package/dist/types/builds/{x6knoJK1 → QrfEi4pt}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/types.d.ts +0 -0
- /package/dist/types/builds/{x6knoJK1 → QrfEi4pt}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/utils.d.ts +0 -0
- /package/dist/types/builds/{x6knoJK1 → QrfEi4pt}/0/Digital/nano-components/packages/components/.stencil/stencil.config.d.ts +0 -0
- /package/dist/types/builds/{x6knoJK1 → QrfEi4pt}/0/Digital/nano-components/packages/components/.stencil/stencil.config.prod.d.ts +0 -0
- /package/dist/types/builds/{x6knoJK1 → QrfEi4pt}/0/Digital/nano-components/packages/components/.stencil/testing/mocks/intersection-observer.d.ts +0 -0
- /package/dist/types/builds/{x6knoJK1 → QrfEi4pt}/0/Digital/nano-components/packages/components/.stencil/wdio.conf.d.ts +0 -0
@@ -70,7 +70,7 @@ const NanoIncrement = class {
|
|
70
70
|
this.handleSlotChange();
|
71
71
|
}
|
72
72
|
render() {
|
73
|
-
return (renderer.h(index.Host, { key: '
|
73
|
+
return (renderer.h(index.Host, { key: '14c12f59b2f00d22bc58fb5ca64616a0a6b19749', class: "nano-increment" }, renderer.h("div", { key: '77800505fe9e0d79fda864dc48cb199e6ea611c7', class: "root" }, renderer.h("div", { key: '01576d846ca2708319d9faf1c7a0a25169f6c3f4', class: "minus" }, renderer.h("nano-icon-button", { key: 'a6b30034c64de602ac504a882aa3ff7c5a933083', iconName: "light/minus", label: "Decrement", onClick: this.handleMinus })), renderer.h("slot", { key: 'f04566d5f4a52f23a36bfb1c86a8dadfa3638d66', onSlotchange: this.handleSlotChange }), renderer.h("div", { key: '4f1e183e7d547d5f72154115300d14cfbbe3d62b', class: "plus" }, renderer.h("nano-icon-button", { key: '20af1b2a19cd8c9264e6375f4a5c05b9f917d979', iconName: "light/plus", label: "Increment", onClick: this.handlePlus })))));
|
74
74
|
}
|
75
75
|
static get watchers() { return {
|
76
76
|
"inputElement": ["inputElementChanged"]
|
@@ -145,7 +145,7 @@ const IntersectionObserve = class {
|
|
145
145
|
this.removeIO();
|
146
146
|
}
|
147
147
|
render() {
|
148
|
-
return (renderer.h(index.Host, { key: '
|
148
|
+
return (renderer.h(index.Host, { key: 'aadf019427b2d2c3020fd6e667d5932fd14aea45', class: "nano-intersection-observe" }, renderer.h("slot", { key: 'eae74417c304de7b8e377229b603d88468a5c7f5', ref: (slot) => (this.defaultSlot = slot), onSlotchange: this.handleSlotChange })));
|
149
149
|
}
|
150
150
|
static get watchers() { return {
|
151
151
|
"root": ["handleRootChange"],
|
@@ -317,7 +317,7 @@ const MaskedOverflow = class {
|
|
317
317
|
}
|
318
318
|
}
|
319
319
|
render() {
|
320
|
-
return (renderer.h(index.Host, { key: '
|
320
|
+
return (renderer.h(index.Host, { key: '49485c7d6a96e8dd122f862abd2bd2f95b2343e7', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, renderer.h("div", { key: 'acd0541992b9dda0c1ab6414e67cd8a71f429918', part: "base", class: {
|
321
321
|
onav: true,
|
322
322
|
[`onav--${this.orientation}`]: true,
|
323
323
|
'onav--has-scroll-controls': this.hasScrollControls,
|
@@ -326,12 +326,12 @@ const MaskedOverflow = class {
|
|
326
326
|
'onav--no-transitions': this.instantReCalc,
|
327
327
|
'onnav--has-indicator': this.showIndicator,
|
328
328
|
'onnav--hide-scrollbars': this.hideScrollbars && this.hideScrollbars !== 'false',
|
329
|
-
}, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, renderer.h("div", { key: '
|
329
|
+
}, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, renderer.h("div", { key: 'ba25b3551a2b6be4906d538cbaabf0ba8cb859f6', class: "onav__nav" }, this.scrollControls && (renderer.h("nano-icon-button", { key: '72ca6ae1ef0300fc91a95d347702bac94fec97ac', part: "scroll-button scroll-button-prev", class: {
|
330
330
|
'onav__scroll-button': true,
|
331
331
|
'onav__scroll-button--start': true,
|
332
332
|
}, ref: (btn) => (this.startBtn = btn), onClick: () => this.handleBtnClick(false), label: "Click to scroll", iconName: this.orientation === 'horizontal'
|
333
333
|
? 'light/chevron-left'
|
334
|
-
: 'light/chevron-up' })), renderer.h("div", { key: '
|
334
|
+
: 'light/chevron-up' })), renderer.h("div", { key: '34893f5e055e8b44a78cb0706e974ee45261bdb8', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, renderer.h("div", { key: '19ea27abc4878c5ab034e8ac0ee7085f19607a92', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (renderer.h("div", { key: '6cfdb83598367d649e6705fe709e89d8a8b505a6', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), renderer.h("slot", { key: '43f3164d6c962f951ac672f79d48943c44e0514e', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (renderer.h("nano-icon-button", { key: 'eaa09e8faa9343fca660d1f2e0a4b5366b7c6668', part: "scroll-button scroll-button-next", class: {
|
335
335
|
'onav__scroll-button': true,
|
336
336
|
'onav__scroll-button--end': true,
|
337
337
|
}, ref: (btn) => (this.endBtn = btn), onClick: () => this.handleBtnClick(true), label: "Click to scroll", iconName: this.orientation === 'horizontal'
|
@@ -144,14 +144,14 @@ const MenuDrawer = class {
|
|
144
144
|
}
|
145
145
|
}
|
146
146
|
render() {
|
147
|
-
return (renderer.h(index.Host, { key: '
|
147
|
+
return (renderer.h(index.Host, { key: '4ad542c84da0045168bcee1df744cb94c2a1196e', class: {
|
148
148
|
open: this.open,
|
149
149
|
'secondary-open': this.secondaryOpen,
|
150
150
|
hide: this.hide,
|
151
151
|
loading: this.isLoading,
|
152
152
|
'has-global-nav': !!this.globalNav,
|
153
153
|
'nano-menu-drawer': true,
|
154
|
-
}, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null }, renderer.h("div", { key: '
|
154
|
+
}, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null }, renderer.h("div", { key: 'b00cad9c3696b9c373e8d98fcd1f86c2c7b23aa2', ref: (div) => (this.containerDiv = div), class: "container" }, renderer.h("div", { key: 'a7746088c4458802d386f1c3d092e0a386fe4bd6', class: `content-wrap ${this.secondaryOpen ? 'secondary-open' : ''}` }, renderer.h("nav", { key: '993f550de47fc9410aa04bf98d9d076a6290637c', ref: (div) => (this.contentDiv = div), class: "content" }, renderer.h("div", { key: '3da3d0268df95d3080938e33f6e80d659dce1525', class: "head" }, renderer.h("button", { key: 'af104da5e67aaf06194317086daa6a5d4c008b6a', onClick: this.toggle, class: "collapse-btn" }, renderer.h("nano-icon", { key: 'b6e85eb6690440da7ccd893ccd9feb082d7a4552', name: "light/arrow-right-to-line" }), renderer.h("span", { key: '443c2afa504892d6de2a75a126e09c484540c677', class: "visually-hidden" }, "collapse / expand menu"))), renderer.h("slot", { key: '275ab007d04f3bde8269f0b4927aec81d1e47ccd' }), this.slotCtrl.has('foot') && (renderer.h("div", { key: 'c0eb043b9447264d48ca65d6e51c986c05ba10eb', class: "foot" }, renderer.h("slot", { key: 'bee82590231f9cfffc15c22ba0fafb313298e232', name: "foot" }))))))));
|
155
155
|
}
|
156
156
|
static get watchers() { return {
|
157
157
|
"open": ["openChange"]
|
@@ -54,8 +54,8 @@ const Rating = class {
|
|
54
54
|
this.handleShowHideElements();
|
55
55
|
}
|
56
56
|
render() {
|
57
|
-
return (renderer.h(index.Host, { key: '
|
58
|
-
renderer.h("div", { key: '
|
57
|
+
return (renderer.h(index.Host, { key: 'cdfbe00c8ce785ad89f711c8488b514dba8f3fb6', class: "nano-more-less" }, renderer.h("slot", { key: '8c17f3540c587129feff6905e518e01f4866b90d', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
|
58
|
+
renderer.h("div", { key: 'fd937a181108336345a5278b4e2e230feb13f891', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, renderer.h("slot", { key: 'bd7c0630e06de922c8ed48e5efc0db640594c776', name: "less" }, renderer.h("button", { key: '8c924f74b1b7939d17a9defd02ccb41ecd403257', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
|
59
59
|
!this.noHideBtn ? (renderer.h("div", { style: { display: this.show ? 'contents' : 'none' }, class: "button-wrapper", part: "button-wrapper button-wrapper--more", onClick: (e) => this.handleClick(e) }, renderer.h("slot", { name: "more" }, renderer.h("button", { part: "button button--more" }, "Show less (-", this.children.length - this.maxToShow, ")")))) : (''),
|
60
60
|
]));
|
61
61
|
}
|
@@ -195,20 +195,20 @@ const Rating = class {
|
|
195
195
|
else {
|
196
196
|
displayValue = this.isHovering ? this.hoverValue : this.value;
|
197
197
|
}
|
198
|
-
return (renderer.h(index.Host, { key: '
|
198
|
+
return (renderer.h(index.Host, { key: 'bacb1319a8119e09eb7223396c0fd308d8f1bcf0', class: "nano-rating" }, renderer.h("label", { key: 'e96dd3dc5d27aad666c9273fb48a0dde49b05bcd', class: `rating-label${this.hideLabel ? ' visually-hidden' : ''}`, part: "label", htmlFor: this.name }, renderer.h("slot", { key: 'a50e1bb855e58080b964cde932b6e850be44cff5', name: "label" }, this.label)), renderer.h("input", { key: 'c95ba7bf46db99df309030b4e7c9a006909e47a7', class: "range-input visually-hidden", name: this.name, id: this.name, disabled: this.disabled || this.readonly, required: this.required, value: this.value, onFocus: () => {
|
199
199
|
this.setFocus();
|
200
|
-
} }), renderer.h("div", { key: '
|
200
|
+
} }), renderer.h("div", { key: 'a04e24da1bf879b551f31b3692e990e912739643', class: "rating-wrap" }, renderer.h("div", { key: '2686f949da578a7bcdbd3043f131edccc24f0f30', dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
|
201
201
|
rating: true,
|
202
202
|
'rating--readonly': this.readonly,
|
203
203
|
'rating--disabled': this.disabled,
|
204
|
-
}, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove, onFocus: this.handleFocus, onBlur: this.handleBlur }, renderer.h("span", { key: '
|
204
|
+
}, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove, onFocus: this.handleFocus, onBlur: this.handleBlur }, renderer.h("span", { key: '890e0a8296994061f88cdfa42811ff61d1fbb2b2', class: "rating__symbols rating__symbols--inactive" }, counter.map((index) => (renderer.h("span", { class: {
|
205
205
|
rating__symbol: true,
|
206
206
|
'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
|
207
207
|
},
|
208
208
|
// Users can click the current value to clear the rating. When this happens, we set this.isHovering to
|
209
209
|
// false to prevent the hover state from confusing them as they move the mouse out of the control. This
|
210
210
|
// extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.
|
211
|
-
onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), renderer.h("span", { key: '
|
211
|
+
onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), renderer.h("span", { key: 'fad1f1de103c1451d848a215c9c7b18084f172ce', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
|
212
212
|
clip: this.clip(displayValue),
|
213
213
|
} }, counter.map((index) => (renderer.h("span", { class: {
|
214
214
|
rating__symbol: true,
|
@@ -228,13 +228,13 @@ const ResizeObserve = class {
|
|
228
228
|
}
|
229
229
|
}
|
230
230
|
render() {
|
231
|
-
return (renderer.h(index.Host, { key: '
|
231
|
+
return (renderer.h(index.Host, { key: '3d1301e7d8a6c0f96188ea4dadddcc3f71a349cc', class: {
|
232
232
|
'nano-resize-observe': true,
|
233
233
|
'content-fit-x': this.contentFitX,
|
234
234
|
'content-fit-y': this.contentFitY,
|
235
235
|
'content-nofit-x': this.contentFitX === false,
|
236
236
|
'content-nofit-y': this.contentFitY === false,
|
237
|
-
} }, renderer.h("slot", { key: '
|
237
|
+
} }, renderer.h("slot", { key: '363d69b62debe81c7d3d1790d4dead42538f7118' }), !!this.notifyContentFit &&
|
238
238
|
(this.contentFitX !== null || this.contentFitY !== null) && [
|
239
239
|
this.contentFitX ? (renderer.h("slot", { name: "content-fit-x" })) : (renderer.h("slot", { name: "content-nofit-x" })),
|
240
240
|
this.contentFitY ? (renderer.h("slot", { name: "content-fit-y" })) : (renderer.h("slot", { name: "content-nofit-y" })),
|
@@ -39,7 +39,7 @@ const Slide = class {
|
|
39
39
|
});
|
40
40
|
}
|
41
41
|
render() {
|
42
|
-
return (renderer.h(index.Host, { key: '
|
42
|
+
return (renderer.h(index.Host, { key: '3d5f03684b14b0944b06802a26955b035ae20a9f', class: "nano-slide" }, renderer.h("slot", { key: '5115d41ae13fb0980ae656c106b9105b5f14703b' })));
|
43
43
|
}
|
44
44
|
static get watchers() { return {
|
45
45
|
"ready": ["readyChange"]
|
@@ -2813,19 +2813,19 @@ const Slides = class {
|
|
2813
2813
|
}
|
2814
2814
|
async loadFlickityModules(opts) {
|
2815
2815
|
if (!this.hasFullScreenModule && opts.fullscreen) {
|
2816
|
-
await Promise.resolve().then(function () { return require('./fullscreen-
|
2816
|
+
await Promise.resolve().then(function () { return require('./fullscreen-Bk4jXSN0.js'); });
|
2817
2817
|
this.hasFullScreenModule = true;
|
2818
2818
|
}
|
2819
2819
|
if (!this.hasLazyLoadModule && opts.lazyLoad) {
|
2820
|
-
await Promise.resolve().then(function () { return require('./lazyload-
|
2820
|
+
await Promise.resolve().then(function () { return require('./lazyload-gQqOMvpr.js'); });
|
2821
2821
|
this.hasLazyLoadModule = true;
|
2822
2822
|
}
|
2823
2823
|
if (!this.hasDotsModule && opts.pageDots) {
|
2824
|
-
await Promise.resolve().then(function () { return require('./page-dots-
|
2824
|
+
await Promise.resolve().then(function () { return require('./page-dots-BLPta5z5.js'); });
|
2825
2825
|
this.hasDotsModule = true;
|
2826
2826
|
}
|
2827
2827
|
if (!this.hasFadeModule && opts.fade) {
|
2828
|
-
await Promise.resolve().then(function () { return require('./fade-
|
2828
|
+
await Promise.resolve().then(function () { return require('./fade-DBuNbJEw.js'); });
|
2829
2829
|
this.hasFadeModule = true;
|
2830
2830
|
}
|
2831
2831
|
}
|
@@ -2960,15 +2960,15 @@ const Slides = class {
|
|
2960
2960
|
this.destroyflickity();
|
2961
2961
|
}
|
2962
2962
|
render() {
|
2963
|
-
return (renderer.h(index.Host, { key: '
|
2963
|
+
return (renderer.h(index.Host, { key: '905eab94c6853e11f8103ade8a2711515a957a88', class: "nano-slides" }, renderer.h("div", { key: 'a6ca3bf953dc8ad8643b5f196bbbb4cad5696739', class: {
|
2964
2964
|
slideshow: true,
|
2965
2965
|
ready: this.ready,
|
2966
2966
|
'not-ready': !this.ready,
|
2967
|
-
}, part: "base" }, renderer.h("div", { key: '
|
2967
|
+
}, part: "base" }, renderer.h("div", { key: 'ebf38a42c8c0ee4a192e2c10c7e882f4953cf707', ref: (div) => (this.flickityEl = div), class: {
|
2968
2968
|
'flickity-container': true,
|
2969
2969
|
'slides-ready': this.slidesReady,
|
2970
2970
|
'slides-not-ready': !this.slidesReady,
|
2971
|
-
}, part: "slide-container" }, renderer.h("slot", { key: '
|
2971
|
+
}, part: "slide-container" }, renderer.h("slot", { key: 'ac8e76e6ee701ef38a73a1f753cbf7ad30ef9c59' })), renderer.h("div", { key: 'e74cad0bd4ec8e2e15308b26550a697ff3dd4dcb', class: "ui-extras" }, renderer.h("slot", { key: '8b7b6cfb6ba0e531a8c7707f5f65cba334e8eba6', name: "ui" })))));
|
2972
2972
|
}
|
2973
2973
|
static get watchers() { return {
|
2974
2974
|
"options": ["optionsChanged"],
|
@@ -728,7 +728,7 @@ const Sortable = class {
|
|
728
728
|
}
|
729
729
|
}
|
730
730
|
render() {
|
731
|
-
return (renderer.h(index.Host, { key: '
|
731
|
+
return (renderer.h(index.Host, { key: 'f9329f87a60f9b77ad917b9bbf0aa526f4779e82', class: "nano-sortable" }, renderer.h("div", { key: 'c30a6d47b7a932906b17f0cd0cec80e0c7ea38ef', class: "sortable__live-region", "aria-live": "polite", "aria-relevant": "additions", "aria-atomic": "true", role: "log", part: "announcements" }, this.ariaTextList.map((str) => (renderer.h("div", null, str)))), renderer.h("slot", { key: 'a377bb437eb590b3f77d10f105b2fa09e0d21cbd' })));
|
732
732
|
}
|
733
733
|
static get watchers() { return {
|
734
734
|
"itemSelector": ["handleItemSelectorChange"],
|
@@ -0,0 +1,101 @@
|
|
1
|
+
/*!
|
2
|
+
* Custom elements for Nanopore-Digital Web applications
|
3
|
+
*/
|
4
|
+
'use strict';
|
5
|
+
|
6
|
+
var index = require('./index-DGttnXif.js');
|
7
|
+
var renderer = require('./renderer-B9M1kXq8.js');
|
8
|
+
|
9
|
+
const stepAccordionCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:block}.nano-details{--padding:0;--btn-bg-color--hover:transparent;--btn-bg-color--active:transparent;border:none;margin-block-end:var(--nano-spacing-sm)}.nano-details::part(base){display:grid;grid-template-rows:auto auto;grid-template-columns:auto 1fr;gap:var(--nano-spacing-sm) 1.625rem}.nano-details.step--grid-working::part(base)::before{content:\"\";display:block;grid-column:1;grid-row:2;inline-size:1rem;min-block-size:1rem;border-inline-end:2px solid var(--nano-color-neutral-300)}.nano-details.step--grid-working::part(base)::after{content:\"\";grid-column:1;grid-row:2;inline-size:0.4rem;block-size:0.4rem;place-self:end end;translate:-50% 0;inset-inline-start:calc(50% - 2.5px);position:relative;border-inline-end:2px solid var(--nano-color-neutral-300);border-block-end:2px solid var(--nano-color-neutral-300);rotate:45deg}.nano-details:last-of-type::part(base)::before{min-block-size:0}.nano-details:last-of-type::part(base)::after{display:none}.nano-details::part(header){grid-column:1/-1;grid-row:1;display:inline-flex;gap:var(--nano-spacing-sm)}.nano-details::part(body){grid-column:2;grid-row:2}.nano-details::part(content-wrapper){padding:1px}.nano-details.step--grid-not-working::part(header){padding-block-end:var(--nano-spacing-sm)}.nano-details.step--grid-not-working::part(body){padding:0 0 0 2.5625rem}.step .step-header{display:inline-flex;gap:var(--nano-spacing-sm);align-items:center}.step .step-icon{display:inline-flex;align-items:center;justify-content:center;inline-size:2rem;block-size:2rem;border-radius:var(--nano-border-radius-circle);background-color:transparent;color:var(--nano-color-neutral-1400);border:1px solid var(--nano-color-neutral-300)}.step.step--complete .step-icon{background-color:var(--nano-color-success-1000);color:var(--nano-color-base-0);border:none}.step[open] .step-icon{background-color:var(--nano-color-primary-1000);color:var(--nano-color-base-0);border:none}.step .step-change{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);text-decoration:underline;color:var(--nano-color-primary-1200)}";
|
10
|
+
|
11
|
+
const NanoStepAccordion = class {
|
12
|
+
constructor(hostRef) {
|
13
|
+
index.registerInstance(this, hostRef);
|
14
|
+
this.nanoStepActive = index.createEvent(this, "nanoStepActive", 7);
|
15
|
+
}
|
16
|
+
get host() { return index.getElement(this); }
|
17
|
+
nanoDetails;
|
18
|
+
gridWorking = true;
|
19
|
+
/** The currently active step, zero-based index */
|
20
|
+
activeStep = 0;
|
21
|
+
handleActiveStepChange(newValue, oldValue) {
|
22
|
+
if (!this.steps[newValue]?.enabled)
|
23
|
+
this.activeStep = oldValue;
|
24
|
+
else {
|
25
|
+
const event = this.nanoStepActive.emit({
|
26
|
+
index: newValue,
|
27
|
+
step: this.steps[newValue],
|
28
|
+
});
|
29
|
+
if (event.defaultPrevented) {
|
30
|
+
this.activeStep = oldValue;
|
31
|
+
}
|
32
|
+
}
|
33
|
+
}
|
34
|
+
_steps = [];
|
35
|
+
stepProxyHandler = {
|
36
|
+
set: (target, prop, value) => {
|
37
|
+
target[prop] = value;
|
38
|
+
index.forceUpdate(this.host);
|
39
|
+
return true;
|
40
|
+
},
|
41
|
+
};
|
42
|
+
/** An array of steps, each with a title, completion status, and enabled state */
|
43
|
+
get steps() {
|
44
|
+
return this._steps;
|
45
|
+
}
|
46
|
+
set steps(value) {
|
47
|
+
this._steps = [];
|
48
|
+
// improved devX - use a proxy to re-render when step properties change
|
49
|
+
value.forEach((step) => {
|
50
|
+
const proxyStep = new Proxy(step, this.stepProxyHandler);
|
51
|
+
this._steps.push(proxyStep);
|
52
|
+
});
|
53
|
+
}
|
54
|
+
/** Emitted when the active step changes. Prevent default to cancel the change */
|
55
|
+
nanoStepActive;
|
56
|
+
handleToggle(event) {
|
57
|
+
if (event.detail.index === this.activeStep)
|
58
|
+
return;
|
59
|
+
this.activeStep = event.detail.index;
|
60
|
+
}
|
61
|
+
// A dirty great hack for Firefox - it doesn't support grid layout in `<details>`
|
62
|
+
// so we use this to apply different styles based on whether grid is working or not
|
63
|
+
isDetailsGridWorking(detailsEl) {
|
64
|
+
// Create a test element with explicit grid placement
|
65
|
+
const testEl = document.createElement('div');
|
66
|
+
testEl.style.gridColumn = '2';
|
67
|
+
testEl.style.height = '1px';
|
68
|
+
testEl.style.width = '1px';
|
69
|
+
testEl.style.visibility = 'hidden';
|
70
|
+
detailsEl.appendChild(testEl);
|
71
|
+
const parentX = detailsEl.getBoundingClientRect().x;
|
72
|
+
const testX = testEl.getBoundingClientRect().x;
|
73
|
+
detailsEl.removeChild(testEl);
|
74
|
+
// If testEl moved horizontally, grid is in effect
|
75
|
+
return Math.abs(testX - parentX) > 1;
|
76
|
+
}
|
77
|
+
componentDidLoad() {
|
78
|
+
if (!this.nanoDetails)
|
79
|
+
return;
|
80
|
+
const detailsEl = this.nanoDetails.shadowRoot.querySelector('details');
|
81
|
+
if (detailsEl) {
|
82
|
+
this.gridWorking = this.isDetailsGridWorking(detailsEl);
|
83
|
+
}
|
84
|
+
}
|
85
|
+
render() {
|
86
|
+
return (renderer.h("nano-accordion", { key: 'd92d8997c0486e26c132793db92b12e04d46a384', alwaysOpen: true, onNanoToggle: (event) => this.handleToggle(event) }, this.steps.map((step, index$1) => (renderer.h("nano-details", { open: index$1 === this.activeStep, disabled: !step.enabled, class: {
|
87
|
+
step: true,
|
88
|
+
'step--active': index$1 === this.activeStep,
|
89
|
+
'step--complete': step.complete,
|
90
|
+
'step--grid-working': this.gridWorking,
|
91
|
+
'step--grid-not-working': !this.gridWorking,
|
92
|
+
'step--disabled': !step.enabled,
|
93
|
+
}, ref: (el) => (this.nanoDetails = el) }, renderer.h("span", { class: "step-icon", slot: "icon-start" }, index$1 + 1), renderer.h("div", { class: "step-header", slot: "label" }, renderer.h("span", { class: `step-title ${step.complete ? 'complete' : ''}` }, step.title), step.complete && (renderer.h(index.Fragment, null, renderer.h("span", null, " - "), renderer.h("span", { class: "step-change" }, "Change")))), renderer.h("span", { slot: "icon-end" }), renderer.h("div", { class: "step-content" }, renderer.h("slot", { name: `step-${index$1}` })))))));
|
94
|
+
}
|
95
|
+
static get watchers() { return {
|
96
|
+
"activeStep": ["handleActiveStepChange"]
|
97
|
+
}; }
|
98
|
+
};
|
99
|
+
NanoStepAccordion.style = stepAccordionCss;
|
100
|
+
|
101
|
+
exports.nano_step_accordion = NanoStepAccordion;
|
@@ -0,0 +1,133 @@
|
|
1
|
+
/*!
|
2
|
+
* Custom elements for Nanopore-Digital Web applications
|
3
|
+
*/
|
4
|
+
'use strict';
|
5
|
+
|
6
|
+
var index = require('./index-DGttnXif.js');
|
7
|
+
var renderer = require('./renderer-B9M1kXq8.js');
|
8
|
+
var constructibleStyle = require('./constructible-style-BsHBb9au.js');
|
9
|
+
var style = require('./style-Du-L-qMa.js');
|
10
|
+
|
11
|
+
const stepBreadcrumbCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:block;--background:var(--nano-color-base-0)}.step-wrapper{container-type:inline-size}.step-list.desktop{display:flex;flex-direction:row;align-items:center;justify-content:space-between;list-style:none;padding:0;margin:0;position:relative;z-index:1}.step-list.desktop::before{content:\"\";display:block;flex-grow:1;block-size:1px;background-color:var(--nano-color-neutral-300);position:absolute;inset-block-start:50%;z-index:-1;inset-inline-start:0;inline-size:100%}.step-item-wrapper{flex:0 1 auto;display:inline-flex;align-items:center;cursor:pointer}.step-item-wrapper:last-of-type{flex:0 1 auto}.step-item-wrapper:last-of-type .step-item{padding-inline-end:0}.step-item-wrapper:first-of-type::before{display:none}.step-item-wrapper:first-of-type .step-item{padding-inline-start:0}.step-item-wrapper::before{content:\"\";grid-column:2;grid-row:1;inline-size:0.4rem;block-size:0.4rem;place-self:center end;inset-block-start:0.5px;position:relative;border-inline-end:1px solid var(--nano-color-neutral-300);border-block-end:1px solid var(--nano-color-neutral-300);rotate:-45deg}:dir(rtl) .step-item-wrapper::after{rotate:45deg}.step-item{all:unset;display:inline-flex;align-items:center;gap:var(--nano-spacing-sm);background-color:var(--background);padding:0 var(--nano-spacing-sm);position:relative}.step-item:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset);z-index:1}.step-item.step-item--disabled{cursor:not-allowed}.step-item.step-item--disabled>*{opacity:0.5}.step-item-icon{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);display:inline-flex;align-items:center;justify-content:center;inline-size:1.5rem;block-size:1.5rem;border-radius:var(--nano-border-radius-circle);background-color:transparent;color:var(--nano-color-neutral-1400);border:1px solid var(--nano-color-neutral-300)}.step-item--complete .step-item-icon{background-color:var(--nano-color-success-1000);color:var(--nano-color-base-0);border:none}.step-item--active .step-item-icon{background-color:var(--nano-color-primary-1000);color:var(--nano-color-base-0);border:none}.step-dropdown{inline-size:100%;min-inline-size:300px}.step-trigger{all:unset;display:inline-flex;gap:var(--nano-spacing-md);align-items:center;inline-size:100%;cursor:pointer}.step-trigger-text{display:flex;flex-direction:column}.step-trigger-now{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-xl);line-height:var(--nano-line-height-denser);text-wrap:balance;color:var(--nano-color-neutral-1400)}.step-trigger-next{font-size:var(--nano-font-size-2xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);color:var(--nano-color-neutral-1000)}.step-trigger-icon{margin-inline-start:auto;color:var(--nano-color-primary-1000);transition:var(--nano-transition-x-fast) rotate}[open] .step-trigger-icon{rotate:180deg}.step-progress-circle{--size:64px;--thickness:4px;inline-size:var(--size);min-inline-size:var(--size);aspect-ratio:1/1;border-radius:50%;display:grid;place-items:center;position:relative}.step-progress-circle::before{content:\"\";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--nano-color-success-1000) calc(var(--value) / var(--max) * 360deg), var(--nano-color-neutral-100) 0);-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), black 90%);mask:radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), black 90%)}.step-progress-title{font-size:var(--nano-font-size-sm);line-height:var(--nano-line-height-normal);font-weight:var(--nano-font-weight-bold);white-space:nowrap;color:var(--nano-color-neutral-1000)}.step-progress-title strong{color:var(--nano-color-neutral-1400)}";
|
12
|
+
|
13
|
+
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
14
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
15
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
|
16
|
+
r = Reflect.decorate(decorators, target, key, desc);
|
17
|
+
else
|
18
|
+
for (var i = decorators.length - 1; i >= 0; i--)
|
19
|
+
if (d = decorators[i])
|
20
|
+
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
21
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
22
|
+
};
|
23
|
+
var __metadata = (undefined && undefined.__metadata) || function (k, v) {
|
24
|
+
if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
|
25
|
+
return Reflect.metadata(k, v);
|
26
|
+
};
|
27
|
+
const NanoStepBreadcrumb = class {
|
28
|
+
constructor(hostRef) {
|
29
|
+
index.registerInstance(this, hostRef);
|
30
|
+
this.nanoStepActive = index.createEvent(this, "nanoStepActive", 7);
|
31
|
+
}
|
32
|
+
get host() { return index.getElement(this); }
|
33
|
+
calculatedWidth;
|
34
|
+
cacheKey;
|
35
|
+
/** The currently active step, zero-based index */
|
36
|
+
activeStep = 0;
|
37
|
+
handleActiveStepChange(newValue, oldValue) {
|
38
|
+
if (!this.steps[newValue]?.enabled)
|
39
|
+
this.activeStep = oldValue;
|
40
|
+
else {
|
41
|
+
const event = this.nanoStepActive.emit({
|
42
|
+
index: newValue,
|
43
|
+
step: this.steps[newValue],
|
44
|
+
});
|
45
|
+
if (event.defaultPrevented) {
|
46
|
+
this.activeStep = oldValue;
|
47
|
+
}
|
48
|
+
}
|
49
|
+
}
|
50
|
+
/** Emitted when the active step changes. Prevent default to cancel the change */
|
51
|
+
nanoStepActive;
|
52
|
+
_steps = [];
|
53
|
+
stepProxyHandler = {
|
54
|
+
set: (target, prop, value) => {
|
55
|
+
target[prop] = value;
|
56
|
+
index.forceUpdate(this.host);
|
57
|
+
return true;
|
58
|
+
},
|
59
|
+
};
|
60
|
+
/** An array of steps, each with a title, completion status, and enabled state */
|
61
|
+
get steps() {
|
62
|
+
return this._steps;
|
63
|
+
}
|
64
|
+
set steps(value) {
|
65
|
+
this._steps = [];
|
66
|
+
// improved devX - use a proxy to re-render when step properties change
|
67
|
+
value.forEach((step) => {
|
68
|
+
const proxyStep = new Proxy(step, this.stepProxyHandler);
|
69
|
+
this._steps.push(proxyStep);
|
70
|
+
});
|
71
|
+
}
|
72
|
+
handleStepsChange() {
|
73
|
+
const numberOfSteps = this._steps.length;
|
74
|
+
const charLength = this._steps.reduce((acc, step) => acc + step.title.length, 0);
|
75
|
+
this.cacheKey = 'step-breadcrumb-' + numberOfSteps + charLength;
|
76
|
+
// text characters + icons (3 x 1.5rem) + arrows (2 x 1.875rem) + gaps (3 * 20px)
|
77
|
+
this.calculatedWidth = `calc(${charLength}ch + ${numberOfSteps * 1.5}rem + ${(numberOfSteps - 1) * 1.875}rem + ${numberOfSteps * 10}px)`;
|
78
|
+
}
|
79
|
+
styles = () => {
|
80
|
+
const css = /* css */ `@container (width > ${this.calculatedWidth}) {
|
81
|
+
.step-list.mobile.${this.cacheKey} { display: none; }
|
82
|
+
.step-list.desktop.${this.cacheKey} { display: flex; }
|
83
|
+
}
|
84
|
+
@container (width <= ${this.calculatedWidth}) {
|
85
|
+
.step-list.mobile.${this.cacheKey} { display: block; }
|
86
|
+
.step-list.desktop.${this.cacheKey} { display: none; }
|
87
|
+
}`;
|
88
|
+
return css;
|
89
|
+
};
|
90
|
+
componentWillLoad() {
|
91
|
+
this.handleStepsChange();
|
92
|
+
style.addGlobalStylesheetToShadow(this.host.shadowRoot);
|
93
|
+
}
|
94
|
+
ControlTag = ({ step, index, }) => {
|
95
|
+
const Tag = step.enabled ? (step.href ? 'A' : 'BUTTON') : 'SPAN';
|
96
|
+
return (renderer.h(Tag, { href: step.href || undefined, class: {
|
97
|
+
'step-item': true,
|
98
|
+
'step-item--active': index === this.activeStep,
|
99
|
+
'step-item--complete': step.complete,
|
100
|
+
'step-item--disabled': !step.enabled,
|
101
|
+
}, onClick: () => {
|
102
|
+
if (step.enabled) {
|
103
|
+
this.activeStep = index;
|
104
|
+
}
|
105
|
+
} }, renderer.h("span", { class: "step-item-icon", slot: "icon-start" }, index + 1), renderer.h("span", { class: "step-item-title" }, step.title)));
|
106
|
+
};
|
107
|
+
render() {
|
108
|
+
const Wrapper = this.steps.filter((step) => step.href).length > 0 ? 'nav' : 'div';
|
109
|
+
return (renderer.h(index.Host, { key: 'c4d0e767abe4ee65f8e70534844e7ff254455af0' }, renderer.h(Wrapper, { key: '6df94c5a9df7ae957b5ff243ecbe78e7c57233b3', class: "step-wrapper" }, renderer.h("ul", { key: 'ba1838191a0b888b630bfaba5125ae868f8aab38', class: `step-list desktop ${this.cacheKey}` }, this.steps.map((step, index) => (renderer.h("li", { class: "step-item-wrapper", key: index }, renderer.h(this.ControlTag, { step: step, index: index }))))), renderer.h("div", { key: '64ae2c870494d376f4bb6484e97a5217dc4be311', class: `step-list mobile ${this.cacheKey}` }, renderer.h("nano-dropdown", { key: '08d3dc468d594177b922ae91fb1ff02ed79d282c', dialogTitle: "Steps", class: "step-dropdown" }, renderer.h("button", { key: '88ef0602628d800a3517da3c06e2eea1dad5a7dd', slot: "trigger", class: "step-trigger" }, renderer.h("div", { key: '9d60be986e00fdd6814a910641cf94ef97fb2eed', class: "step-progress-circle", role: "progressbar", "aria-valuenow": "2", "aria-valuemin": "0", "aria-valuemax": "5", style: {
|
110
|
+
'--value': '' + (this.activeStep + 1),
|
111
|
+
'--max': '' + this.steps.length,
|
112
|
+
} }, renderer.h("span", { key: '9e6eb88c9fc12f4228f55fe04cb2e1ce9a92e1f2', class: "step-progress-text" }, renderer.h("strong", { key: '5e999ae958a2c43f5d8998e9083e91b11ea9041d' }, this.activeStep + 1), " of", ' ', this.steps.length)), renderer.h("div", { key: 'ccb66003ef35b256ae8d0d34c8cad7535680d05b', class: "step-trigger-text" }, renderer.h("div", { key: '87f8a73802c33c289860b0eb530edae379fa5ebf', class: "step-trigger-now" }, this.steps[this.activeStep | 0]?.title || 'Select a step'), renderer.h("div", { key: '9b00c5ae99376028ec077e782f430b0346580119', class: "step-trigger-next" }, this.steps[this.activeStep + 1]?.title || 'Next step')), renderer.h("nano-icon", { key: '5073cf36a3a15599df7fa3816a62e72af257ab99', class: "step-trigger-icon", name: "light/chevron-down" })), renderer.h("nano-menu", { key: '18f15bb2439661286c019a6f20272db72a6ad1b1' }, this.steps.map((step, index) => (renderer.h("nano-nav-item", { class: {
|
113
|
+
'step-item-mobile': true,
|
114
|
+
'step-item-mobile step-item--active': index === this.activeStep,
|
115
|
+
'step-item-mobile step-item--complete': step.complete,
|
116
|
+
}, disabled: !step.enabled, key: index, onClick: () => {
|
117
|
+
if (step.enabled) {
|
118
|
+
this.activeStep = index;
|
119
|
+
}
|
120
|
+
} }, renderer.h("span", { class: "step-item-icon", slot: "icon-start" }, index + 1), renderer.h("span", { class: "step-item-title" }, step.title))))))))));
|
121
|
+
}
|
122
|
+
static get watchers() { return {
|
123
|
+
"activeStep": ["handleActiveStepChange"],
|
124
|
+
"steps": ["handleStepsChange"]
|
125
|
+
}; }
|
126
|
+
};
|
127
|
+
__decorate([
|
128
|
+
constructibleStyle.ConstructibleStyle({ cacheKeyProperty: 'calculatedWidth' }),
|
129
|
+
__metadata("design:type", Object)
|
130
|
+
], NanoStepBreadcrumb.prototype, "styles", void 0);
|
131
|
+
NanoStepBreadcrumb.style = stepBreadcrumbCss;
|
132
|
+
|
133
|
+
exports.nano_step_breadcrumb = NanoStepBreadcrumb;
|
@@ -607,12 +607,12 @@ const Sticker = class {
|
|
607
607
|
this.hasBootstrapped = false;
|
608
608
|
}
|
609
609
|
render() {
|
610
|
-
return (renderer.h(index.Host, { key: '
|
610
|
+
return (renderer.h(index.Host, { key: 'd0e4e1b0cc7c63db0389ee67b999c30347f7e16b', 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" }, renderer.h("div", { key: '6f9852e2cfeb2e203e5dde6f71e7a042a996dd86', class: {
|
611
611
|
sticker: true,
|
612
612
|
sticky: this.isRootSticker && this.isSticky,
|
613
613
|
stuck: this.isStuck && this.isRootSticker && this.isSticky,
|
614
614
|
hide: this.isRootSticker && this.hide && this.isStuck,
|
615
|
-
}, ref: (div) => (this.sticker = div) }, renderer.h("div", { key: '
|
615
|
+
}, ref: (div) => (this.sticker = div) }, renderer.h("div", { key: '1e54d0ebe57b52c95a64acbb6d46f8c9d9778dd3', class: "sticker-content", ref: (div) => (this.content = div) }, renderer.h("slot", { key: 'e8359edd6c73c5006ff1c90a91ecafad07e5c915' })))));
|
616
616
|
}
|
617
617
|
static get watchers() { return {
|
618
618
|
"trigger": ["updateTriggerOffset"],
|
@@ -24,10 +24,10 @@ const NanoTabContent = class {
|
|
24
24
|
requestAnimationFrame(() => (this.ready = true));
|
25
25
|
}
|
26
26
|
render() {
|
27
|
-
return (renderer.h(index.Host, { key: '
|
27
|
+
return (renderer.h(index.Host, { key: '7afee777be86f5847c5ac4c8de6babae3199b01d', 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
|
-
} }, renderer.h("div", { key: '
|
30
|
+
} }, renderer.h("div", { key: 'c316e2c15458eeb9fb6162d81060b81a1132e795', part: "base", class: "nano-tab-content" }, renderer.h("slot", { key: '532eedd714e732749cfe9b303b1f4c633e89491c' }))));
|
31
31
|
}
|
32
32
|
};
|
33
33
|
NanoTabContent.style = tabContentCss;
|
@@ -46,12 +46,12 @@ const NanoTab = class {
|
|
46
46
|
}
|
47
47
|
};
|
48
48
|
render() {
|
49
|
-
return (renderer.h(index.Host, { key: '
|
49
|
+
return (renderer.h(index.Host, { key: '67fe232bda16bf41bf1268a1891cfeb6483ebd02', id: this.host.id || this.tabId, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: "nano-tab" }, renderer.h("div", { key: '6f07d7d5a89071e094fe3deb19e88ec66a524f3d', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
|
50
50
|
tab: true,
|
51
51
|
'tab--active': this.active,
|
52
52
|
'tab--disabled': this.disabled,
|
53
53
|
'tab--closable': this.closable,
|
54
|
-
} }, renderer.h("slot", { key: '
|
54
|
+
} }, renderer.h("slot", { key: '4c8dce458c8ae3ed526d4aed7332650be891510c', name: "start" }), renderer.h("div", { key: 'e71cced02347ffaa432b5711af54666ac0a6cfd6', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "tab__label" }, renderer.h("slot", { key: '382f7f77b009e3a5cf3af3d3b94b02e639bf2934' })), renderer.h("slot", { key: '82a2c81ab573d3c78b7d913f4b7ab146e7c6d5b2', name: "end" }), this.closable && !this.disabled && (renderer.h("nano-icon-button", { key: '14e812f9acd5e081a1eba5014f6d4fe4b79371e2', label: "Close this tab", iconName: "light/xmark", class: "tab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-button" })))));
|
55
55
|
}
|
56
56
|
};
|
57
57
|
NanoTab.style = tabCss;
|
@@ -224,10 +224,10 @@ const NanoTable = class {
|
|
224
224
|
this.cleanUpObservers();
|
225
225
|
}
|
226
226
|
render() {
|
227
|
-
return (renderer.h(index.Host, { key: '
|
227
|
+
return (renderer.h(index.Host, { key: '3c45a2880bd20a771bcc682355452312340db56d', class: {
|
228
228
|
'nano-table': true,
|
229
229
|
'nano-table--props-ready': this.propsReady,
|
230
|
-
} }, this.scrollable && (renderer.h("nano-masked-overflow", { key: '
|
230
|
+
} }, this.scrollable && (renderer.h("nano-masked-overflow", { key: '6b29ca4c8c64deae80def0d3958dc25c4d6cd1c0', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, renderer.h("div", { key: '83dce90d6e5425b0fd2a2443d0d90b7acfc9c141', class: "nano-table__overflow" }))), renderer.h("slot", { key: 'cff62841c17cf20c2ff5872944dbd38bbe438369' })));
|
231
231
|
}
|
232
232
|
static get watchers() { return {
|
233
233
|
"compact": ["handleCompactChange"],
|
@@ -59,6 +59,8 @@
|
|
59
59
|
"components/sortable/sortable.js",
|
60
60
|
"components/spinner/spinner.js",
|
61
61
|
"components/split-pane/split-pane.js",
|
62
|
+
"components/step-accordion/step-accordion.js",
|
63
|
+
"components/step-breadcrumb/step-breadcrumb.js",
|
62
64
|
"components/sticker/sticker.js",
|
63
65
|
"components/table/table.js",
|
64
66
|
"components/tabs/tab-content.js",
|