dap-design-system 0.60.2 → 0.61.0

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

@@ -0,0 +1,846 @@
+var C = Object.defineProperty, P = Object.defineProperties;
+var U = Object.getOwnPropertyDescriptors;
+var E = Object.getOwnPropertySymbols;
+var I = Object.prototype.hasOwnProperty, R = Object.prototype.propertyIsEnumerable;
+var k = (c, e, t) => e in c ? C(c, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[e] = t, F = (c, e) => {
+  for (var t in e || (e = {}))
+    I.call(e, t) && k(c, t, e[t]);
+  if (E)
+    for (var t of E(e))
+      R.call(e, t) && k(c, t, e[t]);
+  return c;
+}, L = (c, e) => P(c, U(e));
+var $ = (c, e, t) => new Promise((i, s) => {
+  var p = (h) => {
+    try {
+      n(t.next(h));
+    } catch (u) {
+      s(u);
+    }
+  }, r = (h) => {
+    try {
+      n(t.throw(h));
+    } catch (u) {
+      s(u);
+    }
+  }, n = (h) => h.done ? i(h.value) : Promise.resolve(h.value).then(p, r);
+  n((t = t.apply(c, 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 l } 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 w } from "../../common/errors.js";
+import { GenericFormElement as H } from "../../internal/mixin/genericFormElement.js";
+import "../../localization/localization.js";
+import q from "../button/button.component.js";
+import M from "../feedback/feedback.component.js";
+import V from "../form/form-label/form-label.component.js";
+import j from "../icon/icon.component.js";
+import N 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 B, { 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";
+var Q = Object.defineProperty, Y = Object.getOwnPropertyDescriptor, a = (c, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? Y(e, t) : e, p = c.length - 1, r; p >= 0; p--)
+    (r = c[p]) && (s = (i ? r(e, t, s) : r(s)) || s);
+  return i && s && Q(e, t, s), s;
+};
+const z = class z extends H {
+  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();
+    };
+  }
+  get files() {
+    return this._files;
+  }
+  checkFileEquality(e, t) {
+    return e.name === t.name && e.size === t.size && e.type === t.type && e.lastModified === t.lastModified;
+  }
+  /**
+   * Validates if a file type is accepted based on the accept attribute
+   */
+  validateFileType(e) {
+    return this.accept ? this.accept.split(",").map((i) => i.trim()).some((i) => {
+      if (i.includes("/")) {
+        if (i.endsWith("/*")) {
+          const s = i.slice(0, -2);
+          return e.type.startsWith(s);
+        }
+        return e.type === i;
+      }
+      return i.startsWith(".") ? e.name.toLowerCase().endsWith(i.toLowerCase()) : !1;
+    }) : !0;
+  }
+  get focusElement() {
+    return this.input;
+  }
+  /**
+   * Validates a file list against all constraints (count, size, type)
+   */
+  validateFiles(e) {
+    const t = [];
+    if (this.maxFiles && e.length + this._files.length > this.maxFiles)
+      for (const s of e)
+        t.push({
+          file: s,
+          meta: {
+            maxFiles: this.maxFiles,
+            totalFiles: e.length + this._files.length
+          },
+          message: this.maxFileAmountErrorText || T("fileInput.error.fileAmount", {
+            count: this.maxFiles
+          }),
+          type: "maxFiles"
+        });
+    let i = 0;
+    for (const s of e)
+      this.validateFileType(s) || t.push({
+        file: s,
+        meta: {
+          type: this.accept,
+          fileType: s.type
+        },
+        message: this.fileTypeErrorText || T("fileInput.error.fileType", {
+          type: this.accept
+        }),
+        type: "fileType"
+      }), this.maxSizePerFile && s.size > this.maxSizePerFile && t.push({
+        file: s,
+        meta: {
+          maxSizePerFile: this.maxSizePerFile,
+          fileSize: s.size
+        },
+        message: this.maxSizePerFileErrorText || T("fileInput.error.perFileSize", {
+          size: Math.round(this.maxSizePerFile / 1024 / 1024)
+        }),
+        type: "maxSizePerFile"
+      }), i += s.size, this.maxFileSize && i > this.maxFileSize && t.push({
+        file: s,
+        meta: {
+          maxFileSize: this.maxFileSize,
+          totalSize: i,
+          fileSize: s.size
+        },
+        message: this.maxFileSizeErrorText || T("fileInput.error.fileSize", {
+          size: Math.round(this.maxFileSize / 1024 / 1024)
+        }),
+        type: "maxFileSize"
+      });
+    return {
+      isValid: t.length === 0,
+      errors: t.length > 0 ? t : void 0
+    };
+  }
+  removeFile(e) {
+    return this.confirmRemove ? new Promise((t, i) => {
+      this._removeResolve = t, this._removeReject = i, this._showRemoveDialog = !0, this._fileToRemove = e;
+    }).then(() => this.performFileRemoval(e)).catch(() => {
+    }) : this.performFileRemoval(e);
+  }
+  performFileRemoval(e) {
+    return $(this, null, function* () {
+      const t = e.name;
+      if (this._uploadedFiles.has(t))
+        try {
+          const i = this._uploadedFiles.get(t);
+          yield this.deleteUploadedFile(t, i), this._uploadedFiles.delete(t);
+        } catch (i) {
+          this.emit("dds-file-delete-error", { file: e, error: i });
+        }
+      this._files = this._files.filter(
+        (i) => !this.checkFileEquality(i, e)
+      ), this._files.length === 0 && this.required && (this.value = void 0, this.input.value = ""), this.emit("dds-file-removed", { file: e }), this.emit("dds-file-change", {
+        newFiles: [],
+        files: this._files,
+        canceledFiles: /* @__PURE__ */ new Set(),
+        currentFiles: this._files
+      }), this.setValidity(), this.emit("dds-files-accepted", { files: this._files });
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback(), B.on("languageChanged", this.languageChangeHandler), this.addEventListener("dds-file-remove", (e) => {
+      const t = e;
+      this.removeFile(t.detail.file);
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), B.off("languageChanged", this.languageChangeHandler);
+  }
+  onConfirmDelete() {
+    return $(this, null, function* () {
+      this._removeResolve && this._removeResolve(!0), this._showRemoveDialog = !1, this._fileToRemove = null, this._removeResolve = null, this._removeReject = null;
+    });
+  }
+  onCancelDelete() {
+    this._removeReject && this._removeReject(new Error("User cancelled")), this._showRemoveDialog = !1, this._fileToRemove = null, this._removeResolve = null, this._removeReject = null;
+  }
+  onCancel() {
+    this.emit("dds-cancel"), this.setValidity();
+  }
+  onClick() {
+    this.disabled || this.input.click();
+  }
+  onDropzoneKeydown(e) {
+    this.disabled || this.dropzoneFocusable === "false" || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.input.click());
+  }
+  setFileLoadingState(e, t) {
+    if (!this.fileList)
+      return;
+    const i = this.fileList.getFileByName(
+      e.name
+    );
+    return i.loading = t, i;
+  }
+  /**
+   * Aborts upload for a specific file
+   */
+  abortUpload(e) {
+    const t = this._activeUploads.get(e);
+    if (t) {
+      t.abort(), this._uploadingFiles.delete(e), this._activeUploads.delete(e);
+      const i = F({}, this._uploadProgress);
+      delete i[e], this._uploadProgress = i;
+    }
+  }
+  /**
+   * Aborts all active uploads
+   */
+  abortAllUploads() {
+    this._activeUploads.forEach((e) => {
+      e.abort();
+    }), this._uploadingFiles.clear(), this._activeUploads.clear(), this._uploadProgress = {};
+  }
+  /**
+   * Manually start upload of all selected files
+   */
+  startUpload() {
+    this._files.length > 0 && this.uploadUrl && this.uploadFiles(this._files);
+  }
+  /**
+   * Delete an uploaded file from the server
+   */
+  deleteUploadedFile(e, t) {
+    return $(this, null, function* () {
+      if (!this.deleteUrl) {
+        console.error("Delete URL is not configured");
+        return;
+      }
+      const i = new XMLHttpRequest();
+      return i.withCredentials = this.withCredentials, new Promise((s, p) => {
+        i.onload = () => {
+          i.status >= 200 && i.status < 300 ? s() : p(
+            new S(
+              `HTTP error! status: ${i.status}`,
+              i.response,
+              i.status
+            )
+          );
+        }, i.onerror = () => {
+          p(new Error("Network error during file deletion"));
+        };
+        let r = this.deleteUrl;
+        if (r = r.replace(
+          "{fileName}",
+          encodeURIComponent(e)
+        ), r = r.replace(
+          "{filename}",
+          encodeURIComponent(e)
+        ), t && typeof t == "object" && (t.id && (r = r.replace(
+          "{id}",
+          encodeURIComponent(t.id)
+        )), t.key && (r = r.replace(
+          "{key}",
+          encodeURIComponent(t.key)
+        )), t.location && (r = r.replace(
+          "{location}",
+          encodeURIComponent(t.location)
+        ))), i.open(this.deleteMethod, r), this.deleteHeaders)
+          try {
+            const n = JSON.parse(this.deleteHeaders);
+            Object.entries(n).forEach(([h, u]) => {
+              i.setRequestHeader(h, u);
+            });
+          } catch (n) {
+            console.warn("Invalid deleteHeaders JSON:", this.deleteHeaders);
+          }
+        this.deleteMethod === "DELETE" ? t && (t.ETag || t.VersionId) ? (i.setRequestHeader("Content-Type", "application/json"), i.send(
+          JSON.stringify({
+            ETag: t.ETag,
+            VersionId: t.VersionId
+          })
+        )) : i.send() : (i.setRequestHeader("Content-Type", "application/json"), i.send(JSON.stringify(t)));
+      });
+    });
+  }
+  uploadFiles(e) {
+    return $(this, null, function* () {
+      if (!this.uploadUrl) {
+        console.error("Upload URL is not configured");
+        return;
+      }
+      const t = e.length;
+      let i = 0;
+      for (const s of e) {
+        const p = new FormData();
+        p.append(this.uploadProperty, s);
+        try {
+          let r;
+          this._uploadingFiles.add(s.name), this._uploadProgress = L(F({}, this._uploadProgress), { [s.name]: 0 }), this.emit("dds-upload-start", { file: s });
+          const n = new XMLHttpRequest();
+          if (n.withCredentials = this.withCredentials, this._activeUploads.set(s.name, n), n.open(this.uploadMethod, this.uploadUrl), this.uploadHeaders)
+            try {
+              const f = JSON.parse(this.uploadHeaders);
+              Object.entries(f).forEach(([_, x]) => {
+                n.setRequestHeader(_, x);
+              });
+            } catch (f) {
+              console.warn("Invalid uploadHeaders JSON:", this.uploadHeaders);
+            }
+          n.upload.onprogress = (f) => {
+            if (f.lengthComputable) {
+              const _ = f.loaded / f.total * 100;
+              this._uploadProgress = L(F({}, this._uploadProgress), {
+                [s.name]: _
+              }), this.fileList && (r = this.setFileLoadingState(s, !0)), this.emit("dds-upload-progress", {
+                file: s,
+                item: r,
+                progress: _
+              });
+            }
+          };
+          const h = yield new Promise((f, _) => {
+            n.onload = () => {
+              if (n.status >= 200 && n.status < 300)
+                f(n.response);
+              else {
+                const x = new S(
+                  `HTTP error! status: ${n.status}`,
+                  n.response,
+                  n.status
+                );
+                _(x);
+              }
+            }, n.onerror = () => {
+              this.fileList && (r = this.setFileLoadingState(s, !1)), _(new Error("Network error"));
+            }, n.send(p);
+          }), u = JSON.parse(h);
+          this.fileList && (r = this.setFileLoadingState(s, !1)), this._uploadingFiles.delete(s.name), this._activeUploads.delete(s.name);
+          const d = F({}, this._uploadProgress);
+          delete d[s.name], this._uploadProgress = d, this._uploadedFiles.set(s.name, u), this.emit("dds-upload-complete", { file: s, item: r, result: u }), i++, i === t && this.emit("dds-all-uploads-complete");
+        } catch (r) {
+          this._uploadingFiles.delete(s.name), this._activeUploads.delete(s.name);
+          const n = F({}, this._uploadProgress);
+          delete n[s.name], this._uploadProgress = n;
+          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
+          );
+          if (this.fileList) {
+            const u = this.setFileLoadingState(s, !1);
+            this.emit("dds-upload-error", {
+              file: s,
+              item: u,
+              errors: [h]
+            });
+          } else
+            this.emit("dds-upload-error", { file: s, errors: [h] });
+        }
+      }
+    });
+  }
+  /**
+   * Calculates what the new file list would be if the given files were added
+   * Does not modify component state
+   */
+  calculateNewFileList(e) {
+    var i;
+    if (!e || e.length === 0)
+      return [];
+    const t = [...this._files];
+    return this.keepValue && ((i = this._files) != null && i.length) ? (Object.values(e).forEach((s) => {
+      !!this._files.find(
+        (r) => this.checkFileEquality(r, s)
+      ) || t.push(s);
+    }), t) : Object.values(e);
+  }
+  handleFileList(e) {
+    var s;
+    const t = [...this._files];
+    this.keepValue && ((s = this._files) != null && s.length) ? (Object.values(e).forEach((p) => {
+      !!this._files.find(
+        (n) => this.checkFileEquality(n, p)
+      ) || t.push(p);
+    }), this._files = t) : this._files = e ? Object.values(e) : [];
+    const i = new DataTransfer();
+    this._files.forEach((p) => {
+      i.items.add(p);
+    }), this.input.files = i.files, this.autoupload && this.uploadFiles(this._files);
+  }
+  onChange(e) {
+    const i = (e == null ? void 0 : e.target).files;
+    if ((!i || i.length === 0) && this._files.length > 0) {
+      this.input.value = "";
+      return;
+    }
+    if (i) {
+      const h = this.validateFiles(i);
+      if (!h.isValid && h.errors) {
+        const u = h.errors.map((d) => {
+          if (d.file)
+            return new w(
+              d.message,
+              d.file,
+              d.type,
+              d.meta
+            );
+          {
+            const f = i.length > 0 ? i[0] : new File([], "unknown");
+            return new w(
+              d.message,
+              f,
+              d.type,
+              d.meta
+            );
+          }
+        });
+        this.emit("dds-upload-error", { errors: u });
+        return;
+      }
+    }
+    const s = i ? Array.from(i) : [], p = this.calculateNewFileList(i), r = /* @__PURE__ */ new Set();
+    if (this.emit(
+      "dds-file-change",
+      { newFiles: s, files: p, canceledFiles: r, currentFiles: this._files },
+      { cancelable: !0 }
+    ).defaultPrevented) {
+      this.input.value = "";
+      return;
+    }
+    if (r.size > 0 && i) {
+      const h = Array.from(i).filter(
+        (d) => !r.has(d)
+      ), u = new DataTransfer();
+      h.forEach((d) => u.items.add(d)), this.value = this.input.value, this.handleFileList(u.files), this.setValidity(), this.emit("dds-files-accepted", { files: this._files });
+    } else
+      this.value = this.input.value, this.handleFileList(i), this.setValidity(), this.emit("dds-files-accepted", { files: this._files });
+  }
+  onDragenter(e) {
+    this.disabled || (e.preventDefault(), this._isDragOver = !0);
+  }
+  onDragover(e) {
+    this.disabled || e.preventDefault();
+  }
+  onDragleave(e) {
+    this.disabled || (e.preventDefault(), this.contains(e.relatedTarget) || (this._isDragOver = !1));
+  }
+  onDrop(e) {
+    var n;
+    if (this.disabled) return;
+    e.preventDefault(), this._isDragOver = !1;
+    const t = (n = e.dataTransfer) == null ? void 0 : n.files;
+    if (t) {
+      const h = this.validateFiles(t);
+      if (!h.isValid && h.errors) {
+        const u = h.errors.map((d) => {
+          if (d.file)
+            return new w(
+              d.message,
+              d.file,
+              d.type,
+              d.meta
+            );
+          {
+            const f = t.length > 0 ? t[0] : new File([], "unknown");
+            return new w(
+              d.message,
+              f,
+              d.type,
+              d.meta
+            );
+          }
+        });
+        this.emit("dds-upload-error", { errors: u });
+        return;
+      }
+    }
+    const i = t ? Array.from(t) : [], s = this.calculateNewFileList(t != null ? t : null), p = /* @__PURE__ */ new Set();
+    if (!this.emit(
+      "dds-file-change",
+      { newFiles: i, files: s, canceledFiles: p, currentFiles: this._files },
+      { cancelable: !0 }
+    ).defaultPrevented)
+      if (p.size > 0 && t) {
+        const h = Array.from(t).filter(
+          (d) => !p.has(d)
+        ), u = new DataTransfer();
+        h.forEach((d) => u.items.add(d)), this.handleFileList(u.files), this.setValidity(), this.emit("dds-files-accepted", { files: this._files });
+      } else
+        this.handleFileList(t != null ? t : null), this.setValidity(), this.emit("dds-files-accepted", { files: this._files });
+  }
+  render() {
+    var i, s;
+    const e = this.showBrowseButton === "true" && !this.autoupload, t = e || !this.showDropzone;
+    return m`
+      <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
+          part="tooltip"
+          content=${this.tooltip}
+          mode="toggle"
+          floatingStrategy="fixed"
+          placement=${this.tooltipPlacement}>
+          <dap-ds-icon-button
+            clean
+            class="info-button"
+            slot="trigger"
+            aria-label=${this.tooltipAriaLabel}
+            size=${this.size}
+            iconSize=${this.size === "xs" ? "16" : "22"}>
+            <dap-ds-icon
+              name="information-line"
+              class="info-button"></dap-ds-icon>
+          </dap-ds-icon-button>
+        </dap-ds-tooltip>`}
+      </div>
+      ${this.description && m`
+        <dap-ds-typography
+          part="description"
+          variant="description"
+          class=${D("input-description")}
+          size=${b(this.size)}
+          id="description">
+          ${this.description}
+        </dap-ds-typography>
+      `}
+      ${this.showDropzone ? m`
+            <div
+              class=${D(
+      "dropzone",
+      { "dropzone--dragover": this._isDragOver },
+      { "dropzone--disabled": this.disabled }
+    )}
+              part="dropzone"
+              @dragenter=${this.onDragenter}
+              @dragover=${this.onDragover}
+              @dragleave=${this.onDragleave}
+              @drop=${this.onDrop}
+              @keydown=${this.dropzoneFocusable === "true" ? this.onDropzoneKeydown : y}
+              @click=${this.onClick}
+              role=${this.dropzoneFocusable === "true" ? "button" : "group"}
+              aria-label=${b(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")}
+                  </dap-ds-typography>
+                  ${this.accept && m`
+                    <dap-ds-typography
+                      variant="caption"
+                      class="dropzone__accept">
+                      ${g("fileInput.dropzone.acceptedTypes")}:
+                      ${this.accept}
+                    </dap-ds-typography>
+                  `}
+                </div>
+              </slot>
+            </div>
+          ` : y}
+      <span
+        part="base"
+        class=${D(
+      "input",
+      { "input--success": this.status === "success" },
+      { "input--error": this.status === "error" },
+      { "input--disabled": this.disabled }
+    )}
+        role="region"
+        aria-label="File upload area">
+        <div class="input__holder" aria-describedby="drop-instructions">
+          <input
+            id="input"
+            class="input__control sr-only"
+            part="input"
+            name=${this.name}
+            type="file"
+            accept=${b(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}"
+            @change=${this.onChange}
+            @cancel=${this.onCancel}
+            @invalid=${this.handleInvalid}
+            @blur=${this.onBlur}
+            @focus=${this.onFocus} />
+          ${e ? m` <dap-ds-button
+                class="input__button"
+                part="browse-button"
+                data-testid=${this.browseButtonTestId}
+                tabindex="-1"
+                variant="outline"
+                ?disabled=${this.disabled}
+                size=${b(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")}`}"
+                role="button"
+                >${this.browseButtonLabel || g("fileInput.browse")}</dap-ds-button
+              >` : y}
+          ${this.showUploadButton === "true" && !this.autoupload ? m`
+                <dap-ds-button
+                  class="upload-button"
+                  part="upload-button"
+                  data-testid=${this.uploadButtonTestId}
+                  variant="primary"
+                  size=${b(this.size)}
+                  ?disabled=${this._files.length === 0 || !this.uploadUrl || this._uploadingFiles.size > 0}
+                  @click=${this.startUpload}
+                  >${this.uploadButtonLabel || g("fileInput.upload")}</dap-ds-button
+                >
+              ` : y}
+          <div id="drop-instructions" class="sr-only">
+            ${g("fileInput.dragDropInstructions")}
+          </div>
+        </div>
+      </span>
+      ${!this.fileList && this._uploadingFiles.size > 0 ? m`
+            <div class="upload-progress" part="upload-progress">
+              ${Array.from(this._uploadingFiles).map((p) => {
+      const r = this._uploadProgress[p] || 0;
+      return m`
+                  <div class="upload-progress__item">
+                    <dap-ds-typography variant="caption">
+                      ${p} - ${Math.round(r)}%
+                    </dap-ds-typography>
+                    <div class="upload-progress__bar">
+                      <div
+                        class="upload-progress__fill"
+                        style="width: ${r}%"></div>
+                    </div>
+                  </div>
+                `;
+    })}
+            </div>
+          ` : y}
+      <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")}
+        .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", {
+      fileName: (s = (i = this._fileToRemove) == null ? void 0 : i.name) != null ? s : ""
+    })}
+          </dap-ds-typography>
+        </div>
+      </dap-ds-modal>
+
+      ${this.feedback ? m`
+            <dap-ds-feedback
+              part="feedback"
+              feedbackType=${b(this.feedbackType)}
+              feedbackSize=${b(this.size)}
+              id="feedback"
+              .feedbackSubtle=${this.subtle}>
+              ${this.feedback}
+            </dap-ds-feedback>
+          ` : y}
+    `;
+  }
+};
+z.tagName = "dap-ds-file-input", z.dependencies = {
+  "dap-ds-form-label": V,
+  "dap-ds-tooltip": J,
+  "dap-ds-icon-button": N,
+  "dap-ds-icon": j,
+  "dap-ds-typography": W,
+  "dap-ds-button": q,
+  "dap-ds-modal": A,
+  "dap-ds-feedback": M
+}, z.styles = G`
+    ${X(K)}
+  `;
+let o = z;
+a([
+  O("#input")
+], o.prototype, "input", 2);
+a([
+  l()
+], o.prototype, "uploadButtonLabel", 2);
+a([
+  l()
+], o.prototype, "browseButtonLabel", 2);
+a([
+  l()
+], o.prototype, "browseButtonTestId", 2);
+a([
+  l()
+], o.prototype, "uploadButtonTestId", 2);
+a([
+  l({ type: Boolean })
+], o.prototype, "showDropzone", 2);
+a([
+  l()
+], o.prototype, "dropzoneText", 2);
+a([
+  l({ type: Boolean })
+], o.prototype, "showFileList", 2);
+a([
+  l({ type: Boolean })
+], o.prototype, "confirmRemove", 2);
+a([
+  l({ type: String })
+], o.prototype, "showUploadButton", 2);
+a([
+  l({ type: String })
+], o.prototype, "showBrowseButton", 2);
+a([
+  l()
+], o.prototype, "accept", 2);
+a([
+  l({ type: Boolean })
+], o.prototype, "multiple", 2);
+a([
+  l({ type: Boolean })
+], o.prototype, "keepValue", 2);
+a([
+  l()
+], o.prototype, "uploadUrl", 2);
+a([
+  l({ type: Boolean })
+], o.prototype, "autoupload", 2);
+a([
+  l()
+], o.prototype, "uploadProperty", 2);
+a([
+  l()
+], o.prototype, "uploadMethod", 2);
+a([
+  l()
+], o.prototype, "deleteUrl", 2);
+a([
+  l()
+], o.prototype, "deleteMethod", 2);
+a([
+  l({ type: Boolean })
+], o.prototype, "withCredentials", 2);
+a([
+  l()
+], o.prototype, "uploadHeaders", 2);
+a([
+  l()
+], o.prototype, "deleteHeaders", 2);
+a([
+  l({ attribute: !1 })
+], o.prototype, "fileList", 2);
+a([
+  l({ type: Number })
+], o.prototype, "maxFiles", 2);
+a([
+  l({ type: Number })
+], o.prototype, "maxFileSize", 2);
+a([
+  l({ type: Number })
+], o.prototype, "maxSizePerFile", 2);
+a([
+  l({ type: String })
+], o.prototype, "maxFileSizeErrorText", 2);
+a([
+  l({ type: String })
+], o.prototype, "maxSizePerFileErrorText", 2);
+a([
+  l({ type: String })
+], o.prototype, "maxFileAmountErrorText", 2);
+a([
+  l({ type: String })
+], o.prototype, "fileTypeErrorText", 2);
+a([
+  l()
+], o.prototype, "removeButtonLabel", 2);
+a([
+  l()
+], o.prototype, "cancelButtonLabel", 2);
+a([
+  l({ type: String })
+], o.prototype, "removeButtonDanger", 2);
+a([
+  l({ type: String })
+], o.prototype, "showThumbnail", 2);
+a([
+  l()
+], o.prototype, "dropzoneAriaLabel", 2);
+a([
+  l({ type: String })
+], o.prototype, "dropzoneFocusable", 2);
+a([
+  l({ type: String })
+], o.prototype, "thumbnailSize", 2);
+a([
+  l({ type: Array, attribute: !1 })
+], o.prototype, "files", 1);
+a([
+  v()
+], o.prototype, "_files", 2);
+a([
+  v()
+], o.prototype, "_uploadProgress", 2);
+a([
+  v()
+], o.prototype, "_uploadingFiles", 2);
+a([
+  v()
+], o.prototype, "_activeUploads", 2);
+a([
+  v()
+], o.prototype, "_uploadedFiles", 2);
+a([
+  v()
+], o.prototype, "_isDragOver", 2);
+a([
+  v()
+], o.prototype, "_showRemoveDialog", 2);
+a([
+  v()
+], o.prototype, "_fileToRemove", 2);
+export {
+  o as default
+};
+//# sourceMappingURL=file-input.component.js.map