dap-design-system 0.62.4 → 0.63.0

package/dist/components/file-input/file-input.component.js

@@ -1,16 +1,16 @@
-var B = Object.defineProperty, P = Object.defineProperties;
-var U = Object.getOwnPropertyDescriptors;
-var E = Object.getOwnPropertySymbols;
-var I = Object.prototype.hasOwnProperty, R = Object.prototype.propertyIsEnumerable;
-var k = (u, e, t) => e in u ? B(u, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : u[e] = t, w = (u, e) => {
+var C = Object.defineProperty, B = Object.defineProperties;
+var P = Object.getOwnPropertyDescriptors;
+var x = Object.getOwnPropertySymbols;
+var U = Object.prototype.hasOwnProperty, I = Object.prototype.propertyIsEnumerable;
+var E = (u, e, t) => e in u ? C(u, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : u[e] = t, F = (u, e) => {
   for (var t in e || (e = {}))
-    I.call(e, t) && k(u, t, e[t]);
-  if (E)
-    for (var t of E(e))
-      R.call(e, t) && k(u, t, e[t]);
+    U.call(e, t) && E(u, t, e[t]);
+  if (x)
+    for (var t of x(e))
+      I.call(e, t) && E(u, t, e[t]);
   return u;
-}, L = (u, e) => P(u, U(e));
-var F = (u, e, t) => new Promise((i, s) => {
+}, T = (u, e) => B(u, P(e));
+var v = (u, e, t) => new Promise((i, s) => {
   var l = (h) => {
     try {
       d(t.next(h));
@@ -26,35 +26,30 @@ var F = (u, e, t) => new Promise((i, s) => {
   }, d = (h) => h.done ? i(h.value) : Promise.resolve(h.value).then(l, r);
   d((t = t.apply(u, e)).next());
 });
-import { clsx as D } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as y, html as m } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as n } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { state as v } from "../../node_modules/@lit/reactive-element/decorators/state.js";
-import { query as O } from "../../node_modules/@lit/reactive-element/decorators/query.js";
-import { ifDefined as b } from "../../node_modules/lit-html/directives/if-defined.js";
-import { HttpError as S, FileError as $ } from "../../common/errors.js";
-import { GenericFormElement as H } from "../../internal/mixin/genericFormElement.js";
+import { clsx as L } from "../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as R, css as O, nothing as m, html as g } from "lit";
+import { query as H, property as n, state as y } from "lit/decorators.js";
+import { ifDefined as _ } from "lit/directives/if-defined.js";
+import { HttpError as $, FileError as w } from "../../common/errors.js";
+import { GenericFormElement as q } from "../../internal/mixin/genericFormElement.js";
+import { formLabelTemplate as M } from "../../internal/templates/formLabel.js";
 import "../../localization/localization.js";
-import q from "../button/button.component.js";
-import M from "../feedback/feedback.component.js";
-import N from "../form/form-label/form-label.component.js";
-import V from "../icon/icon.component.js";
-import j from "../icon-button/icon-button.component.js";
-import A from "../modal/modal.component.js";
-import J from "../tooltip/tooltip.component.js";
-import W from "../typography/typography.component.js";
-import K from "./file-input.scss.js";
-import C, { t as T } from "../../node_modules/i18next/dist/esm/i18next.js";
-import { unsafeCSS as X, css as G } from "../../node_modules/@lit/reactive-element/css-tag.js";
-import { translate as g } from "../../node_modules/lit-i18n/src/lit-i18n.js";
+import N from "../button/button.component.js";
+import V from "../feedback/feedback.component.js";
+import j from "../form/form-label/form-label.component.js";
+import A from "../icon/icon.component.js";
+import J from "../icon-button/icon-button.component.js";
+import W from "../modal/modal.component.js";
+import K from "../tooltip/tooltip.component.js";
+import X from "../typography/typography.component.js";
+import G from "./file-input.scss.js";
+import k, { t as D } from "../../node_modules/i18next/dist/esm/i18next.js";
 var Q = Object.defineProperty, Y = Object.getOwnPropertyDescriptor, a = (u, e, t, i) => {
   for (var s = i > 1 ? void 0 : i ? Y(e, t) : e, l = u.length - 1, r; l >= 0; l--)
     (r = u[l]) && (s = (i ? r(e, t, s) : r(s)) || s);
   return i && s && Q(e, t, s), s;
 };
-const z = class z extends H {
+const z = class z extends q {
   constructor() {
     super(...arguments), this.browseButtonTestId = "file-input-browse-button", this.uploadButtonTestId = "file-input-upload-button", this.showDropzone = !1, this.showFileList = !1, this.confirmRemove = !0, this.showUploadButton = "true", this.showBrowseButton = "true", this.multiple = !1, this.keepValue = !1, this.uploadProperty = "file", this.uploadMethod = "POST", this.deleteMethod = "DELETE", this.withCredentials = !1, this.fileList = null, this.removeButtonDanger = "true", this.showThumbnail = "true", this.dropzoneFocusable = "true", this.thumbnailSize = "sm", this._files = [], this._uploadProgress = {}, this._uploadingFiles = /* @__PURE__ */ new Set(), this._activeUploads = /* @__PURE__ */ new Map(), this._uploadedFiles = /* @__PURE__ */ new Map(), this._isDragOver = !1, this._showRemoveDialog = !1, this._fileToRemove = null, this._removeResolve = null, this._removeReject = null, this.languageChangeHandler = () => {
       this.requestUpdate();
@@ -97,7 +92,7 @@ const z = class z extends H {
             maxFiles: this.maxFiles,
             totalFiles: e.length + i
           },
-          message: this.maxFileAmountErrorText || T("fileInput.error.fileAmount", {
+          message: this.maxFileAmountErrorText || D("fileInput.error.fileAmount", {
             count: this.maxFiles
           }),
           type: "maxFiles"
@@ -110,7 +105,7 @@ const z = class z extends H {
           type: this.accept,
           fileType: l.type
         },
-        message: this.fileTypeErrorText || T("fileInput.error.fileType", {
+        message: this.fileTypeErrorText || D("fileInput.error.fileType", {
           type: this.accept
         }),
         type: "fileType"
@@ -120,7 +115,7 @@ const z = class z extends H {
           maxSizePerFile: this.maxSizePerFile,
           fileSize: l.size
         },
-        message: this.maxSizePerFileErrorText || T("fileInput.error.perFileSize", {
+        message: this.maxSizePerFileErrorText || D("fileInput.error.perFileSize", {
           size: Math.round(this.maxSizePerFile / 1024 / 1024)
         }),
         type: "maxSizePerFile"
@@ -131,7 +126,7 @@ const z = class z extends H {
           totalSize: s,
           fileSize: l.size
         },
-        message: this.maxFileSizeErrorText || T("fileInput.error.fileSize", {
+        message: this.maxFileSizeErrorText || D("fileInput.error.fileSize", {
           size: Math.round(this.maxFileSize / 1024 / 1024)
         }),
         type: "maxFileSize"
@@ -166,7 +161,7 @@ const z = class z extends H {
    * and in-flight uploads are aborted.
    */
   clearFiles() {
-    return F(this, null, function* () {
+    return v(this, null, function* () {
       const e = [...this._files];
       if (e.length !== 0) {
         this.abortAllUploads();
@@ -186,7 +181,7 @@ const z = class z extends H {
    * Delete failures are reported but never block the local removal.
    */
   deleteUploadedFileFromServer(e) {
-    return F(this, null, function* () {
+    return v(this, null, function* () {
       const t = e.name;
       if (this._uploadedFiles.has(t))
         try {
@@ -209,7 +204,7 @@ const z = class z extends H {
     this._files.forEach((t) => e.items.add(t)), this.input.files = e.files;
   }
   performFileRemoval(e) {
-    return F(this, null, function* () {
+    return v(this, null, function* () {
       this.abortUpload(e.name), yield this.deleteUploadedFileFromServer(e), this._files = this._files.filter(
         (t) => !this.checkFileEquality(t, e)
       ), this.syncNativeInput(), this._files.length === 0 && this.required && (this.value = void 0), this.emit("dds-file-removed", { file: e }), this.emit("dds-file-change", {
@@ -221,16 +216,16 @@ const z = class z extends H {
     });
   }
   connectedCallback() {
-    super.connectedCallback(), C.on("languageChanged", this.languageChangeHandler), this.addEventListener("dds-file-remove", (e) => {
+    super.connectedCallback(), k.on("languageChanged", this.languageChangeHandler), this.addEventListener("dds-file-remove", (e) => {
       const t = e;
       this.removeFile(t.detail.file);
     });
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), C.off("languageChanged", this.languageChangeHandler);
+    super.disconnectedCallback(), k.off("languageChanged", this.languageChangeHandler);
   }
   onConfirmDelete() {
-    return F(this, null, function* () {
+    return v(this, null, function* () {
       this._removeResolve && this._removeResolve(!0), this._showRemoveDialog = !1, this._fileToRemove = null, this._removeResolve = null, this._removeReject = null;
     });
   }
@@ -261,7 +256,7 @@ const z = class z extends H {
     const t = this._activeUploads.get(e);
     if (t) {
       t.abort(), this._uploadingFiles.delete(e), this._activeUploads.delete(e);
-      const i = w({}, this._uploadProgress);
+      const i = F({}, this._uploadProgress);
       delete i[e], this._uploadProgress = i;
     }
   }
@@ -283,7 +278,7 @@ const z = class z extends H {
    * Delete an uploaded file from the server
    */
   deleteUploadedFile(e, t) {
-    return F(this, null, function* () {
+    return v(this, null, function* () {
       if (!this.deleteUrl) {
         console.error("Delete URL is not configured");
         return;
@@ -292,7 +287,7 @@ const z = class z extends H {
       return i.withCredentials = this.withCredentials, new Promise((s, l) => {
         i.onload = () => {
           i.status >= 200 && i.status < 300 ? s() : l(
-            new S(
+            new $(
               `HTTP error! status: ${i.status}`,
               i.response,
               i.status
@@ -336,7 +331,7 @@ const z = class z extends H {
     });
   }
   uploadFiles(e) {
-    return F(this, null, function* () {
+    return v(this, null, function* () {
       if (!this.uploadUrl) {
         console.error("Upload URL is not configured");
         return;
@@ -348,57 +343,57 @@ const z = class z extends H {
         l.append(this.uploadProperty, s);
         try {
           let r;
-          this._uploadingFiles.add(s.name), this._uploadProgress = L(w({}, this._uploadProgress), { [s.name]: 0 }), this.emit("dds-upload-start", { file: s });
+          this._uploadingFiles.add(s.name), this._uploadProgress = T(F({}, this._uploadProgress), { [s.name]: 0 }), this.emit("dds-upload-start", { file: s });
           const d = new XMLHttpRequest();
           if (d.withCredentials = this.withCredentials, this._activeUploads.set(s.name, d), d.open(this.uploadMethod, this.uploadUrl), this.uploadHeaders)
             try {
               const f = JSON.parse(this.uploadHeaders);
-              Object.entries(f).forEach(([_, x]) => {
-                d.setRequestHeader(_, x);
+              Object.entries(f).forEach(([b, S]) => {
+                d.setRequestHeader(b, S);
               });
             } catch (f) {
               console.warn("Invalid uploadHeaders JSON:", this.uploadHeaders);
             }
           d.upload.onprogress = (f) => {
             if (f.lengthComputable) {
-              const _ = f.loaded / f.total * 100;
-              this._uploadProgress = L(w({}, this._uploadProgress), {
-                [s.name]: _
+              const b = f.loaded / f.total * 100;
+              this._uploadProgress = T(F({}, this._uploadProgress), {
+                [s.name]: b
               }), this.fileList && (r = this.setFileLoadingState(s, !0)), this.emit("dds-upload-progress", {
                 file: s,
                 item: r,
-                progress: _
+                progress: b
               });
             }
           };
-          const h = yield new Promise((f, _) => {
+          const h = yield new Promise((f, b) => {
             d.onload = () => {
               if (d.status >= 200 && d.status < 300)
                 f(d.response);
               else {
-                const x = new S(
+                const S = new $(
                   `HTTP error! status: ${d.status}`,
                   d.response,
                   d.status
                 );
-                _(x);
+                b(S);
               }
             }, d.onerror = () => {
-              this.fileList && (r = this.setFileLoadingState(s, !1)), _(new Error("Network error"));
+              this.fileList && (r = this.setFileLoadingState(s, !1)), b(new Error("Network error"));
             }, d.send(l);
           }), c = JSON.parse(h);
           this.fileList && (r = this.setFileLoadingState(s, !1)), this._uploadingFiles.delete(s.name), this._activeUploads.delete(s.name);
-          const p = w({}, this._uploadProgress);
+          const p = F({}, this._uploadProgress);
           delete p[s.name], this._uploadProgress = p, this._uploadedFiles.set(s.name, c), this.emit("dds-upload-complete", { file: s, item: r, result: c }), i++, i === t && this.emit("dds-all-uploads-complete");
         } catch (r) {
           this._uploadingFiles.delete(s.name), this._activeUploads.delete(s.name);
-          const d = w({}, this._uploadProgress);
+          const d = F({}, this._uploadProgress);
           delete d[s.name], this._uploadProgress = d;
-          const h = r instanceof $ ? r : new $(
+          const h = r instanceof w ? r : new w(
             r instanceof Error ? r.message : String(r),
             s,
-            r instanceof S ? "http" : "upload",
-            r instanceof S ? { status: r.status, response: r.response } : void 0
+            r instanceof $ ? "http" : "upload",
+            r instanceof $ ? { status: r.status, response: r.response } : void 0
           );
           if (this.fileList) {
             const c = this.setFileLoadingState(s, !1);
@@ -452,7 +447,7 @@ const z = class z extends H {
       if (!h.isValid && h.errors) {
         const c = h.errors.map((p) => {
           if (p.file)
-            return new $(
+            return new w(
               p.message,
               p.file,
               p.type,
@@ -460,7 +455,7 @@ const z = class z extends H {
             );
           {
             const f = i.length > 0 ? i[0] : new File([], "unknown");
-            return new $(
+            return new w(
               p.message,
               f,
               p.type,
@@ -508,7 +503,7 @@ const z = class z extends H {
       if (!h.isValid && h.errors) {
         const c = h.errors.map((p) => {
           if (p.file)
-            return new $(
+            return new w(
               p.message,
               p.file,
               p.type,
@@ -516,7 +511,7 @@ const z = class z extends H {
             );
           {
             const f = t.length > 0 ? t[0] : new File([], "unknown");
-            return new $(
+            return new w(
               p.message,
               f,
               p.type,
@@ -545,24 +540,22 @@ const z = class z extends H {
   render() {
     var i, s;
     const e = this.showBrowseButton === "true" && !this.autoupload, t = e || !this.showDropzone;
-    return m`
+    return g`
       <div class="label-container">
-        ${this.label && m`<dap-ds-form-label
-          part="label"
-          id="label"
-          for="input"
-          .size=${this.size}
-          .required=${this.required}
-          .requiredLabel=${this.requiredLabel}
-          .optional=${this.optional}
-          .optionalLabel=${this.optionalLabel}
-          .disabled=${this.disabled}
-          class=${D("label")}
-          .noMargin=${!!this.description}
-          .hideLabel=${this.hideLabel}
-          label=${b(this.label)}>
-        </dap-ds-form-label>`}
-        ${this.tooltip && m` <dap-ds-tooltip
+        ${M({
+      label: this.label,
+      id: "label",
+      htmlFor: "input",
+      size: this.size,
+      required: this.required,
+      requiredLabel: this.requiredLabel,
+      optional: this.optional,
+      optionalLabel: this.optionalLabel,
+      disabled: this.disabled,
+      noMargin: !!this.description,
+      hideLabel: this.hideLabel
+    })}
+        ${this.tooltip && g` <dap-ds-tooltip
           part="tooltip"
           content=${this.tooltip}
           mode="toggle"
@@ -581,19 +574,19 @@ const z = class z extends H {
           </dap-ds-icon-button>
         </dap-ds-tooltip>`}
       </div>
-      ${this.description && m`
+      ${this.description && g`
         <dap-ds-typography
           part="description"
           variant="description"
-          class=${D("input-description")}
-          size=${b(this.size)}
+          class=${L("input-description")}
+          size=${_(this.size)}
           id="description">
           ${this.description}
         </dap-ds-typography>
       `}
-      ${this.showDropzone ? m`
+      ${this.showDropzone ? g`
             <div
-              class=${D(
+              class=${L(
       "dropzone",
       { "dropzone--dragover": this._isDragOver },
       { "dropzone--disabled": this.disabled }
@@ -603,32 +596,32 @@ const z = class z extends H {
               @dragover=${this.onDragover}
               @dragleave=${this.onDragleave}
               @drop=${this.onDrop}
-              @keydown=${this.dropzoneFocusable === "true" ? this.onDropzoneKeydown : y}
+              @keydown=${this.dropzoneFocusable === "true" ? this.onDropzoneKeydown : m}
               @click=${this.onClick}
               role=${this.dropzoneFocusable === "true" ? "button" : "group"}
-              aria-label=${b(this.dropzoneAriaLabel)}
+              aria-label=${_(this.dropzoneAriaLabel)}
               tabindex=${this.dropzoneFocusable === "true" ? "0" : "-1"}>
               <slot name="dropzone-content">
                 <div class="dropzone__content">
                   <dap-ds-icon name="upload-2-line" size="lg"></dap-ds-icon>
                   <dap-ds-typography variant="caption">
-                    ${this.dropzoneText || g("fileInput.dropzone.text")}
+                    ${this.dropzoneText || this.localize.t("fileInput.dropzone.text")}
                   </dap-ds-typography>
-                  ${this.accept && m`
+                  ${this.accept && g`
                     <dap-ds-typography
                       variant="caption"
                       class="dropzone__accept">
-                      ${g("fileInput.dropzone.acceptedTypes")}:
+                      ${this.localize.t("fileInput.dropzone.acceptedTypes")}:
                       ${this.accept}
                     </dap-ds-typography>
                   `}
                 </div>
               </slot>
             </div>
-          ` : y}
+          ` : m}
       <span
         part="base"
-        class=${D(
+        class=${L(
       "input",
       { "input--success": this.status === "success" },
       { "input--error": this.status === "error" },
@@ -643,57 +636,57 @@ const z = class z extends H {
             part="input"
             name=${this.name}
             type="file"
-            accept=${b(this.accept)}
+            accept=${_(this.accept)}
             ?disabled=${this.disabled}
             ?multiple=${this.multiple}
             ?required=${this.required}
             tabindex=${t ? "0" : "-1"}
             aria-labelledby="label"
             aria-hidden=${t ? "false" : "true"}
-            aria-describedby="description ${this.feedback ? "feedback" : y}"
+            aria-describedby="description ${this.feedback ? "feedback" : m}"
             @change=${this.onChange}
             @cancel=${this.onCancel}
             @invalid=${this.handleInvalid}
             @blur=${this.onBlur}
             @focus=${this.onFocus} />
-          ${e ? m` <dap-ds-button
+          ${e ? g` <dap-ds-button
                 class="input__button"
                 part="browse-button"
                 data-testid=${this.browseButtonTestId}
                 tabindex="-1"
                 variant="outline"
                 ?disabled=${this.disabled}
-                size=${b(this.size)}
+                size=${_(this.size)}
                 @click=${this.onClick}
-                @dragenter=${this.showDropzone ? y : this.onDragenter}
-                @dragover=${this.showDropzone ? y : this.onDragover}
-                @drop=${this.showDropzone ? y : this.onDrop}
-                aria-label="${this.browseButtonLabel || g("fileInput.browse")}${this.showDropzone ? "" : ` - ${g("fileInput.dragDropArea")}`}"
+                @dragenter=${this.showDropzone ? m : this.onDragenter}
+                @dragover=${this.showDropzone ? m : this.onDragover}
+                @drop=${this.showDropzone ? m : this.onDrop}
+                aria-label="${this.browseButtonLabel || this.localize.t("fileInput.browse")}${this.showDropzone ? "" : ` - ${this.localize.t("fileInput.dragDropArea")}`}"
                 role="button"
-                >${this.browseButtonLabel || g("fileInput.browse")}</dap-ds-button
-              >` : y}
-          ${this.showUploadButton === "true" && !this.autoupload ? m`
+                >${this.browseButtonLabel || this.localize.t("fileInput.browse")}</dap-ds-button
+              >` : m}
+          ${this.showUploadButton === "true" && !this.autoupload ? g`
                 <dap-ds-button
                   class="upload-button"
                   part="upload-button"
                   data-testid=${this.uploadButtonTestId}
                   variant="primary"
-                  size=${b(this.size)}
+                  size=${_(this.size)}
                   ?disabled=${this._files.length === 0 || !this.uploadUrl || this._uploadingFiles.size > 0}
                   @click=${this.startUpload}
-                  >${this.uploadButtonLabel || g("fileInput.upload")}</dap-ds-button
+                  >${this.uploadButtonLabel || this.localize.t("fileInput.upload")}</dap-ds-button
                 >
-              ` : y}
+              ` : m}
           <div id="drop-instructions" class="sr-only">
-            ${g("fileInput.dragDropInstructions")}
+            ${this.localize.t("fileInput.dragDropInstructions")}
           </div>
         </div>
       </span>
-      ${!this.fileList && this._uploadingFiles.size > 0 ? m`
+      ${!this.fileList && this._uploadingFiles.size > 0 ? g`
             <div class="upload-progress" part="upload-progress">
               ${Array.from(this._uploadingFiles).map((l) => {
       const r = this._uploadProgress[l] || 0;
-      return m`
+      return g`
                   <div class="upload-progress__item">
                     <dap-ds-typography variant="caption">
                       ${l} - ${Math.round(r)}%
@@ -707,53 +700,53 @@ const z = class z extends H {
                 `;
     })}
             </div>
-          ` : y}
+          ` : m}
       <dap-ds-modal
         .open=${this._showRemoveDialog}
-        title="${g("fileInput.removeDialog.title")}"
-        okButtonLabel=${this.removeButtonLabel || g("fileInput.removeDialog.confirm")}
-        cancelButtonLabel=${this.cancelButtonLabel || g("fileInput.removeDialog.cancel")}
+        title="${this.localize.t("fileInput.removeDialog.title")}"
+        okButtonLabel=${this.removeButtonLabel || this.localize.t("fileInput.removeDialog.confirm")}
+        cancelButtonLabel=${this.cancelButtonLabel || this.localize.t("fileInput.removeDialog.cancel")}
         .okButtonDanger=${this.removeButtonDanger === "true"}
         @dds-cancel=${this.onCancelDelete}
         @dds-close=${this.onCancelDelete}
         @dds-ok=${this.onConfirmDelete}>
         <div>
           <dap-ds-typography variant="body">
-            ${g("fileInput.removeDialog.message", {
+            ${this.localize.t("fileInput.removeDialog.message", {
       fileName: (s = (i = this._fileToRemove) == null ? void 0 : i.name) != null ? s : ""
     })}
           </dap-ds-typography>
         </div>
       </dap-ds-modal>
 
-      ${this.feedback ? m`
+      ${this.feedback ? g`
             <dap-ds-feedback
               part="feedback"
-              feedbackType=${b(this.feedbackType)}
-              feedbackSize=${b(this.size)}
+              feedbackType=${_(this.feedbackType)}
+              feedbackSize=${_(this.size)}
               id="feedback"
               .feedbackSubtle=${this.subtle}>
               ${this.feedback}
             </dap-ds-feedback>
-          ` : y}
+          ` : m}
     `;
   }
 };
 z.tagName = "dap-ds-file-input", z.dependencies = {
-  "dap-ds-form-label": N,
-  "dap-ds-tooltip": J,
-  "dap-ds-icon-button": j,
-  "dap-ds-icon": V,
-  "dap-ds-typography": W,
-  "dap-ds-button": q,
-  "dap-ds-modal": A,
-  "dap-ds-feedback": M
-}, z.styles = G`
-    ${X(K)}
+  "dap-ds-form-label": j,
+  "dap-ds-tooltip": K,
+  "dap-ds-icon-button": J,
+  "dap-ds-icon": A,
+  "dap-ds-typography": X,
+  "dap-ds-button": N,
+  "dap-ds-modal": W,
+  "dap-ds-feedback": V
+}, z.styles = O`
+    ${R(G)}
   `;
 let o = z;
 a([
-  O("#input")
+  H("#input")
 ], o.prototype, "input", 2);
 a([
   n()
@@ -870,28 +863,28 @@ a([
   n({ type: Array, attribute: !1 })
 ], o.prototype, "files", 1);
 a([
-  v()
+  y()
 ], o.prototype, "_files", 2);
 a([
-  v()
+  y()
 ], o.prototype, "_uploadProgress", 2);
 a([
-  v()
+  y()
 ], o.prototype, "_uploadingFiles", 2);
 a([
-  v()
+  y()
 ], o.prototype, "_activeUploads", 2);
 a([
-  v()
+  y()
 ], o.prototype, "_uploadedFiles", 2);
 a([
-  v()
+  y()
 ], o.prototype, "_isDragOver", 2);
 a([
-  v()
+  y()
 ], o.prototype, "_showRemoveDialog", 2);
 a([
-  v()
+  y()
 ], o.prototype, "_fileToRemove", 2);
 export {
   o as default