@nanoporetech-digital/components 8.0.0-alpha.2 → 8.0.0-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{fade-C3xL9ihU.js → fade-CqKYrZYq.js} +1 -1
- package/dist/cjs/{fullscreen-pHBD1-3e.js → fullscreen-D-fHJ_IJ.js} +1 -1
- package/dist/cjs/index-IR1lkhwT.js +4 -4
- package/dist/cjs/{lazyload-D2pj9J7r.js → lazyload-DK1ITMfR.js} +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/nano-avatar_5.cjs.entry.js +7 -7
- 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-cta.cjs.entry.js +2 -1
- package/dist/cjs/{nano-data-table-BkyqQiTG.js → nano-data-table-C_KLyFMO.js} +6 -3
- package/dist/cjs/nano-data-table.cjs.entry.js +1 -1
- package/dist/cjs/nano-datalist_3.cjs.entry.js +8 -8
- package/dist/cjs/nano-file-upload.cjs.entry.js +48 -29
- package/dist/cjs/nano-footer.cjs.entry.js +3 -3
- package/dist/cjs/nano-global-nav.cjs.entry.js +1 -1
- package/dist/cjs/nano-icon_3.cjs.entry.js +2 -2
- package/dist/cjs/nano-progress-bar.cjs.entry.js +3 -17
- package/dist/cjs/nano-rating.cjs.entry.js +4 -4
- package/dist/cjs/nano-resize-observe_2.cjs.entry.js +3 -3
- package/dist/cjs/nano-slide.cjs.entry.js +1 -1
- package/dist/cjs/{nano-slides-B3-XISfn.js → nano-slides-BhpvytBB.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-DHz-mQDL.js → page-dots-DeSuT5bE.js} +1 -1
- package/dist/cjs/{style-BccHkuhC.js → style-Bf3iH5GX.js} +16 -2
- package/dist/cjs/{table.worker-NnDnfSFs.js → table.worker-C5ofbi7M.js} +1 -1
- package/dist/collection/components/cta/cta.js +2 -1
- package/dist/collection/components/data-table/table.js +5 -2
- package/dist/collection/components/datalist/datalist.js +6 -6
- package/dist/collection/components/file-upload/file-upload.css +140 -215
- package/dist/collection/components/file-upload/file-upload.js +66 -44
- package/dist/collection/components/footer/footer.css +2 -3
- package/dist/collection/components/footer/footer.js +4 -3
- package/dist/collection/components/progress-bar/progress-bar.css +78 -33
- package/dist/collection/components/progress-bar/progress-bar.js +18 -61
- package/dist/collection/components/rating/rating.js +4 -4
- package/dist/collection/components/resize-observe/resize-observe.js +1 -1
- package/dist/collection/components/select/select.js +7 -7
- package/dist/collection/components/skeleton/skeleton.js +2 -2
- 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/collection/utils/style.js +16 -2
- package/dist/components/cta.js +2 -1
- package/dist/components/datalist.js +6 -6
- package/dist/components/nano-data-table.js +5 -2
- package/dist/components/nano-file-upload.js +58 -33
- package/dist/components/nano-footer.js +5 -4
- 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-tab-content.js +2 -2
- package/dist/components/nano-tab.js +2 -2
- package/dist/components/nano-table.js +2 -2
- package/dist/components/progress-bar.js +7 -23
- package/dist/components/resize-observe.js +1 -1
- package/dist/components/select.js +7 -7
- package/dist/components/skeleton.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/style.js +16 -2
- package/dist/components/tag.js +2 -2
- package/dist/components/tooltip.js +2 -2
- package/dist/esm/{fade-BTgTGh6q.js → fade-CnaZvOTY.js} +1 -1
- package/dist/esm/{fullscreen-BTpZyXkc.js → fullscreen-BIFliVxG.js} +1 -1
- package/dist/esm/index-DXvE-U_j.js +4 -4
- package/dist/esm/{lazyload-BYoZ43fz.js → lazyload-D_Ju_KaC.js} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/nano-avatar_5.entry.js +7 -7
- 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-cta.entry.js +2 -1
- package/dist/esm/{nano-data-table-DDBCyBmN.js → nano-data-table-CJbVKIuu.js} +6 -3
- package/dist/esm/nano-data-table.entry.js +1 -1
- package/dist/esm/nano-datalist_3.entry.js +8 -8
- package/dist/esm/nano-file-upload.entry.js +48 -29
- package/dist/esm/nano-footer.entry.js +4 -4
- package/dist/esm/nano-global-nav.entry.js +1 -1
- package/dist/esm/nano-icon_3.entry.js +2 -2
- package/dist/esm/nano-progress-bar.entry.js +4 -18
- package/dist/esm/nano-rating.entry.js +4 -4
- package/dist/esm/nano-resize-observe_2.entry.js +3 -3
- package/dist/esm/nano-slide.entry.js +1 -1
- package/dist/esm/{nano-slides-CvZxKg4X.js → nano-slides-B9KjZVqC.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-_tkpExQM.js → page-dots-BmS6HUrx.js} +1 -1
- package/dist/esm/{style-BrRDhFfF.js → style-xLaX004n.js} +16 -2
- package/dist/esm/{table.worker-webIEBZt.js → table.worker-CsTdjWrS.js} +1 -1
- package/dist/nano-components/{fade-BTgTGh6q.js → fade-CnaZvOTY.js} +1 -1
- package/dist/nano-components/{fullscreen-BTpZyXkc.js → fullscreen-BIFliVxG.js} +1 -1
- package/dist/nano-components/{lazyload-BYoZ43fz.js → lazyload-D_Ju_KaC.js} +1 -1
- package/dist/nano-components/nano-avatar_5.entry.js +1 -1
- package/dist/nano-components/nano-breadcrumb.entry.js +1 -1
- package/dist/nano-components/nano-collapsible-comparison.entry.js +1 -1
- package/dist/nano-components/nano-components.css +23 -19
- package/dist/nano-components/nano-components.esm.js +1 -1
- package/dist/nano-components/nano-cta.entry.js +1 -1
- package/dist/nano-components/{nano-data-table-DDBCyBmN.js → nano-data-table-CJbVKIuu.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-file-upload.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-icon_3.entry.js +1 -1
- package/dist/nano-components/nano-progress-bar.entry.js +1 -1
- package/dist/nano-components/nano-rating.entry.js +1 -1
- package/dist/nano-components/nano-resize-observe_2.entry.js +1 -1
- package/dist/nano-components/nano-slide.entry.js +1 -1
- package/dist/nano-components/{nano-slides-CvZxKg4X.js → nano-slides-B9KjZVqC.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-_tkpExQM.js → page-dots-BmS6HUrx.js} +1 -1
- package/dist/nano-components/style-xLaX004n.js +4 -0
- package/dist/nano-components/{table.worker-webIEBZt.js → table.worker-CsTdjWrS.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/dark.css +1 -1
- package/dist/style/dark.css.map +1 -1
- package/dist/style/light.css +1 -1
- package/dist/style/light.css.map +1 -1
- package/dist/style/nano.css +1 -1
- package/dist/style/nano.css.map +1 -1
- package/dist/types/components/file-upload/file-upload.d.ts +14 -9
- package/dist/types/components/progress-bar/progress-bar.d.ts +6 -13
- package/dist/types/components.d.ts +43 -53
- package/docs-json.json +111 -172
- package/docs-vscode.json +16 -9
- package/hydrate/index.js +132 -110
- package/hydrate/index.mjs +132 -110
- package/package.json +3 -3
- package/dist/collection/components/file-upload/file-upload-list.js +0 -3
- package/dist/nano-components/style-BrRDhFfF.js +0 -4
- package/dist/types/components/file-upload/file-upload-list.d.ts +0 -0
@@ -701,30 +701,30 @@ export class Select {
|
|
701
701
|
disabled,
|
702
702
|
clearControl: this.clearable,
|
703
703
|
}))(this);
|
704
|
-
return (h(Host, { key: '
|
704
|
+
return (h(Host, { key: 'b85a8a4b4566ce33e0e7bae347c765037d1ec34b', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
|
705
705
|
'has-value': !!this.value.length || !!this.inputSearchVal.length,
|
706
706
|
'has-focus': this.hasFocus,
|
707
707
|
'is-invalid': this._invalid === true,
|
708
708
|
'is-valid': this._invalid === false,
|
709
709
|
'nano-select': true,
|
710
|
-
} }, h(FormControlWrap, { key: '
|
710
|
+
} }, h(FormControlWrap, { key: '42335a9fda2b4e2560f33e5d4c40a58403e482d2', ...wrapOptions, class: {
|
711
711
|
'has-error': !!this.errorMessage &&
|
712
712
|
this.showInlineError &&
|
713
713
|
this._invalid === true,
|
714
714
|
'has-helper': this.hasHelperSlot,
|
715
715
|
'is-open': this.hasOpened,
|
716
716
|
masked: this.mask,
|
717
|
-
} }, h(FormControl, { key: '
|
718
|
-
this.mask && (h("div", { key: '
|
719
|
-
h("input", { key: '
|
720
|
-
])), !this.readonly && !this.disabled && (h("nano-datalist", { key: '
|
717
|
+
} }, h(FormControl, { key: '7571a30e6a3f0b231d9e0b7a6e2f662fe3bd8183', ...controlOptions, ref: (el) => (this.selectWrap = el), onClearText: this.clearSelectValue, control: this.el, endValueSlot: h("slot", { name: "down-arrow" }, h("nano-icon", { class: "select__down-arrow", name: "light/chevron-down" })), showInlineError: this.showInlineError }, this.multiple && (h("div", { key: 'e92b079944fb81314da40799ba8f11f5644d5fa7', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
|
718
|
+
this.mask && (h("div", { key: '488c94ddb9e49c9e3f5a099a77cb0e879a02e1e2', class: "select__mask" }, this.getLabel(this.value))),
|
719
|
+
h("input", { key: '3fc66f07b7c9220e2c9d3eb02b1b268f52921a46', ref: (input) => (this.inputCtrl = input), id: this.selectId, class: "select__native-input", "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, placeholder: this.placeholder, readOnly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
|
720
|
+
])), !this.readonly && !this.disabled && (h("nano-datalist", { key: '1737bc4d8e6267659ebbd981cd043e0a3f0e20e3', ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selectMulti' : 'select', options: this._options.length ? this._options : undefined, onNanoDeselect: (e) => {
|
721
721
|
e.preventDefault();
|
722
722
|
this.removeValue(e.detail.value);
|
723
723
|
}, onNanoOptionsUpdated: this.setOptions, onNanoSelect: this.setValue,
|
724
724
|
// @ts-expect-error - this bubbles from the nano-dropdown
|
725
725
|
onNanoShow: () => (this.hasOpened = true), onNanoHide: () => (this.hasOpened = false) }, this.allowCustomValues &&
|
726
726
|
this.multiple &&
|
727
|
-
!!this.inputSearchVal && (h("nano-option", { key: '
|
727
|
+
!!this.inputSearchVal && (h("nano-option", { key: '23a03a568fc87bd041b4c4e702afba215e637423', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: 'edd9ba1b076740baeaa34f62aa27f598bda7114d', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: '80e401156f240faf7fa04fef7915aa982305abd3' }))), h("select", { key: 'ba8bc3b4d7149e249c26f82da6816afa1b25fabf', id: this.selectId + '-hidden', class: "select__native-ctrl", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid }, this.allowCustomValues &&
|
728
728
|
this.valArray.map((val) => {
|
729
729
|
return (h("option", { value: val, selected: true }, val));
|
730
730
|
}), !this.allowCustomValues &&
|
@@ -13,10 +13,10 @@ export class Skeleton {
|
|
13
13
|
/** When `true`, the skeleton will animate. */
|
14
14
|
animated = true;
|
15
15
|
render() {
|
16
|
-
return (h(Host, { key: '
|
16
|
+
return (h(Host, { key: 'f73bd1aaaf1ed443643eb6fee3421071be76b064', class: "nano-skeleton" }, h("div", { key: 'a4023374bcd7855ef2638623b2dbf29ac758f0a6', class: {
|
17
17
|
skeleton: true,
|
18
18
|
animate: this.animated,
|
19
|
-
} }, h("div", { key: '
|
19
|
+
} }, h("div", { key: 'bf89fd85a10834bb798515f46b51a4b26d0f885f', class: "skeleton__indicator" }, "\u00A0"))));
|
20
20
|
}
|
21
21
|
static get is() { return "nano-skeleton"; }
|
22
22
|
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: 'e2de4b21a269c802cf727b7ffd8433d4f959d3fb', class: "nano-slide" }, h("slot", { key: '0d3fd5785d8e617307fd6590e0ffbca33693c410' })));
|
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: '88e0cbecd056181f9b3f8c244d8b7c59dfb94e16', class: "nano-slides" }, h("div", { key: '728f56cad9f2dc011dcc5c1051061102aaf0da63', 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: 'f4d40a6cf600378f311c8d74485802ad37a0840b', 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: 'a2d787ba9f4299216bfd99af5a39d6940c1ddd3a' })), h("div", { key: '2f25d4f413ca885408a0062d57b40c57c813ae32', class: "ui-extras" }, h("slot", { key: '234f553982373a1914455fc0c4b339ac6d147dc2', 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: '2d575a0cd296fe9c691962f7075f2b808f7abe01', class: "nano-sortable" }, h("div", { key: 'c2178832b34f1c069b09eff039940ab52bc22b61', 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: '703feb95010c77a8945dfc34bd57a5acb16b40d1' })));
|
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: '63fe6e79bb79f14d88ce4b74b5d9b442dd66c0f8', class: "nano-spinner" }, h("div", { key: '825e76fc8c27ffdb29cd6fe400f16153a40012c6', class: "spinner", "aria-busy": "true", "aria-live": "polite" }, h("div", { key: '952c81492216e657c3ed5599633be668b00e9663', class: "spinner__loader" }, this.type === 'dna' && (h("div", { key: '662ec66b3dc5032b74384a64a6456149e63b6043', class: "spinner__dna" }, h("div", { key: '8903ba83721f26de70ceec96ac9626d54e84fa1c', class: "spinner__dnatrack spinner__dnatrack--1" }, h("div", { key: 'b7c0413a4835842211525d009ebd27bcb61fdf64', class: "spinner__dnadot spinner__dnadot--1" }), h("div", { key: 'b065ee7924903e8481be2e8c20fe0b3e8a95b8de', class: "spinner__dnadot spinner__dnadot--2" })), h("div", { key: '8af94c34ddbfa949d2592dd3692775d08ac0f178', class: "spinner__dnatrack spinner__dnatrack--2" }, h("div", { key: 'a0fcda6d79d4498fcf884f1065bacabff1962b7a', class: "spinner__dnadot spinner__dnadot--3" }), h("div", { key: '07700762e2f92f3fbb48e8e5fe95924061100303', class: "spinner__dnadot spinner__dnadot--4" })), h("div", { key: 'a9385349047a5e44a1f7911d2e1b33d894d5838a', class: "spinner__dnatrack spinner__dnatrack--3" }, h("div", { key: '0477205976d9e4e4d1c9c4ed9c2a5b5056f4c1e6', class: "spinner__dnadot spinner__dnadot--5" }), h("div", { key: '25e86c6c2274f40ba903bece7b91f7d33ea0d89a', class: "spinner__dnadot spinner__dnadot--6" })), h("div", { key: '5029e8ec7b7369e92e05d136da43febcf7f69555', class: "spinner__dnatrack spinner__dnatrack--4" }, h("div", { key: '95718654b9ad41d07bd9d63a1518d53dc333c252', class: "spinner__dnadot spinner__dnadot--7" }), h("div", { key: '3f1deedd8122a536fad519e9aadaa3d3f3d8550a', class: "spinner__dnadot spinner__dnadot--8" })), h("div", { key: 'eadc04b711c3d3c1ab2b20544270e543d0d8b141', class: "spinner__dnatrack spinner__dnatrack--5" }, h("div", { key: '1055242e36a1ba393045d4852f45033e2c13194c', class: "spinner__dnadot spinner__dnadot--9" }), h("div", { key: '073943e72dd9e94f87da5e35372f3b3cb9c0bd9f', class: "spinner__dnadot spinner__dnadot--10" })))), this.type === 'circle' && h("span", { key: 'f16b19fecaf1bdb72349b26b7a92ceb90e3ce449', class: "spinner__spin" })), this.hasText && (h("div", { class: "spinner__text", key: "spinner-text" }, h("slot", { key: 'a3a2650a1ef9d5c305042c4fa5cc9ea2df0a9226' }))), 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: 'a087de590970eacfe2f2f08e3af044f3925c7156', 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: 'ee02e96ed98fa0564fa99d272a23c891801a9934', 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: '03eb024bd50a757a5a75097e34dd70fc36638fa7', class: "sticker-content", ref: (div) => (this.content = div) }, h("slot", { key: '50cc24e4a2cb1d7cef2a439b99b688579a77e338' })))));
|
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: '84b2998c112a5d929d5dba88961a309ce4d0fff9', 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: 'c6175d1bfd32160743c04b35132e97cc1cc7c873', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: 'f96a85d3d852aa79def9f34b5c666c8d4c747c9f', class: "nano-table__overflow" }))), h("slot", { key: '4d7871702885a4a077e26b529b56c008949fa156' })));
|
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: '69b49712bc8bab3a9bd6857c836265ce897ec2da', 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: '82758de9b18d8ccacd47ebf84151905eb6b88cc0', part: "base", class: "nano-tab-content" }, h("slot", { key: '67156ec26a34bf03503e721b1ec2869e3997e847' }))));
|
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: '0b4d0660a4347b133c859db5fa6dcff84bdd38bf', 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: 'abce836bb90bd210011de38d906293dac6b26235', 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: '8e563821478aa0bd9b6257d5927d52c91d036fec', name: "start" }), h("div", { key: 'e18098d994c6598d17b11a337db295a12f2016d5', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "tab__label" }, h("slot", { key: '9ab71f7ead9b29eee4d37d1070741466babb7e6e' })), h("slot", { key: '381b12cce253bd9bb10ef1c14ddf766ffff4f658', name: "end" }), this.closable && !this.disabled && (h("nano-icon-button", { key: '515bbbe004907a476ae477da49d0a47430f48d78', 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: 'a1a5a458c6bb76ab3c565d33830236a5bbda9408' }),
|
45
|
+
h("nano-icon-button", { key: '23201b4215ff0aefbc34fdaba31b9006499e2716', 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: '4b98bb9ee733405debbece4d5ac0b2395f5d54f3', onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, class: "nano-tooltip" }, h("slot", { key: 'c9f5956a38f9a892ad756a8c20ac316b1d975392', onSlotchange: this.handleSlotChange }), h("div", { key: '31f46bf3e11ba2981883ed2dfdc6cefddace7e77', ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner", popover: "manual" }, h("div", { key: '85854e52a5b4a10a1c12798f3d24b6d1aaefc21f', 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: 'fa8b9006cb18ab66060be9c969a70e49c609bc19', name: "content", onSlotchange: () => this.setLabel() }, this.content), h("div", { key: '298cdad62b389ec2759559a6dc26fc02f4d5ba3f', class: "tooltip-arrow", "data-popper-arrow": true })))));
|
234
234
|
}
|
235
235
|
static get is() { return "nano-tooltip"; }
|
236
236
|
static get encapsulation() { return "shadow"; }
|
@@ -23,9 +23,23 @@ export function addGlobalStylesheetToShadow(shadowRoot) {
|
|
23
23
|
let rule = null;
|
24
24
|
let globalStylesheet = [];
|
25
25
|
for (stylesheet of globalStylesheets) {
|
26
|
-
if (!(stylesheet instanceof CSSStyleSheet))
|
26
|
+
if (!(stylesheet instanceof CSSStyleSheet)) {
|
27
27
|
continue;
|
28
|
-
|
28
|
+
}
|
29
|
+
let cssRules;
|
30
|
+
try {
|
31
|
+
// Attempt to access the cssRules of the stylesheet
|
32
|
+
cssRules = stylesheet?.cssRules;
|
33
|
+
// no cssRules? skip it
|
34
|
+
if (!cssRules)
|
35
|
+
continue;
|
36
|
+
}
|
37
|
+
catch (e) {
|
38
|
+
// some stylesheets may not be accessible due to CORS or other restrictions
|
39
|
+
console.warn('Unable to access stylesheet:', stylesheet, e);
|
40
|
+
continue;
|
41
|
+
}
|
42
|
+
for (rule of cssRules) {
|
29
43
|
// arbitrary piece of text to check for that appears early in the `nano-components` stylesheet
|
30
44
|
// this is a bit fragile but does the job
|
31
45
|
if (rule instanceof CSSLayerBlockRule &&
|
package/dist/components/cta.js
CHANGED
@@ -27,9 +27,10 @@ const NanoCta = /*@__PURE__*/ proxyCustomElement(class NanoCta extends HTMLEleme
|
|
27
27
|
/** Predefined styles when displaying a number of CTAs together */
|
28
28
|
group;
|
29
29
|
componentWillLoad() {
|
30
|
-
if (!this.host.querySelector('button, a')) {
|
30
|
+
if (!this.host.querySelector('button, a, div')) {
|
31
31
|
const button = document.createElement('button');
|
32
32
|
button.classList.add('nano-internal-cta');
|
33
|
+
button.type = 'button';
|
33
34
|
this.host.childNodes.forEach((node) => {
|
34
35
|
button.appendChild(node);
|
35
36
|
});
|
@@ -103,7 +103,7 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
|
|
103
103
|
writeTask(() => {
|
104
104
|
if (this.open) {
|
105
105
|
const { height, top } = this.nanoDropdown.tetherTo.getBoundingClientRect();
|
106
|
-
this.nanoDropdown.style.setProperty('--max-height', window.innerHeight - (height + top + 40)
|
106
|
+
this.nanoDropdown.style.setProperty('--max-height', `max(${window.innerHeight - (height + top + 40)}px, 48vw)`);
|
107
107
|
}
|
108
108
|
this.nanoDropdown.open = this.open;
|
109
109
|
if (this.connectedInput) {
|
@@ -525,18 +525,18 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
|
|
525
525
|
}
|
526
526
|
}
|
527
527
|
render() {
|
528
|
-
return (h(Host, { key: '
|
528
|
+
return (h(Host, { key: 'b9c67e5dfc3c26c4eac219d9bdc9081aa79d7122', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
|
529
529
|
? 'Select options from the list below'
|
530
|
-
: undefined }, h("nano-dropdown", { key: '
|
530
|
+
: undefined }, h("nano-dropdown", { key: '29a0de977f7be1a39c5c869a5ab366bb64711d9e', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
|
531
531
|
dlist__dropdown: true,
|
532
532
|
'dlist--isfiltered': this.isFiltered,
|
533
|
-
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '
|
533
|
+
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '86769c73825853c557ed7a1dfb0f86898ce6504f', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
|
534
534
|
dlist__menu: true,
|
535
535
|
'dlist__menu--open': this.dropwdownOpen,
|
536
|
-
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '
|
536
|
+
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: 'f5ea0623591a368f38ce3c1e41ef431c4a9f5960', name: "list-top" }), h("slot", { key: '98804885ffb99528138867d2747af3acef3f64f7' }), h("slot", { key: '1341dc10f96570c04613153cf939aaf7dc21f0d3', name: "internal-opts" }), h("slot", { key: '84d86a667a69cd571f7b96dc29d1ddd58c3d482c', name: "list-bottom" })), h("nano-menu", { key: '9b09caa70bd106eb9e64c714072c0b88275f34c6', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
|
537
537
|
dlist__menu: true,
|
538
538
|
'dlist__menu--open': this.dropwdownOpen,
|
539
|
-
} }, h("slot", { key: '
|
539
|
+
} }, h("slot", { key: '58187330291198ff00571570e2b6b6bfdc79c905', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '72ea39405f558d10de86a14704ed48e869f01426', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
|
540
540
|
}
|
541
541
|
static get watchers() { return {
|
542
542
|
"open": ["openWatcher"],
|
@@ -1812,10 +1812,13 @@ const NanoDataTable$1 = /*@__PURE__*/ proxyCustomElement(class NanoDataTable ext
|
|
1812
1812
|
return (h$1(Host, { class: "nano-data-table" }, h$1("div", { class: `${CSSNAMESPACE}__top-anchor`, ref: (a) => (this.topAnchorEle = a) }, "\u00A0"), h$1("nano-resize-observe", { onNanoResize: () => {
|
1813
1813
|
if (this.tablePinnedService)
|
1814
1814
|
this.tablePinnedService.onResize();
|
1815
|
-
} }), Wrap(h$1("div", { class: `${CSSNAMESPACE}__wrap` }, h$1("nano-progress-bar", {
|
1815
|
+
} }), Wrap(h$1("div", { class: `${CSSNAMESPACE}__wrap` }, h$1("nano-progress-bar", {
|
1816
|
+
// indeterminate
|
1817
|
+
class: {
|
1816
1818
|
[`${CSSNAMESPACE}__progress-bar`]: true,
|
1817
1819
|
[`${CSSNAMESPACE}__progress-bar--show`]: this._loading,
|
1818
|
-
}
|
1820
|
+
}
|
1821
|
+
}), h$1("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$1("caption", { class: {
|
1819
1822
|
[`${CSSNAMESPACE}__caption`]: true,
|
1820
1823
|
[`${CSSNAMESPACE}__caption--hide`]: !this.showCaption,
|
1821
1824
|
} }, h$1("slot", { name: "caption" }, this.caption)), h$1("thead", null, h$1(TableHeadFootRow, { rowRenderer: this.headRender }, this.store.config.state.columns.map((colModel) => [
|
@@ -3,11 +3,12 @@
|
|
3
3
|
*/
|
4
4
|
import { proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
|
5
5
|
import { h } from './renderer.js';
|
6
|
+
import { d as defineCustomElement$5 } from './cta.js';
|
6
7
|
import { d as defineCustomElement$4 } from './icon.js';
|
7
8
|
import { d as defineCustomElement$3 } from './icon-button.js';
|
8
9
|
import { d as defineCustomElement$2 } from './tooltip.js';
|
9
10
|
|
10
|
-
const fileUploadCss = ".sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-file-upload-h{min-block-size:1rem;display:block;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--label-color:var(--nano-input-label-color, \"currentcolor\");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));--label-color--invalid:var(--nano-input-label-color-invalid, \"currentcolor\");--drop-bg:#f2f7f9;--drop-text:#756f6a;--drop-height:3.5em;--drop-border-tint:var(--nano-color-primary-rgb, 0 116 149);--drop-border-width:2px;--drop-border-radius:5px;--drop-bg--invalid:var(--nano-input-background-color, white);--drop-border--invalid:var(--nano-color-danger-rgb, 239 65 53);--btn-bg:var(--nano-color-primary, #007495);--btn-text:var(--nano-color-primary-contrast, #fff);--btn-icon-size:var(--nano-btn-icon-size, 1.4em);--btn-padding-top:var(--nano-btn-padding-top, 0.5em);--btn-padding-bottom:var(--nano-btn-padding-bottom, 0.5em);--btn-padding-start:var(--nano-btn-padding-start, 1rem);--btn-padding-end:var(--nano-btn-padding-end, 1rem)}[disabled].sc-nano-file-upload-h:not([disabled=false]){opacity:0.7}[disabled].sc-nano-file-upload-h:not([disabled=false]) *.sc-nano-file-upload{pointer-events:none !important}.file-upload__label.sc-nano-file-upload{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1}[invalid].sc-nano-file-upload-h:not([invalid=false]) .file-upload__label.sc-nano-file-upload{color:var(--label-color--invalid)}.file-upload__input.sc-nano-file-upload{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload,.file-upload__more.sc-nano-file-upload,.file-upload__label.sc-nano-file-upload{display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-upload__more.sc-nano-file-upload{block-size:1em;margin-block:calc(var(--label-padding) / 2) var(--label-padding);margin-inline:3px 0;position:relative}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;transition:0.3s ease-out opacity}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload,.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:1}.file-upload__error.sc-nano-file-upload{color:var(--invalid-msg-color);opacity:0}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload{opacity:1}.file-upload__help.sc-nano-file-upload{font-style:italic;opacity:1;color:var(--help-msg-color)}.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:0}.file-upload__drop.sc-nano-file-upload{position:relative;inline-size:100%;display:inline-block}.file-upload__drop-area.sc-nano-file-upload{flex-direction:column;background-color:var(--drop-bg);color:var(--drop-text);min-block-size:var(--drop-height);display:flex;align-items:center;justify-content:center;font-size:0.9em;position:relative;transition:background-color 0.15s ease-in-out;padding:0.5rem}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__drop-area.sc-nano-file-upload{opacity:0.7}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload{background-color:var(--drop-bg--invalid)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload{background-color:#fff}.file-upload__drop-area.sc-nano-file-upload::after{content:\"\";position:absolute;border-radius:var(--drop-border-radius);border-width:var(--drop-border-width);border-color:rgb(var(--drop-border-tint)/50%);border-style:dashed;inset:0;transition:top 0.1s ease-in-out, bottom 0.1s ease-in-out, left 0.1s ease-in-out, right 0.1s ease-in-out}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{border-color:rgb(var(--drop-border--invalid)/100%)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{inset:5px}.file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{color:rgb(var(--drop-border-tint)/100%);text-decoration:underline;border-radius:2px;z-index:1;cursor:pointer;position:relative}.file-upload--focus.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.file-upload__list.sc-nano-file-upload{list-style:none;margin:0;padding:0}.file-upload__list-wrap.sc-nano-file-upload{position:relative;inset-block-start:-4px}.file-upload__list-item.sc-nano-file-upload{inline-size:100%;margin:0 0 2px;display:flex;align-items:center;transform:translateZ(0);animation:hideListItem 0.3s ease-in-out forwards}@keyframes hideListItem{0%{opacity:1;transform:translateY(0);transform:translateZ(0)}100%{opacity:0;transform:translateY(10px);transform:translateZ(0)}}.file-upload__list-item--active.sc-nano-file-upload{animation:showListItem 0.3s ease-in-out forwards}@keyframes showListItem{0%{opacity:0;transform:translateY(10px);transform:translateZ(0)}100%{opacity:1;transform:translateY(0);transform:translateZ(0)}}.file-upload__list.sc-nano-file-upload .list-title.sc-nano-file-upload{background:var(--nano-color-blue--faded);border-radius:5px;padding:5px;margin-inline-end:2px;display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:0.9em;color:var(--help-msg-color)}.file-upload__list.sc-nano-file-upload .list-button.sc-nano-file-upload{background:var(--nano-color-blue--faded);border-radius:5px;margin:2px}.file-upload__list.sc-nano-file-upload .list-error.sc-nano-file-upload{--color:rgb(var(--drop-border--invalid) / 100%)}.file-upload__button.sc-nano-file-upload{padding:0;border:none;background-color:transparent;font:inherit;-webkit-box-align:center;text-decoration:none;color:inherit;transition:background-color 100ms ease-in-out, box-shadow 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out;padding-inline:var(--nano-btn-padding-start, 1rem) var(--nano-btn-padding-end, 1rem);padding-block:var(--nano-btn-padding-top, 0.5rem) var(--nano-btn-padding-bottom, 0.5rem);box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));display:inline-block;border-radius:var(--nano-btn-border-radius, 5px);line-height:var(--nano-btn-line-height, 1.5em);font-weight:400;cursor:pointer;background:rgba(0, 0, 0, 0.02);background-color:var(--btn-bg);color:var(--btn-text);--nano-btn-icon-size:var(--btn-icon-size);--nano-btn-line-height:var(--btn-icon-size);--nano-btn-padding-top:var(--btn-padding-top);--nano-btn-padding-bottom:var(--btn-padding-bottom);--nano-btn-padding-start:var(--btn-padding-start);--nano-btn-padding-end:var(--btn-padding-end);max-inline-size:100%;font-size:0.9em}.file-upload__button.sc-nano-file-upload::-moz-focus-inner{border:0;padding:0}.file-upload__button.sc-nano-file-upload:hover,.file-upload__button.sc-nano-file-upload:focus{text-decoration:none;color:inherit}@media print{.file-upload__button.sc-nano-file-upload{display:none}}.file-upload__button.sc-nano-file-upload:focus,.file-upload__button.button--focus.sc-nano-file-upload{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.file-upload__button.sc-nano-file-upload nano-icon.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload nano-spinner.sc-nano-file-upload{--base-color-rgb:255 255 255;margin-inline:0.5em 0;font-size:var(--nano-btn-icon-size, 1em);vertical-align:middle;margin-block-start:-0.188em;display:inline-block}.file-upload__button.button--icon-start.sc-nano-file-upload nano-icon.sc-nano-file-upload,.file-upload__button.button--icon-start.sc-nano-file-upload nano-spinner.sc-nano-file-upload{margin-inline:0 0.5em}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled){box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2))}.file-upload__button.sc-nano-file-upload:active:not(.button--disabled,.sc-nano-file-upload:disabled){box-shadow:none}.file-upload__button--disabled.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload:disabled{opacity:0.6}.file-upload__button--disabled.sc-nano-file-upload:hover,.file-upload__button.sc-nano-file-upload:disabled:hover{cursor:default}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled,.sc-nano-file-upload:disabled),.file-upload__button.button--active.sc-nano-file-upload{background-color:var(--nano-color-primary-shade, #00637f);color:var(--btn-text)}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled,.sc-nano-file-upload:disabled).button--keyline,.file-upload__button.button--active.button--keyline.sc-nano-file-upload{background-color:var(--btn-bg);color:var(--btn-text)}.file-upload__button.sc-nano-file-upload:focus{color:var(--btn-text)}.file-upload__button.button--keyline.sc-nano-file-upload{background:transparent;border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:var(--btn-bg);border-color:var(--btn-bg)}.file-upload__button.button--keyline.sc-nano-file-upload:hover:not(.button--disabled,.sc-nano-file-upload:disabled),.file-upload__button.button--keyline.sc-nano-file-upload:not(:focus,.button--focus).sc-nano-file-upload,.file-upload__button.button--keyline.button--active.sc-nano-file-upload{box-shadow:none}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__button.sc-nano-file-upload{opacity:0.4}.file-upload--dragging.sc-nano-file-upload .file-upload__button.sc-nano-file-upload{--nano-btn-border-style:dashed}.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload{margin:0;font-size:inherit;padding:0;border:0;outline:none;background-color:transparent;display:flex;align-items:stretch;inline-size:auto;color:var(--clear-btn-color)}.is-invalid.sc-nano-file-upload-h .file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload{color:var(--clear-btn-color--invalid)}.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload .nano-icon.sc-nano-file-upload{margin-inline:0.4rem 0;margin-block:0}.file-upload__button.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload{display:flex;align-items:center}.file-upload__button.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload span.sc-nano-file-upload{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-inline-size:0}";
|
11
|
+
const fileUploadCss = ".sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-file-upload-h{min-block-size:1rem;display:block;--color-error:var(--nano-color-danger-1100);--color-error-light:var(--nano-color-danger-100);--color-text:var(--nano-color-neutral-1400);--color-drop-browse:var(--nano-color-primary-1200);--color-drop-border:var(--nano-color-primary-1200);--color-drop-bg:var(--nano-color-primary-75);--drop-height:3.5em;--color-btn-bg:var(--nano-color-base-0);--color-btn-border:var(--nano-color-primary-1000);--color-btn-text:var(--nano-color-primary-1000)}[disabled].sc-nano-file-upload-h:not([disabled=false]){cursor:not-allowed}[disabled].sc-nano-file-upload-h:not([disabled=false]) *.sc-nano-file-upload{pointer-events:none !important}.file-upload--invalid.sc-nano-file-upload{--color-drop-bg:var(--color-error-light)}.file-upload--dragging.sc-nano-file-upload{--color-drop-bg:var(--nano-color-success-50)}.file-upload__label.sc-nano-file-upload{font-size:var(--nano-font-size-xs);margin:0;line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__label.sc-nano-file-upload{color:var(--nano-color-neutral-1200)}.file-upload__input.sc-nano-file-upload{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload,.file-upload__more.sc-nano-file-upload,.file-upload__label.sc-nano-file-upload{display:block;inline-size:100%;white-space:nowrap;text-overflow:ellipsis}.file-upload__more.sc-nano-file-upload{margin-block:var(--nano-spacing-sm) 0;position:relative}.file-upload__more.sc-nano-file-upload:has(.file-upload__error) .file-upload__help.sc-nano-file-upload{display:none !important}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload{inset-block-start:0;inset-inline-start:0;font-style:italic;font-size:var(--nano-font-size-2xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload,.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:1}.file-upload__error.sc-nano-file-upload{color:var(--color-error);opacity:0;display:none;transition:all var(--nano-transition-fast) ease;transition-behavior:allow-discrete}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload{opacity:1;display:block}.file-upload__help.sc-nano-file-upload{opacity:1;color:var(--color-text);display:block}.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:0;display:none}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__help.sc-nano-file-upload{color:var(--nano-color-neutral-1200);opacity:0.8}.file-upload__drop.sc-nano-file-upload{position:relative;inline-size:100%;display:inline-block}.file-upload__drop-area.sc-nano-file-upload{flex-direction:column;background-color:var(--color-drop-bg);color:var(--color-text);min-block-size:var(--drop-height);padding:var(--nano-spacing-md);display:flex;align-items:center;justify-content:center;position:relative;transition:background-color var(--nano-transition-x-fast) ease-in-out;font-size:var(--nano-font-size-sm);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__drop-area.sc-nano-file-upload{color:var(--nano-color-neutral-1200);background-color:var(--nano-color-neutral-300);border-color:var(--nano-color-neutral-1200)}.file-upload__drop-area.sc-nano-file-upload::after{content:\"\";position:absolute;border-width:1px;background-color:var(--color-drop-border);-webkit-mask-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='white' stroke-width='2' stroke-dasharray='6%2c 8' stroke-dashoffset='0'/%3e%3c/svg%3e\");mask-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='white' stroke-width='2' stroke-dasharray='6%2c 8' stroke-dashoffset='0'/%3e%3c/svg%3e\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;inset:0;transition:top var(--nano-transition-x-fast) ease-in-out, bottom var(--nano-transition-x-fast) ease-in-out, left var(--nano-transition-x-fast) ease-in-out, right var(--nano-transition-x-fast) ease-in-out}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{background-color:var(--color-error)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{background-color:var(--nano-color-success-1100);inset:5px}.file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{color:var(--color-drop-browse);text-decoration:underline;z-index:1;cursor:pointer;position:relative}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{color:var(--nano-color-neutral-1200);opacity:0.8}.file-upload--focus.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.file-upload__list.sc-nano-file-upload{list-style:none;margin:var(--nano-spacing-xs) 0 0;padding:0}.file-upload__list-wrap.sc-nano-file-upload{position:relative;inset-block-start:-4px}.file-upload__list-item.sc-nano-file-upload{inline-size:100%;margin:0 0 2px;display:flex;align-items:center;animation:hideListItem var(--nano-transition-fast) ease-in-out forwards}@keyframes hideListItem{0%{opacity:1}100%{opacity:0}}.file-upload__list-item--active.sc-nano-file-upload{animation:showListItem var(--nano-transition-fast) ease-in-out forwards}@keyframes showListItem{0%{opacity:0}100%{opacity:1}}.file-upload__list.sc-nano-file-upload .list-title.sc-nano-file-upload{background:var(--color-drop-bg);padding:var(--nano-spacing-xs);margin-inline-end:2px;display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--nano-font-size-2xs);color:var(--color-text)}.file-upload__list.sc-nano-file-upload .list-button.sc-nano-file-upload{--padding:0.406rem;background:var(--color-drop-bg);margin:2px}.file-upload__list.sc-nano-file-upload .list-error.sc-nano-file-upload{--color:var(--color-error)}.file-upload__drop-area.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload{margin-block:var(--nano-spacing-sm) 0}.file-upload__button.sc-nano-file-upload{max-inline-size:100%;display:flex}.is-invalid.sc-nano-file-upload-h .file-upload__button.sc-nano-file-upload{color:var(--color-error)}.file-upload--dragging.sc-nano-file-upload .file-upload__button.sc-nano-file-upload{--nano-btn-border-style:dashed}.file-upload__clear-btn.sc-nano-file-upload{margin:0;font-size:inherit;padding:0;border:0;outline:none;display:flex;align-items:center;inline-size:auto;color:var(--color-btn-text);background:var(--color-btn-bg)}.is-invalid.sc-nano-file-upload-h .file-upload__clear-btn.sc-nano-file-upload{color:var(--color-error)}.file-upload__clear-btn.sc-nano-file-upload:focus-visible>nano-icon.sc-nano-file-upload{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.file-upload__clear-btn.sc-nano-file-upload .nano-icon.sc-nano-file-upload{margin:0.1rem 0 0 var(--nano-spacing-sm)}.file-upload--focus.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.file-upload__btn-content.sc-nano-file-upload div.sc-nano-file-upload{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-inline-size:0;display:block}.file-upload--focus.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload div.sc-nano-file-upload{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.file-upload__icon.sc-nano-file-upload{align-self:center;margin-inline-start:var(--nano-spacing-sm);size:var(--nano-icon-size-small)}.file-upload__icon-error.sc-nano-file-upload{color:var(--color-error);opacity:0}.file-upload--invalid.sc-nano-file-upload .file-upload__icon-error.sc-nano-file-upload{opacity:1}.file-upload__icon-success.sc-nano-file-upload{color:var(--nano-color-success-1100);opacity:0}.file-upload--valid.sc-nano-file-upload .file-upload__icon-success.sc-nano-file-upload{opacity:1}";
|
11
12
|
|
12
13
|
let fileInputIds = 0;
|
13
14
|
let getDataTransfer = () => new DataTransfer();
|
@@ -66,12 +67,18 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
|
|
66
67
|
capture;
|
67
68
|
/** The maximum file size allowed per file (Megabytes) */
|
68
69
|
maxFileSize = 1;
|
69
|
-
/** The maximum
|
70
|
+
/** The maximum number of files that can be selected. Defaults to 1 */
|
70
71
|
maxFiles = 1;
|
72
|
+
_label = '';
|
71
73
|
/** String to place within a label element. */
|
72
|
-
label
|
74
|
+
get label() {
|
75
|
+
return this.required && !this._label.endsWith('*') ? this._label + ' *' : this._label;
|
76
|
+
}
|
77
|
+
set label(value) {
|
78
|
+
this._label = value;
|
79
|
+
}
|
73
80
|
/** Placeholder only used within single file uploads. */
|
74
|
-
placeholder = 'Choose a file
|
81
|
+
placeholder = 'Choose a file';
|
75
82
|
/** Visually hide the label - but make it accessible. */
|
76
83
|
hideLabel = false;
|
77
84
|
/** If `true`, the user must select a file to upload before submitting a form. */
|
@@ -80,11 +87,11 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
|
|
80
87
|
disabled = false;
|
81
88
|
/** If `true`, a clear icon will appear in the input when there is a value.
|
82
89
|
* Clicking it clears the input. Only used within single file uploads. */
|
83
|
-
|
90
|
+
clearable = false;
|
84
91
|
/** Whether to show validation errors underneath input */
|
85
92
|
showInlineError = true;
|
86
93
|
/** When should the field perform validation */
|
87
|
-
validateOn = '
|
94
|
+
validateOn = 'submitThenDirty';
|
88
95
|
/** The form element to associate with this input (its form owner). Must be the id of a form. */
|
89
96
|
form;
|
90
97
|
shouldValidate() {
|
@@ -96,7 +103,7 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
|
|
96
103
|
this.showInlineValidation();
|
97
104
|
});
|
98
105
|
}
|
99
|
-
_invalid =
|
106
|
+
_invalid = null;
|
100
107
|
/** This will be true when the control is in an invalid state.
|
101
108
|
* Validity is determined by the `required` prop. Or if custom validity message is set. @readonly */
|
102
109
|
get invalid() {
|
@@ -176,7 +183,6 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
|
|
176
183
|
async showError(message) {
|
177
184
|
if (this.inputEl) {
|
178
185
|
this.inputEl.setCustomValidity(message);
|
179
|
-
this.validate();
|
180
186
|
this.showInlineValidation();
|
181
187
|
}
|
182
188
|
}
|
@@ -228,7 +234,7 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
|
|
228
234
|
checkFileType(type) {
|
229
235
|
if (!this.accept)
|
230
236
|
return true;
|
231
|
-
return this.accept.match(type) && this.accept.match(type).length > 0;
|
237
|
+
return !!type && this.accept.match(type) && this.accept.match(type).length > 0;
|
232
238
|
}
|
233
239
|
validate = () => {
|
234
240
|
this.errorMessage = '';
|
@@ -238,24 +244,36 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
|
|
238
244
|
error = this.inputEl.validationMessage;
|
239
245
|
}
|
240
246
|
else {
|
241
|
-
this.fileList.
|
242
|
-
error =
|
243
|
-
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
|
251
|
-
|
252
|
-
|
253
|
-
|
254
|
-
|
255
|
-
|
247
|
+
if (this.fileList.length > this.maxFiles) {
|
248
|
+
error = `Maximum number of files exceeded (${this.maxFiles})`;
|
249
|
+
}
|
250
|
+
else {
|
251
|
+
this.fileList.forEach((fileItem) => {
|
252
|
+
let listeItemError = null;
|
253
|
+
if (!this.checkFileSize(fileItem.file.size)) {
|
254
|
+
listeItemError =
|
255
|
+
'Maximum file size exceeded. Max file size is ' +
|
256
|
+
this.maxFileSize +
|
257
|
+
'Mb';
|
258
|
+
}
|
259
|
+
else if (!this.checkFileType(fileItem.file.type)) {
|
260
|
+
listeItemError = `File type is not allowed (${this.accept})`;
|
261
|
+
}
|
262
|
+
fileItem.validationMessage = listeItemError;
|
263
|
+
fileItem.valid = !listeItemError;
|
264
|
+
if (listeItemError) {
|
265
|
+
error = listeItemError;
|
266
|
+
}
|
267
|
+
});
|
268
|
+
}
|
256
269
|
}
|
257
|
-
if (error)
|
270
|
+
if (error) {
|
258
271
|
this.inputEl.setCustomValidity(error);
|
272
|
+
}
|
273
|
+
else {
|
274
|
+
this.inputEl.setCustomValidity('');
|
275
|
+
this.errorMessage = '';
|
276
|
+
}
|
259
277
|
};
|
260
278
|
showInlineValidation(ev) {
|
261
279
|
if (this.validateOn === 'submitThenDirty')
|
@@ -371,9 +389,10 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
|
|
371
389
|
h("div", { class: 'file-upload__' + eleType + '-wrap' }, h("label", { class: `file-upload__` + eleType, htmlFor: this.fileInputId, id: labelId, onDrop: (e) => {
|
372
390
|
this.onDrop(e);
|
373
391
|
this.onDragStop(e);
|
374
|
-
}, onDragEnd: this.onDragStop, onDragLeave: this.onDragStop, onDragEnter: this.onDragStart, onDragOver: this.onDragStart }, (!!this.label || (this.hasLabelSlot && eleType !== 'drop')) && (h("div", { class: `file-upload__label ${this.hideLabel ? 'visually-hide' : ''}` }, !!this.label && !!this.label.length ? this.label : '', !this.label && this.hasLabelSlot && eleType !== 'drop' && (h("slot", { name: "label" })))), eleType === 'drop' && (h("div", { class: "file-upload__drop-area" }, h("div", null, this.hasLabelSlot && h("slot", { name: "label" })), h("div", null, "Drag and drop or\u00A0", h("span", null, "browse")))), eleType === 'btn' && (h("div", { class: `file-upload__button button--keyline button--icon-start ${this.hasFocus ? 'button--focus' : ''}` }, h("
|
392
|
+
}, onDragEnd: this.onDragStop, onDragLeave: this.onDragStop, onDragEnter: this.onDragStart, onDragOver: this.onDragStart }, (!!this.label || (this.hasLabelSlot && eleType !== 'drop')) && (h("div", { class: `file-upload__label ${this.hideLabel ? 'visually-hide' : ''}` }, !!this.label && !!this.label.length ? this.label : '', !this.label && this.hasLabelSlot && eleType !== 'drop' && (h("slot", { name: "label" })))), eleType === 'drop' && (h("div", { class: "file-upload__drop-area" }, h("div", null, this.hasLabelSlot && h("slot", { name: "label" })), h("div", null, "Drag and drop or\u00A0", h("span", null, "browse")))), eleType === 'btn' && (h("div", { class: `file-upload__button button--keyline button--icon-start ${this.hasFocus ? 'button--focus' : ''}` }, h("nano-cta", { secondary: true, class: `file-upload__btn-content` }, h("div", { class: "button", disabled: this.disabled }, this.fileList.length
|
375
393
|
? this.fileList[0].file.name
|
376
|
-
: this.placeholder), !!this.value && this.
|
394
|
+
: this.placeholder)), !!this.value && this.clearable && !this.disabled && (h("button", { type: "button", class: "icon file-upload__clear-btn", tabindex: "0", "aria-label": "Clear selected file", onClick: this.onClearClick }, h("nano-icon", { name: "light/xmark" }))), !this.disabled && this.showInlineError &&
|
395
|
+
(this._invalid ? (h("nano-icon", { name: "solid/circle-xmark", class: "file-upload__icon file-upload__icon-error" })) : (h("nano-icon", { name: "solid/circle-check", class: "file-upload__icon file-upload__icon-success" }))))), h("input", { "aria-labelledby": labelId + ' ' + moreId + ' ' + listId, type: "file", id: this.fileInputId, accept: this.accept, class: "file-upload__input", multiple: this.maxFiles > 1, disabled: this.disabled, name: this.canChangeFileList ? undefined : this.name, form: this.form, ref: (input) => {
|
377
396
|
if (this.canChangeFileList) {
|
378
397
|
this.publicInputEl = input;
|
379
398
|
return;
|
@@ -400,11 +419,12 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
|
|
400
419
|
];
|
401
420
|
};
|
402
421
|
render() {
|
403
|
-
return (h(Host, { key: '
|
422
|
+
return (h(Host, { key: '4f495870314e3f688517b34be6749cf2b77810ea', class: "nano-file-upload" }, h("div", { key: '9baa63fe75b200913f82abb4304d73e22fbb4be4', class: {
|
404
423
|
'file-upload': true,
|
405
424
|
'file-upload--dragging': this.isDragging,
|
406
425
|
'file-upload--focus': this.hasFocus,
|
407
|
-
'file-upload--invalid': this._invalid,
|
426
|
+
'file-upload--invalid': this._invalid === true,
|
427
|
+
'file-upload--valid': this._invalid === false,
|
408
428
|
} }, this.maxFiles > 1 ? h(this.dropArea, null) : h(this.button, null))));
|
409
429
|
}
|
410
430
|
static get watchers() { return {
|
@@ -423,16 +443,16 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
|
|
423
443
|
"capture": [1],
|
424
444
|
"maxFileSize": [2, "max-file-size"],
|
425
445
|
"maxFiles": [2, "max-files"],
|
426
|
-
"label": [
|
446
|
+
"label": [6145],
|
427
447
|
"placeholder": [1],
|
428
448
|
"hideLabel": [4, "hide-label"],
|
429
449
|
"required": [4],
|
430
450
|
"disabled": [516],
|
431
|
-
"
|
451
|
+
"clearable": [4],
|
432
452
|
"showInlineError": [516, "show-inline-error"],
|
433
453
|
"validateOn": [1025, "validate-on"],
|
434
454
|
"form": [1],
|
435
|
-
"invalid": [
|
455
|
+
"invalid": [2568],
|
436
456
|
"validityMessage": [2049, "validity-message"],
|
437
457
|
"files": [6160],
|
438
458
|
"value": [6145],
|
@@ -460,13 +480,18 @@ function defineCustomElement$1() {
|
|
460
480
|
if (typeof customElements === "undefined") {
|
461
481
|
return;
|
462
482
|
}
|
463
|
-
const components = ["nano-file-upload", "nano-icon", "nano-icon-button", "nano-tooltip"];
|
483
|
+
const components = ["nano-file-upload", "nano-cta", "nano-icon", "nano-icon-button", "nano-tooltip"];
|
464
484
|
components.forEach(tagName => { switch (tagName) {
|
465
485
|
case "nano-file-upload":
|
466
486
|
if (!customElements.get(tagName)) {
|
467
487
|
customElements.define(tagName, FileUpload);
|
468
488
|
}
|
469
489
|
break;
|
490
|
+
case "nano-cta":
|
491
|
+
if (!customElements.get(tagName)) {
|
492
|
+
defineCustomElement$5();
|
493
|
+
}
|
494
|
+
break;
|
470
495
|
case "nano-icon":
|
471
496
|
if (!customElements.get(tagName)) {
|
472
497
|
defineCustomElement$4();
|