dap-design-system 0.63.1 → 0.63.2

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

@@ -11,7 +11,7 @@ var E = (u, e, t) => e in u ? C(u, e, { enumerable: !0, configurable: !0, writab
   return u;
 }, T = (u, e) => B(u, P(e));
 var v = (u, e, t) => new Promise((i, s) => {
-  var l = (h) => {
+  var n = (h) => {
     try {
       d(t.next(h));
     } catch (c) {
@@ -23,21 +23,21 @@ var v = (u, e, t) => new Promise((i, s) => {
     } catch (c) {
       s(c);
     }
-  }, d = (h) => h.done ? i(h.value) : Promise.resolve(h.value).then(l, r);
+  }, d = (h) => h.done ? i(h.value) : Promise.resolve(h.value).then(n, r);
   d((t = t.apply(u, e)).next());
 });
 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 { query as H, property as l, 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 { formLabelTemplate as A } from "../../internal/templates/formLabel.js";
 import "../../localization/localization.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 M from "../button/button.component.js";
+import N from "../feedback/feedback.component.js";
+import V from "../form/form-label/form-label.component.js";
+import j 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";
@@ -45,8 +45,8 @@ 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);
+  for (var s = i > 1 ? void 0 : i ? Y(e, t) : e, n = u.length - 1, r; n >= 0; n--)
+    (r = u[n]) && (s = (i ? r(e, t, s) : r(s)) || s);
   return i && s && Q(e, t, s), s;
 };
 const z = class z extends q {
@@ -85,9 +85,9 @@ const z = class z extends q {
   validateFiles(e) {
     const t = [], i = this.keepValue ? this._files.length : 0;
     if (this.maxFiles && e.length + i > this.maxFiles)
-      for (const l of e)
+      for (const n of e)
         t.push({
-          file: l,
+          file: n,
           meta: {
             maxFiles: this.maxFiles,
             totalFiles: e.length + i
@@ -98,33 +98,33 @@ const z = class z extends q {
           type: "maxFiles"
         });
     let s = 0;
-    for (const l of e)
-      this.validateFileType(l) || t.push({
-        file: l,
+    for (const n of e)
+      this.validateFileType(n) || t.push({
+        file: n,
         meta: {
           type: this.accept,
-          fileType: l.type
+          fileType: n.type
         },
         message: this.fileTypeErrorText || D("fileInput.error.fileType", {
           type: this.accept
         }),
         type: "fileType"
-      }), this.maxSizePerFile && l.size > this.maxSizePerFile && t.push({
-        file: l,
+      }), this.maxSizePerFile && n.size > this.maxSizePerFile && t.push({
+        file: n,
         meta: {
           maxSizePerFile: this.maxSizePerFile,
-          fileSize: l.size
+          fileSize: n.size
         },
         message: this.maxSizePerFileErrorText || D("fileInput.error.perFileSize", {
           size: Math.round(this.maxSizePerFile / 1024 / 1024)
         }),
         type: "maxSizePerFile"
-      }), s += l.size, this.maxFileSize && s > this.maxFileSize && t.push({
-        file: l,
+      }), s += n.size, this.maxFileSize && s > this.maxFileSize && t.push({
+        file: n,
         meta: {
           maxFileSize: this.maxFileSize,
           totalSize: s,
-          fileSize: l.size
+          fileSize: n.size
         },
         message: this.maxFileSizeErrorText || D("fileInput.error.fileSize", {
           size: Math.round(this.maxFileSize / 1024 / 1024)
@@ -284,9 +284,9 @@ const z = class z extends q {
         return;
       }
       const i = new XMLHttpRequest();
-      return i.withCredentials = this.withCredentials, new Promise((s, l) => {
+      return i.withCredentials = this.withCredentials, new Promise((s, n) => {
         i.onload = () => {
-          i.status >= 200 && i.status < 300 ? s() : l(
+          i.status >= 200 && i.status < 300 ? s() : n(
             new $(
               `HTTP error! status: ${i.status}`,
               i.response,
@@ -294,7 +294,7 @@ const z = class z extends q {
             )
           );
         }, i.onerror = () => {
-          l(new Error("Network error during file deletion"));
+          n(new Error("Network error during file deletion"));
         };
         let r = this.deleteUrl;
         if (r = r.replace(
@@ -339,8 +339,8 @@ const z = class z extends q {
       const t = e.length;
       let i = 0;
       for (const s of e) {
-        const l = new FormData();
-        l.append(this.uploadProperty, s);
+        const n = new FormData();
+        n.append(this.uploadProperty, s);
         try {
           let r;
           this._uploadingFiles.add(s.name), this._uploadProgress = T(F({}, this._uploadProgress), { [s.name]: 0 }), this.emit("dds-upload-start", { file: s });
@@ -380,7 +380,7 @@ const z = class z extends q {
               }
             }, d.onerror = () => {
               this.fileList && (r = this.setFileLoadingState(s, !1)), b(new Error("Network error"));
-            }, d.send(l);
+            }, d.send(n);
           }), c = JSON.parse(h);
           this.fileList && (r = this.setFileLoadingState(s, !1)), this._uploadingFiles.delete(s.name), this._activeUploads.delete(s.name);
           const p = F({}, this._uploadProgress);
@@ -426,14 +426,14 @@ const z = class z extends q {
   handleFileList(e) {
     var s;
     const t = [...this._files];
-    this.keepValue && ((s = this._files) != null && s.length) ? (Object.values(e).forEach((l) => {
+    this.keepValue && ((s = this._files) != null && s.length) ? (Object.values(e).forEach((n) => {
       !!this._files.find(
-        (d) => this.checkFileEquality(d, l)
-      ) || t.push(l);
+        (d) => this.checkFileEquality(d, n)
+      ) || t.push(n);
     }), this._files = t) : this._files = e ? Object.values(e) : [];
     const i = new DataTransfer();
-    this._files.forEach((l) => {
-      i.items.add(l);
+    this._files.forEach((n) => {
+      i.items.add(n);
     }), this.input.files = i.files, this.autoupload && this.uploadFiles(this._files);
   }
   onChange(e) {
@@ -467,10 +467,10 @@ const z = class z extends q {
         return;
       }
     }
-    const s = i ? Array.from(i) : [], l = this.calculateNewFileList(i), r = /* @__PURE__ */ new Set();
+    const s = i ? Array.from(i) : [], n = this.calculateNewFileList(i), r = /* @__PURE__ */ new Set();
     if (this.emit(
       "dds-file-change",
-      { newFiles: s, files: l, canceledFiles: r, currentFiles: this._files },
+      { newFiles: s, files: n, canceledFiles: r, currentFiles: this._files },
       { cancelable: !0 }
     ).defaultPrevented) {
       this.input.value = "";
@@ -523,15 +523,15 @@ const z = class z extends q {
         return;
       }
     }
-    const i = t ? Array.from(t) : [], s = this.calculateNewFileList(t != null ? t : null), l = /* @__PURE__ */ new Set();
+    const i = t ? Array.from(t) : [], s = this.calculateNewFileList(t != null ? t : null), n = /* @__PURE__ */ new Set();
     if (!this.emit(
       "dds-file-change",
-      { newFiles: i, files: s, canceledFiles: l, currentFiles: this._files },
+      { newFiles: i, files: s, canceledFiles: n, currentFiles: this._files },
       { cancelable: !0 }
     ).defaultPrevented)
-      if (l.size > 0 && t) {
+      if (n.size > 0 && t) {
         const h = Array.from(t).filter(
-          (p) => !l.has(p)
+          (p) => !n.has(p)
         ), c = new DataTransfer();
         h.forEach((p) => c.items.add(p)), this.handleFileList(c.files), this.setValidity(), this.emit("dds-files-accepted", { files: this._files });
       } else
@@ -542,7 +542,7 @@ const z = class z extends q {
     const e = this.showBrowseButton === "true" && !this.autoupload, t = e || !this.showDropzone;
     return g`
       <div class="label-container">
-        ${M({
+        ${A({
       label: this.label,
       id: "label",
       htmlFor: "input",
@@ -628,7 +628,7 @@ const z = class z extends q {
       { "input--disabled": this.disabled }
     )}
         role="region"
-        aria-label="File upload area">
+        aria-label=${this.regionAriaLabel || this.localize.t("fileInput.uploadArea")}>
         <div class="input__holder" aria-describedby="drop-instructions">
           <input
             id="input"
@@ -662,7 +662,6 @@ const z = class z extends q {
                 @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 || this.localize.t("fileInput.browse")}</dap-ds-button
               >` : m}
           ${this.showUploadButton === "true" && !this.autoupload ? g`
@@ -684,12 +683,12 @@ const z = class z extends q {
       </span>
       ${!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;
+              ${Array.from(this._uploadingFiles).map((n) => {
+      const r = this._uploadProgress[n] || 0;
       return g`
                   <div class="upload-progress__item">
                     <dap-ds-typography variant="caption">
-                      ${l} - ${Math.round(r)}%
+                      ${n} - ${Math.round(r)}%
                     </dap-ds-typography>
                     <div class="upload-progress__bar">
                       <div
@@ -733,14 +732,14 @@ const z = class z extends q {
   }
 };
 z.tagName = "dap-ds-file-input", z.dependencies = {
-  "dap-ds-form-label": j,
+  "dap-ds-form-label": V,
   "dap-ds-tooltip": K,
   "dap-ds-icon-button": J,
-  "dap-ds-icon": A,
+  "dap-ds-icon": j,
   "dap-ds-typography": X,
-  "dap-ds-button": N,
+  "dap-ds-button": M,
   "dap-ds-modal": W,
-  "dap-ds-feedback": V
+  "dap-ds-feedback": N
 }, z.styles = O`
     ${R(G)}
   `;
@@ -749,118 +748,121 @@ a([
   H("#input")
 ], o.prototype, "input", 2);
 a([
-  n()
+  l()
 ], o.prototype, "uploadButtonLabel", 2);
 a([
-  n()
+  l()
 ], o.prototype, "browseButtonLabel", 2);
 a([
-  n()
+  l()
 ], o.prototype, "browseButtonTestId", 2);
 a([
-  n()
+  l()
 ], o.prototype, "uploadButtonTestId", 2);
 a([
-  n({ type: Boolean })
+  l({ type: Boolean })
 ], o.prototype, "showDropzone", 2);
 a([
-  n()
+  l()
 ], o.prototype, "dropzoneText", 2);
 a([
-  n({ type: Boolean })
+  l({ type: Boolean })
 ], o.prototype, "showFileList", 2);
 a([
-  n({ type: Boolean })
+  l({ type: Boolean })
 ], o.prototype, "confirmRemove", 2);
 a([
-  n({ type: String })
+  l({ type: String })
 ], o.prototype, "showUploadButton", 2);
 a([
-  n({ type: String })
+  l({ type: String })
 ], o.prototype, "showBrowseButton", 2);
 a([
-  n()
+  l()
 ], o.prototype, "accept", 2);
 a([
-  n({ type: Boolean })
+  l({ type: Boolean })
 ], o.prototype, "multiple", 2);
 a([
-  n({ type: Boolean })
+  l({ type: Boolean })
 ], o.prototype, "keepValue", 2);
 a([
-  n()
+  l()
 ], o.prototype, "uploadUrl", 2);
 a([
-  n({ type: Boolean })
+  l({ type: Boolean })
 ], o.prototype, "autoupload", 2);
 a([
-  n()
+  l()
 ], o.prototype, "uploadProperty", 2);
 a([
-  n()
+  l()
 ], o.prototype, "uploadMethod", 2);
 a([
-  n()
+  l()
 ], o.prototype, "deleteUrl", 2);
 a([
-  n()
+  l()
 ], o.prototype, "deleteMethod", 2);
 a([
-  n({ type: Boolean })
+  l({ type: Boolean })
 ], o.prototype, "withCredentials", 2);
 a([
-  n()
+  l()
 ], o.prototype, "uploadHeaders", 2);
 a([
-  n()
+  l()
 ], o.prototype, "deleteHeaders", 2);
 a([
-  n({ attribute: !1 })
+  l({ attribute: !1 })
 ], o.prototype, "fileList", 2);
 a([
-  n({ type: Number })
+  l({ type: Number })
 ], o.prototype, "maxFiles", 2);
 a([
-  n({ type: Number })
+  l({ type: Number })
 ], o.prototype, "maxFileSize", 2);
 a([
-  n({ type: Number })
+  l({ type: Number })
 ], o.prototype, "maxSizePerFile", 2);
 a([
-  n({ type: String })
+  l({ type: String })
 ], o.prototype, "maxFileSizeErrorText", 2);
 a([
-  n({ type: String })
+  l({ type: String })
 ], o.prototype, "maxSizePerFileErrorText", 2);
 a([
-  n({ type: String })
+  l({ type: String })
 ], o.prototype, "maxFileAmountErrorText", 2);
 a([
-  n({ type: String })
+  l({ type: String })
 ], o.prototype, "fileTypeErrorText", 2);
 a([
-  n()
+  l()
 ], o.prototype, "removeButtonLabel", 2);
 a([
-  n()
+  l()
 ], o.prototype, "cancelButtonLabel", 2);
 a([
-  n({ type: String })
+  l({ type: String })
 ], o.prototype, "removeButtonDanger", 2);
 a([
-  n({ type: String })
+  l({ type: String })
 ], o.prototype, "showThumbnail", 2);
 a([
-  n()
+  l()
 ], o.prototype, "dropzoneAriaLabel", 2);
 a([
-  n({ type: String })
+  l()
+], o.prototype, "regionAriaLabel", 2);
+a([
+  l({ type: String })
 ], o.prototype, "dropzoneFocusable", 2);
 a([
-  n({ type: String })
+  l({ type: String })
 ], o.prototype, "thumbnailSize", 2);
 a([
-  n({ type: Array, attribute: !1 })
+  l({ type: Array, attribute: !1 })
 ], o.prototype, "files", 1);
 a([
   y()