@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
package/hydrate/index.mjs
CHANGED
|
@@ -8748,9 +8748,23 @@ function addGlobalStylesheetToShadow(shadowRoot) {
|
|
|
8748
8748
|
let rule = null;
|
|
8749
8749
|
let globalStylesheet = [];
|
|
8750
8750
|
for (stylesheet of globalStylesheets) {
|
|
8751
|
-
if (!(stylesheet instanceof CSSStyleSheet))
|
|
8751
|
+
if (!(stylesheet instanceof CSSStyleSheet)) {
|
|
8752
8752
|
continue;
|
|
8753
|
-
|
|
8753
|
+
}
|
|
8754
|
+
let cssRules;
|
|
8755
|
+
try {
|
|
8756
|
+
// Attempt to access the cssRules of the stylesheet
|
|
8757
|
+
cssRules = stylesheet?.cssRules;
|
|
8758
|
+
// no cssRules? skip it
|
|
8759
|
+
if (!cssRules)
|
|
8760
|
+
continue;
|
|
8761
|
+
}
|
|
8762
|
+
catch (e) {
|
|
8763
|
+
// some stylesheets may not be accessible due to CORS or other restrictions
|
|
8764
|
+
console.warn('Unable to access stylesheet:', stylesheet, e);
|
|
8765
|
+
continue;
|
|
8766
|
+
}
|
|
8767
|
+
for (rule of cssRules) {
|
|
8754
8768
|
// arbitrary piece of text to check for that appears early in the `nano-components` stylesheet
|
|
8755
8769
|
// this is a bit fragile but does the job
|
|
8756
8770
|
if (rule instanceof CSSLayerBlockRule &&
|
|
@@ -9068,7 +9082,7 @@ class DataList {
|
|
|
9068
9082
|
writeTask(() => {
|
|
9069
9083
|
if (this.open) {
|
|
9070
9084
|
const { height, top } = this.nanoDropdown.tetherTo.getBoundingClientRect();
|
|
9071
|
-
this.nanoDropdown.style.setProperty('--max-height', window.innerHeight - (height + top + 40)
|
|
9085
|
+
this.nanoDropdown.style.setProperty('--max-height', `max(${window.innerHeight - (height + top + 40)}px, 48vw)`);
|
|
9072
9086
|
}
|
|
9073
9087
|
this.nanoDropdown.open = this.open;
|
|
9074
9088
|
if (this.connectedInput) {
|
|
@@ -9486,18 +9500,18 @@ class DataList {
|
|
|
9486
9500
|
}
|
|
9487
9501
|
}
|
|
9488
9502
|
render() {
|
|
9489
|
-
return (h(Host, { key: '
|
|
9503
|
+
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
|
|
9490
9504
|
? 'Select options from the list below'
|
|
9491
|
-
: undefined }, h("nano-dropdown", { key: '
|
|
9505
|
+
: 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: {
|
|
9492
9506
|
dlist__dropdown: true,
|
|
9493
9507
|
'dlist--isfiltered': this.isFiltered,
|
|
9494
|
-
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '
|
|
9508
|
+
}, 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: {
|
|
9495
9509
|
dlist__menu: true,
|
|
9496
9510
|
'dlist__menu--open': this.dropwdownOpen,
|
|
9497
|
-
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '
|
|
9511
|
+
}, 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: {
|
|
9498
9512
|
dlist__menu: true,
|
|
9499
9513
|
'dlist__menu--open': this.dropwdownOpen,
|
|
9500
|
-
} }, h("slot", { key: '
|
|
9514
|
+
} }, 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.")))));
|
|
9501
9515
|
}
|
|
9502
9516
|
static get watchers() { return {
|
|
9503
9517
|
"open": ["openWatcher"],
|
|
@@ -14131,7 +14145,7 @@ class FieldValidator {
|
|
|
14131
14145
|
}; }
|
|
14132
14146
|
}
|
|
14133
14147
|
|
|
14134
|
-
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}";
|
|
14148
|
+
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}";
|
|
14135
14149
|
|
|
14136
14150
|
let fileInputIds = 0;
|
|
14137
14151
|
let getDataTransfer = () => new DataTransfer();
|
|
@@ -14148,11 +14162,14 @@ catch {
|
|
|
14148
14162
|
}
|
|
14149
14163
|
}
|
|
14150
14164
|
/**
|
|
14151
|
-
*
|
|
14165
|
+
* Enables the selection of files for upload.
|
|
14152
14166
|
*
|
|
14153
|
-
*
|
|
14154
|
-
*
|
|
14155
|
-
*
|
|
14167
|
+
* @version 1.0.0
|
|
14168
|
+
* @status stable
|
|
14169
|
+
*
|
|
14170
|
+
* @slot label - A label for the file input. If not provided, the `label` prop will be used.
|
|
14171
|
+
* @slot helper - A helper text to display below the input.
|
|
14172
|
+
* @slot - The default slot can be used to add additional content, such as instructions or a message.
|
|
14156
14173
|
*/
|
|
14157
14174
|
class FileUpload {
|
|
14158
14175
|
constructor(hostRef) {
|
|
@@ -14196,12 +14213,18 @@ class FileUpload {
|
|
|
14196
14213
|
capture;
|
|
14197
14214
|
/** The maximum file size allowed per file (Megabytes) */
|
|
14198
14215
|
maxFileSize = 1;
|
|
14199
|
-
/** The maximum
|
|
14216
|
+
/** The maximum number of files that can be selected. Defaults to 1 */
|
|
14200
14217
|
maxFiles = 1;
|
|
14218
|
+
_label = '';
|
|
14201
14219
|
/** String to place within a label element. */
|
|
14202
|
-
label
|
|
14220
|
+
get label() {
|
|
14221
|
+
return this.required && !this._label.endsWith('*') ? this._label + ' *' : this._label;
|
|
14222
|
+
}
|
|
14223
|
+
set label(value) {
|
|
14224
|
+
this._label = value;
|
|
14225
|
+
}
|
|
14203
14226
|
/** Placeholder only used within single file uploads. */
|
|
14204
|
-
placeholder = 'Choose a file
|
|
14227
|
+
placeholder = 'Choose a file';
|
|
14205
14228
|
/** Visually hide the label - but make it accessible. */
|
|
14206
14229
|
hideLabel = false;
|
|
14207
14230
|
/** If `true`, the user must select a file to upload before submitting a form. */
|
|
@@ -14210,11 +14233,11 @@ class FileUpload {
|
|
|
14210
14233
|
disabled = false;
|
|
14211
14234
|
/** If `true`, a clear icon will appear in the input when there is a value.
|
|
14212
14235
|
* Clicking it clears the input. Only used within single file uploads. */
|
|
14213
|
-
|
|
14236
|
+
clearable = false;
|
|
14214
14237
|
/** Whether to show validation errors underneath input */
|
|
14215
14238
|
showInlineError = true;
|
|
14216
14239
|
/** When should the field perform validation */
|
|
14217
|
-
validateOn = '
|
|
14240
|
+
validateOn = 'submitThenDirty';
|
|
14218
14241
|
/** The form element to associate with this input (its form owner). Must be the id of a form. */
|
|
14219
14242
|
form;
|
|
14220
14243
|
shouldValidate() {
|
|
@@ -14226,7 +14249,7 @@ class FileUpload {
|
|
|
14226
14249
|
this.showInlineValidation();
|
|
14227
14250
|
});
|
|
14228
14251
|
}
|
|
14229
|
-
_invalid =
|
|
14252
|
+
_invalid = null;
|
|
14230
14253
|
/** This will be true when the control is in an invalid state.
|
|
14231
14254
|
* Validity is determined by the `required` prop. Or if custom validity message is set. @readonly */
|
|
14232
14255
|
get invalid() {
|
|
@@ -14306,7 +14329,6 @@ class FileUpload {
|
|
|
14306
14329
|
async showError(message) {
|
|
14307
14330
|
if (this.inputEl) {
|
|
14308
14331
|
this.inputEl.setCustomValidity(message);
|
|
14309
|
-
this.validate();
|
|
14310
14332
|
this.showInlineValidation();
|
|
14311
14333
|
}
|
|
14312
14334
|
}
|
|
@@ -14358,7 +14380,7 @@ class FileUpload {
|
|
|
14358
14380
|
checkFileType(type) {
|
|
14359
14381
|
if (!this.accept)
|
|
14360
14382
|
return true;
|
|
14361
|
-
return this.accept.match(type) && this.accept.match(type).length > 0;
|
|
14383
|
+
return !!type && this.accept.match(type) && this.accept.match(type).length > 0;
|
|
14362
14384
|
}
|
|
14363
14385
|
validate = () => {
|
|
14364
14386
|
this.errorMessage = '';
|
|
@@ -14368,24 +14390,36 @@ class FileUpload {
|
|
|
14368
14390
|
error = this.inputEl.validationMessage;
|
|
14369
14391
|
}
|
|
14370
14392
|
else {
|
|
14371
|
-
this.fileList.
|
|
14372
|
-
error =
|
|
14373
|
-
|
|
14374
|
-
|
|
14375
|
-
|
|
14376
|
-
|
|
14377
|
-
|
|
14378
|
-
|
|
14379
|
-
|
|
14380
|
-
|
|
14381
|
-
|
|
14382
|
-
|
|
14383
|
-
|
|
14384
|
-
|
|
14385
|
-
|
|
14393
|
+
if (this.fileList.length > this.maxFiles) {
|
|
14394
|
+
error = `Maximum number of files exceeded (${this.maxFiles})`;
|
|
14395
|
+
}
|
|
14396
|
+
else {
|
|
14397
|
+
this.fileList.forEach((fileItem) => {
|
|
14398
|
+
let listeItemError = null;
|
|
14399
|
+
if (!this.checkFileSize(fileItem.file.size)) {
|
|
14400
|
+
listeItemError =
|
|
14401
|
+
'Maximum file size exceeded. Max file size is ' +
|
|
14402
|
+
this.maxFileSize +
|
|
14403
|
+
'Mb';
|
|
14404
|
+
}
|
|
14405
|
+
else if (!this.checkFileType(fileItem.file.type)) {
|
|
14406
|
+
listeItemError = `File type is not allowed (${this.accept})`;
|
|
14407
|
+
}
|
|
14408
|
+
fileItem.validationMessage = listeItemError;
|
|
14409
|
+
fileItem.valid = !listeItemError;
|
|
14410
|
+
if (listeItemError) {
|
|
14411
|
+
error = listeItemError;
|
|
14412
|
+
}
|
|
14413
|
+
});
|
|
14414
|
+
}
|
|
14386
14415
|
}
|
|
14387
|
-
if (error)
|
|
14416
|
+
if (error) {
|
|
14388
14417
|
this.inputEl.setCustomValidity(error);
|
|
14418
|
+
}
|
|
14419
|
+
else {
|
|
14420
|
+
this.inputEl.setCustomValidity('');
|
|
14421
|
+
this.errorMessage = '';
|
|
14422
|
+
}
|
|
14389
14423
|
};
|
|
14390
14424
|
showInlineValidation(ev) {
|
|
14391
14425
|
if (this.validateOn === 'submitThenDirty')
|
|
@@ -14501,9 +14535,10 @@ class FileUpload {
|
|
|
14501
14535
|
h("div", { class: 'file-upload__' + eleType + '-wrap' }, h("label", { class: `file-upload__` + eleType, htmlFor: this.fileInputId, id: labelId, onDrop: (e) => {
|
|
14502
14536
|
this.onDrop(e);
|
|
14503
14537
|
this.onDragStop(e);
|
|
14504
|
-
}, 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("
|
|
14538
|
+
}, 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
|
|
14505
14539
|
? this.fileList[0].file.name
|
|
14506
|
-
: this.placeholder), !!this.value && this.
|
|
14540
|
+
: 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 &&
|
|
14541
|
+
(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) => {
|
|
14507
14542
|
if (this.canChangeFileList) {
|
|
14508
14543
|
this.publicInputEl = input;
|
|
14509
14544
|
return;
|
|
@@ -14530,11 +14565,12 @@ class FileUpload {
|
|
|
14530
14565
|
];
|
|
14531
14566
|
};
|
|
14532
14567
|
render() {
|
|
14533
|
-
return (h(Host, { key: '
|
|
14568
|
+
return (h(Host, { key: '4f495870314e3f688517b34be6749cf2b77810ea', class: "nano-file-upload" }, h("div", { key: '9baa63fe75b200913f82abb4304d73e22fbb4be4', class: {
|
|
14534
14569
|
'file-upload': true,
|
|
14535
14570
|
'file-upload--dragging': this.isDragging,
|
|
14536
14571
|
'file-upload--focus': this.hasFocus,
|
|
14537
|
-
'file-upload--invalid': this._invalid,
|
|
14572
|
+
'file-upload--invalid': this._invalid === true,
|
|
14573
|
+
'file-upload--valid': this._invalid === false,
|
|
14538
14574
|
} }, this.maxFiles > 1 ? h(this.dropArea, null) : h(this.button, null))));
|
|
14539
14575
|
}
|
|
14540
14576
|
static get watchers() { return {
|
|
@@ -14556,16 +14592,16 @@ class FileUpload {
|
|
|
14556
14592
|
"capture": [1],
|
|
14557
14593
|
"maxFileSize": [2, "max-file-size"],
|
|
14558
14594
|
"maxFiles": [2, "max-files"],
|
|
14559
|
-
"label": [
|
|
14595
|
+
"label": [6145],
|
|
14560
14596
|
"placeholder": [1],
|
|
14561
14597
|
"hideLabel": [4, "hide-label"],
|
|
14562
14598
|
"required": [4],
|
|
14563
14599
|
"disabled": [516],
|
|
14564
|
-
"
|
|
14600
|
+
"clearable": [4],
|
|
14565
14601
|
"showInlineError": [516, "show-inline-error"],
|
|
14566
14602
|
"validateOn": [1025, "validate-on"],
|
|
14567
14603
|
"form": [1],
|
|
14568
|
-
"invalid": [
|
|
14604
|
+
"invalid": [2568],
|
|
14569
14605
|
"validityMessage": [2049, "validity-message"],
|
|
14570
14606
|
"files": [6160],
|
|
14571
14607
|
"value": [6145],
|
|
@@ -19071,9 +19107,10 @@ class NanoCta {
|
|
|
19071
19107
|
/** Predefined styles when displaying a number of CTAs together */
|
|
19072
19108
|
group;
|
|
19073
19109
|
componentWillLoad() {
|
|
19074
|
-
if (!this.host.querySelector('button, a')) {
|
|
19110
|
+
if (!this.host.querySelector('button, a, div')) {
|
|
19075
19111
|
const button = document.createElement('button');
|
|
19076
19112
|
button.classList.add('nano-internal-cta');
|
|
19113
|
+
button.type = 'button';
|
|
19077
19114
|
this.host.childNodes.forEach((node) => {
|
|
19078
19115
|
button.appendChild(node);
|
|
19079
19116
|
});
|
|
@@ -21722,10 +21759,13 @@ class NanoDataTable {
|
|
|
21722
21759
|
return (h(Host, { class: "nano-data-table" }, h("div", { class: `${CSSNAMESPACE}__top-anchor`, ref: (a) => (this.topAnchorEle = a) }, "\u00A0"), h("nano-resize-observe", { onNanoResize: () => {
|
|
21723
21760
|
if (this.tablePinnedService)
|
|
21724
21761
|
this.tablePinnedService.onResize();
|
|
21725
|
-
} }), Wrap(h("div", { class: `${CSSNAMESPACE}__wrap` }, h("nano-progress-bar", {
|
|
21762
|
+
} }), Wrap(h("div", { class: `${CSSNAMESPACE}__wrap` }, h("nano-progress-bar", {
|
|
21763
|
+
// indeterminate
|
|
21764
|
+
class: {
|
|
21726
21765
|
[`${CSSNAMESPACE}__progress-bar`]: true,
|
|
21727
21766
|
[`${CSSNAMESPACE}__progress-bar--show`]: this._loading,
|
|
21728
|
-
}
|
|
21767
|
+
}
|
|
21768
|
+
}), h("table", { "aria-rowcount": this.store.data.state.rows.length, "aria-colcount": this.store.config.state.columns.length, class: `${CSSNAMESPACE}`, ref: (tbl) => (this.tableEle = tbl), id: 'nano-data-table-' + this.renderId }, h("caption", { class: {
|
|
21729
21769
|
[`${CSSNAMESPACE}__caption`]: true,
|
|
21730
21770
|
[`${CSSNAMESPACE}__caption--hide`]: !this.showCaption,
|
|
21731
21771
|
} }, h("slot", { name: "caption" }, this.caption)), h("thead", null, h(TableHeadFootRow, { rowRenderer: this.headRender }, this.store.config.state.columns.map((colModel) => [
|
|
@@ -22385,7 +22425,7 @@ class NanoDetails {
|
|
|
22385
22425
|
}; }
|
|
22386
22426
|
}
|
|
22387
22427
|
|
|
22388
|
-
const footerCss = ":host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }:host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }:host {\n --col-gap: var(--nano-spacing-l1-default);\n --icon-gap-md: var(--nano-spacing-md);\n --icon-gap-sm: var(--nano-spacing-sm);\n --vertical-padding: var(--nano-spacing-l1-default);\n --horizontal-padding: 0;\n --header-margin: 0 0 var(--nano-spacing-l1-default) 0;\n display: block;\n}\n:host .footer {\n container-type: inline-size;\n container-name: footer-container;\n display: flex;\n flex-direction: column;\n}\n@container footer-container (max-width: 768px) {\n :host .top,\n :host .middle,\n :host .bottom {\n --horizontal-padding: var(--nano-spacing-md);\n --col-gap: var(--nano-spacing-l);\n --vertical-padding: var(--nano-spacing-md);\n }\n :host .top-start,\n :host .top-center,\n :host .top-end {\n --header-margin: 0 0 var(--nano-spacing-md) 0;\n }\n}\n@container footer-container (max-width: 1023px) {\n :host .top,\n :host .middle,\n :host .bottom {\n --horizontal-padding: var(--nano-spacing-l);\n }\n}\n@container footer-container (max-width: 1346px) {\n :host .top,\n :host .middle,\n :host .bottom {\n --horizontal-padding: var(--nano-spacing-l1-default);\n }\n}\n:host .upper {\n
|
|
22428
|
+
const footerCss = ":host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }:host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }:host {\n --col-gap: var(--nano-spacing-l1-default);\n --icon-gap-md: var(--nano-spacing-md);\n --icon-gap-sm: var(--nano-spacing-sm);\n --vertical-padding: var(--nano-spacing-l1-default);\n --horizontal-padding: 0;\n --header-margin: 0 0 var(--nano-spacing-l1-default) 0;\n display: block;\n}\n:host .footer {\n container-type: inline-size;\n container-name: footer-container;\n display: flex;\n flex-direction: column;\n}\n@container footer-container (max-width: 768px) {\n :host .top,\n :host .middle,\n :host .bottom {\n --horizontal-padding: var(--nano-spacing-md);\n --col-gap: var(--nano-spacing-l);\n --vertical-padding: var(--nano-spacing-md);\n }\n :host .top-start,\n :host .top-center,\n :host .top-end {\n --header-margin: 0 0 var(--nano-spacing-md) 0;\n }\n}\n@container footer-container (max-width: 1023px) {\n :host .top,\n :host .middle,\n :host .bottom {\n --horizontal-padding: var(--nano-spacing-l);\n }\n}\n@container footer-container (max-width: 1346px) {\n :host .top,\n :host .middle,\n :host .bottom {\n --horizontal-padding: var(--nano-spacing-l1-default);\n }\n}\n:host .upper {\n border-block-start: 1px solid var(--nano-color-neutral-200);\n}\n:host .lower {\n background-color: var(--nano-color-basic-black);\n color: var(--nano-color-basic-white);\n}\n:host .top,\n:host .middle,\n:host .bottom {\n display: grid;\n gap: var(--col-gap);\n margin: 0 auto;\n max-inline-size: 1266px;\n}\n:host .top,\n:host .middle {\n grid-template-columns: repeat(3, 1fr);\n padding: var(--vertical-padding) var(--horizontal-padding);\n}\n:host .bottom {\n grid-template-columns: repeat(2, 1fr);\n padding-inline: var(--horizontal-padding);\n padding-block-end: var(--vertical-padding);\n}\n:host .middle-center a {\n color: inherit;\n}\n:host .middle-center a:hover {\n color: var(--nano-color-primary-1000);\n}\n:host .middle-center a:focus-visible {\n outline: var(--nano-focus-ring);\n outline-offset: var(--nano-focus-ring-offset);\n}\n:host .top-start,\n:host .top-center,\n:host .top-end {\n flex-direction: column;\n}\n:host .middle-start,\n:host .middle-center,\n:host .middle-end {\n align-items: center;\n}\n:host .middle-start {\n display: flex;\n justify-content: flex-start;\n}\n:host .middle-center {\n display: flex;\n justify-content: center;\n gap: var(--icon-gap-md);\n flex-wrap: nowrap;\n}\n:host .middle-end {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 20rem));\n gap: var(--icon-gap-sm);\n justify-content: end;\n}\n:host [slot=middle-end] {\n inline-size: 100%;\n}\n:host .bottom-start p,\n:host .bottom-start ::slotted(p), .bottom-start :host::slotted(p) {\n font-weight: var(--nano-font-weight-normal) !important;\n font-size: var(--nano-font-size-xs) !important;\n line-height: var(--nano-line-height-normal) !important;\n letter-spacing: var(--nano-letter-spacing-loose) !important;\n margin-block: 0 !important;\n}\n:host .bottom-end {\n display: flex;\n justify-content: flex-end;\n}\n:host .bottom-end ::slotted(*), .bottom-end :host::slotted(*) {\n --input-font-size: var(--nano-font-size-2xs) !important;\n max-inline-size: 9rem !important;\n}\n@container footer-container (max-width: 912px) {\n :host .top,\n :host .middle,\n :host .bottom {\n grid-template-columns: 1fr;\n }\n :host .middle-center {\n flex-wrap: wrap;\n }\n :host .middle-end {\n grid-template-columns: minmax(0, 6.6rem);\n }\n :host .bottom {\n display: flex;\n flex-direction: column-reverse;\n align-items: center;\n }\n :host .middle-start,\n :host .middle-center,\n :host .middle-end {\n justify-content: center;\n }\n}";
|
|
22389
22429
|
|
|
22390
22430
|
/**
|
|
22391
22431
|
* The footer is used to provide navigation, copyright info and links to social media platforms.
|
|
@@ -22409,10 +22449,9 @@ class NanoFooter {
|
|
|
22409
22449
|
}
|
|
22410
22450
|
get host() { return getElement(this); }
|
|
22411
22451
|
componentWillLoad() {
|
|
22412
|
-
addGlobalStylesheetToShadow(this.host.shadowRoot);
|
|
22413
22452
|
}
|
|
22414
22453
|
render() {
|
|
22415
|
-
return (hAsync("footer", { key: '
|
|
22454
|
+
return (hAsync("footer", { key: '7df3395d83480c2efaffd3a745dcb8486492ec8d', class: "footer" }, hAsync("div", { key: '2277f9b209312a0be9c503590f9871c3da7ab7c5', class: "upper" }, hAsync("div", { key: '43ca2ad3f23948f23d787c3179f6012021fe0786', class: "top" }, hAsync("div", { key: '05ee9cb69076053c9accbae4d188232d344e7bf0', class: "top-start" }, hAsync("slot", { key: 'a34bf50a87e10191e65d0be67f88c16abcf48304', name: "top-start_heading" }), hAsync("slot", { key: 'db386e86277ae22fa9b5e7723c78ec48b4ff5444', name: "top-start_content" })), hAsync("div", { key: '061fd17bfdb8ad8af11dce8cd3abac07d7c58290', class: "top-center" }, hAsync("slot", { key: '885c3acef88311528147a249ca29003ec64b10c0', name: "top-center_heading" }), hAsync("slot", { key: '8d4f513adfd5f24880ca76a214d2d2051d3b9ad7', name: "top-center_content" })), hAsync("div", { key: 'f6138faa2e07af7e9e46a20e1510708f58ddba27', class: "top-end" }, hAsync("slot", { key: 'aa7570bfa51e27ec2745b2563db6736c1b7def19', name: "top-end_heading" }), hAsync("slot", { key: '9dd64f4ad61d9a0d5dd1b305e9089c5190e89738', name: "top-end_content" })))), hAsync("div", { key: 'bbf554d8a85ee66cf0a38f82a8de608615510722', class: "lower nano-theme-dark" }, hAsync("div", { key: '4a46e9541cc2fa7b45cfa3fd3a8628e5aed47eae', class: "middle" }, hAsync("div", { key: 'ef13e5c2a35f64533bba7522fa34c964c4ee8acc', class: "middle-start" }, hAsync("img", { key: '2bf403ca600f0588be99898b4e0a42ee5f64f736', src: getAssetPath('../nano-assets/ont-logo-light.svg'), alt: "Oxford Nanopore Technologies logo. Featuring a stylised representation of a nanopore,\n (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.", height: "46" })), hAsync("div", { key: 'c3796b77148a0ba37fba2a7d1f3583233294de22', class: "middle-center" }, hAsync("a", { key: 'abd8ff0fcbb1b3e7365090310c67ae0c29a8073f', href: "https://x.com/nanopore", target: "_blank" }, hAsync("nano-icon", { key: '78ec0f32afa4da8f87fce46f36c2958a61cadaef', name: "brands/x-twitter", size: "large", ariaLabel: "X (formerly Twitter)" })), hAsync("a", { key: '28315142cc17313a65d9039601b26bbe2400d715', href: "https://bsky.app/profile/nanoporetech.com", target: "_blank" }, hAsync("nano-icon", { key: '155bedeeea937afe7740c867f9780ad26dd6eadf', name: "brands/bluesky", size: "large", ariaLabel: "Bluesky" })), hAsync("a", { key: '4047f00cd32d045bd46660aaa9eb17536a5555f4', href: "https://www.youtube.com/channel/UC5yMlYjHSgFfZ37LYq-dzig", target: "_blank" }, hAsync("nano-icon", { key: '63e9bb9f849a10b70b1a5cd32c1f9545587f8902', name: "brands/youtube", size: "large", ariaLabel: "YouTube" })), hAsync("a", { key: 'fd2f4d639c13c99523a9f026457414aa805171bc', href: "https://www.facebook.com/Oxford-Nanopore-Technologies-251034380246/", target: "_blank" }, hAsync("nano-icon", { key: '71a31a51945079e3419ce150a7908db2125a6523', name: "brands/facebook", size: "large", ariaLabel: "Facebook" })), hAsync("a", { key: '426b6c582345b1e32bbd0e6ca206a75cd56ed434', href: "https://www.linkedin.com/company/oxford-nanopore-technologies", target: "_blank" }, hAsync("nano-icon", { key: 'ec8256f6a70d0bb68beacab2a8c8adc381d26661', name: "brands/linkedin", size: "large", ariaLabel: "LinkedIn" })), hAsync("a", { key: 'ddf5456cb764238fb5d932b2b44cf5466e82ad2f', href: "https://www.instagram.com/oxfordnanopore", target: "_blank" }, hAsync("nano-icon", { key: '293464c660b8734f0bae8eb612c8377e763b8053', name: "brands/instagram", size: "large", ariaLabel: "Instagram" }))), hAsync("div", { key: '6b7ed0e2ad110329ce9c5e4e085278d4e7dd4568', class: "middle-end" }, hAsync("slot", { key: '15c3d94e8f35ee98fafdc6f062d9639b0ac54b63', name: "middle-end" }))), hAsync("div", { key: 'a72b24bd18b825b160608a1b20e221b37c070bc4', class: "bottom" }, hAsync("div", { key: 'a63f935bacfc660dc1c45e0dcb43514272837fdd', class: "bottom-start" }, hAsync("slot", { key: '1fb95aa9e6da5ae676470cf532c47ecbe5ae0015', name: "bottom-start" }, hAsync("p", { key: 'd78582a9baa27c818155577a7a49ccbc6b0fe141' }, "\u00A9 2008 - 2025 Oxford Nanopore Technologies plc. All rights reserved. Registered Office: Gosling Building, Edmund Halley Road, Oxford Science Park, OX4 4DQ, UK | Registered No. 05386273 | VAT No 336942382. Oxford Nanopore Technologies, the Wheel icon, EPI2ME, Flongle, GridION, Metrichor, MinION, MinIT, MinKNOW, Plongle, PromethION, SmidgION, Ubik and VolTRAX are registered trademarks of Oxford Nanopore Technologies plc in various countries. Oxford Nanopore Technologies products are not intended for use for health assessment or to diagnose, treat, mitigate, cure, or prevent any disease or condition."))), hAsync("div", { key: '08a48aaf322de5c4292e24803e8ca6da40e1e3c5', class: "bottom-end" }, hAsync("slot", { key: '81873c5375cc33b1f1b533354b960a66eadaf94b', name: "bottom-end" }))))));
|
|
22416
22455
|
}
|
|
22417
22456
|
static get style() { return footerCss; }
|
|
22418
22457
|
static get cmpMeta() { return {
|
|
@@ -22710,12 +22749,12 @@ class NanoTab {
|
|
|
22710
22749
|
}
|
|
22711
22750
|
};
|
|
22712
22751
|
render() {
|
|
22713
|
-
return (h(Host, { key: '
|
|
22752
|
+
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: {
|
|
22714
22753
|
tab: true,
|
|
22715
22754
|
'tab--active': this.active,
|
|
22716
22755
|
'tab--disabled': this.disabled,
|
|
22717
22756
|
'tab--closable': this.closable,
|
|
22718
|
-
} }, h("slot", { key: '
|
|
22757
|
+
} }, 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" })))));
|
|
22719
22758
|
}
|
|
22720
22759
|
static get style() { return tabCss; }
|
|
22721
22760
|
static get cmpMeta() { return {
|
|
@@ -22761,10 +22800,10 @@ class NanoTabContent {
|
|
|
22761
22800
|
requestAnimationFrame(() => (this.ready = true));
|
|
22762
22801
|
}
|
|
22763
22802
|
render() {
|
|
22764
|
-
return (h(Host, { key: '
|
|
22803
|
+
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: {
|
|
22765
22804
|
ready: this.ready,
|
|
22766
22805
|
'nano-tab-content': true,
|
|
22767
|
-
} }, h("div", { key: '
|
|
22806
|
+
} }, h("div", { key: '82758de9b18d8ccacd47ebf84151905eb6b88cc0', part: "base", class: "nano-tab-content" }, h("slot", { key: '67156ec26a34bf03503e721b1ec2869e3997e847' }))));
|
|
22768
22807
|
}
|
|
22769
22808
|
static get style() { return tabContentCss; }
|
|
22770
22809
|
static get cmpMeta() { return {
|
|
@@ -23339,10 +23378,10 @@ class NanoTable {
|
|
|
23339
23378
|
this.cleanUpObservers();
|
|
23340
23379
|
}
|
|
23341
23380
|
render() {
|
|
23342
|
-
return (h(Host, { key: '
|
|
23381
|
+
return (h(Host, { key: '84b2998c112a5d929d5dba88961a309ce4d0fff9', class: {
|
|
23343
23382
|
'nano-table': true,
|
|
23344
23383
|
'nano-table--props-ready': this.propsReady,
|
|
23345
|
-
} }, this.scrollable && (h("nano-masked-overflow", { key: '
|
|
23384
|
+
} }, 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' })));
|
|
23346
23385
|
}
|
|
23347
23386
|
static get watchers() { return {
|
|
23348
23387
|
"compact": ["handleCompactChange"],
|
|
@@ -23412,8 +23451,8 @@ class NanoTag {
|
|
|
23412
23451
|
render() {
|
|
23413
23452
|
return (this.closable &&
|
|
23414
23453
|
!this.containsAnchor() && [
|
|
23415
|
-
h("slot", { key: '
|
|
23416
|
-
h("nano-icon-button", { key: '
|
|
23454
|
+
h("slot", { key: 'a1a5a458c6bb76ab3c565d33830236a5bbda9408' }),
|
|
23455
|
+
h("nano-icon-button", { key: '23201b4215ff0aefbc34fdaba31b9006499e2716', label: "Close", "icon-name": "light/xmark-large", onKeyDown: this.onKeyDown, onClick: this.handleClick }),
|
|
23417
23456
|
]);
|
|
23418
23457
|
}
|
|
23419
23458
|
static get style() { return tagCss; }
|
|
@@ -23835,53 +23874,36 @@ class Option {
|
|
|
23835
23874
|
}; }
|
|
23836
23875
|
}
|
|
23837
23876
|
|
|
23838
|
-
const progressBarCss = ":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}}
|
|
23877
|
+
const progressBarCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}nano-progress-bar{--indicator-color:var(--nano-color-primary-1000);--track-color:var(--nano-color-neutral-300);--border-radius:1.25rem;--height:0.625rem;display:grid;position:relative;overflow:clip;border-radius:var(--border-radius);height:var(--height);font-size:var(--height)}nano-progress-bar[size=small]{--height:0.3125rem}nano-progress-bar[size=large]{--height:0.9375rem}nano-progress-bar progress{appearance:none;width:100%;height:inherit;border-radius:var(--border-radius);background-color:var(--track-color);grid-area:1/1}nano-progress-bar>label{grid-area:1/1;position:absolute;inset:0}nano-progress-bar>label progress{position:absolute;inset:0}nano-progress-bar:has(progress:not([value]))::after{content:\"\";width:100%;inset:0;display:block;transform:translateZ(0);animation:indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);background-color:var(--indicator-color);grid-area:1/1;border-radius:none}nano-progress-bar progress:not([value])::-webkit-progress-bar{border-radius:var(--border-radius);background-color:var(--track-color)}nano-progress-bar progress:not([value])::-moz-progress-bar{border-radius:var(--border-radius);background-color:var(--track-color)}@keyframes indeterminate{0%{scale:1 1;transform:translateX(-100%) translateZ(0)}75%,100%{scale:1 1;transform:translateX(100%) translateZ(0)}}nano-progress-bar progress[value]::-webkit-progress-bar{border-radius:var(--border-radius);background-color:var(--track-color)}nano-progress-bar progress[value]::-webkit-progress-value{background-color:var(--indicator-color);-webkit-transition:inline-size var(--nano-transition-fast);transition:inline-size var(--nano-transition-fast)}nano-progress-bar progress[value]::-moz-progress-bar{background-color:var(--indicator-color);-moz-transition:inline-size var(--nano-transition-fast);transition:inline-size var(--nano-transition-fast)}nano-progress-bar[show-percent] progress[value]::before{content:attr(value) \"%\";position:absolute;inline-size:attr(value %);min-inline-size:6%;top:50%;translate:0 -50%;text-align:center;transition:inline-size var(--nano-transition-fast);font-size:0.75em;color:var(--nano-color-base-0)}";
|
|
23839
23878
|
|
|
23840
23879
|
/**
|
|
23841
23880
|
* Shows the status of an ongoing operation.
|
|
23842
23881
|
*
|
|
23843
|
-
* @version
|
|
23844
|
-
* @status
|
|
23845
|
-
*
|
|
23846
|
-
* @slot - A label to show inside the indicator.
|
|
23882
|
+
* @version 8.0.0
|
|
23883
|
+
* @status new
|
|
23884
|
+
* @type CSS Only
|
|
23847
23885
|
*
|
|
23848
|
-
* @
|
|
23849
|
-
* @part indicator - The progress bar indicator.
|
|
23850
|
-
* @part label - The progress bar label.
|
|
23886
|
+
* @slot - Used for mandatory `<progress>` element and optional `<label>`
|
|
23851
23887
|
*/
|
|
23852
23888
|
class ProgressBar {
|
|
23853
23889
|
constructor(hostRef) {
|
|
23854
23890
|
registerInstance(this, hostRef);
|
|
23855
23891
|
}
|
|
23856
|
-
get host() { return getElement(this); }
|
|
23857
|
-
/** The progress bar's percentage, 0 to 100. */
|
|
23858
|
-
value = 0;
|
|
23859
|
-
/** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
|
|
23860
|
-
indeterminate = false;
|
|
23861
23892
|
/** Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot. */
|
|
23862
23893
|
showPercent = false;
|
|
23863
|
-
|
|
23864
|
-
|
|
23865
|
-
'progress-bar': true,
|
|
23866
|
-
'progress-bar--indeterminate': this.indeterminate,
|
|
23867
|
-
}, role: "progressbar", title: this.host.title || undefined, "aria-label": "Progress", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.value }, h("div", { key: 'dd80b47ed6627db8d93bf20a7ef096d44757ec56', part: "indicator", class: "progress-bar__indicator", style: {
|
|
23868
|
-
width: !this.indeterminate ? `${this.value}%` : undefined,
|
|
23869
|
-
} }, h("span", { key: '7b967332cff45da08a49008ac727f247750347ae', part: "label", class: "progress-bar__label" }, h("slot", { key: '5d2c53909892f8c81e151ec64a337e656e7e4dae' }, !this.indeterminate && this.showPercent
|
|
23870
|
-
? `${this.value}%`
|
|
23871
|
-
: ''))))));
|
|
23872
|
-
}
|
|
23894
|
+
/** The height of the progress-bar */
|
|
23895
|
+
size = 'medium';
|
|
23873
23896
|
static get style() { return progressBarCss; }
|
|
23874
23897
|
static get cmpMeta() { return {
|
|
23875
|
-
"$flags$":
|
|
23898
|
+
"$flags$": 0,
|
|
23876
23899
|
"$tagName$": "nano-progress-bar",
|
|
23877
23900
|
"$members$": {
|
|
23878
|
-
"
|
|
23879
|
-
"
|
|
23880
|
-
"showPercent": [4, "show-percent"]
|
|
23901
|
+
"showPercent": [516, "show-percent"],
|
|
23902
|
+
"size": [513]
|
|
23881
23903
|
},
|
|
23882
23904
|
"$listeners$": undefined,
|
|
23883
23905
|
"$lazyBundleId$": "-",
|
|
23884
|
-
"$attrsToReflect$": []
|
|
23906
|
+
"$attrsToReflect$": [["showPercent", "show-percent"], ["size", "size"]]
|
|
23885
23907
|
}; }
|
|
23886
23908
|
}
|
|
23887
23909
|
|
|
@@ -24604,23 +24626,23 @@ class Rating {
|
|
|
24604
24626
|
else {
|
|
24605
24627
|
displayValue = this.isHovering ? this.hoverValue : this.value;
|
|
24606
24628
|
}
|
|
24607
|
-
return (h(Host, { key: '
|
|
24629
|
+
return (h(Host, { key: '1f1a4c5f6b8dea2419e75be53db6e74d4455c3c5', class: "nano-rating" }, h("div", { key: '6898eef81bc7e3d634b3054a4694f49db79929c8', class: "rating-wrap" }, h("div", { key: 'bbad068f69e99c12083bb53c00a25b2dff02ddb7', dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
|
|
24608
24630
|
rating: true,
|
|
24609
24631
|
'rating--readonly': this.readonly,
|
|
24610
24632
|
'rating--disabled': this.disabled,
|
|
24611
|
-
}, "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 }, h("span", { key: '
|
|
24633
|
+
}, "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 }, h("span", { key: 'd2518d1ec73803cdc284c64ff4fcee9c86f6077d', class: "rating__symbols rating__symbols--inactive" }, counter.map((index) => (h("span", { class: {
|
|
24612
24634
|
rating__symbol: true,
|
|
24613
24635
|
'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
|
|
24614
24636
|
},
|
|
24615
24637
|
// Users can click the current value to clear the rating. When this happens, we set this.isHovering to
|
|
24616
24638
|
// false to prevent the hover state from confusing them as they move the mouse out of the control. This
|
|
24617
24639
|
// extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.
|
|
24618
|
-
onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), h("span", { key: '
|
|
24640
|
+
onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), h("span", { key: '046a97718d174445372c909eee0d061c4effd770', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
|
|
24619
24641
|
clip: this.clip(displayValue),
|
|
24620
24642
|
} }, counter.map((index) => (h("span", { class: {
|
|
24621
24643
|
rating__symbol: true,
|
|
24622
24644
|
'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
|
|
24623
|
-
}, innerHTML: this.symbol(index + 1) })))), h("input", { key: '
|
|
24645
|
+
}, innerHTML: this.symbol(index + 1) })))), h("input", { key: '8a0a62b7419a719e2a2cf08e361aae299dea7d65', type: "hidden", name: this.name, value: this.value, disabled: this.disabled || this.readonly })))));
|
|
24624
24646
|
}
|
|
24625
24647
|
static get watchers() { return {
|
|
24626
24648
|
"value": ["handleValueChange"],
|
|
@@ -24881,7 +24903,7 @@ class ResizeObserve {
|
|
|
24881
24903
|
this.ro.disconnect();
|
|
24882
24904
|
}
|
|
24883
24905
|
render() {
|
|
24884
|
-
return (h(Host, { key: '
|
|
24906
|
+
return (h(Host, { key: '67ae39458d0f21c7100481c6aa68f9455e468d86', class: "nano-resize-observe" }, h("slot", { key: '503108cec78fcfda303a9e392e1903ec7acfc244' }), !!this.notifyContentFit &&
|
|
24885
24907
|
(this.contentFitX !== null || this.contentFitY !== null) && [
|
|
24886
24908
|
this.contentFitX ? (h("slot", { name: "content-fit-x" })) : (h("slot", { name: "content-nofit-x" })),
|
|
24887
24909
|
this.contentFitY ? (h("slot", { name: "content-fit-y" })) : (h("slot", { name: "content-nofit-y" })),
|
|
@@ -25608,30 +25630,30 @@ class Select {
|
|
|
25608
25630
|
disabled,
|
|
25609
25631
|
clearControl: this.clearable,
|
|
25610
25632
|
}))(this);
|
|
25611
|
-
return (h(Host, { key: '
|
|
25633
|
+
return (h(Host, { key: 'b85a8a4b4566ce33e0e7bae347c765037d1ec34b', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
|
|
25612
25634
|
'has-value': !!this.value.length || !!this.inputSearchVal.length,
|
|
25613
25635
|
'has-focus': this.hasFocus,
|
|
25614
25636
|
'is-invalid': this._invalid === true,
|
|
25615
25637
|
'is-valid': this._invalid === false,
|
|
25616
25638
|
'nano-select': true,
|
|
25617
|
-
} }, h(FormControlWrap, { key: '
|
|
25639
|
+
} }, h(FormControlWrap, { key: '42335a9fda2b4e2560f33e5d4c40a58403e482d2', ...wrapOptions, class: {
|
|
25618
25640
|
'has-error': !!this.errorMessage &&
|
|
25619
25641
|
this.showInlineError &&
|
|
25620
25642
|
this._invalid === true,
|
|
25621
25643
|
'has-helper': this.hasHelperSlot,
|
|
25622
25644
|
'is-open': this.hasOpened,
|
|
25623
25645
|
masked: this.mask,
|
|
25624
|
-
} }, h(FormControl, { key: '
|
|
25625
|
-
this.mask && (h("div", { key: '
|
|
25626
|
-
h("input", { key: '
|
|
25627
|
-
])), !this.readonly && !this.disabled && (h("nano-datalist", { key: '
|
|
25646
|
+
} }, 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 && [
|
|
25647
|
+
this.mask && (h("div", { key: '488c94ddb9e49c9e3f5a099a77cb0e879a02e1e2', class: "select__mask" }, this.getLabel(this.value))),
|
|
25648
|
+
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 }),
|
|
25649
|
+
])), !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) => {
|
|
25628
25650
|
e.preventDefault();
|
|
25629
25651
|
this.removeValue(e.detail.value);
|
|
25630
25652
|
}, onNanoOptionsUpdated: this.setOptions, onNanoSelect: this.setValue,
|
|
25631
25653
|
// @ts-expect-error - this bubbles from the nano-dropdown
|
|
25632
25654
|
onNanoShow: () => (this.hasOpened = true), onNanoHide: () => (this.hasOpened = false) }, this.allowCustomValues &&
|
|
25633
25655
|
this.multiple &&
|
|
25634
|
-
!!this.inputSearchVal && (h("nano-option", { key: '
|
|
25656
|
+
!!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 &&
|
|
25635
25657
|
this.valArray.map((val) => {
|
|
25636
25658
|
return (h("option", { value: val, selected: true }, val));
|
|
25637
25659
|
}), !this.allowCustomValues &&
|
|
@@ -25748,10 +25770,10 @@ class Skeleton {
|
|
|
25748
25770
|
/** When `true`, the skeleton will animate. */
|
|
25749
25771
|
animated = true;
|
|
25750
25772
|
render() {
|
|
25751
|
-
return (h(Host, { key: '
|
|
25773
|
+
return (h(Host, { key: 'f73bd1aaaf1ed443643eb6fee3421071be76b064', class: "nano-skeleton" }, h("div", { key: 'a4023374bcd7855ef2638623b2dbf29ac758f0a6', class: {
|
|
25752
25774
|
skeleton: true,
|
|
25753
25775
|
animate: this.animated,
|
|
25754
|
-
} }, h("div", { key: '
|
|
25776
|
+
} }, h("div", { key: 'bf89fd85a10834bb798515f46b51a4b26d0f885f', class: "skeleton__indicator" }, "\u00A0"))));
|
|
25755
25777
|
}
|
|
25756
25778
|
static get style() { return skeletonCss; }
|
|
25757
25779
|
static get cmpMeta() { return {
|
|
@@ -25799,7 +25821,7 @@ let Slide$2 = class Slide {
|
|
|
25799
25821
|
});
|
|
25800
25822
|
}
|
|
25801
25823
|
render() {
|
|
25802
|
-
return (h(Host, { key: '
|
|
25824
|
+
return (h(Host, { key: 'e2de4b21a269c802cf727b7ffd8433d4f959d3fb', class: "nano-slide" }, h("slot", { key: '0d3fd5785d8e617307fd6590e0ffbca33693c410' })));
|
|
25803
25825
|
}
|
|
25804
25826
|
static get watchers() { return {
|
|
25805
25827
|
"ready": ["readyChange"]
|
|
@@ -28819,15 +28841,15 @@ class Slides {
|
|
|
28819
28841
|
this.destroyflickity();
|
|
28820
28842
|
}
|
|
28821
28843
|
render() {
|
|
28822
|
-
return (h(Host, { key: '
|
|
28844
|
+
return (h(Host, { key: '88e0cbecd056181f9b3f8c244d8b7c59dfb94e16', class: "nano-slides" }, h("div", { key: '728f56cad9f2dc011dcc5c1051061102aaf0da63', class: {
|
|
28823
28845
|
slideshow: true,
|
|
28824
28846
|
ready: this.ready,
|
|
28825
28847
|
'not-ready': !this.ready,
|
|
28826
|
-
}, part: "base" }, h("div", { key: '
|
|
28848
|
+
}, part: "base" }, h("div", { key: 'f4d40a6cf600378f311c8d74485802ad37a0840b', ref: (div) => (this.flickityEl = div), class: {
|
|
28827
28849
|
'flickity-container': true,
|
|
28828
28850
|
'slides-ready': this.slidesReady,
|
|
28829
28851
|
'slides-not-ready': !this.slidesReady,
|
|
28830
|
-
}, part: "slide-container" }, h("slot", { key: '
|
|
28852
|
+
}, part: "slide-container" }, h("slot", { key: 'a2d787ba9f4299216bfd99af5a39d6940c1ddd3a' })), h("div", { key: '2f25d4f413ca885408a0062d57b40c57c813ae32', class: "ui-extras" }, h("slot", { key: '234f553982373a1914455fc0c4b339ac6d147dc2', name: "ui" })))));
|
|
28831
28853
|
}
|
|
28832
28854
|
static get watchers() { return {
|
|
28833
28855
|
"options": ["optionsChanged"],
|
|
@@ -29606,7 +29628,7 @@ class Sortable {
|
|
|
29606
29628
|
}
|
|
29607
29629
|
}
|
|
29608
29630
|
render() {
|
|
29609
|
-
return (h(Host, { key: '
|
|
29631
|
+
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' })));
|
|
29610
29632
|
}
|
|
29611
29633
|
static get watchers() { return {
|
|
29612
29634
|
"itemSelector": ["handleItemSelectorChange"],
|
|
@@ -29671,7 +29693,7 @@ class Spinner {
|
|
|
29671
29693
|
this.hasText = !!this.el.childNodes.length;
|
|
29672
29694
|
}
|
|
29673
29695
|
render() {
|
|
29674
|
-
return (h(Host, { key: '
|
|
29696
|
+
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" })))));
|
|
29675
29697
|
}
|
|
29676
29698
|
static get style() { return spinnerCss; }
|
|
29677
29699
|
static get cmpMeta() { return {
|
|
@@ -30611,12 +30633,12 @@ class Sticker {
|
|
|
30611
30633
|
this.hasBootstrapped = false;
|
|
30612
30634
|
}
|
|
30613
30635
|
render() {
|
|
30614
|
-
return (h(Host, { key: '
|
|
30636
|
+
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: {
|
|
30615
30637
|
sticker: true,
|
|
30616
30638
|
sticky: this.isRootSticker && this.isSticky,
|
|
30617
30639
|
stuck: this.isStuck && this.isRootSticker && this.isSticky,
|
|
30618
30640
|
hide: this.isRootSticker && this.hide && this.isStuck,
|
|
30619
|
-
}, ref: (div) => (this.sticker = div) }, h("div", { key: '
|
|
30641
|
+
}, ref: (div) => (this.sticker = div) }, h("div", { key: '03eb024bd50a757a5a75097e34dd70fc36638fa7', class: "sticker-content", ref: (div) => (this.content = div) }, h("slot", { key: '50cc24e4a2cb1d7cef2a439b99b688579a77e338' })))));
|
|
30620
30642
|
}
|
|
30621
30643
|
static get watchers() { return {
|
|
30622
30644
|
"trigger": ["updateTriggerOffset"],
|
|
@@ -30905,10 +30927,10 @@ class Tooltip {
|
|
|
30905
30927
|
this.popover.destroy();
|
|
30906
30928
|
}
|
|
30907
30929
|
render() {
|
|
30908
|
-
return (h(Host, { key: '
|
|
30930
|
+
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: {
|
|
30909
30931
|
tooltip: true,
|
|
30910
30932
|
'tooltip--open': this.open,
|
|
30911
|
-
}, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, h("slot", { key: '
|
|
30933
|
+
}, 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 })))));
|
|
30912
30934
|
}
|
|
30913
30935
|
static get watchers() { return {
|
|
30914
30936
|
"content": ["setLabel"],
|