@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
|
@@ -28,9 +28,10 @@ const NanoCta = class {
|
|
|
28
28
|
/** Predefined styles when displaying a number of CTAs together */
|
|
29
29
|
group;
|
|
30
30
|
componentWillLoad() {
|
|
31
|
-
if (!this.host.querySelector('button, a')) {
|
|
31
|
+
if (!this.host.querySelector('button, a, div')) {
|
|
32
32
|
const button = document.createElement('button');
|
|
33
33
|
button.classList.add('nano-internal-cta');
|
|
34
|
+
button.type = 'button';
|
|
34
35
|
this.host.childNodes.forEach((node) => {
|
|
35
36
|
button.appendChild(node);
|
|
36
37
|
});
|
|
@@ -114,7 +114,7 @@ const createWorkerProxy = (worker, workerMsgId, exportedMethod) => (
|
|
|
114
114
|
})
|
|
115
115
|
);
|
|
116
116
|
|
|
117
|
-
const workerPromise = Promise.resolve().then(function () { return require('./table.worker-
|
|
117
|
+
const workerPromise = Promise.resolve().then(function () { return require('./table.worker-C5ofbi7M.js'); }).then(m => m.worker);
|
|
118
118
|
const createWorkerStore = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'createWorkerStore');
|
|
119
119
|
const syncConfigToWorker = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'syncConfigToWorker');
|
|
120
120
|
const syncDataToWorker = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'syncDataToWorker');
|
|
@@ -1805,10 +1805,13 @@ const NanoDataTable = class {
|
|
|
1805
1805
|
return (renderer.h(index.Host, { class: "nano-data-table" }, renderer.h("div", { class: `${CSSNAMESPACE}__top-anchor`, ref: (a) => (this.topAnchorEle = a) }, "\u00A0"), renderer.h("nano-resize-observe", { onNanoResize: () => {
|
|
1806
1806
|
if (this.tablePinnedService)
|
|
1807
1807
|
this.tablePinnedService.onResize();
|
|
1808
|
-
} }), Wrap(renderer.h("div", { class: `${CSSNAMESPACE}__wrap` }, renderer.h("nano-progress-bar", {
|
|
1808
|
+
} }), Wrap(renderer.h("div", { class: `${CSSNAMESPACE}__wrap` }, renderer.h("nano-progress-bar", {
|
|
1809
|
+
// indeterminate
|
|
1810
|
+
class: {
|
|
1809
1811
|
[`${CSSNAMESPACE}__progress-bar`]: true,
|
|
1810
1812
|
[`${CSSNAMESPACE}__progress-bar--show`]: this._loading,
|
|
1811
|
-
}
|
|
1813
|
+
}
|
|
1814
|
+
}), renderer.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 }, renderer.h("caption", { class: {
|
|
1812
1815
|
[`${CSSNAMESPACE}__caption`]: true,
|
|
1813
1816
|
[`${CSSNAMESPACE}__caption--hide`]: !this.showCaption,
|
|
1814
1817
|
} }, renderer.h("slot", { name: "caption" }, this.caption)), renderer.h("thead", null, renderer.h(TableHeadFootRow, { rowRenderer: this.headRender }, this.store.config.state.columns.map((colModel) => [
|
|
@@ -101,7 +101,7 @@ const DataList = class {
|
|
|
101
101
|
index.writeTask(() => {
|
|
102
102
|
if (this.open) {
|
|
103
103
|
const { height, top } = this.nanoDropdown.tetherTo.getBoundingClientRect();
|
|
104
|
-
this.nanoDropdown.style.setProperty('--max-height', window.innerHeight - (height + top + 40)
|
|
104
|
+
this.nanoDropdown.style.setProperty('--max-height', `max(${window.innerHeight - (height + top + 40)}px, 48vw)`);
|
|
105
105
|
}
|
|
106
106
|
this.nanoDropdown.open = this.open;
|
|
107
107
|
if (this.connectedInput) {
|
|
@@ -523,18 +523,18 @@ const DataList = class {
|
|
|
523
523
|
}
|
|
524
524
|
}
|
|
525
525
|
render() {
|
|
526
|
-
return (renderer.h(index.Host, { key: '
|
|
526
|
+
return (renderer.h(index.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
|
|
527
527
|
? 'Select options from the list below'
|
|
528
|
-
: undefined }, renderer.h("nano-dropdown", { key: '
|
|
528
|
+
: undefined }, renderer.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: {
|
|
529
529
|
dlist__dropdown: true,
|
|
530
530
|
'dlist--isfiltered': this.isFiltered,
|
|
531
|
-
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, renderer.h("nano-menu", { key: '
|
|
531
|
+
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, renderer.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: {
|
|
532
532
|
dlist__menu: true,
|
|
533
533
|
'dlist__menu--open': this.dropwdownOpen,
|
|
534
|
-
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, renderer.h("slot", { key: '
|
|
534
|
+
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, renderer.h("slot", { key: 'f5ea0623591a368f38ce3c1e41ef431c4a9f5960', name: "list-top" }), renderer.h("slot", { key: '98804885ffb99528138867d2747af3acef3f64f7' }), renderer.h("slot", { key: '1341dc10f96570c04613153cf939aaf7dc21f0d3', name: "internal-opts" }), renderer.h("slot", { key: '84d86a667a69cd571f7b96dc29d1ddd58c3d482c', name: "list-bottom" })), renderer.h("nano-menu", { key: '9b09caa70bd106eb9e64c714072c0b88275f34c6', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
|
|
535
535
|
dlist__menu: true,
|
|
536
536
|
'dlist__menu--open': this.dropwdownOpen,
|
|
537
|
-
} }, renderer.h("slot", { key: '
|
|
537
|
+
} }, renderer.h("slot", { key: '58187330291198ff00571570e2b6b6bfdc79c905', name: "no-result" })), !!this.actvOptEles && (renderer.h("div", { key: '72ea39405f558d10de86a14704ed48e869f01426', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
|
|
538
538
|
}
|
|
539
539
|
static get watchers() { return {
|
|
540
540
|
"open": ["openWatcher"],
|
|
@@ -676,8 +676,8 @@ const NanoTag = class {
|
|
|
676
676
|
render() {
|
|
677
677
|
return (this.closable &&
|
|
678
678
|
!this.containsAnchor() && [
|
|
679
|
-
renderer.h("slot", { key: '
|
|
680
|
-
renderer.h("nano-icon-button", { key: '
|
|
679
|
+
renderer.h("slot", { key: 'a1a5a458c6bb76ab3c565d33830236a5bbda9408' }),
|
|
680
|
+
renderer.h("nano-icon-button", { key: '23201b4215ff0aefbc34fdaba31b9006499e2716', label: "Close", "icon-name": "light/xmark-large", onKeyDown: this.onKeyDown, onClick: this.handleClick }),
|
|
681
681
|
]);
|
|
682
682
|
}
|
|
683
683
|
};
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
var index = require('./index-IR1lkhwT.js');
|
|
7
7
|
var renderer = require('./renderer-h0yo23iy.js');
|
|
8
8
|
|
|
9
|
-
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}";
|
|
9
|
+
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}";
|
|
10
10
|
|
|
11
11
|
let fileInputIds = 0;
|
|
12
12
|
let getDataTransfer = () => new DataTransfer();
|
|
@@ -64,12 +64,18 @@ const FileUpload = class {
|
|
|
64
64
|
capture;
|
|
65
65
|
/** The maximum file size allowed per file (Megabytes) */
|
|
66
66
|
maxFileSize = 1;
|
|
67
|
-
/** The maximum
|
|
67
|
+
/** The maximum number of files that can be selected. Defaults to 1 */
|
|
68
68
|
maxFiles = 1;
|
|
69
|
+
_label = '';
|
|
69
70
|
/** String to place within a label element. */
|
|
70
|
-
label
|
|
71
|
+
get label() {
|
|
72
|
+
return this.required && !this._label.endsWith('*') ? this._label + ' *' : this._label;
|
|
73
|
+
}
|
|
74
|
+
set label(value) {
|
|
75
|
+
this._label = value;
|
|
76
|
+
}
|
|
71
77
|
/** Placeholder only used within single file uploads. */
|
|
72
|
-
placeholder = 'Choose a file
|
|
78
|
+
placeholder = 'Choose a file';
|
|
73
79
|
/** Visually hide the label - but make it accessible. */
|
|
74
80
|
hideLabel = false;
|
|
75
81
|
/** If `true`, the user must select a file to upload before submitting a form. */
|
|
@@ -78,11 +84,11 @@ const FileUpload = class {
|
|
|
78
84
|
disabled = false;
|
|
79
85
|
/** If `true`, a clear icon will appear in the input when there is a value.
|
|
80
86
|
* Clicking it clears the input. Only used within single file uploads. */
|
|
81
|
-
|
|
87
|
+
clearable = false;
|
|
82
88
|
/** Whether to show validation errors underneath input */
|
|
83
89
|
showInlineError = true;
|
|
84
90
|
/** When should the field perform validation */
|
|
85
|
-
validateOn = '
|
|
91
|
+
validateOn = 'submitThenDirty';
|
|
86
92
|
/** The form element to associate with this input (its form owner). Must be the id of a form. */
|
|
87
93
|
form;
|
|
88
94
|
shouldValidate() {
|
|
@@ -94,7 +100,7 @@ const FileUpload = class {
|
|
|
94
100
|
this.showInlineValidation();
|
|
95
101
|
});
|
|
96
102
|
}
|
|
97
|
-
_invalid =
|
|
103
|
+
_invalid = null;
|
|
98
104
|
/** This will be true when the control is in an invalid state.
|
|
99
105
|
* Validity is determined by the `required` prop. Or if custom validity message is set. @readonly */
|
|
100
106
|
get invalid() {
|
|
@@ -174,7 +180,6 @@ const FileUpload = class {
|
|
|
174
180
|
async showError(message) {
|
|
175
181
|
if (this.inputEl) {
|
|
176
182
|
this.inputEl.setCustomValidity(message);
|
|
177
|
-
this.validate();
|
|
178
183
|
this.showInlineValidation();
|
|
179
184
|
}
|
|
180
185
|
}
|
|
@@ -226,7 +231,7 @@ const FileUpload = class {
|
|
|
226
231
|
checkFileType(type) {
|
|
227
232
|
if (!this.accept)
|
|
228
233
|
return true;
|
|
229
|
-
return this.accept.match(type) && this.accept.match(type).length > 0;
|
|
234
|
+
return !!type && this.accept.match(type) && this.accept.match(type).length > 0;
|
|
230
235
|
}
|
|
231
236
|
validate = () => {
|
|
232
237
|
this.errorMessage = '';
|
|
@@ -236,24 +241,36 @@ const FileUpload = class {
|
|
|
236
241
|
error = this.inputEl.validationMessage;
|
|
237
242
|
}
|
|
238
243
|
else {
|
|
239
|
-
this.fileList.
|
|
240
|
-
error =
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
244
|
+
if (this.fileList.length > this.maxFiles) {
|
|
245
|
+
error = `Maximum number of files exceeded (${this.maxFiles})`;
|
|
246
|
+
}
|
|
247
|
+
else {
|
|
248
|
+
this.fileList.forEach((fileItem) => {
|
|
249
|
+
let listeItemError = null;
|
|
250
|
+
if (!this.checkFileSize(fileItem.file.size)) {
|
|
251
|
+
listeItemError =
|
|
252
|
+
'Maximum file size exceeded. Max file size is ' +
|
|
253
|
+
this.maxFileSize +
|
|
254
|
+
'Mb';
|
|
255
|
+
}
|
|
256
|
+
else if (!this.checkFileType(fileItem.file.type)) {
|
|
257
|
+
listeItemError = `File type is not allowed (${this.accept})`;
|
|
258
|
+
}
|
|
259
|
+
fileItem.validationMessage = listeItemError;
|
|
260
|
+
fileItem.valid = !listeItemError;
|
|
261
|
+
if (listeItemError) {
|
|
262
|
+
error = listeItemError;
|
|
263
|
+
}
|
|
264
|
+
});
|
|
265
|
+
}
|
|
254
266
|
}
|
|
255
|
-
if (error)
|
|
267
|
+
if (error) {
|
|
256
268
|
this.inputEl.setCustomValidity(error);
|
|
269
|
+
}
|
|
270
|
+
else {
|
|
271
|
+
this.inputEl.setCustomValidity('');
|
|
272
|
+
this.errorMessage = '';
|
|
273
|
+
}
|
|
257
274
|
};
|
|
258
275
|
showInlineValidation(ev) {
|
|
259
276
|
if (this.validateOn === 'submitThenDirty')
|
|
@@ -369,9 +386,10 @@ const FileUpload = class {
|
|
|
369
386
|
renderer.h("div", { class: 'file-upload__' + eleType + '-wrap' }, renderer.h("label", { class: `file-upload__` + eleType, htmlFor: this.fileInputId, id: labelId, onDrop: (e) => {
|
|
370
387
|
this.onDrop(e);
|
|
371
388
|
this.onDragStop(e);
|
|
372
|
-
}, onDragEnd: this.onDragStop, onDragLeave: this.onDragStop, onDragEnter: this.onDragStart, onDragOver: this.onDragStart }, (!!this.label || (this.hasLabelSlot && eleType !== 'drop')) && (renderer.h("div", { class: `file-upload__label ${this.hideLabel ? 'visually-hide' : ''}` }, !!this.label && !!this.label.length ? this.label : '', !this.label && this.hasLabelSlot && eleType !== 'drop' && (renderer.h("slot", { name: "label" })))), eleType === 'drop' && (renderer.h("div", { class: "file-upload__drop-area" }, renderer.h("div", null, this.hasLabelSlot && renderer.h("slot", { name: "label" })), renderer.h("div", null, "Drag and drop or\u00A0", renderer.h("span", null, "browse")))), eleType === 'btn' && (renderer.h("div", { class: `file-upload__button button--keyline button--icon-start ${this.hasFocus ? 'button--focus' : ''}` }, renderer.h("
|
|
389
|
+
}, onDragEnd: this.onDragStop, onDragLeave: this.onDragStop, onDragEnter: this.onDragStart, onDragOver: this.onDragStart }, (!!this.label || (this.hasLabelSlot && eleType !== 'drop')) && (renderer.h("div", { class: `file-upload__label ${this.hideLabel ? 'visually-hide' : ''}` }, !!this.label && !!this.label.length ? this.label : '', !this.label && this.hasLabelSlot && eleType !== 'drop' && (renderer.h("slot", { name: "label" })))), eleType === 'drop' && (renderer.h("div", { class: "file-upload__drop-area" }, renderer.h("div", null, this.hasLabelSlot && renderer.h("slot", { name: "label" })), renderer.h("div", null, "Drag and drop or\u00A0", renderer.h("span", null, "browse")))), eleType === 'btn' && (renderer.h("div", { class: `file-upload__button button--keyline button--icon-start ${this.hasFocus ? 'button--focus' : ''}` }, renderer.h("nano-cta", { secondary: true, class: `file-upload__btn-content` }, renderer.h("div", { class: "button", disabled: this.disabled }, this.fileList.length
|
|
373
390
|
? this.fileList[0].file.name
|
|
374
|
-
: this.placeholder), !!this.value && this.
|
|
391
|
+
: this.placeholder)), !!this.value && this.clearable && !this.disabled && (renderer.h("button", { type: "button", class: "icon file-upload__clear-btn", tabindex: "0", "aria-label": "Clear selected file", onClick: this.onClearClick }, renderer.h("nano-icon", { name: "light/xmark" }))), !this.disabled && this.showInlineError &&
|
|
392
|
+
(this._invalid ? (renderer.h("nano-icon", { name: "solid/circle-xmark", class: "file-upload__icon file-upload__icon-error" })) : (renderer.h("nano-icon", { name: "solid/circle-check", class: "file-upload__icon file-upload__icon-success" }))))), renderer.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) => {
|
|
375
393
|
if (this.canChangeFileList) {
|
|
376
394
|
this.publicInputEl = input;
|
|
377
395
|
return;
|
|
@@ -398,11 +416,12 @@ const FileUpload = class {
|
|
|
398
416
|
];
|
|
399
417
|
};
|
|
400
418
|
render() {
|
|
401
|
-
return (renderer.h(index.Host, { key: '
|
|
419
|
+
return (renderer.h(index.Host, { key: '4f495870314e3f688517b34be6749cf2b77810ea', class: "nano-file-upload" }, renderer.h("div", { key: '9baa63fe75b200913f82abb4304d73e22fbb4be4', class: {
|
|
402
420
|
'file-upload': true,
|
|
403
421
|
'file-upload--dragging': this.isDragging,
|
|
404
422
|
'file-upload--focus': this.hasFocus,
|
|
405
|
-
'file-upload--invalid': this._invalid,
|
|
423
|
+
'file-upload--invalid': this._invalid === true,
|
|
424
|
+
'file-upload--valid': this._invalid === false,
|
|
406
425
|
} }, this.maxFiles > 1 ? renderer.h(this.dropArea, null) : renderer.h(this.button, null))));
|
|
407
426
|
}
|
|
408
427
|
static get watchers() { return {
|
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
'use strict';
|
|
5
5
|
|
|
6
6
|
var index = require('./index-IR1lkhwT.js');
|
|
7
|
-
var style = require('./style-
|
|
7
|
+
var style = require('./style-Bf3iH5GX.js');
|
|
8
8
|
|
|
9
|
-
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
|
|
9
|
+
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}";
|
|
10
10
|
|
|
11
11
|
const NanoFooter = class {
|
|
12
12
|
constructor(hostRef) {
|
|
@@ -17,7 +17,7 @@ const NanoFooter = class {
|
|
|
17
17
|
style.addGlobalStylesheetToShadow(this.host.shadowRoot);
|
|
18
18
|
}
|
|
19
19
|
render() {
|
|
20
|
-
return (index.h("footer", { key: '
|
|
20
|
+
return (index.h("footer", { key: '7df3395d83480c2efaffd3a745dcb8486492ec8d', class: "footer" }, index.h("div", { key: '2277f9b209312a0be9c503590f9871c3da7ab7c5', class: "upper" }, index.h("div", { key: '43ca2ad3f23948f23d787c3179f6012021fe0786', class: "top" }, index.h("div", { key: '05ee9cb69076053c9accbae4d188232d344e7bf0', class: "top-start" }, index.h("slot", { key: 'a34bf50a87e10191e65d0be67f88c16abcf48304', name: "top-start_heading" }), index.h("slot", { key: 'db386e86277ae22fa9b5e7723c78ec48b4ff5444', name: "top-start_content" })), index.h("div", { key: '061fd17bfdb8ad8af11dce8cd3abac07d7c58290', class: "top-center" }, index.h("slot", { key: '885c3acef88311528147a249ca29003ec64b10c0', name: "top-center_heading" }), index.h("slot", { key: '8d4f513adfd5f24880ca76a214d2d2051d3b9ad7', name: "top-center_content" })), index.h("div", { key: 'f6138faa2e07af7e9e46a20e1510708f58ddba27', class: "top-end" }, index.h("slot", { key: 'aa7570bfa51e27ec2745b2563db6736c1b7def19', name: "top-end_heading" }), index.h("slot", { key: '9dd64f4ad61d9a0d5dd1b305e9089c5190e89738', name: "top-end_content" })))), index.h("div", { key: 'bbf554d8a85ee66cf0a38f82a8de608615510722', class: "lower nano-theme-dark" }, index.h("div", { key: '4a46e9541cc2fa7b45cfa3fd3a8628e5aed47eae', class: "middle" }, index.h("div", { key: 'ef13e5c2a35f64533bba7522fa34c964c4ee8acc', class: "middle-start" }, index.h("img", { key: '2bf403ca600f0588be99898b4e0a42ee5f64f736', src: index.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" })), index.h("div", { key: 'c3796b77148a0ba37fba2a7d1f3583233294de22', class: "middle-center" }, index.h("a", { key: 'abd8ff0fcbb1b3e7365090310c67ae0c29a8073f', href: "https://x.com/nanopore", target: "_blank" }, index.h("nano-icon", { key: '78ec0f32afa4da8f87fce46f36c2958a61cadaef', name: "brands/x-twitter", size: "large", ariaLabel: "X (formerly Twitter)" })), index.h("a", { key: '28315142cc17313a65d9039601b26bbe2400d715', href: "https://bsky.app/profile/nanoporetech.com", target: "_blank" }, index.h("nano-icon", { key: '155bedeeea937afe7740c867f9780ad26dd6eadf', name: "brands/bluesky", size: "large", ariaLabel: "Bluesky" })), index.h("a", { key: '4047f00cd32d045bd46660aaa9eb17536a5555f4', href: "https://www.youtube.com/channel/UC5yMlYjHSgFfZ37LYq-dzig", target: "_blank" }, index.h("nano-icon", { key: '63e9bb9f849a10b70b1a5cd32c1f9545587f8902', name: "brands/youtube", size: "large", ariaLabel: "YouTube" })), index.h("a", { key: 'fd2f4d639c13c99523a9f026457414aa805171bc', href: "https://www.facebook.com/Oxford-Nanopore-Technologies-251034380246/", target: "_blank" }, index.h("nano-icon", { key: '71a31a51945079e3419ce150a7908db2125a6523', name: "brands/facebook", size: "large", ariaLabel: "Facebook" })), index.h("a", { key: '426b6c582345b1e32bbd0e6ca206a75cd56ed434', href: "https://www.linkedin.com/company/oxford-nanopore-technologies", target: "_blank" }, index.h("nano-icon", { key: 'ec8256f6a70d0bb68beacab2a8c8adc381d26661', name: "brands/linkedin", size: "large", ariaLabel: "LinkedIn" })), index.h("a", { key: 'ddf5456cb764238fb5d932b2b44cf5466e82ad2f', href: "https://www.instagram.com/oxfordnanopore", target: "_blank" }, index.h("nano-icon", { key: '293464c660b8734f0bae8eb612c8377e763b8053', name: "brands/instagram", size: "large", ariaLabel: "Instagram" }))), index.h("div", { key: '6b7ed0e2ad110329ce9c5e4e085278d4e7dd4568', class: "middle-end" }, index.h("slot", { key: '15c3d94e8f35ee98fafdc6f062d9639b0ac54b63', name: "middle-end" }))), index.h("div", { key: 'a72b24bd18b825b160608a1b20e221b37c070bc4', class: "bottom" }, index.h("div", { key: 'a63f935bacfc660dc1c45e0dcb43514272837fdd', class: "bottom-start" }, index.h("slot", { key: '1fb95aa9e6da5ae676470cf532c47ecbe5ae0015', name: "bottom-start" }, index.h("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."))), index.h("div", { key: '08a48aaf322de5c4292e24803e8ca6da40e1e3c5', class: "bottom-end" }, index.h("slot", { key: '81873c5375cc33b1f1b533354b960a66eadaf94b', name: "bottom-end" }))))));
|
|
21
21
|
}
|
|
22
22
|
};
|
|
23
23
|
NanoFooter.style = footerCss;
|
|
@@ -7,7 +7,7 @@ var index = require('./index-IR1lkhwT.js');
|
|
|
7
7
|
var renderer = require('./renderer-h0yo23iy.js');
|
|
8
8
|
var algoliasearchLite_esm_browser = require('./algoliasearch-lite.esm.browser-DWj6KfUw.js');
|
|
9
9
|
var throttle = require('./throttle-CrRDOkln.js');
|
|
10
|
-
var style = require('./style-
|
|
10
|
+
var style = require('./style-Bf3iH5GX.js');
|
|
11
11
|
var searchInsights = require('./search-insights-BtxuX7Wv.js');
|
|
12
12
|
|
|
13
13
|
const globalNavCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--main-menu-bar-bg-color:var(--nano-color-base-0);--main-menu-text-color:var(--nano-color-base-1000);--main-menu-hover-text-color:var(--nano-color-primary-1000);--main-menu-active-text-color:var(--nano-color-primary-1200);--main-menu-active-border-color:var(--nano-color-primary-1000);--overflow-bg-color:var(--nano-color-grey-mono-1600);--overflow-text-color:var(--nano-color-basic-white);--overflow-hover-text-color:var(--nano-color-blue-cerulean-700);--overflow-active-text-color:var(--nano-color-blue-cerulean-300);display:block;color:var(--main-menu-text-color)}img{max-inline-size:none;display:block}::slotted(a),:host::slotted(a),a{text-decoration:none}a:has(img){display:inline-block}a:focus{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}nano-drawer:not(:defined){display:none}nano-badge{position:absolute;font-size:0.5625rem;pointer-events:none}.gn__cart{position:relative}.gn__cart nano-badge{inset-block-start:-0.35rem;inset-inline-end:-0.4rem}.gn__login-cta{--bg:transparent}.gn__menu-bar-wrapper{z-index:var(--nano-z-index-menubar);position:relative}.gn__menu-bar-wrapper::after{content:\"\";position:absolute;block-size:1px;inline-size:100%;inset-inline:0;inset-block-end:-1px;z-index:-3;background-color:var(--nano-color-neutral-200)}.gn__menu-bar{inline-size:100%;overflow:clip}.gn__menu-bar a{color:var(--main-menu-text-color)}.gn__menu-bar a:hover{color:var(--main-menu-hover-text-color)}.gn__menu-bar a:active{color:var(--main-menu-active-text-color)}.gn__main-menu{display:inline-flex;align-items:center;background-color:var(--main-menu-bar-bg-color);min-inline-size:100%;padding:var(--nano-spacing-md);transition:opacity var(--nano-transition-x-fast) ease;opacity:1}.gn__main-menu.resizing{transition:none;opacity:0}.gn__main-menu>*{margin-inline-end:var(--nano-spacing-xl)}.gn__main-menu>*:is(slot,slot-fb){display:flex}.gn__main-menu>*:last-child{margin-inline-end:0}.gn__overflow-button{--padding:0.5rem 0.875rem 0.5rem 0;margin-inline-end:0.875rem;font-size:1.125rem;position:relative}.gn__overflow-button::after{content:\"\";position:absolute;inline-size:1px;block-size:100%;inset-inline-end:0;background-color:var(--nano-color-neutral-300);opacity:0.7;inset-block-start:0}.gn__main-menu-links,.gn__main-menu-actions{display:inline-flex;align-items:center}.gn__main-menu-links .nano-icon,.gn__main-menu-links .nano-icon-button,.gn__main-menu-actions .nano-icon,.gn__main-menu-actions .nano-icon-button{--active-color:var(--main-menu-active-text-color);--hover-color:var(--main-menu-hover-text-color);font-size:1rem}.gn__main-menu-links .nano-icon-button:hover,.gn__main-menu-actions .nano-icon-button:hover{color:var(--main-menu-hover-text-color)}.gn__main-menu-links{gap:var(--nano-spacing-xl)}.gn__main-menu-links ::slotted(a),.gn__main-menu-links::slotted(a){color:var(--main-menu-text-color)}.gn__main-menu-links ::slotted(a:hover){color:var(--main-menu-hover-text-color)}.gn__main-menu-links ::slotted(*:active){color:var(--main-menu-active-text-color)}.gn__main-menu-actions{margin-inline-start:auto;font-size:0.9375rem;gap:var(--nano-spacing-md)}.gn__search-dropdown{--overflow:visible;--padding:0;--background:transparent}.gn__search-dropdown .nano-icon-button{position:relative}.gn__search-dropdown .nano-icon-button::before{content:\"\";position:absolute;background-color:var(--main-menu-active-border-color);block-size:4px;inset-inline:5px 2px;inset-block-end:-1.5625rem;transform:translateZ(0) scaleX(0);transform-origin:0 center;transition:transform var(--nano-transition-x-fast) ease-in-out}.gn__search-open .gn__search-dropdown .nano-icon-button::before{transform:translateZ(0) scaleX(1)}.gn__search-form{display:inline-flex;max-inline-size:100vw;inline-size:30.625rem}.gn__search-form .nano-select{--input-bg-color:var(--nano-color-neutral-200);flex:0}.gn__search-form .nano-select:focus-within{z-index:1}.gn__search-form .nano-select .form-ctrl__input{border-inline-end:none}.gn__search-form .nano-input{flex:1}.gn__search-results{--padding-start:var(--nano-spacing-md);--padding-top:var(--nano-spacing-sm);--padding-bottom:var(--nano-spacing-sm);font-size:var(--nano-font-size-2xs)}.gn__search-loading{display:flex;justify-content:center}.gn__search-result{--padding-start:0.3125rem;--padding-top:var(--nano-spacing-sm);--padding-bottom:var(--nano-spacing-sm);--bg-focus:var(--nano-color-primary-300);--color-focus:var(--nano-color-neutral-1400);--color:var(--nano-color-neutral-1400);font-size:var(--nano-font-size-2xs)}.gn__search-result .search__highlight{font-style:normal;background:var(--nano-color-highlight)}.gn__search-viewall{--bg-focus:var(--nano-color-primary-300);--color-focus:var(--nano-color-neutral-1400);--color:var(--nano-color-primary-1200)}.gn__search-viewall::part(label){justify-content:flex-end;text-decoration:underline}.gn__user-dropdown-trigger{all:unset;cursor:pointer;color:var(--nano-color-primary-1200);display:flex;white-space:nowrap;gap:var(--nano-spacing-xs);align-items:center;position:relative;padding-inline-start:var(--nano-spacing-md)}.gn__user-dropdown-trigger:hover{color:var(--main-menu-hover-text-color)}.gn__user-dropdown-trigger:active{color:var(--main-menu-active-text-color)}.gn__user-dropdown-trigger:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.gn__user-dropdown-trigger::before{content:\"\";position:absolute;inline-size:1px;block-size:100%;inset-inline-start:0;background-color:var(--nano-color-neutral-300);opacity:0.7;inset-block-start:0}.gn__user-dropdown-trigger .gn__user-dropdown-chevron{transition:rotate var(--nano-transition-x-fast) linear}[open] .gn__user-dropdown-trigger .gn__user-dropdown-chevron{rotate:180deg}.gn__user-dropdown-trigger nano-badge{inset-block-start:-0.7rem;inset-inline-end:-0.7rem}.gn__user-dropdown{--background:var(--overflow-bg-color);--padding:0;--overflow:visible}.gn__user-panel{inline-size:21.25rem;max-inline-size:21.25rem;color:var(--overflow-text-color);padding:var(--nano-spacing-md)}.gn__user-panel a{color:var(--overflow-text-color)}.gn__user-panel a:hover{text-decoration:underline;color:var(--overflow-hover-text-color)}.gn__user-panel-head{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);padding-block-end:var(--nano-spacing-md);display:flex;align-items:center;gap:var(--nano-spacing-sm);font-size:var(--nano-font-size-xs)}.gn__user-panel-head .gn__user-avatar nano-icon{font-size:2.5rem}.gn__user-panel-body{display:flex;flex-direction:column}.gn__user-panel-body a{position:relative;border-block-end:1px solid rgb(var(--nano-color-base-rgb-1000)/10%);padding-block:var(--nano-spacing-md)}.gn__user-panel-body a:first-child{border-block-start:1px solid rgb(var(--nano-color-base-rgb-1000)/10%)}.gn__user-panel-foot{padding-block-start:var(--nano-spacing-md);display:flex;align-items:center;justify-content:space-between;gap:var(--nano-spacing-md)}.gn__drawer{--panel-background:var(--overflow-bg-color);--header-button-color:var(--overflow-text-color);--body-spacing:0;--header-spacing:var(--nano-spacing-md) 0;--footer-spacing:var(--nano-spacing-md)}.gn__drawer::part(title){display:flex;justify-content:flex-end}.gn__drawer::part(header-actions){order:-1}.gn__drawer-header{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.gn__drawer-menu{display:flex;flex-direction:column;margin:0 var(--nano-spacing-md);padding-block-end:var(--nano-spacing-md);color:var(--overflow-text-color);border-block-start:1px solid rgb(var(--nano-color-base-rgb-1000)/10%);position:relative}.gn__drawer-menu ::slotted(a),.gn__drawer-menu::slotted(a){padding:var(--nano-spacing-md) 0}.gn__drawer-menu ::slotted(a),.gn__drawer-menu ::slotted(.nano-nav-item),.gn__drawer-menu::slotted(a),.gn__drawer-menu::slotted(.nano-nav-item){--padding:var(--nano-spacing-md) 0;display:block;color:inherit !important;border-block-end:1px solid rgb(var(--nano-color-base-rgb-1000)/10%)}.gn__drawer-menu ::slotted(a:hover),.gn__drawer-menu ::slotted(.nano-nav-item:hover){text-decoration:underline;color:var(--overflow-hover-text-color) !important}";
|
|
@@ -638,10 +638,10 @@ const Tooltip = class {
|
|
|
638
638
|
this.popover.destroy();
|
|
639
639
|
}
|
|
640
640
|
render() {
|
|
641
|
-
return (renderer.h(index.Host, { key: '
|
|
641
|
+
return (renderer.h(index.Host, { key: '4b98bb9ee733405debbece4d5ac0b2395f5d54f3', onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, class: "nano-tooltip" }, renderer.h("slot", { key: 'c9f5956a38f9a892ad756a8c20ac316b1d975392', onSlotchange: this.handleSlotChange }), renderer.h("div", { key: '31f46bf3e11ba2981883ed2dfdc6cefddace7e77', ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner", popover: "manual" }, renderer.h("div", { key: '85854e52a5b4a10a1c12798f3d24b6d1aaefc21f', part: "base", ref: (el) => (this.tooltip = el), class: {
|
|
642
642
|
tooltip: true,
|
|
643
643
|
'tooltip--open': this.open,
|
|
644
|
-
}, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, renderer.h("slot", { key: '
|
|
644
|
+
}, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, renderer.h("slot", { key: 'fa8b9006cb18ab66060be9c969a70e49c609bc19', name: "content", onSlotchange: () => this.setLabel() }, this.content), renderer.h("div", { key: '298cdad62b389ec2759559a6dc26fc02f4d5ba3f', class: "tooltip-arrow", "data-popper-arrow": true })))));
|
|
645
645
|
}
|
|
646
646
|
static get watchers() { return {
|
|
647
647
|
"content": ["setLabel"],
|
|
@@ -4,31 +4,17 @@
|
|
|
4
4
|
'use strict';
|
|
5
5
|
|
|
6
6
|
var index = require('./index-IR1lkhwT.js');
|
|
7
|
-
var renderer = require('./renderer-h0yo23iy.js');
|
|
8
7
|
|
|
9
|
-
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}}
|
|
8
|
+
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)}";
|
|
10
9
|
|
|
11
10
|
const ProgressBar = class {
|
|
12
11
|
constructor(hostRef) {
|
|
13
12
|
index.registerInstance(this, hostRef);
|
|
14
13
|
}
|
|
15
|
-
get host() { return index.getElement(this); }
|
|
16
|
-
/** The progress bar's percentage, 0 to 100. */
|
|
17
|
-
value = 0;
|
|
18
|
-
/** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
|
|
19
|
-
indeterminate = false;
|
|
20
14
|
/** Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot. */
|
|
21
15
|
showPercent = false;
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
'progress-bar': true,
|
|
25
|
-
'progress-bar--indeterminate': this.indeterminate,
|
|
26
|
-
}, role: "progressbar", title: this.host.title || undefined, "aria-label": "Progress", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.value }, renderer.h("div", { key: 'dd80b47ed6627db8d93bf20a7ef096d44757ec56', part: "indicator", class: "progress-bar__indicator", style: {
|
|
27
|
-
width: !this.indeterminate ? `${this.value}%` : undefined,
|
|
28
|
-
} }, renderer.h("span", { key: '7b967332cff45da08a49008ac727f247750347ae', part: "label", class: "progress-bar__label" }, renderer.h("slot", { key: '5d2c53909892f8c81e151ec64a337e656e7e4dae' }, !this.indeterminate && this.showPercent
|
|
29
|
-
? `${this.value}%`
|
|
30
|
-
: ''))))));
|
|
31
|
-
}
|
|
16
|
+
/** The height of the progress-bar */
|
|
17
|
+
size = 'medium';
|
|
32
18
|
};
|
|
33
19
|
ProgressBar.style = progressBarCss;
|
|
34
20
|
|
|
@@ -174,23 +174,23 @@ const Rating = class {
|
|
|
174
174
|
else {
|
|
175
175
|
displayValue = this.isHovering ? this.hoverValue : this.value;
|
|
176
176
|
}
|
|
177
|
-
return (renderer.h(index.Host, { key: '
|
|
177
|
+
return (renderer.h(index.Host, { key: '1f1a4c5f6b8dea2419e75be53db6e74d4455c3c5', class: "nano-rating" }, renderer.h("div", { key: '6898eef81bc7e3d634b3054a4694f49db79929c8', class: "rating-wrap" }, renderer.h("div", { key: 'bbad068f69e99c12083bb53c00a25b2dff02ddb7', dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
|
|
178
178
|
rating: true,
|
|
179
179
|
'rating--readonly': this.readonly,
|
|
180
180
|
'rating--disabled': this.disabled,
|
|
181
|
-
}, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove, onFocus: this.handleFocus, onBlur: this.handleBlur }, renderer.h("span", { key: '
|
|
181
|
+
}, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove, onFocus: this.handleFocus, onBlur: this.handleBlur }, renderer.h("span", { key: 'd2518d1ec73803cdc284c64ff4fcee9c86f6077d', class: "rating__symbols rating__symbols--inactive" }, counter.map((index) => (renderer.h("span", { class: {
|
|
182
182
|
rating__symbol: true,
|
|
183
183
|
'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
|
|
184
184
|
},
|
|
185
185
|
// Users can click the current value to clear the rating. When this happens, we set this.isHovering to
|
|
186
186
|
// false to prevent the hover state from confusing them as they move the mouse out of the control. This
|
|
187
187
|
// extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.
|
|
188
|
-
onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), renderer.h("span", { key: '
|
|
188
|
+
onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), renderer.h("span", { key: '046a97718d174445372c909eee0d061c4effd770', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
|
|
189
189
|
clip: this.clip(displayValue),
|
|
190
190
|
} }, counter.map((index) => (renderer.h("span", { class: {
|
|
191
191
|
rating__symbol: true,
|
|
192
192
|
'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
|
|
193
|
-
}, innerHTML: this.symbol(index + 1) })))), renderer.h("input", { key: '
|
|
193
|
+
}, innerHTML: this.symbol(index + 1) })))), renderer.h("input", { key: '8a0a62b7419a719e2a2cf08e361aae299dea7d65', type: "hidden", name: this.name, value: this.value, disabled: this.disabled || this.readonly })))));
|
|
194
194
|
}
|
|
195
195
|
static get watchers() { return {
|
|
196
196
|
"value": ["handleValueChange"],
|
|
@@ -228,7 +228,7 @@ const ResizeObserve = class {
|
|
|
228
228
|
this.ro.disconnect();
|
|
229
229
|
}
|
|
230
230
|
render() {
|
|
231
|
-
return (renderer.h(index.Host, { key: '
|
|
231
|
+
return (renderer.h(index.Host, { key: '67ae39458d0f21c7100481c6aa68f9455e468d86', class: "nano-resize-observe" }, renderer.h("slot", { key: '503108cec78fcfda303a9e392e1903ec7acfc244' }), !!this.notifyContentFit &&
|
|
232
232
|
(this.contentFitX !== null || this.contentFitY !== null) && [
|
|
233
233
|
this.contentFitX ? (renderer.h("slot", { name: "content-fit-x" })) : (renderer.h("slot", { name: "content-nofit-x" })),
|
|
234
234
|
this.contentFitY ? (renderer.h("slot", { name: "content-fit-y" })) : (renderer.h("slot", { name: "content-nofit-y" })),
|
|
@@ -252,10 +252,10 @@ const Skeleton = class {
|
|
|
252
252
|
/** When `true`, the skeleton will animate. */
|
|
253
253
|
animated = true;
|
|
254
254
|
render() {
|
|
255
|
-
return (renderer.h(index.Host, { key: '
|
|
255
|
+
return (renderer.h(index.Host, { key: 'f73bd1aaaf1ed443643eb6fee3421071be76b064', class: "nano-skeleton" }, renderer.h("div", { key: 'a4023374bcd7855ef2638623b2dbf29ac758f0a6', class: {
|
|
256
256
|
skeleton: true,
|
|
257
257
|
animate: this.animated,
|
|
258
|
-
} }, renderer.h("div", { key: '
|
|
258
|
+
} }, renderer.h("div", { key: 'bf89fd85a10834bb798515f46b51a4b26d0f885f', class: "skeleton__indicator" }, "\u00A0"))));
|
|
259
259
|
}
|
|
260
260
|
};
|
|
261
261
|
Skeleton.style = skeletonCss;
|
|
@@ -39,7 +39,7 @@ const Slide = class {
|
|
|
39
39
|
});
|
|
40
40
|
}
|
|
41
41
|
render() {
|
|
42
|
-
return (renderer.h(index.Host, { key: '
|
|
42
|
+
return (renderer.h(index.Host, { key: 'e2de4b21a269c802cf727b7ffd8433d4f959d3fb', class: "nano-slide" }, renderer.h("slot", { key: '0d3fd5785d8e617307fd6590e0ffbca33693c410' })));
|
|
43
43
|
}
|
|
44
44
|
static get watchers() { return {
|
|
45
45
|
"ready": ["readyChange"]
|
|
@@ -2854,19 +2854,19 @@ const Slides = class {
|
|
|
2854
2854
|
}
|
|
2855
2855
|
async loadFlickityModules(opts) {
|
|
2856
2856
|
if (!this.hasFullScreenModule && opts.fullscreen) {
|
|
2857
|
-
await Promise.resolve().then(function () { return require('./fullscreen-
|
|
2857
|
+
await Promise.resolve().then(function () { return require('./fullscreen-D-fHJ_IJ.js'); });
|
|
2858
2858
|
this.hasFullScreenModule = true;
|
|
2859
2859
|
}
|
|
2860
2860
|
if (!this.hasLazyLoadModule && opts.lazyLoad) {
|
|
2861
|
-
await Promise.resolve().then(function () { return require('./lazyload-
|
|
2861
|
+
await Promise.resolve().then(function () { return require('./lazyload-DK1ITMfR.js'); });
|
|
2862
2862
|
this.hasLazyLoadModule = true;
|
|
2863
2863
|
}
|
|
2864
2864
|
if (!this.hasDotsModule && opts.pageDots) {
|
|
2865
|
-
await Promise.resolve().then(function () { return require('./page-dots-
|
|
2865
|
+
await Promise.resolve().then(function () { return require('./page-dots-DeSuT5bE.js'); });
|
|
2866
2866
|
this.hasDotsModule = true;
|
|
2867
2867
|
}
|
|
2868
2868
|
if (!this.hasFadeModule && opts.fade) {
|
|
2869
|
-
await Promise.resolve().then(function () { return require('./fade-
|
|
2869
|
+
await Promise.resolve().then(function () { return require('./fade-CqKYrZYq.js'); });
|
|
2870
2870
|
this.hasFadeModule = true;
|
|
2871
2871
|
}
|
|
2872
2872
|
}
|
|
@@ -3001,15 +3001,15 @@ const Slides = class {
|
|
|
3001
3001
|
this.destroyflickity();
|
|
3002
3002
|
}
|
|
3003
3003
|
render() {
|
|
3004
|
-
return (renderer.h(index.Host, { key: '
|
|
3004
|
+
return (renderer.h(index.Host, { key: '88e0cbecd056181f9b3f8c244d8b7c59dfb94e16', class: "nano-slides" }, renderer.h("div", { key: '728f56cad9f2dc011dcc5c1051061102aaf0da63', class: {
|
|
3005
3005
|
slideshow: true,
|
|
3006
3006
|
ready: this.ready,
|
|
3007
3007
|
'not-ready': !this.ready,
|
|
3008
|
-
}, part: "base" }, renderer.h("div", { key: '
|
|
3008
|
+
}, part: "base" }, renderer.h("div", { key: 'f4d40a6cf600378f311c8d74485802ad37a0840b', ref: (div) => (this.flickityEl = div), class: {
|
|
3009
3009
|
'flickity-container': true,
|
|
3010
3010
|
'slides-ready': this.slidesReady,
|
|
3011
3011
|
'slides-not-ready': !this.slidesReady,
|
|
3012
|
-
}, part: "slide-container" }, renderer.h("slot", { key: '
|
|
3012
|
+
}, part: "slide-container" }, renderer.h("slot", { key: 'a2d787ba9f4299216bfd99af5a39d6940c1ddd3a' })), renderer.h("div", { key: '2f25d4f413ca885408a0062d57b40c57c813ae32', class: "ui-extras" }, renderer.h("slot", { key: '234f553982373a1914455fc0c4b339ac6d147dc2', name: "ui" })))));
|
|
3013
3013
|
}
|
|
3014
3014
|
static get watchers() { return {
|
|
3015
3015
|
"options": ["optionsChanged"],
|
|
@@ -729,7 +729,7 @@ const Sortable = class {
|
|
|
729
729
|
}
|
|
730
730
|
}
|
|
731
731
|
render() {
|
|
732
|
-
return (renderer.h(index.Host, { key: '
|
|
732
|
+
return (renderer.h(index.Host, { key: '2d575a0cd296fe9c691962f7075f2b808f7abe01', class: "nano-sortable" }, renderer.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) => (renderer.h("div", null, str)))), renderer.h("slot", { key: '703feb95010c77a8945dfc34bd57a5acb16b40d1' })));
|
|
733
733
|
}
|
|
734
734
|
static get watchers() { return {
|
|
735
735
|
"itemSelector": ["handleItemSelectorChange"],
|