@vonage/vivid 5.15.1 → 5.17.0

package/file-picker/index.js

@@ -1,397 +1,295 @@
-import { I as b, i as g } from "../bundled/definition2.js";
-import { B as x, b as F } from "../bundled/definition3.js";
-import { V as y, E as w, O as k, a as d, o as v, v as _, h as p, c as E, d as $ } from "../bundled/vivid-element.js";
-import { W as C, f as z } from "../bundled/mixins.js";
-import { D, d as P } from "../bundled/delegates-aria.js";
-import { F as T } from "../bundled/form-associated.js";
-import { W as V } from "../bundled/with-contextual-help.js";
-import { W as A } from "../bundled/with-error-text.js";
-import { F as S } from "../bundled/form-element.js";
-import { L as B } from "../bundled/localized.js";
-import { w as H } from "../bundled/when.js";
-import { s as O } from "../bundled/slotted.js";
-import { r as u } from "../bundled/ref.js";
-import { r as I } from "../bundled/repeat.js";
-import { c as m } from "../bundled/class-names.js";
-const L = ".label-wrapper{display:flex;flex-direction:row;align-items:center;gap:var(--label-wrapper-gap, 4px)}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 1 auto}:host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column;block-size:inherit;max-block-size:inherit;--_low-ink-color: var(--vvd-color-neutral-600)}.control-wrapper{display:flex;flex-direction:column;block-size:inherit;gap:4px;max-block-size:inherit}.control{position:relative;display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control .upload-text{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;transition:all .3s ease}@media(hover:hover){.control:hover .upload-text{color:var(--vvd-color-neutral-800)}}.control.drag-hover .upload-text{color:var(--vvd-color-neutral-800)}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.control:active,.control:focus-visible{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}@media(hover:hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}}.control:active{box-shadow:0 1px 4px #0000001a;transform:translateY(0)}.control.drag-hover{border-color:var(--vvd-color-cta-200);background-color:var(--vvd-color-cta-200);outline:2px dashed var(--vvd-color-cta-500);transform:scale(1.02)}.upload-icon{animation:subtle-pulse 2s ease-in-out infinite;color:var(--vvd-color-cta-600);pointer-events:none;transition:all .3s ease}@media(hover:hover){.control:hover .upload-icon{animation:none;color:var(--vvd-color-cta-700);transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{animation:none;color:var(--vvd-color-neutral-800);transform:scale(1.15)}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.preview .details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.preview .details .filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{display:flex;align-items:center;color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);gap:4px;margin-block-start:4px}.preview:not(.has-error) .error-message{display:none}.preview.has-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.preview.has-error .size{display:none}.preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.preview-list{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.preview-list{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{position:absolute;top:0;left:0;width:0;height:0;visibility:hidden}";
-async function M(a) {
-  return a.items?.[0]?.webkitGetAsEntry != null ? await R(a.items) : Array.from(a.files);
+import { t as e } from "../bundled/localized.js";
+import { C as t, E as n, T as r, d as i, l as a, o, s, t as c, u as l, w as u } from "../bundled/vivid-element.js";
+import { n as d } from "../bundled/repeat.js";
+import { t as f } from "../bundled/ref.js";
+import { t as p } from "../bundled/when.js";
+import { t as m } from "../bundled/slotted.js";
+import { r as h, t as g } from "../bundled/definition2.js";
+import { t as _ } from "../bundled/decorate.js";
+import { t as v } from "../bundled/form-element.js";
+import { t as y } from "../bundled/with-error-text.js";
+import { t as b } from "../bundled/with-contextual-help.js";
+import { n as x, t as S } from "../bundled/delegates-aria.js";
+import { t as C } from "../bundled/class-names.js";
+import { n as w } from "../bundled/form-associated.js";
+import { i as T, t as E } from "../bundled/definition6.js";
+import { a as D, t as O } from "../bundled/mixins.js";
+//#region src/lib/file-picker/file-picker.scss?inline
+var k = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}:host{max-inline-size:400px;display:block}:host([disabled]){cursor:not-allowed}.base{block-size:inherit;max-block-size:inherit;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;display:flex}.control-wrapper{block-size:inherit;max-block-size:inherit;flex-direction:column;gap:4px;display:flex}.control{box-sizing:border-box;border:1px dashed var(--vvd-color-neutral-400);background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);border-radius:8px;outline:none;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;min-block-size:52px;inline-size:100%;padding:16px;transition:all .3s;display:flex;position:relative}.control .upload-text{color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;justify-content:center;align-items:center;transition:all .3s;display:flex}.control.disabled{border-color:var(--vvd-color-neutral-300);background-color:var(--vvd-color-neutral-100);box-shadow:none;color:var(--vvd-color-neutral-300);pointer-events:none;transform:none}.control.disabled .upload-text{color:var(--vvd-color-neutral-300)}@media (hover:hover){.control:hover .upload-text{color:var(--vvd-color-neutral-800)}}.control.drag-hover .upload-text{color:var(--vvd-color-neutral-800)}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.control:active,.control:focus-visible{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}@media (hover:hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}}.control:active{transform:translateY(0);box-shadow:0 1px 4px #0000001a}.control.drag-hover{border-color:var(--vvd-color-cta-200);background-color:var(--vvd-color-cta-200);outline:2px dashed var(--vvd-color-cta-500);transform:scale(1.02)}.upload-icon{color:var(--vvd-color-cta-600);pointer-events:none;transition:all .3s;animation:2s ease-in-out infinite subtle-pulse}@media (hover:hover){.control:hover .upload-icon{color:var(--vvd-color-cta-700);animation:none;transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{color:var(--vvd-color-neutral-800);animation:none;transform:scale(1.15)}.control.disabled .upload-icon{color:var(--vvd-color-neutral-300);animation:none}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{box-sizing:border-box;border:1px solid var(--vvd-color-neutral-300);background-color:var(--file-picker-list-item-background-color,var(--vvd-color-canvas));border-radius:8px;grid-template-rows:auto auto;grid-template-columns:1fr auto;inline-size:100%;padding:8px;display:grid}.preview .details{min-width:0;flex-direction:column;max-inline-size:100%;display:flex}.preview .details .filename{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);align-items:center;gap:4px;margin-block-start:4px;display:flex}.preview:not(.has-error) .error-message{display:none}.preview.has-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.preview.has-error .size{display:none}.preview .remove-btn{grid-area:1/2/-1/-1;align-self:center;display:inline}.preview-list{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.preview-list{flex-direction:column;gap:12px;margin-block-start:12px;display:flex;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{visibility:hidden;width:0;height:0;position:absolute;top:0;left:0}";
+//#endregion
+//#region src/lib/file-picker/data-transfer.ts
+async function A(e) {
+	return e.items?.[0]?.webkitGetAsEntry == null ? Array.from(e.files) : await j(e.items);
 }
-async function R(a) {
-  const r = [];
-  for (const o of a) {
-    const e = o.getAsFile();
-    if (e)
-      r.push(Promise.resolve([e]));
-    else {
-      const t = o.webkitGetAsEntry();
-      t && r.push(h(t, !1));
-    }
-  }
-  return (await Promise.all(r)).flat();
+async function j(e) {
+	let t = [];
+	for (let n of e) {
+		let e = n.getAsFile();
+		if (e) t.push(Promise.resolve([e]));
+		else {
+			let e = n.webkitGetAsEntry();
+			e && t.push(M(e, !1));
+		}
+	}
+	return (await Promise.all(t)).flat();
 }
-const h = (a, r) => {
-  const o = (t) => new Promise((i, n) => {
-    t.file((c) => {
-      r && c.name.substring(0, 1) === "." ? i([]) : i([c]);
-    }, n);
-  }), e = a.isFile ? o(a) : a.isDirectory ? W(a) : Promise.resolve([]);
-  return e.catch(() => null), e;
-}, W = async (a) => new Promise((r, o) => {
-  const e = [], t = a.createReader(), i = () => {
-    t.readEntries((n) => {
-      for (const c of n)
-        e.push(h(c, !0));
-      n.length ? i() : r(Promise.all(e).then((c) => c.flat()));
-    }, o);
-  };
-  i();
+var M = (e, t) => {
+	let n = e.isFile ? ((e) => new Promise((n, r) => {
+		e.file((e) => {
+			t && e.name.substring(0, 1) === "." ? n([]) : n([e]);
+		}, r);
+	}))(e) : e.isDirectory ? N(e) : Promise.resolve([]);
+	return n.catch(() => null), n;
+}, N = async (e) => new Promise((t, n) => {
+	let r = [], i = e.createReader(), a = () => {
+		i.readEntries((e) => {
+			for (let t of e) r.push(M(t, !0));
+			e.length ? a() : t(Promise.all(r).then((e) => e.flat()));
+		}, n);
+	};
+	a();
 });
-function j(a, r) {
-  if (!r)
-    return !0;
-  const o = r.split(","), e = (i) => /\/\*$/.test(i), t = (i) => i.replace(/\/.*$/, "");
-  for (let i of o)
-    if (i = i.trim(), i.charAt(0) === ".") {
-      if (a.name.toLowerCase().endsWith(i.toLowerCase()))
-        return !0;
-    } else if (e(i)) {
-      if (t(a.type) === t(i))
-        return !0;
-    } else if (a.type === i)
-      return !0;
-  return !1;
+//#endregion
+//#region src/lib/file-picker/accept.ts
+function P(e, t) {
+	if (!t) return !0;
+	let n = t.split(","), r = (e) => /\/\*$/.test(e), i = (e) => e.replace(/\/.*$/, "");
+	for (let t of n) if (t = t.trim(), t.charAt(0) === ".") {
+		if (e.name.toLowerCase().endsWith(t.toLowerCase())) return !0;
+	} else if (r(t)) {
+		if (i(e.type) === i(t)) return !0;
+	} else if (e.type === t) return !0;
+	return !1;
 }
-var N = Object.defineProperty, G = Object.getOwnPropertyDescriptor, s = (a, r, o, e) => {
-  for (var t = e > 1 ? void 0 : e ? G(r, o) : r, i = a.length - 1, n; i >= 0; i--)
-    (n = a[i]) && (t = (e ? n(r, o, t) : n(t)) || t);
-  return e && t && N(r, o, t), t;
+//#endregion
+//#region src/lib/file-picker/file-picker.ts
+var F = class extends b(O(y(v(S(e(w(c))))))) {
+	constructor(...e) {
+		super(...e), this.singleFile = !1, this.maxFiles = null, this.maxFileSize = 256, this.valueChanged = (e, t) => {
+			super.valueChanged(e, t), t === "" && this.files.length && this.removeAllFiles();
+		}, this.proxy = document.createElement("input"), this.setFormValue = (e, t) => {
+			typeof e != "string" && super.setFormValue(e, t);
+		}, this._customValidationError = null, this._dragHover = !1, this._allFiles = [];
+	}
+	nameChanged(e, t) {
+		super.nameChanged(e, t), this.#e();
+	}
+	#e() {
+		let e = this.files;
+		if (!this.name) this.setFormValue(null);
+		else {
+			let t = new FormData();
+			for (let n of e) t.append(this.name, n);
+			this.setFormValue(t);
+		}
+		this.#t();
+	}
+	#t() {
+		this.value = this.files.length > 0 ? `C:\\fakepath\\${this.files[0].name}` : "";
+	}
+	validate() {
+		super.validate(this.control);
+	}
+	formResetCallback() {
+		this.removeAllFiles(), super.formResetCallback();
+	}
+	#n() {
+		return this.rejectedFiles.length > 0 ? this.locale.filePicker.invalidFilesError : null;
+	}
+	_customValidationErrorChanged() {
+		this.proxy && this.proxy.setCustomValidity(this._customValidationError ?? ""), this.validate();
+	}
+	#r = { handleChange: () => {
+		this._customValidationError = this.#i.observe(this, t.default);
+	} };
+	#i;
+	#a() {
+		this.#i = u.binding(() => this.#n(), this.#r, !0), this.#r.handleChange();
+	}
+	#o() {
+		this.#i.dispose();
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.#a();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.#o();
+	}
+	_onDragEnter() {
+		return this.disabled || (this._dragHover = !0), !0;
+	}
+	_onDragOver(e) {
+		if (this.disabled || !e.dataTransfer) return !0;
+		let t = e.dataTransfer.effectAllowed;
+		return e.dataTransfer.dropEffect = t === "move" || t === "linkMove" ? "move" : "copy", !1;
+	}
+	_onDragLeave(e) {
+		return this.disabled || e.currentTarget === e.target && (this._dragHover = !1), !0;
+	}
+	_onDrop(e) {
+		return this.disabled || (this._dragHover = !1, !e.dataTransfer) ? !0 : (A(e.dataTransfer).then((e) => this.#s(e)).catch((e) => {
+			console.error(e);
+		}), !1);
+	}
+	_onDragEnd() {
+		return this.disabled || (this._dragHover = !1), !0;
+	}
+	_onControlClick() {
+		this.disabled || this._hiddenInput.click();
+	}
+	_onRemoveFileClick(e) {
+		this.disabled || (this._allFiles = this._allFiles.filter((t) => t !== e), this.$emit("change"));
+	}
+	_allFilesChanged() {
+		this.#e();
+	}
+	#s(e) {
+		let t = Array.from(e).filter((e) => !this._allFiles.some((t) => t.name === e.name && t.size === e.size));
+		this.singleFile && t.length > 0 ? this._allFiles = [t[t.length - 1]] : this._allFiles = [...this._allFiles, ...t], this.$emit("change");
+	}
+	removeAllFiles() {
+		this._allFiles = [];
+	}
+	get _validatedFiles() {
+		let e = (e, t) => this.maxFileSize && e.size > this.maxFileSize * 1024 * 1024 ? (this.fileTooBigError || this.locale.filePicker.fileTooBigError).replace("{{filesize}}", this._formatNumber(Math.round(e.size / 1024 / 10.24) / 100)).replace("{{maxFilesize}}", this._formatNumber(this.maxFileSize)) : P(e, this.accept) ? typeof this.maxFiles == "number" && t >= this.maxFiles ? (this.maxFilesExceededError || this.locale.filePicker.maxFilesExceededError).replace("{{maxFiles}}", String(this.maxFiles)) : null : this.invalidFileTypeError || this.locale.filePicker.invalidFileTypeError, t = [], n = 0;
+		for (let r of this._allFiles) {
+			let i = {
+				file: r,
+				validationError: e(r, n)
+			};
+			t.push(i), i.validationError || n++;
+		}
+		return t;
+	}
+	get files() {
+		return this._validatedFiles.filter((e) => !e.validationError).map((e) => e.file);
+	}
+	get rejectedFiles() {
+		return this._validatedFiles.filter((e) => !!e.validationError).map((e) => e.file);
+	}
+	_onHiddenInputChange(e) {
+		this.#s(this._hiddenInput.files), this._hiddenInput.value = "", e.stopPropagation();
+	}
+	_formatNumber(e) {
+		let t = String(e);
+		return this.locale.common.useCommaAsDecimalSeparator ? t.replace(".", ",") : t;
+	}
 };
