@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.js
CHANGED
|
@@ -8750,9 +8750,23 @@ function addGlobalStylesheetToShadow(shadowRoot) {
|
|
|
8750
8750
|
let rule = null;
|
|
8751
8751
|
let globalStylesheet = [];
|
|
8752
8752
|
for (stylesheet of globalStylesheets) {
|
|
8753
|
-
if (!(stylesheet instanceof CSSStyleSheet))
|
|
8753
|
+
if (!(stylesheet instanceof CSSStyleSheet)) {
|
|
8754
8754
|
continue;
|
|
8755
|
-
|
|
8755
|
+
}
|
|
8756
|
+
let cssRules;
|
|
8757
|
+
try {
|
|
8758
|
+
// Attempt to access the cssRules of the stylesheet
|
|
8759
|
+
cssRules = stylesheet?.cssRules;
|
|
8760
|
+
// no cssRules? skip it
|
|
8761
|
+
if (!cssRules)
|
|
8762
|
+
continue;
|
|
8763
|
+
}
|
|
8764
|
+
catch (e) {
|
|
8765
|
+
// some stylesheets may not be accessible due to CORS or other restrictions
|
|
8766
|
+
console.warn('Unable to access stylesheet:', stylesheet, e);
|
|
8767
|
+
continue;
|
|
8768
|
+
}
|
|
8769
|
+
for (rule of cssRules) {
|
|
8756
8770
|
// arbitrary piece of text to check for that appears early in the `nano-components` stylesheet
|
|
8757
8771
|
// this is a bit fragile but does the job
|
|
8758
8772
|
if (rule instanceof CSSLayerBlockRule &&
|
|
@@ -9070,7 +9084,7 @@ class DataList {
|
|
|
9070
9084
|
writeTask(() => {
|
|
9071
9085
|
if (this.open) {
|
|
9072
9086
|
const { height, top } = this.nanoDropdown.tetherTo.getBoundingClientRect();
|
|
9073
|
-
this.nanoDropdown.style.setProperty('--max-height', window.innerHeight - (height + top + 40)
|
|
9087
|
+
this.nanoDropdown.style.setProperty('--max-height', `max(${window.innerHeight - (height + top + 40)}px, 48vw)`);
|
|
9074
9088
|
}
|
|
9075
9089
|
this.nanoDropdown.open = this.open;
|
|
9076
9090
|
if (this.connectedInput) {
|
|
@@ -9488,18 +9502,18 @@ class DataList {
|
|
|
9488
9502
|
}
|
|
9489
9503
|
}
|
|
9490
9504
|
render() {
|
|
9491
|
-
return (h(Host, { key: '
|
|
9505
|
+
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
|
|
9492
9506
|
? 'Select options from the list below'
|
|
9493
|
-
: undefined }, h("nano-dropdown", { key: '
|
|
9507
|
+
: 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: {
|
|
9494
9508
|
dlist__dropdown: true,
|
|
9495
9509
|
'dlist--isfiltered': this.isFiltered,
|
|
9496
|
-
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '
|
|
9510
|
+
}, 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: {
|
|
9497
9511
|
dlist__menu: true,
|
|
9498
9512
|
'dlist__menu--open': this.dropwdownOpen,
|
|
9499
|
-
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '
|
|
9513
|
+
}, 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: {
|
|
9500
9514
|
dlist__menu: true,
|
|
9501
9515
|
'dlist__menu--open': this.dropwdownOpen,
|
|
9502
|
-
} }, h("slot", { key: '
|
|
9516
|
+
} }, 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.")))));
|
|
9503
9517
|
}
|
|
9504
9518
|
static get watchers() { return {
|
|
9505
9519
|
"open": ["openWatcher"],
|
|
@@ -14133,7 +14147,7 @@ class FieldValidator {
|
|
|
14133
14147
|
}; }
|
|
14134
14148
|
}
|
|
14135
14149
|
|
|
14136
|
-
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}";
|
|
14150
|
+
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}";
|
|
14137
14151
|
|
|
14138
14152
|
let fileInputIds = 0;
|
|
14139
14153
|
let getDataTransfer = () => new DataTransfer();
|
|
@@ -14150,11 +14164,14 @@ catch {
|
|
|
14150
14164
|
}
|
|
14151
14165
|
}
|
|
14152
14166
|
/**
|
|
14153
|
-
*
|
|
14167
|
+
* Enables the selection of files for upload.
|
|
14154
14168
|
*
|
|
14155
|
-
*
|
|
14156
|
-
*
|
|
14157
|
-
*
|
|
14169
|
+
* @version 1.0.0
|
|
14170
|
+
* @status stable
|
|
14171
|
+
*
|
|
14172
|
+
* @slot label - A label for the file input. If not provided, the `label` prop will be used.
|
|
14173
|
+
* @slot helper - A helper text to display below the input.
|
|
14174
|
+
* @slot - The default slot can be used to add additional content, such as instructions or a message.
|
|
14158
14175
|
*/
|
|
14159
14176
|
class FileUpload {
|
|
14160
14177
|
constructor(hostRef) {
|
|
@@ -14198,12 +14215,18 @@ class FileUpload {
|
|
|
14198
14215
|
capture;
|
|
14199
14216
|
/** The maximum file size allowed per file (Megabytes) */
|
|
14200
14217
|
maxFileSize = 1;
|
|
14201
|
-
/** The maximum
|
|
14218
|
+
/** The maximum number of files that can be selected. Defaults to 1 */
|
|
14202
14219
|
maxFiles = 1;
|
|
14220
|
+
_label = '';
|
|
14203
14221
|
/** String to place within a label element. */
|
|
14204
|
-
label
|
|
14222
|
+
get label() {
|
|
14223
|
+
return this.required && !this._label.endsWith('*') ? this._label + ' *' : this._label;
|
|
14224
|
+
}
|
|
14225
|
+
set label(value) {
|
|
14226
|
+
this._label = value;
|
|
14227
|
+
}
|
|
14205
14228
|
/** Placeholder only used within single file uploads. */
|
|
14206
|
-
placeholder = 'Choose a file
|
|
14229
|
+
placeholder = 'Choose a file';
|
|
14207
14230
|
/** Visually hide the label - but make it accessible. */
|
|
14208
14231
|
hideLabel = false;
|
|
14209
14232
|
/** If `true`, the user must select a file to upload before submitting a form. */
|
|
@@ -14212,11 +14235,11 @@ class FileUpload {
|
|
|
14212
14235
|
disabled = false;
|
|
14213
14236
|
/** If `true`, a clear icon will appear in the input when there is a value.
|
|
14214
14237
|
* Clicking it clears the input. Only used within single file uploads. */
|
|
14215
|
-
|
|
14238
|
+
clearable = false;
|
|
14216
14239
|
/** Whether to show validation errors underneath input */
|
|
14217
14240
|
showInlineError = true;
|
|
14218
14241
|
/** When should the field perform validation */
|
|
14219
|
-
validateOn = '
|
|
14242
|
+
validateOn = 'submitThenDirty';
|
|
14220
14243
|
/** The form element to associate with this input (its form owner). Must be the id of a form. */
|
|
14221
14244
|
form;
|
|
14222
14245
|
shouldValidate() {
|
|
@@ -14228,7 +14251,7 @@ class FileUpload {
|
|
|
14228
14251
|
this.showInlineValidation();
|
|
14229
14252
|
});
|
|
14230
14253
|
}
|
|
14231
|
-
_invalid =
|
|
14254
|
+
_invalid = null;
|
|
14232
14255
|
/** This will be true when the control is in an invalid state.
|
|
14233
14256
|
* Validity is determined by the `required` prop. Or if custom validity message is set. @readonly */
|
|
14234
14257
|
get invalid() {
|
|
@@ -14308,7 +14331,6 @@ class FileUpload {
|
|
|
14308
14331
|
async showError(message) {
|
|
14309
14332
|
if (this.inputEl) {
|
|
14310
14333
|
this.inputEl.setCustomValidity(message);
|
|
14311
|
-
this.validate();
|
|
14312
14334
|
this.showInlineValidation();
|
|
14313
14335
|
}
|
|
14314
14336
|
}
|
|
@@ -14360,7 +14382,7 @@ class FileUpload {
|
|
|
14360
14382
|
checkFileType(type) {
|
|
14361
14383
|
if (!this.accept)
|
|
14362
14384
|
return true;
|
|
14363
|
-
return this.accept.match(type) && this.accept.match(type).length > 0;
|
|
14385
|
+
return !!type && this.accept.match(type) && this.accept.match(type).length > 0;
|
|
14364
14386
|
}
|
|
14365
14387
|
validate = () => {
|
|
14366
14388
|
this.errorMessage = '';
|
|
@@ -14370,24 +14392,36 @@ class FileUpload {
|
|
|
14370
14392
|
error = this.inputEl.validationMessage;
|
|
14371
14393
|
}
|
|
14372
14394
|
else {
|
|
14373
|
-
this.fileList.
|
|
14374
|
-
error =
|
|
14375
|
-
|
|
14376
|
-
|
|
14377
|
-
|
|
14378
|
-
|
|
14379
|
-
|
|
14380
|
-
|
|
14381
|
-
|
|
14382
|
-
|
|
14383
|
-
|
|
14384
|
-
|
|
14385
|
-
|
|
14386
|
-
|
|
14387
|
-
|
|
14395
|
+
if (this.fileList.length > this.maxFiles) {
|
|
14396
|
+
error = `Maximum number of files exceeded (${this.maxFiles})`;
|
|
14397
|
+
}
|
|
14398
|
+
else {
|
|
14399
|
+
this.fileList.forEach((fileItem) => {
|
|
14400
|
+
let listeItemError = null;
|
|
14401
|
+
if (!this.checkFileSize(fileItem.file.size)) {
|
|
14402
|
+
listeItemError =
|
|
14403
|
+
'Maximum file size exceeded. Max file size is ' +
|
|
14404
|
+
this.maxFileSize +
|
|
14405
|
+
'Mb';
|
|
14406
|
+
}
|
|
14407
|
+
else if (!this.checkFileType(fileItem.file.type)) {
|
|
14408
|
+
listeItemError = `File type is not allowed (${this.accept})`;
|
|
14409
|
+
}
|
|
14410
|
+
fileItem.validationMessage = listeItemError;
|
|
14411
|
+
fileItem.valid = !listeItemError;
|
|
14412
|
+
if (listeItemError) {
|
|
14413
|
+
error = listeItemError;
|
|
14414
|
+
}
|
|
14415
|
+
});
|
|
14416
|
+
}
|
|
14388
14417
|
}
|
|
14389
|
-
if (error)
|
|
14418
|
+
if (error) {
|
|
14390
14419
|
this.inputEl.setCustomValidity(error);
|
|
14420
|
+
}
|
|
14421
|
+
else {
|
|
14422
|
+
this.inputEl.setCustomValidity('');
|
|
14423
|
+
this.errorMessage = '';
|
|
14424
|
+
}
|
|
14391
14425
|
};
|
|
14392
14426
|
showInlineValidation(ev) {
|
|
14393
14427
|
if (this.validateOn === 'submitThenDirty')
|
|
@@ -14503,9 +14537,10 @@ class FileUpload {
|
|
|
14503
14537
|
h("div", { class: 'file-upload__' + eleType + '-wrap' }, h("label", { class: `file-upload__` + eleType, htmlFor: this.fileInputId, id: labelId, onDrop: (e) => {
|
|
14504
14538
|
this.onDrop(e);
|
|
14505
14539
|
this.onDragStop(e);
|
|
14506
|
-
}, 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("
|
|
14540
|
+
}, 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
|
|
14507
14541
|
? this.fileList[0].file.name
|
|
14508
|
-
: this.placeholder), !!this.value && this.
|
|
14542
|
+
: 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 &&
|
|
14543
|
+
(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) => {
|
|
14509
14544
|
if (this.canChangeFileList) {
|
|
14510
14545
|
this.publicInputEl = input;
|
|
14511
14546
|
return;
|
|
@@ -14532,11 +14567,12 @@ class FileUpload {
|
|
|
14532
14567
|
];
|
|
14533
14568
|
};
|
|
14534
14569
|
render() {
|
|
14535
|
-
return (h(Host, { key: '
|
|
14570
|
+
return (h(Host, { key: '4f495870314e3f688517b34be6749cf2b77810ea', class: "nano-file-upload" }, h("div", { key: '9baa63fe75b200913f82abb4304d73e22fbb4be4', class: {
|
|
14536
14571
|
'file-upload': true,
|
|
14537
14572
|
'file-upload--dragging': this.isDragging,
|
|
14538
14573
|
'file-upload--focus': this.hasFocus,
|
|
14539
|
-
'file-upload--invalid': this._invalid,
|
|
14574
|
+
'file-upload--invalid': this._invalid === true,
|
|
14575
|
+
'file-upload--valid': this._invalid === false,
|
|
14540
14576
|
} }, this.maxFiles > 1 ? h(this.dropArea, null) : h(this.button, null))));
|
|
14541
14577
|
}
|
|
14542
14578
|
static get watchers() { return {
|
|
@@ -14558,16 +14594,16 @@ class FileUpload {
|
|
|
14558
14594
|
"capture": [1],
|
|
14559
14595
|
"maxFileSize": [2, "max-file-size"],
|
|
14560
14596
|
"maxFiles": [2, "max-files"],
|
|
14561
|
-
"label": [
|
|
14597
|
+
"label": [6145],
|
|
14562
14598
|
"placeholder": [1],
|
|
14563
14599
|
"hideLabel": [4, "hide-label"],
|
|
14564
14600
|
"required": [4],
|
|
14565
14601
|
"disabled": [516],
|
|
14566
|
-
"
|
|
14602
|
+
"clearable": [4],
|
|
14567
14603
|
"showInlineError": [516, "show-inline-error"],
|
|
14568
14604
|
"validateOn": [1025, "validate-on"],
|
|
14569
14605
|
"form": [1],
|
|
14570
|
-
"invalid": [
|
|
14606
|
+
"invalid": [2568],
|
|
14571
14607
|
"validityMessage": [2049, "validity-message"],
|
|
14572
14608
|
"files": [6160],
|
|
14573
14609
|
"value": [6145],
|
|
@@ -19073,9 +19109,10 @@ class NanoCta {
|
|
|
19073
19109
|
/** Predefined styles when displaying a number of CTAs together */
|
|
19074
19110
|
group;
|
|
19075
19111
|
componentWillLoad() {
|
|
19076
|
-
if (!this.host.querySelector('button, a')) {
|
|
19112
|
+
if (!this.host.querySelector('button, a, div')) {
|
|
19077
19113
|
const button = document.createElement('button');
|
|
19078
19114
|
button.classList.add('nano-internal-cta');
|
|
19115
|
+
button.type = 'button';
|
|
19079
19116
|
this.host.childNodes.forEach((node) => {
|
|
19080
19117
|
button.appendChild(node);
|
|
19081
19118
|
});
|
|
@@ -21724,10 +21761,13 @@ class NanoDataTable {
|
|
|
21724
21761
|
return (h(Host, { class: "nano-data-table" }, h("div", { class: `${CSSNAMESPACE}__top-anchor`, ref: (a) => (this.topAnchorEle = a) }, "\u00A0"), h("nano-resize-observe", { onNanoResize: () => {
|
|
21725
21762
|
if (this.tablePinnedService)
|
|
21726
21763
|
this.tablePinnedService.onResize();
|
|
21727
|
-
} }), Wrap(h("div", { class: `${CSSNAMESPACE}__wrap` }, h("nano-progress-bar", {
|
|
21764
|
+
} }), Wrap(h("div", { class: `${CSSNAMESPACE}__wrap` }, h("nano-progress-bar", {
|
|
21765
|
+
// indeterminate
|
|
21766
|
+
class: {
|
|
21728
21767
|
[`${CSSNAMESPACE}__progress-bar`]: true,
|
|
21729
21768
|
[`${CSSNAMESPACE}__progress-bar--show`]: this._loading,
|
|
21730
|
-
}
|
|
21769
|
+
}
|
|
21770
|
+
}), 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: {
|
|
21731
21771
|
[`${CSSNAMESPACE}__caption`]: true,
|
|
21732
21772
|
[`${CSSNAMESPACE}__caption--hide`]: !this.showCaption,
|
|
21733
21773
|
} }, h("slot", { name: "caption" }, this.caption)), h("thead", null, h(TableHeadFootRow, { rowRenderer: this.headRender }, this.store.config.state.columns.map((colModel) => [
|
|
@@ -22387,7 +22427,7 @@ class NanoDetails {
|
|
|
22387
22427
|
}; }
|
|
22388
22428
|
}
|
|
22389
22429
|
|
|
22390
|
-
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
|
|
22430
|
+
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}";
|
|
22391
22431
|
|
|
22392
22432
|
/**
|
|
22393
22433
|
* The footer is used to provide navigation, copyright info and links to social media platforms.
|
|
@@ -22411,10 +22451,9 @@ class NanoFooter {
|
|
|
22411
22451
|
}
|
|
22412
22452
|
get host() { return getElement(this); }
|
|
22413
22453
|
componentWillLoad() {
|
|
22414
|
-
addGlobalStylesheetToShadow(this.host.shadowRoot);
|
|
22415
22454
|
}
|
|
22416
22455
|
render() {
|
|
22417
|
-
return (hAsync("footer", { key: '
|
|
22456
|
+
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" }))))));
|
|
22418
22457
|
}
|
|
22419
22458
|
static get style() { return footerCss; }
|
|
22420
22459
|
static get cmpMeta() { return {
|
|
@@ -22712,12 +22751,12 @@ class NanoTab {
|
|
|
22712
22751
|
}
|
|
22713
22752
|
};
|
|
22714
22753
|
render() {
|
|
22715
|
-
return (h(Host, { key: '
|
|
22754
|
+
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: {
|
|
22716
22755
|
tab: true,
|
|
22717
22756
|
'tab--active': this.active,
|
|
22718
22757
|
'tab--disabled': this.disabled,
|
|
22719
22758
|
'tab--closable': this.closable,
|
|
22720
|
-
} }, h("slot", { key: '
|
|
22759
|
+
} }, 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" })))));
|
|
22721
22760
|
}
|
|
22722
22761
|
static get style() { return tabCss; }
|
|
22723
22762
|
static get cmpMeta() { return {
|
|
@@ -22763,10 +22802,10 @@ class NanoTabContent {
|
|
|
22763
22802
|
requestAnimationFrame(() => (this.ready = true));
|
|
22764
22803
|
}
|
|
22765
22804
|
render() {
|
|
22766
|
-
return (h(Host, { key: '
|
|
22805
|
+
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: {
|
|
22767
22806
|
ready: this.ready,
|
|
22768
22807
|
'nano-tab-content': true,
|
|
22769
|
-
} }, h("div", { key: '
|
|
22808
|
+
} }, h("div", { key: '82758de9b18d8ccacd47ebf84151905eb6b88cc0', part: "base", class: "nano-tab-content" }, h("slot", { key: '67156ec26a34bf03503e721b1ec2869e3997e847' }))));
|
|
22770
22809
|
}
|
|
22771
22810
|
static get style() { return tabContentCss; }
|
|
22772
22811
|
static get cmpMeta() { return {
|
|
@@ -23341,10 +23380,10 @@ class NanoTable {
|
|
|
23341
23380
|
this.cleanUpObservers();
|
|
23342
23381
|
}
|
|
23343
23382
|
render() {
|
|
23344
|
-
return (h(Host, { key: '
|
|
23383
|
+
return (h(Host, { key: '84b2998c112a5d929d5dba88961a309ce4d0fff9', class: {
|
|
23345
23384
|
'nano-table': true,
|
|
23346
23385
|
'nano-table--props-ready': this.propsReady,
|
|
23347
|
-
} }, this.scrollable && (h("nano-masked-overflow", { key: '
|
|
23386
|
+
} }, 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' })));
|
|
23348
23387
|
}
|
|
23349
23388
|
static get watchers() { return {
|
|
23350
23389
|
"compact": ["handleCompactChange"],
|
|
@@ -23414,8 +23453,8 @@ class NanoTag {
|
|
|
23414
23453
|
render() {
|
|
23415
23454
|
return (this.closable &&
|
|
23416
23455
|
!this.containsAnchor() && [
|
|
23417
|
-
h("slot", { key: '
|
|
23418
|
-
h("nano-icon-button", { key: '
|
|
23456
|
+
h("slot", { key: 'a1a5a458c6bb76ab3c565d33830236a5bbda9408' }),
|
|
23457
|
+
h("nano-icon-button", { key: '23201b4215ff0aefbc34fdaba31b9006499e2716', label: "Close", "icon-name": "light/xmark-large", onKeyDown: this.onKeyDown, onClick: this.handleClick }),
|
|
23419
23458
|
]);
|
|
23420
23459
|
}
|
|
23421
23460
|
static get style() { return tagCss; }
|
|
@@ -23837,53 +23876,36 @@ class Option {
|
|
|
23837
23876
|
}; }
|
|
23838
23877
|
}
|
|
23839
23878
|
|
|
23840
|
-
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}}
|
|
23879
|
+
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)}";
|
|
23841
23880
|
|
|
23842
23881
|
/**
|
|
23843
23882
|
* Shows the status of an ongoing operation.
|
|
23844
23883
|
*
|
|
23845
|
-
* @version
|
|
23846
|
-
* @status
|
|
23847
|
-
*
|
|
23848
|
-
* @slot - A label to show inside the indicator.
|
|
23884
|
+
* @version 8.0.0
|
|
23885
|
+
* @status new
|
|
23886
|
+
* @type CSS Only
|
|
23849
23887
|
*
|
|
23850
|
-
* @
|
|
23851
|
-
* @part indicator - The progress bar indicator.
|
|
23852
|
-
* @part label - The progress bar label.
|
|
23888
|
+
* @slot - Used for mandatory `<progress>` element and optional `<label>`
|
|
23853
23889
|
*/
|
|
23854
23890
|
class ProgressBar {
|
|
23855
23891
|
constructor(hostRef) {
|
|
23856
23892
|
registerInstance(this, hostRef);
|
|
23857
23893
|
}
|
|
23858
|
-
get host() { return getElement(this); }
|
|
23859
|
-
/** The progress bar's percentage, 0 to 100. */
|
|
23860
|
-
value = 0;
|
|
23861
|
-
/** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
|
|
23862
|
-
indeterminate = false;
|
|
23863
23894
|
/** Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot. */
|
|
23864
23895
|
showPercent = false;
|
|
23865
|
-
|
|
23866
|
-
|
|
23867
|
-
'progress-bar': true,
|
|
23868
|
-
'progress-bar--indeterminate': this.indeterminate,
|
|
23869
|
-
}, 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: {
|
|
23870
|
-
width: !this.indeterminate ? `${this.value}%` : undefined,
|
|
23871
|
-
} }, h("span", { key: '7b967332cff45da08a49008ac727f247750347ae', part: "label", class: "progress-bar__label" }, h("slot", { key: '5d2c53909892f8c81e151ec64a337e656e7e4dae' }, !this.indeterminate && this.showPercent
|
|
23872
|
-
? `${this.value}%`
|
|
23873
|
-
: ''))))));
|
|
23874
|
-
}
|
|
23896
|
+
/** The height of the progress-bar */
|
|
23897
|
+
size = 'medium';
|
|
23875
23898
|
static get style() { return progressBarCss; }
|
|
23876
23899
|
static get cmpMeta() { return {
|
|
23877
|
-
"$flags$":
|
|
23900
|
+
"$flags$": 0,
|
|
23878
23901
|
"$tagName$": "nano-progress-bar",
|
|
23879
23902
|
"$members$": {
|
|
23880
|
-
"
|
|
23881
|
-
"
|
|
23882
|
-
"showPercent": [4, "show-percent"]
|
|
23903
|
+
"showPercent": [516, "show-percent"],
|
|
23904
|
+
"size": [513]
|
|
23883
23905
|
},
|
|
23884
23906
|
"$listeners$": undefined,
|
|
23885
23907
|
"$lazyBundleId$": "-",
|
|
23886
|
-
"$attrsToReflect$": []
|
|
23908
|
+
"$attrsToReflect$": [["showPercent", "show-percent"], ["size", "size"]]
|
|
23887
23909
|
}; }
|
|
23888
23910
|
}
|
|
23889
23911
|
|
|
@@ -24606,23 +24628,23 @@ class Rating {
|
|
|
24606
24628
|
else {
|
|
24607
24629
|
displayValue = this.isHovering ? this.hoverValue : this.value;
|
|
24608
24630
|
}
|
|
24609
|
-
return (h(Host, { key: '
|
|
24631
|
+
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: {
|
|
24610
24632
|
rating: true,
|
|
24611
24633
|
'rating--readonly': this.readonly,
|
|
24612
24634
|
'rating--disabled': this.disabled,
|
|
24613
|
-
}, "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: '
|
|
24635
|
+
}, "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: {
|
|
24614
24636
|
rating__symbol: true,
|
|
24615
24637
|
'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
|
|
24616
24638
|
},
|
|
24617
24639
|
// Users can click the current value to clear the rating. When this happens, we set this.isHovering to
|
|
24618
24640
|
// false to prevent the hover state from confusing them as they move the mouse out of the control. This
|
|
24619
24641
|
// extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.
|
|
24620
|
-
onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), h("span", { key: '
|
|
24642
|
+
onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), h("span", { key: '046a97718d174445372c909eee0d061c4effd770', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
|
|
24621
24643
|
clip: this.clip(displayValue),
|
|
24622
24644
|
} }, counter.map((index) => (h("span", { class: {
|
|
24623
24645
|
rating__symbol: true,
|
|
24624
24646
|
'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
|
|
24625
|
-
}, innerHTML: this.symbol(index + 1) })))), h("input", { key: '
|
|
24647
|
+
}, innerHTML: this.symbol(index + 1) })))), h("input", { key: '8a0a62b7419a719e2a2cf08e361aae299dea7d65', type: "hidden", name: this.name, value: this.value, disabled: this.disabled || this.readonly })))));
|
|
24626
24648
|
}
|
|
24627
24649
|
static get watchers() { return {
|
|
24628
24650
|
"value": ["handleValueChange"],
|
|
@@ -24883,7 +24905,7 @@ class ResizeObserve {
|
|
|
24883
24905
|
this.ro.disconnect();
|
|
24884
24906
|
}
|
|
24885
24907
|
render() {
|
|
24886
|
-
return (h(Host, { key: '
|
|
24908
|
+
return (h(Host, { key: '67ae39458d0f21c7100481c6aa68f9455e468d86', class: "nano-resize-observe" }, h("slot", { key: '503108cec78fcfda303a9e392e1903ec7acfc244' }), !!this.notifyContentFit &&
|
|
24887
24909
|
(this.contentFitX !== null || this.contentFitY !== null) && [
|
|
24888
24910
|
this.contentFitX ? (h("slot", { name: "content-fit-x" })) : (h("slot", { name: "content-nofit-x" })),
|
|
24889
24911
|
this.contentFitY ? (h("slot", { name: "content-fit-y" })) : (h("slot", { name: "content-nofit-y" })),
|
|
@@ -25610,30 +25632,30 @@ class Select {
|
|
|
25610
25632
|
disabled,
|
|
25611
25633
|
clearControl: this.clearable,
|
|
25612
25634
|
}))(this);
|
|
25613
|
-
return (h(Host, { key: '
|
|
25635
|
+
return (h(Host, { key: 'b85a8a4b4566ce33e0e7bae347c765037d1ec34b', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
|
|
25614
25636
|
'has-value': !!this.value.length || !!this.inputSearchVal.length,
|
|
25615
25637
|
'has-focus': this.hasFocus,
|
|
25616
25638
|
'is-invalid': this._invalid === true,
|
|
25617
25639
|
'is-valid': this._invalid === false,
|
|
25618
25640
|
'nano-select': true,
|
|
25619
|
-
} }, h(FormControlWrap, { key: '
|
|
25641
|
+
} }, h(FormControlWrap, { key: '42335a9fda2b4e2560f33e5d4c40a58403e482d2', ...wrapOptions, class: {
|
|
25620
25642
|
'has-error': !!this.errorMessage &&
|
|
25621
25643
|
this.showInlineError &&
|
|
25622
25644
|
this._invalid === true,
|
|
25623
25645
|
'has-helper': this.hasHelperSlot,
|
|
25624
25646
|
'is-open': this.hasOpened,
|
|
25625
25647
|
masked: this.mask,
|
|
25626
|
-
} }, h(FormControl, { key: '
|
|
25627
|
-
this.mask && (h("div", { key: '
|
|
25628
|
-
h("input", { key: '
|
|
25629
|
-
])), !this.readonly && !this.disabled && (h("nano-datalist", { key: '
|
|
25648
|
+
} }, 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 && [
|
|
25649
|
+
this.mask && (h("div", { key: '488c94ddb9e49c9e3f5a099a77cb0e879a02e1e2', class: "select__mask" }, this.getLabel(this.value))),
|
|
25650
|
+
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 }),
|
|
25651
|
+
])), !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) => {
|
|
25630
25652
|
e.preventDefault();
|
|
25631
25653
|
this.removeValue(e.detail.value);
|
|
25632
25654
|
}, onNanoOptionsUpdated: this.setOptions, onNanoSelect: this.setValue,
|
|
25633
25655
|
// @ts-expect-error - this bubbles from the nano-dropdown
|
|
25634
25656
|
onNanoShow: () => (this.hasOpened = true), onNanoHide: () => (this.hasOpened = false) }, this.allowCustomValues &&
|
|
25635
25657
|
this.multiple &&
|
|
25636
|
-
!!this.inputSearchVal && (h("nano-option", { key: '
|
|
25658
|
+
!!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 &&
|
|
25637
25659
|
this.valArray.map((val) => {
|
|
25638
25660
|
return (h("option", { value: val, selected: true }, val));
|
|
25639
25661
|
}), !this.allowCustomValues &&
|
|
@@ -25750,10 +25772,10 @@ class Skeleton {
|
|
|
25750
25772
|
/** When `true`, the skeleton will animate. */
|
|
25751
25773
|
animated = true;
|
|
25752
25774
|
render() {
|
|
25753
|
-
return (h(Host, { key: '
|
|
25775
|
+
return (h(Host, { key: 'f73bd1aaaf1ed443643eb6fee3421071be76b064', class: "nano-skeleton" }, h("div", { key: 'a4023374bcd7855ef2638623b2dbf29ac758f0a6', class: {
|
|
25754
25776
|
skeleton: true,
|
|
25755
25777
|
animate: this.animated,
|
|
25756
|
-
} }, h("div", { key: '
|
|
25778
|
+
} }, h("div", { key: 'bf89fd85a10834bb798515f46b51a4b26d0f885f', class: "skeleton__indicator" }, "\u00A0"))));
|
|
25757
25779
|
}
|
|
25758
25780
|
static get style() { return skeletonCss; }
|
|
25759
25781
|
static get cmpMeta() { return {
|
|
@@ -25801,7 +25823,7 @@ let Slide$2 = class Slide {
|
|
|
25801
25823
|
});
|
|
25802
25824
|
}
|
|
25803
25825
|
render() {
|
|
25804
|
-
return (h(Host, { key: '
|
|
25826
|
+
return (h(Host, { key: 'e2de4b21a269c802cf727b7ffd8433d4f959d3fb', class: "nano-slide" }, h("slot", { key: '0d3fd5785d8e617307fd6590e0ffbca33693c410' })));
|
|
25805
25827
|
}
|
|
25806
25828
|
static get watchers() { return {
|
|
25807
25829
|
"ready": ["readyChange"]
|
|
@@ -28821,15 +28843,15 @@ class Slides {
|
|
|
28821
28843
|
this.destroyflickity();
|
|
28822
28844
|
}
|
|
28823
28845
|
render() {
|
|
28824
|
-
return (h(Host, { key: '
|
|
28846
|
+
return (h(Host, { key: '88e0cbecd056181f9b3f8c244d8b7c59dfb94e16', class: "nano-slides" }, h("div", { key: '728f56cad9f2dc011dcc5c1051061102aaf0da63', class: {
|
|
28825
28847
|
slideshow: true,
|
|
28826
28848
|
ready: this.ready,
|
|
28827
28849
|
'not-ready': !this.ready,
|
|
28828
|
-
}, part: "base" }, h("div", { key: '
|
|
28850
|
+
}, part: "base" }, h("div", { key: 'f4d40a6cf600378f311c8d74485802ad37a0840b', ref: (div) => (this.flickityEl = div), class: {
|
|
28829
28851
|
'flickity-container': true,
|
|
28830
28852
|
'slides-ready': this.slidesReady,
|
|
28831
28853
|
'slides-not-ready': !this.slidesReady,
|
|
28832
|
-
}, part: "slide-container" }, h("slot", { key: '
|
|
28854
|
+
}, part: "slide-container" }, h("slot", { key: 'a2d787ba9f4299216bfd99af5a39d6940c1ddd3a' })), h("div", { key: '2f25d4f413ca885408a0062d57b40c57c813ae32', class: "ui-extras" }, h("slot", { key: '234f553982373a1914455fc0c4b339ac6d147dc2', name: "ui" })))));
|
|
28833
28855
|
}
|
|
28834
28856
|
static get watchers() { return {
|
|
28835
28857
|
"options": ["optionsChanged"],
|
|
@@ -29608,7 +29630,7 @@ class Sortable {
|
|
|
29608
29630
|
}
|
|
29609
29631
|
}
|
|
29610
29632
|
render() {
|
|
29611
|
-
return (h(Host, { key: '
|
|
29633
|
+
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' })));
|
|
29612
29634
|
}
|
|
29613
29635
|
static get watchers() { return {
|
|
29614
29636
|
"itemSelector": ["handleItemSelectorChange"],
|
|
@@ -29673,7 +29695,7 @@ class Spinner {
|
|
|
29673
29695
|
this.hasText = !!this.el.childNodes.length;
|
|
29674
29696
|
}
|
|
29675
29697
|
render() {
|
|
29676
|
-
return (h(Host, { key: '
|
|
29698
|
+
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" })))));
|
|
29677
29699
|
}
|
|
29678
29700
|
static get style() { return spinnerCss; }
|
|
29679
29701
|
static get cmpMeta() { return {
|
|
@@ -30613,12 +30635,12 @@ class Sticker {
|
|
|
30613
30635
|
this.hasBootstrapped = false;
|
|
30614
30636
|
}
|
|
30615
30637
|
render() {
|
|
30616
|
-
return (h(Host, { key: '
|
|
30638
|
+
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: {
|
|
30617
30639
|
sticker: true,
|
|
30618
30640
|
sticky: this.isRootSticker && this.isSticky,
|
|
30619
30641
|
stuck: this.isStuck && this.isRootSticker && this.isSticky,
|
|
30620
30642
|
hide: this.isRootSticker && this.hide && this.isStuck,
|
|
30621
|
-
}, ref: (div) => (this.sticker = div) }, h("div", { key: '
|
|
30643
|
+
}, ref: (div) => (this.sticker = div) }, h("div", { key: '03eb024bd50a757a5a75097e34dd70fc36638fa7', class: "sticker-content", ref: (div) => (this.content = div) }, h("slot", { key: '50cc24e4a2cb1d7cef2a439b99b688579a77e338' })))));
|
|
30622
30644
|
}
|
|
30623
30645
|
static get watchers() { return {
|
|
30624
30646
|
"trigger": ["updateTriggerOffset"],
|
|
@@ -30907,10 +30929,10 @@ class Tooltip {
|
|
|
30907
30929
|
this.popover.destroy();
|
|
30908
30930
|
}
|
|
30909
30931
|
render() {
|
|
30910
|
-
return (h(Host, { key: '
|
|
30932
|
+
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: {
|
|
30911
30933
|
tooltip: true,
|
|
30912
30934
|
'tooltip--open': this.open,
|
|
30913
|
-
}, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, h("slot", { key: '
|
|
30935
|
+
}, 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 })))));
|
|
30914
30936
|
}
|
|
30915
30937
|
static get watchers() { return {
|
|
30916
30938
|
"content": ["setLabel"],
|