dap-design-system/dist/components/file-input/file-input.component.js

Official design system for the DÁP (dap.gov.hu)

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