-class l extends V(
-  C(
-    A(
-      S(D(B(T(y))))
-    )
-  )
-) {
-  constructor() {
-    super(...arguments), this.singleFile = !1, this.maxFileSize = 256, this.valueChanged = (r, o) => {
-      super.valueChanged(r, o), o === "" && this.files.length && this.removeAllFiles();
-    }, this.proxy = document.createElement("input"), this.setFormValue = (r, o) => {
-      typeof r != "string" && super.setFormValue(r, o);
-    }, this._customValidationError = null, this.#e = {
-      handleChange: () => {
-        this._customValidationError = this.#r.observe(
-          this,
-          w.default
-        );
-      }
-    }, this._dragHover = !1, this._allFiles = [];
-  }
-  /**
-   * @internal
-   */
-  nameChanged(r, o) {
-    super.nameChanged(r, o), this.#o();
-  }
-  #o() {
-    const r = this.files;
-    if (!this.name)
-      this.setFormValue(null);
-    else {
-      const o = new FormData();
-      for (const e of r)
-        o.append(this.name, e);
-      this.setFormValue(o);
-    }
-    this.#i();
-  }
-  #i() {
-    this.value = this.files.length > 0 ? `C:\\fakepath\\${this.files[0].name}` : "";
-  }
-  /** @internal */
-  validate() {
-    super.validate(this.control);
-  }
-  /**
-   * @internal
-   */
-  formResetCallback() {
-    this.removeAllFiles(), super.formResetCallback();
-  }
-  #a() {
-    return this.rejectedFiles.length > 0 ? this.locale.filePicker.invalidFilesError : null;
-  }
-  /**
-   * @internal
-   */
-  _customValidationErrorChanged() {
-    this.proxy && this.proxy.setCustomValidity(this._customValidationError ?? ""), this.validate();
-  }
-  #e;
-  #r;
-  #l() {
-    this.#r = k.binding(
-      () => this.#a(),
-      this.#e,
-      !0
-    ), this.#e.handleChange();
-  }
-  #s() {
-    this.#r.dispose();
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.#l();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.#s();
-  }
-  /**
-   * @internal
-   */
-  _onDragEnter() {
-    return this._dragHover = !0, !0;
-  }
-  /**
-   * @internal
-   */
-  _onDragOver(r) {
-    if (!r.dataTransfer)
-      return !0;
-    const o = r.dataTransfer.effectAllowed;
-    return r.dataTransfer.dropEffect = o === "move" || o === "linkMove" ? "move" : "copy", !1;
-  }
-  /**
-   * @internal
-   */
-  _onDragLeave(r) {
-    return r.currentTarget === r.target && (this._dragHover = !1), !0;
-  }
-  /**
-   * @internal
-   */
-  _onDrop(r) {
-    return this._dragHover = !1, r.dataTransfer ? (M(r.dataTransfer).then((o) => this.#t(o)).catch((o) => {
-      console.error(o);
-    }), !1) : !0;
-  }
-  /**
-   * @internal
-   */
-  _onDragEnd() {
-    return this._dragHover = !1, !0;
-  }
-  /**
-   * @internal
-   */
-  _onControlClick() {
-    this._hiddenInput.click();
-  }
-  /**
-   * @internal
-   */
-  _onRemoveFileClick(r) {
-    this._allFiles = this._allFiles.filter((o) => o !== r), this.$emit("change");
-  }
-  /**
-   * @internal
-   */
-  _allFilesChanged() {
-    this.#o();
-  }
-  #t(r) {
-    const o = Array.from(r).filter(
-      (e) => !this._allFiles.some(
-        (t) => t.name === e.name && t.size === e.size
-      )
-    );
-    this.singleFile && o.length > 0 ? this._allFiles = [o[o.length - 1]] : this._allFiles = [...this._allFiles, ...o], this.$emit("change");
-  }
-  /**
-   * Removes all files from the File Picker.
-   */
-  removeAllFiles() {
-    this._allFiles = [];
-  }
-  get _validatedFiles() {
-    const r = (t, i) => this.maxFileSize && t.size > this.maxFileSize * 1024 * 1024 ? (this.fileTooBigError || this.locale.filePicker.fileTooBigError).replace(
-      "{{filesize}}",
-      this._formatNumber(Math.round(t.size / 1024 / 10.24) / 100)
-    ).replace("{{maxFilesize}}", this._formatNumber(this.maxFileSize)) : j(t, this.accept) ? typeof this.maxFiles == "number" && i >= this.maxFiles ? (this.maxFilesExceededError || this.locale.filePicker.maxFilesExceededError).replace("{{maxFiles}}", String(this.maxFiles)) : null : this.invalidFileTypeError || this.locale.filePicker.invalidFileTypeError, o = [];
-    let e = 0;
-    for (const t of this._allFiles) {
-      const i = {
-        file: t,
-        validationError: r(t, e)
-      };
-      o.push(i), i.validationError || e++;
-    }
-    return o;
-  }
-  /**
-   * Files that have been added to the file picker and passed validation.
-   *
-   * @public
-   */
-  get files() {
-    return this._validatedFiles.filter((r) => !r.validationError).map((r) => r.file);
-  }
-  /**
-   * Files that have been rejected by the file picker for failing validation.
-   *
-   * @public
-   */
-  get rejectedFiles() {
-    return this._validatedFiles.filter((r) => !!r.validationError).map((r) => r.file);
-  }
-  /**
-   * @internal
-   */
-  _onHiddenInputChange(r) {
-    this.#t(this._hiddenInput.files), this._hiddenInput.value = "", r.stopPropagation();
-  }
-  /**
-   * @internal
-   */
-  _formatNumber(r) {
-    const o = String(r);
-    return this.locale.common.useCommaAsDecimalSeparator ? o.replace(".", ",") : o;
-  }
-}
-s([
-  d({ attribute: "single-file", mode: "boolean" })
-], l.prototype, "singleFile", 2);
-s([
-  d({ attribute: "max-files" })
-], l.prototype, "maxFiles", 2);
-s([
-  d({ mode: "fromView", attribute: "max-file-size" })
-], l.prototype, "maxFileSize", 2);
-s([
-  d
-], l.prototype, "accept", 2);
-s([
-  d
-], l.prototype, "size", 2);
-s([
-  d({ attribute: "invalid-file-type-error" })
-], l.prototype, "invalidFileTypeError", 2);
-s([
-  d({ attribute: "max-files-exceeded-error" })
-], l.prototype, "maxFilesExceededError", 2);
-s([
-  d({ attribute: "file-too-big-error" })
-], l.prototype, "fileTooBigError", 2);
-s([
-  v
-], l.prototype, "_customValidationError", 2);
-s([
-  v
-], l.prototype, "_dragHover", 2);
-s([
-  v
-], l.prototype, "_allFiles", 2);
-s([
-  _
-], l.prototype, "_validatedFiles", 1);
-const f = 1e3, Y = { tb: "TB", gb: "GB", mb: "MB", kb: "KB", b: "b" }, U = (a, r) => {
-  let o = 0, e = "b";
-  if (r > 0) {
-    const t = ["tb", "gb", "mb", "kb", "b"];
-    for (let i = 0; i < t.length; i++) {
-      const n = t[i], c = Math.pow(f, 4 - i) / 10;
-      if (r >= c) {
-        o = r / Math.pow(f, 4 - i), e = n;
-        break;
-      }
-    }
-    o = Math.round(10 * o) / 10;
-  }
-  return p`<strong>${a._formatNumber(o)}</strong>
-		${Y[e]}`;
-}, K = ({ size: a, _dragHover: r }) => m(
-  "control",
-  [`size-${a}`, !!a],
-  ["drag-hover", r]
-), q = (a) => {
-  const r = a.tagFor(b), o = a.tagFor(x);
-  return p`
+_([a({
+	attribute: "single-file",
+	mode: "boolean"
+})], F.prototype, "singleFile", void 0), _([a({
+	attribute: "max-files",
+	converter: l,
+	mode: "fromView"
+})], F.prototype, "maxFiles", void 0), _([a({
+	mode: "fromView",
+	attribute: "max-file-size"
+})], F.prototype, "maxFileSize", void 0), _([a], F.prototype, "accept", void 0), _([a], F.prototype, "size", void 0), _([a({ attribute: "invalid-file-type-error" })], F.prototype, "invalidFileTypeError", void 0), _([a({ attribute: "max-files-exceeded-error" })], F.prototype, "maxFilesExceededError", void 0), _([a({ attribute: "file-too-big-error" })], F.prototype, "fileTooBigError", void 0), _([r], F.prototype, "_customValidationError", void 0), _([r], F.prototype, "_dragHover", void 0), _([r], F.prototype, "_allFiles", void 0), _([n], F.prototype, "_validatedFiles", null);
+//#endregion
+//#region src/lib/file-picker/file-picker.template.ts
+var I = 1e3, L = {
+	tb: "TB",
+	gb: "GB",
+	mb: "MB",
+	kb: "KB",
+	b: "b"
+}, R = (e, t) => {
+	let n = 0, r = "b";
+	/* v8 ignore else -- @preserve */
+	if (t > 0) {
+		let e = [
+			"tb",
+			"gb",
+			"mb",
+			"kb",
+			"b"
+		];
+		for (let i = 0; i < e.length; i++) {
+			let a = e[i];
+			if (t >= I ** (4 - i) / 10) {
+				n = t / I ** (4 - i), r = a;
+				break;
+			}
+		}
+		n = Math.round(10 * n) / 10;
+	}
+	return i`<strong>${e._formatNumber(n)}</strong>
+		${L[r]}`;
+}, z = ({ size: e, _dragHover: t, disabled: n }) => C("control", [`size-${e}`, !!e], ["drag-hover", t], ["disabled", n]);
+//#endregion
+//#region src/lib/file-picker/index.ts
+s(o("file-picker", F, (e) => {
+	let t = e.tagFor(h), n = e.tagFor(T);
+	return i`
 		<div class="base">
 			<div class="label-wrapper" ?hidden=${(e) => !e.label && !e._hasContextualHelp}>
-				${H(
-    (e) => e.label,
-    p`<label class="label">${(e) => e.label}</label>`
-  )}
-				<slot name="contextual-help" ${O("_contextualHelpSlottedContent")}></slot>
+				${p((e) => e.label, i`<label class="label">${(e) => e.label}</label>`)}
+				<slot name="contextual-help" ${m("_contextualHelpSlottedContent")}></slot>
 			</div>
 			<div class="control-wrapper">
-				<button
-					type="button"
-					${u("control")}
-					class="${K}"
-					@click="${(e) => e._onControlClick()}"
-					@keydown"${/* v8 ignore next -- @preserve -- Prevent implicit form submission on Enter */
-  () => !1}"
+			<button
+				type="button"
+				${f("control")}
+				class="${z}"
+				?disabled="${(e) => e.disabled}"
+				@click="${(e) => e._onControlClick()}"
+					@keydown="${() => !1}"
 					@dragenter="${(e) => e._onDragEnter()}"
 					@dragover="${(e, t) => e._onDragOver(t.event)}"
 					@dragleave="${(e, t) => e._onDragLeave(t.event)}"
 					@drop="${(e, t) => e._onDrop(t.event)}"
 					@dragend="${(e) => e._onDragEnd()}"
 					aria-describedby="${(e) => e._feedbackDescribedBy}"
-					${P()}
+					${x()}
 				>
-					<${r}
+					<${t}
 						class="upload-icon"
 						name="cloud-upload-line"
 						size="-4"
 						label="${(e) => e.locale.filePicker.uploadFilesLabel}"
-					></${r}>
+					></${t}>
 					<span class="upload-text"><slot></slot></span>
 				</button>
-				${(e) => e._getFeedbackTemplate(a)}
+				${(t) => t._getFeedbackTemplate(e)}
 			</div>
 			<div class="preview-list">
-				${I(
-    (e) => e._validatedFiles,
-    p`
-				<div class="${(e) => m("preview", ["has-error", !!e.validationError])}">
+				${d((e) => e._validatedFiles, i`
+				<div class="${(e) => C("preview", ["has-error", !!e.validationError])}">
 					<div class="details">
 						<div class="filename">${(e) => e.file.name}</div>
-						<div class="size">${(e, t) => U(t.parent, e.file.size)}</div>
+						<div class="size">${(e, t) => R(t.parent, e.file.size)}</div>
 					</div>
 					<div class="error-message">
-						<${r} name="info-line" size="-6"></${r}>
+						<${t} name="info-line" size="-6"></${t}>
 						${(e) => e.validationError}
 					</div>
-					<${o}
-						class="remove-btn" icon="delete-line" appearance="ghost-light" size="condensed"
-						aria-label="${(e, t) => t.parent.locale.filePicker.removeFileLabel}"
-						@click="${(e, t) => t.parent._onRemoveFileClick(e.file)}"></${o}>
-				</div>`
-  )}
+				<${n}
+					class="remove-btn" icon="delete-line" appearance="ghost-light" size="condensed"
+					?disabled="${(e, t) => t.parent.disabled}"
+					aria-label="${(e, t) => t.parent.locale.filePicker.removeFileLabel}"
+					@click="${(e, t) => t.parent._onRemoveFileClick(e.file)}"></${n}>
+				</div>`)}
 			</div>
 		</div>
 		<input
-			${u("_hiddenInput")}
+			${f("_hiddenInput")}
 			class="hidden-input"
 			aria-hidden="true"
 			type="file"
-			?multiple="${(e) => !e.singleFile && (!e.maxFiles || e.maxFiles > 1)}"
+			?disabled="${(e) => e.disabled}"
+			?multiple="${(e) => !e.singleFile && (e.maxFiles == null || e.maxFiles > 1)}"
 			accept="${(e) => e.accept || null}"
 			tabindex="-1"
 			@change="${(e, t) => e._onHiddenInputChange(t.event)}"
 		/>
 	`;
-}, J = $(
-  "file-picker",
-  l,
-  q,
-  [g, F, z],
-  {
-    styles: L,
-    shadowOptions: {
-      delegatesFocus: !0
-    }
-  }
-), Q = E(J);
-Q();
+}, [
+	g,
+	E,
+	D
+], {
+	styles: k,
+	shadowOptions: { delegatesFocus: !0 }
+}))();
+//#endregion