wj-elements 0.7.7 → 0.8.0

package/dist/wje-file-upload.js

@@ -1,700 +1,262 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { Localizer } from "./localize.js";
-import WJElement from "./wje-element.js";
-import Button from "./wje-button.js";
-import { isValidFileType } from "./utils.js";
-import { event } from "./event.js";
-function fileType() {
-  return [
-    {
-      type: ["jpg", "jpeg", "png", "gif", "bpm", "tiff", "svg"],
-      name: "photo"
-    },
-    {
-      type: ["zip", "rar", "cab", "jar", "tar", "gzip", "uue", "bz2", "scorm", "war"],
-      name: "file-type-zip"
-    },
-    {
-      type: ["mov", "mp4", "avi", "flv"],
-      name: "video"
-    },
-    {
-      type: ["m4a", "mp3", "wav"],
-      name: "audio"
-    },
-    {
-      type: ["html", "html"],
-      name: "file-type-html"
-    },
-    {
-      type: ["css"],
-      name: "code"
-    },
-    {
-      type: ["txt"],
-      name: "file-type-txt"
-    },
-    {
-      type: [
-        "doc",
-        "docx",
-        "msword",
-        "vnd.openxmlformats-officedocument.wordprocessingml.document",
-        "vnd.ms-word.document.macroenabled.12",
-        "vnd.openxmlformats-officedocument.wordprocessingml.template",
-        "vnd.ms-word.template.macroenabled.12",
-        "vnd.oasis.opendocument.text"
-      ],
-      name: "file-type-doc"
-    },
-    {
-      type: [
-        "xls",
-        "xlsx",
-        "vnd.ms-excel",
-        "vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-        "vnd.ms-excel.sheet.macroenabled.12",
-        "vnd.openxmlformats-officedocument.spreadsheetml.template",
-        "vnd.ms-excel.template.macroenabled.12",
-        "vnd.ms-excel.addin.macroenabled.12",
-        "vnd.ms-excel.sheet.binary.macroenabled.12",
-        "vnd.oasis.opendocument.spreadsheet"
-      ],
-      name: "file-type-xls"
-    },
-    {
-      type: ["pdf"],
-      name: "file-type-pdf"
-    },
-    {
-      type: [
-        "ppt",
-        "pptx",
-        "odp",
-        "vnd.ms-powerpoint",
-        "vnd.openxmlformats-officedocument.presentationml.presentation",
-        "vnd.ms-powerpoint.presentation.macroenabled.12",
-        "vnd.openxmlformats-officedocument.presentationml.slideshow",
-        "vnd.ms-powerpoint.slideshow.macroenabled.12",
-        "vnd.openxmlformats-officedocument.presentationml.template",
-        "vnd.ms-powerpoint.template.macroenabled.12",
-        "vnd.oasis.opendocument.presentation"
-      ],
-      name: "file-type-ppt"
-    }
-  ];
+import { Localizer as e } from "./localize.js";
+import t from "./wje-element.js";
+import i from "./wje-button.js";
+import { isValidFileType as s } from "./utils.js";
+import { event as r } from "./event.js";
+function a(e2) {
+  let t2;
+  return e2 ? ("folder" !== e2.toLowerCase() ? [{ type: ["jpg", "jpeg", "png", "gif", "bpm", "tiff", "svg"], name: "photo" }, { type: ["zip", "rar", "cab", "jar", "tar", "gzip", "uue", "bz2", "scorm", "war"], name: "file-type-zip" }, { type: ["mov", "mp4", "avi", "flv"], name: "video" }, { type: ["m4a", "mp3", "wav"], name: "audio" }, { type: ["html", "html"], name: "file-type-html" }, { type: ["css"], name: "code" }, { type: ["txt"], name: "file-type-txt" }, { type: ["doc", "docx", "msword", "vnd.openxmlformats-officedocument.wordprocessingml.document", "vnd.ms-word.document.macroenabled.12", "vnd.openxmlformats-officedocument.wordprocessingml.template", "vnd.ms-word.template.macroenabled.12", "vnd.oasis.opendocument.text"], name: "file-type-doc" }, { type: ["xls", "xlsx", "vnd.ms-excel", "vnd.openxmlformats-officedocument.spreadsheetml.sheet", "vnd.ms-excel.sheet.macroenabled.12", "vnd.openxmlformats-officedocument.spreadsheetml.template", "vnd.ms-excel.template.macroenabled.12", "vnd.ms-excel.addin.macroenabled.12", "vnd.ms-excel.sheet.binary.macroenabled.12", "vnd.oasis.opendocument.spreadsheet"], name: "file-type-xls" }, { type: ["pdf"], name: "file-type-pdf" }, { type: ["ppt", "pptx", "odp", "vnd.ms-powerpoint", "vnd.openxmlformats-officedocument.presentationml.presentation", "vnd.ms-powerpoint.presentation.macroenabled.12", "vnd.openxmlformats-officedocument.presentationml.slideshow", "vnd.ms-powerpoint.slideshow.macroenabled.12", "vnd.openxmlformats-officedocument.presentationml.template", "vnd.ms-powerpoint.template.macroenabled.12", "vnd.oasis.opendocument.presentation"], name: "file-type-ppt" }].forEach((i2) => {
+    i2.type.includes(e2.toLowerCase()) && (t2 = i2.name);
+  }) : t2 = "folder", t2) : t2;
 }
-function getFileTypeIcon(type) {
-  let searchType;
-  if (!type) {
-    return searchType;
-  }
-  if (type.toLowerCase() !== "folder") {
-    fileType().forEach((i) => {
-      if (i.type.includes(type.toLowerCase())) {
-        searchType = i.name;
-      }
+function l(e2, t2 = 1048576, i2 = false) {
+  return i2 ? (t3, i3) => (function(e3, t4, i4) {
+    const s2 = new FormData();
+    return s2.append("file", t4), fetch(e3, { method: "POST", body: s2 }).then((e4) => e4.json()).then((e4) => (i4.setAttribute("uploaded", t4.size), { data: e4, file: t4 })).catch((e4) => {
+      console.error("Error:", e4);
     });
-  } else {
-    searchType = "folder";
-  }
-  return searchType;
-}
-function upload(url, chunkSize = 1024 * 1024, wholeFile = false) {
-  if (wholeFile) {
-    return (file, preview) => uploadWholeFile(url, file, preview);
-  }
-  return (file, preview) => uploadFileInChunks(url, file, preview, chunkSize);
-}
-async function uploadFileInChunks(url, file, preview, chunkSize = 1024 * 1024) {
-  let offset = 0;
-  const totalChunks = Math.ceil(file.size / chunkSize);
-  const partResponses = [];
-  while (offset < file.size) {
-    const chunk = file.slice(offset, offset + chunkSize);
-    const stream = new ReadableStream({
-      start(controller) {
-        const reader = chunk.stream().getReader();
-        let uploadedBytes = 0;
-        reader.read().then(function process({ done, value }) {
-          if (done) {
-            controller.close();
-            return Promise.resolve();
-          }
-          uploadedBytes += value.byteLength;
-          (offset + uploadedBytes) / file.size * 100;
-          preview.setAttribute("uploaded", offset + uploadedBytes);
-          controller.enqueue(value);
-          return reader.read().then(process);
+  })(e2, t3, i3) : (i3, s2) => (async function(e3, t3, i4, s3 = 1048576) {
+    let r2 = 0;
+    const a2 = Math.ceil(t3.size / s3), l2 = [];
+    for (; r2 < t3.size; ) {
+      const o2 = t3.slice(r2, r2 + s3), n = new ReadableStream({ start(e4) {
+        const s4 = o2.stream().getReader();
+        let a3 = 0;
+        s4.read().then(function l3({ done: o3, value: n2 }) {
+          return o3 ? (e4.close(), Promise.resolve()) : (a3 += n2.byteLength, t3.size, i4.setAttribute("uploaded", r2 + a3), e4.enqueue(n2), s4.read().then(l3));
         });
+      } }), d = new FormData();
+      d.append("file", new Blob([n])), d.append("chunkIndex", Math.floor(r2 / s3)), d.append("totalChunks", a2), d.append("fileName", t3.name);
+      try {
+        const t4 = await fetch(e3, { method: "POST", body: d });
+        if (!t4.ok) throw new Error(`Failed to upload chunk ${Math.floor(r2 / s3) + 1}: ${t4.statusText}`);
+        l2.push(t4);
+      } catch (e4) {
+        console.error("Error uploading chunk:", e4);
+        break;
       }
-    });
-    const formData = new FormData();
-    formData.append("file", new Blob([stream]));
-    formData.append("chunkIndex", Math.floor(offset / chunkSize));
-    formData.append("totalChunks", totalChunks);
-    formData.append("fileName", file.name);
-    try {
-      const response2 = await fetch(url, {
-        method: "POST",
-        body: formData
-      });
-      if (!response2.ok) {
-        throw new Error(`Failed to upload chunk ${Math.floor(offset / chunkSize) + 1}: ${response2.statusText}`);
-      }
-      partResponses.push(response2);
-    } catch (error) {
-      console.error("Error uploading chunk:", error);
-      break;
+      r2 += s3;
     }
-    offset += chunkSize;
-  }
-  const response = await partResponses.at(-1).json();
-  return {
-    data: response,
-    file
-  };
-}
-function uploadWholeFile(url, file, preview) {
-  const formData = new FormData();
-  formData.append("file", file);
-  return fetch(url, {
-    method: "POST",
-    body: formData
-  }).then((response) => response.json()).then((data) => {
-    preview.setAttribute("uploaded", file.size);
-    return {
-      data,
-      file
-    };
-  }).catch((error) => {
-    console.error("Error:", error);
-  });
+    return { data: await l2.at(-1).json(), file: t3 };
+  })(e2, i3, s2, t2);
 }
-const styles = "/*\n[ WJ File Upload ]\n*/\n\n:host {\n    width: 100%;\n    p {\n        margin: 0;\n    }\n}\n\n.native-file-upload {\n    width: 100%;\n    position: relative;\n    border: 1px dashed var(--wje-file-upload-border-color, var(--wje-border-color));\n    border-radius: var(--wje-border-radius-medium);\n    transition: border-color var(--wje-transition-fast);\n    padding: var(--wje-file-upload-padding, 0);\n}\n\n.native-file-upload.highlight {\n    border-color: var(--wje-file-upload-border-color-highlight, var(--wje-color-success-9));\n}\n\n.file-error {\n    margin: 0 1rem 1rem;\n    padding: 0.5rem 0.75rem;\n    border: 1px solid var(--wje-file-upload-error-border-color, var(--wje-color-danger-3));\n    border-radius: var(--wje-border-radius-medium);\n    background: var(--wje-file-upload-error-background, var(--wje-color-danger-1));\n    color: var(--wje-file-upload-error-color, var(--wje-color-danger-9));\n    font-size: var(--wje-font-size-small);\n}\n\n.file-error[hidden] {\n    display: none;\n}\n\n.file-label {\n    background: var(--wje-color-contrast-0);\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    padding: 1rem;\n    flex-direction: column;\n    position: relative;\n}\n\n.file-preview {\n    display: grid;\n    grid-template-columns: auto 1fr 1fr;\n    grid-template-rows: auto auto auto;\n    gap: 0 0;\n    grid-template-areas:\n        'image name name'\n        'image size size'\n        'progress progress progress';\n}\n\n.file-image {\n    grid-area: image;\n    align-items: center;\n    display: flex;\n}\n\n.file-name {\n    grid-area: name;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.file-size {\n    grid-area: size;\n    display: flex;\n}\n\n.file-progress {\n    grid-area: progress;\n}\n\nwje-icon {\n    margin-right: 0.25rem;\n}\n\nwje-img {\n    margin-right: 0.25rem;\n}\n\n.file-info > span {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\nwje-slider {\n    flex-basis: 100%;\n    margin-top: 0.5rem;\n}\n\n::part(slider) {\n    &::-webkit-slider-thumb {\n        visibility: hidden;\n    }\n\n    &::-moz-range-thumb {\n        visibility: hidden;\n    }\n\n    &::-ms-thumb {\n        visibility: hidden;\n    }\n}\n\nwje-img {\n    width: 50px;\n    height: 50px;\n    display: flex;\n    align-items: center;\n    padding: 0.25rem;\n    border: 1px solid var(--wje-border-color);\n    border-radius: var(--wje-border-radius-medium);\n}\n";
-class FileUpload extends WJElement {
-  /**
-   * Constructor for FileUpload.
-   * Initializes a new instance of the Localizer.
-   */
+class o extends t {
   constructor() {
     super();
-    /**
-     * Dependencies for the FileUpload component.
-     * @type {object}
-     */
-    __publicField(this, "dependencies", {
-      "wje-button": Button
-    });
+    __publicField(this, "dependencies", { "wje-button": i });
     __publicField(this, "className", "FileUpload");
-    /**
-     * Method to handle file drop event.
-     * @param {Event} e The file drop event object.
-     */
-    __publicField(this, "handleDrop", (e) => {
-      e.preventDefault();
-      const fileList = e.dataTransfer.files;
-      this.resetFormState();
-      this.addFilesToQueue(fileList);
+    __publicField(this, "handleDrop", (e2) => {
+      e2.preventDefault();
+      const t2 = e2.dataTransfer.files;
+      this.resetFormState(), this.addFilesToQueue(t2);
     });
-    /**
-     * Method to handle file input change event.
-     * @param {Event} e The file input change event object.
-     */
-    __publicField(this, "handleInputChange", (e) => {
-      const files = Array.from(e.target.files);
-      event.dispatchCustomEvent(this, "wje-file-upload:files-selected", files);
-      this.resetFormState();
+    __publicField(this, "handleInputChange", (e2) => {
+      const t2 = Array.from(e2.target.files);
+      r.dispatchCustomEvent(this, "wje-file-upload:files-selected", t2), this.resetFormState();
       try {
-        this.handleSubmit(e);
-      } catch (err) {
-        console.error(err);
+        this.handleSubmit(e2);
+      } catch (e3) {
+        console.error(e3);
       }
     });
-    /**
-     * Method to create an upload promise.
-     * @param file
-     * @returns {Promise<unknown>}
-     */
-    __publicField(this, "createUploadPromise", (file) => {
-      return new Promise((resolve, reject) => {
-        this.assertFilesValid(file);
-        let preview;
-        let reader = new FileReader();
-        reader.onload = () => {
-          var _a;
-          event.dispatchCustomEvent(this, "wje-file-upload:started", file);
-          (_a = this.onUploadStarted) == null ? void 0 : _a.call(this, file);
-          preview = this.createPreview(file, reader);
-          this.appendChild(preview);
-          this.uploadFunction(file, preview).then((res) => {
-            var _a2;
-            res.item = preview;
-            event.dispatchCustomEvent(this, "wje-file-upload:file-uploaded", res);
-            (_a2 = this.onUploadedFileComplete) == null ? void 0 : _a2.call(this, res);
-            this.uploadedFiles.push(res);
-            resolve(res);
-          });
-        };
-        reader.readAsDataURL(file);
-      });
-    });
-    this.localizer = new Localizer(this);
-    this._uploadedFiles = [];
-    this._queuedFiles = [];
-  }
-  /**
-   * Setter for acceptedTypes attribute.
-   * @param {string} value The accepted file types for upload.
-   */
-  set acceptedTypes(value) {
-    this.setAttribute("accepted-types", value);
-  }
-  /**
-   * Getter for acceptedTypes attribute.
-   * @returns {string} The accepted file types for upload.
-   */
+    __publicField(this, "createUploadPromise", (e2) => new Promise((t2, i2) => {
+      let s2;
+      this.assertFilesValid(e2);
+      let a2 = new FileReader();
+      a2.onload = () => {
+        var _a;
+        r.dispatchCustomEvent(this, "wje-file-upload:started", e2), (_a = this.onUploadStarted) == null ? void 0 : _a.call(this, e2), s2 = this.createPreview(e2, a2), this.appendChild(s2), this.uploadFunction(e2, s2).then((e3) => {
+          var _a2;
+          e3.item = s2, r.dispatchCustomEvent(this, "wje-file-upload:file-uploaded", e3), (_a2 = this.onUploadedFileComplete) == null ? void 0 : _a2.call(this, e3), this.uploadedFiles.push(e3), t2(e3);
+        });
+      }, a2.readAsDataURL(e2);
+    }));
+    this.localizer = new e(this), this._uploadedFiles = [], this._queuedFiles = [];
+  }
+  set acceptedTypes(e2) {
+    this.setAttribute("accepted-types", e2);
+  }
   get acceptedTypes() {
-    const accepted = this.getAttribute("accepted-types");
-    return this.hasAttribute("accepted-types") ? accepted : "image/*";
-  }
-  /**
-   * Setter for chunkSize attribute.
-   * @param {number} value The chunk size for file upload.
-   */
-  set chunkSize(value) {
-    this.setAttribute("chunk-size", value);
-  }
-  /**
-   * Getter for chunkSize attribute.
-   * @returns {number} The chunk size for file upload.
-   */
+    const e2 = this.getAttribute("accepted-types");
+    return this.hasAttribute("accepted-types") ? e2 : "image/*";
+  }
+  set chunkSize(e2) {
+    this.setAttribute("chunk-size", e2);
+  }
   get chunkSize() {
-    const chunk = this.getAttribute("chunk-size");
-    return this.hasAttribute("chunk-size") ? chunk : 1024 * 1024;
-  }
-  /**
-   * Setter for maxFileSize attribute.
-   * @param {number} value The maximum file size for upload.
-   */
-  set maxFileSize(value) {
-    this.setAttribute("max-file-size", value);
-  }
-  /**
-   * Getter for maxFileSize attribute.
-   * @returns {number} The maximum file size for upload.
-   */
+    const e2 = this.getAttribute("chunk-size");
+    return this.hasAttribute("chunk-size") ? e2 : 1048576;
+  }
+  set maxFileSize(e2) {
+    this.setAttribute("max-file-size", e2);
+  }
   get maxFileSize() {
-    const fileSize = this.getAttribute("max-file-size");
-    return this.hasAttribute("max-file-size") ? fileSize * 1024 * 1024 : 1024 * 1024;
-  }
-  /**
-   * Setter for label attribute.
-   * @param {string} value The URL to set as the upload URL.
-   */
-  set uploadUrl(value) {
-    this.setAttribute("upload-url", value);
-  }
-  /**
-   * Gets the upload URL for the file upload element.
-   * @returns {string} The upload URL for the file upload element.
-   */
+    const e2 = this.getAttribute("max-file-size");
+    return this.hasAttribute("max-file-size") ? 1024 * e2 * 1024 : 1048576;
+  }
+  set uploadUrl(e2) {
+    this.setAttribute("upload-url", e2);
+  }
   get uploadUrl() {
     return this.getAttribute("upload-url") ?? "/upload";
   }
-  /**
-   * Sets the autoProcessFiles attribute.
-   * @param value
-   */
-  set autoProcessFiles(value) {
-    this.setAttribute("auto-process-files", value);
-  }
-  /**
-   * Gets the autoProcessFiles attribute.
-   * @returns {any|boolean}
-   */
+  set autoProcessFiles(e2) {
+    this.setAttribute("auto-process-files", e2);
+  }
   get autoProcessFiles() {
     return JSON.parse(this.getAttribute("auto-process-files")) ?? true;
   }
-  /**
-   * Sets the noUploadButton attribute.
-   * @param value
-   */
-  set noUploadButton(value) {
-    this.setAttribute("no-upload-button", value);
-  }
-  /**
-   * Gets the noUploadButton attribute.
-   * @returns {boolean}
-   */
+  set noUploadButton(e2) {
+    this.setAttribute("no-upload-button", e2);
+  }
   get noUploadButton() {
     return this.hasAttribute("no-upload-button");
   }
-  /**
-   * Sets the uploaded files.
-   * @param value
-   */
-  set uploadedFiles(value) {
-    this._uploadedFiles = value;
-  }
-  /**
-   * Return the uploaded files.
-   * @returns {[]}
-   */
+  set uploadedFiles(e2) {
+    this._uploadedFiles = e2;
+  }
   get uploadedFiles() {
     return this._uploadedFiles;
   }
-  /**
-   * Sets the to-chunk attribute.
-   * @param value
-   */
-  set toChunk(value) {
-    this.setAttribute("to-chunk", value);
-  }
-  /**
-   * Gets the to-chunk attribute.
-   * @returns {boolean}
-   */
+  set toChunk(e2) {
+    this.setAttribute("to-chunk", e2);
+  }
   get toChunk() {
     return this.hasAttribute("to-chunk");
   }
-  /**
-   * Sets the maximum number of files that can be uploaded or managed.
-   * Assigns the specified value to the 'max-files' attribute.
-   * @param {number} value The maximum allowable number of files.
-   */
-  set maxFiles(value) {
-    this.setAttribute("max-files", value);
-  }
-  /**
-   * Sets the label attribute for the upload button.
-   * @param {string} value
-   */
-  set label(value) {
-    this.setAttribute("label", value);
-  }
-  /**
-   * Gets the label attribute for the upload button.
-   * @returns {string}
-   */
+  set maxFiles(e2) {
+    this.setAttribute("max-files", e2);
+  }
+  set label(e2) {
+    this.setAttribute("label", e2);
+  }
   get label() {
     return this.getAttribute("label") || "";
   }
-  /**
-   * Retrieves the maximum number of files allowed from the `max-files` attribute.
-   * If the attribute is not set or is invalid, defaults to 0.
-   * @returns {number} The maximum number of files allowed.
-   */
   get maxFiles() {
     return parseInt(this.getAttribute("max-files")) || 10;
   }
-  /**
-   * Getter for cssStyleSheet.
-   * @returns {string} The CSS styles for the component.
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ':host{width:100%}:host p{margin:0}.native-file-upload{width:100%;position:relative;border:1px dashed var(--wje-file-upload-border-color, var(--wje-border-color));border-radius:var(--wje-border-radius-medium);transition:border-color var(--wje-transition-fast);padding:var(--wje-file-upload-padding, 0)}.native-file-upload.highlight{border-color:var(--wje-file-upload-border-color-highlight, var(--wje-color-success-9))}.file-error{margin:0 1rem 1rem;padding:.5rem .75rem;border:1px solid var(--wje-file-upload-error-border-color, var(--wje-color-danger-3));border-radius:var(--wje-border-radius-medium);background:var(--wje-file-upload-error-background, var(--wje-color-danger-1));color:var(--wje-file-upload-error-color, var(--wje-color-danger-9));font-size:var(--wje-font-size-small)}.file-error[hidden]{display:none}.file-label{background:var(--wje-color-contrast-0);align-items:center;justify-content:center;display:flex;padding:1rem;flex-direction:column;position:relative}.file-preview{display:grid;grid-template-columns:auto 1fr 1fr;grid-template-rows:auto auto auto;gap:0 0;grid-template-areas:"image name name" "image size size" "progress progress progress"}.file-image{grid-area:image;align-items:center;display:flex}.file-name{grid-area:name;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-size{grid-area:size;display:flex}.file-progress{grid-area:progress}wje-icon{margin-right:.25rem}wje-img{margin-right:.25rem}.file-info>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}wje-slider{flex-basis:100%;margin-top:.5rem}wje-img{width:50px;height:50px;display:flex;align-items:center;padding:.25rem;border:1px solid var(--wje-border-color);border-radius:var(--wje-border-radius-medium)}';
   }
-  /**
-   * Getter for observedAttributes.
-   * @returns {Array} An empty array as no attributes are observed.
-   */
   static get observedAttributes() {
     return ["label"];
   }
-  attributeChangedCallback(name, oldValue, newValue) {
+  attributeChangedCallback(e2, t2, i2) {
     var _a;
-    (_a = super.attributeChangedCallback) == null ? void 0 : _a.call(this, name, oldValue, newValue);
-    if (name === "label" && this.button) {
-      const nextLabel = this.label || this.localizer.translate("wj.file.upload.button");
-      this.button.innerText = nextLabel;
-      this.button.setAttribute("label", nextLabel);
+    if ((_a = super.attributeChangedCallback) == null ? void 0 : _a.call(this, e2, t2, i2), "label" === e2 && this.button) {
+      const e3 = this.label || this.localizer.translate("wj.file.upload.button");
+      this.button.innerText = e3, this.button.setAttribute("label", e3);
     }
   }
-  /**
-   * Method to setup attributes for the component.
-   */
   setupAttributes() {
-    this.isShadowRoot = "open";
-    this.setAriaState({
-      role: "group"
-    });
+    this.isShadowRoot = "open", this.setAriaState({ role: "group" });
   }
   beforeDraw() {
-    this.uploadFunction = upload(this.uploadUrl, this.chunkSize, !this.toChunk);
+    this.uploadFunction = l(this.uploadUrl, this.chunkSize, !this.toChunk);
   }
-  /**
-   * Method to draw the component on the screen.
-   * @returns {DocumentFragment} The fragment containing the component.
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.classList.add("native-file-upload");
-    native.setAttribute("part", "native");
-    let label = document.createElement("div");
-    label.setAttribute("part", "file-label");
-    label.classList.add("file-label");
-    let fileList = document.createElement("slot");
-    fileList.setAttribute("name", "item");
-    fileList.setAttribute("part", "items");
-    fileList.classList.add("file-list");
-    let slot = document.createElement("slot");
-    label.appendChild(slot);
-    let errorMessage = document.createElement("div");
-    errorMessage.setAttribute("part", "error-message");
-    errorMessage.setAttribute("role", "alert");
-    errorMessage.setAttribute("aria-live", "polite");
-    errorMessage.classList.add("file-error");
-    errorMessage.hidden = true;
-    let fileInput = document.createElement("input");
-    fileInput.setAttribute("type", "file");
-    fileInput.setAttribute("multiple", "");
-    fileInput.setAttribute("style", "display:none;");
-    fileInput.setAttribute("aria-hidden", "true");
-    if (!this.noUploadButton) {
-      let button = document.createElement("wje-button");
-      button.innerText = this.label || this.localizer.translate("wj.file.upload.button");
-      button.setAttribute("part", "upload-button");
-      button.setAttribute("label", button.innerText);
-      label.appendChild(button);
-      this.button = button;
+    let e2 = document.createDocumentFragment(), t2 = document.createElement("div");
+    t2.classList.add("native-file-upload"), t2.setAttribute("part", "native");
+    let i2 = document.createElement("div");
+    i2.setAttribute("part", "file-label"), i2.classList.add("file-label");
+    let s2 = document.createElement("slot");
+    s2.setAttribute("name", "item"), s2.setAttribute("part", "items"), s2.classList.add("file-list");
+    let r2 = document.createElement("slot");
+    i2.appendChild(r2);
+    let a2 = document.createElement("div");
+    a2.setAttribute("part", "error-message"), a2.setAttribute("role", "alert"), a2.setAttribute("aria-live", "polite"), a2.classList.add("file-error"), a2.hidden = true;
+    let l2 = document.createElement("input");
+    if (l2.setAttribute("type", "file"), l2.setAttribute("multiple", ""), l2.setAttribute("style", "display:none;"), l2.setAttribute("aria-hidden", "true"), !this.noUploadButton) {
+      let e3 = document.createElement("wje-button");
+      e3.innerText = this.label || this.localizer.translate("wj.file.upload.button"), e3.setAttribute("part", "upload-button"), e3.setAttribute("label", e3.innerText), i2.appendChild(e3), this.button = e3;
     }
-    native.appendChild(fileInput);
-    native.appendChild(label);
-    native.appendChild(errorMessage);
-    native.appendChild(fileList);
-    fragment.appendChild(native);
-    this.native = native;
-    this.fileList = fileList;
-    this.fileInput = fileInput;
-    this.errorMessage = errorMessage;
-    return fragment;
-  }
-  /**
-   * Method to perform actions after the component is drawn.
-   */
+    return t2.appendChild(l2), t2.appendChild(i2), t2.appendChild(a2), t2.appendChild(s2), e2.appendChild(t2), this.native = t2, this.fileList = s2, this.fileInput = l2, this.errorMessage = a2, e2;
+  }
   afterDraw() {
     var _a;
     (_a = this.button) == null ? void 0 : _a.addEventListener("click", () => {
       this.fileInput.click();
-    });
-    this.fileInput.addEventListener("change", this.handleInputChange);
-    this.native.addEventListener("drop", this.handleDrop);
-    let dragEventCounter = 0;
-    this.native.addEventListener("dragenter", (e) => {
-      e.preventDefault();
-      if (dragEventCounter === 0) {
-        this.native.classList.add("highlight");
-      }
-      dragEventCounter += 1;
-    });
-    this.native.addEventListener("dragover", (e) => {
-      e.preventDefault();
-      if (dragEventCounter === 0) {
-        dragEventCounter = 1;
-      }
-    });
-    this.native.addEventListener("dragleave", (e) => {
-      e.preventDefault();
-      dragEventCounter -= 1;
-      if (dragEventCounter <= 0) {
-        dragEventCounter = 0;
-        this.native.classList.remove("highlight");
-      }
-    });
-    this.native.addEventListener("drop", (e) => {
-      e.preventDefault();
-      dragEventCounter = 0;
-      this.native.classList.remove("highlight");
-    });
-    this.addEventListener("wje-file-upload-item:remove", (e) => {
-      const file = e.detail;
-      if (!(file instanceof File)) {
-        return;
-      }
-      let count = this.uploadedFiles.length;
-      this.uploadedFiles = this.uploadedFiles.filter((entry) => {
+    }), this.fileInput.addEventListener("change", this.handleInputChange), this.native.addEventListener("drop", this.handleDrop);
+    let e2 = 0;
+    this.native.addEventListener("dragenter", (t2) => {
+      t2.preventDefault(), 0 === e2 && this.native.classList.add("highlight"), e2 += 1;
+    }), this.native.addEventListener("dragover", (t2) => {
+      t2.preventDefault(), 0 === e2 && (e2 = 1);
+    }), this.native.addEventListener("dragleave", (t2) => {
+      t2.preventDefault(), e2 -= 1, e2 <= 0 && (e2 = 0, this.native.classList.remove("highlight"));
+    }), this.native.addEventListener("drop", (t2) => {
+      t2.preventDefault(), e2 = 0, this.native.classList.remove("highlight");
+    }), this.addEventListener("wje-file-upload-item:remove", (e3) => {
+      const t2 = e3.detail;
+      if (!(t2 instanceof File)) return;
+      let i2 = this.uploadedFiles.length;
+      this.uploadedFiles = this.uploadedFiles.filter((e4) => {
         var _a2;
-        return ((_a2 = entry == null ? void 0 : entry.file) == null ? void 0 : _a2.lastModified) !== file.lastModified;
-      });
-      if (count !== this.uploadedFiles.length)
-        event.dispatchCustomEvent(this, "wje-file-upload:file-removed", file);
+        return ((_a2 = e4 == null ? void 0 : e4.file) == null ? void 0 : _a2.lastModified) !== t2.lastModified;
+      }), i2 !== this.uploadedFiles.length && r.dispatchCustomEvent(this, "wje-file-upload:file-removed", t2);
     });
   }
-  /**
-   * Method to handle form submission.
-   * @param {Event} e The form submission event.
-   */
-  handleSubmit(e) {
-    e.preventDefault();
-    this.addFilesToQueue(this.fileInput.files);
-  }
-  /**
-   * Method to add files to the queue.
-   * @param files
-   */
-  addFilesToQueue(files) {
+  handleSubmit(e2) {
+    e2.preventDefault(), this.addFilesToQueue(this.fileInput.files);
+  }
+  addFilesToQueue(e2) {
     var _a;
-    const currentCount = (Array.isArray(this.uploadedFiles) ? this.uploadedFiles.length : 0) + (Array.isArray(this._queuedFiles) ? this._queuedFiles.length : 0);
-    const newTotal = currentCount + files.length;
-    if (this.maxFiles && newTotal > this.maxFiles) {
-      const detail = {
-        code: "MAX-FILES-EXCEEDED",
-        files,
-        maxFiles: this.maxFiles,
-        currentCount,
-        attemptedToAdd: files.length,
-        allowedRemaining: Math.max(this.maxFiles - currentCount, 0)
-      };
-      event.dispatchCustomEvent(this, "wje-file-upload:error", detail);
-      this.showError(detail);
-      return;
-    }
-    this._queuedFiles = [...this._queuedFiles || [], ...files];
-    this.clearError();
-    event.dispatchCustomEvent(this, "wje-file-upload:files-added", files);
-    (_a = this.onAddedFiles) == null ? void 0 : _a.call(this);
-    if (this.autoProcessFiles) {
-      this.uploadFiles();
+    const t2 = (Array.isArray(this.uploadedFiles) ? this.uploadedFiles.length : 0) + (Array.isArray(this._queuedFiles) ? this._queuedFiles.length : 0), i2 = t2 + e2.length;
+    if (this.maxFiles && i2 > this.maxFiles) {
+      const i3 = { code: "MAX-FILES-EXCEEDED", files: e2, maxFiles: this.maxFiles, currentCount: t2, attemptedToAdd: e2.length, allowedRemaining: Math.max(this.maxFiles - t2, 0) };
+      return r.dispatchCustomEvent(this, "wje-file-upload:error", i3), void this.showError(i3);
     }
-    this.fileInput.value = "";
+    this._queuedFiles = [...this._queuedFiles || [], ...e2], this.clearError(), r.dispatchCustomEvent(this, "wje-file-upload:files-added", e2), (_a = this.onAddedFiles) == null ? void 0 : _a.call(this), this.autoProcessFiles && this.uploadFiles(), this.fileInput.value = "";
   }
-  /**
-   * Method to upload files.
-   */
   uploadFiles() {
-    if (this._queuedFiles.length === 0) {
-      return;
-    }
-    const uploadPromises = this._queuedFiles.map((file) => this.createUploadPromise(file));
-    uploadPromises.reduce((prev, curr) => {
-      return prev.then(() => {
-        return curr;
-      });
-    }, Promise.resolve()).then(() => {
+    if (0 === this._queuedFiles.length) return;
+    this._queuedFiles.map((e2) => this.createUploadPromise(e2)).reduce((e2, t2) => e2.then(() => t2), Promise.resolve()).then(() => {
       var _a;
-      event.dispatchCustomEvent(this, "wje-file-upload:files-uploaded", this.uploadedFiles);
-      (_a = this.onAllFilesUploaded) == null ? void 0 : _a.call(this);
-      this._queuedFiles = [];
-    }).catch((err) => {
-      this._queuedFiles = this._queuedFiles.filter((file) => file !== err.file);
-      this.showError(err);
-      event.dispatchCustomEvent(this, "wje-file-upload:error", err);
+      r.dispatchCustomEvent(this, "wje-file-upload:files-uploaded", this.uploadedFiles), (_a = this.onAllFilesUploaded) == null ? void 0 : _a.call(this), this._queuedFiles = [];
+    }).catch((e2) => {
+      this._queuedFiles = this._queuedFiles.filter((t2) => t2 !== e2.file), this.showError(e2), r.dispatchCustomEvent(this, "wje-file-upload:error", e2);
     });
   }
-  /**
-   * Method to create a preview for the file.
-   * @param {File} file The file for which the preview is to be created.
-   * @param {FileReader} reader The FileReader instance to read the file.
-   * @returns {HTMLElement} The created preview.
-   */
-  createPreview(file, reader) {
-    let preview = document.createElement("wje-file-upload-item");
-    let fileType2 = file.type ? file.type.split("/")[1] : file.name.split(".").pop();
-    let icon = getFileTypeIcon(fileType2) || "file";
-    preview.setAttribute("slot", "item");
-    preview.setAttribute("name", file.name);
-    preview.setAttribute("size", file.size);
-    preview.setAttribute("uploaded", "0");
-    preview.innerHTML = `<wje-icon slot="img" name="${icon}" size="large"></wje-icon>`;
-    preview.data = file;
-    return preview;
-  }
-  /**
-   * Method to create a thumbnail for the file.
-   * @param {File} file The file for which the thumbnail is to be created.
-   * @param {FileReader} reader The FileReader instance to read the file.
-   * @returns {HTMLElement} The created thumbnail.
-   */
-  createThumbnail(file, reader) {
-    let img = document.createElement("img");
-    img.setAttribute("src", reader.result);
-    return img;
-  }
-  /**
-   * Method to validate the files.
-   * @param {File} file The file to be validated.
-   * TODO: alowed types a size limit by malo byt cez attributy
-   */
-  assertFilesValid(file) {
-    const { name: fileName, size: fileSize } = file;
-    if (!isValidFileType(file, this.acceptedTypes)) {
-      const err = new Error("");
-      err.code = "INVALID-FILE-TYPE";
-      err.file = file;
-      err.acceptedTypes = this.acceptedTypes;
-      throw err;
+  createPreview(e2, t2) {
+    let i2 = document.createElement("wje-file-upload-item"), s2 = a(e2.type ? e2.type.split("/")[1] : e2.name.split(".").pop()) || "file";
+    return i2.setAttribute("slot", "item"), i2.setAttribute("name", e2.name), i2.setAttribute("size", e2.size), i2.setAttribute("uploaded", "0"), i2.innerHTML = `<wje-icon slot="img" name="${s2}" size="large"></wje-icon>`, i2.data = e2, i2;
+  }
+  createThumbnail(e2, t2) {
+    let i2 = document.createElement("img");
+    return i2.setAttribute("src", t2.result), i2;
+  }
+  assertFilesValid(e2) {
+    const { name: t2, size: i2 } = e2;
+    if (!s(e2, this.acceptedTypes)) {
+      const t3 = new Error("");
+      throw t3.code = "INVALID-FILE-TYPE", t3.file = e2, t3.acceptedTypes = this.acceptedTypes, t3;
     }
-    if (fileSize > this.maxFileSize) {
-      const err = new Error("");
-      err.code = "FILE-TOO-LARGE";
-      err.file = file;
-      err.maxFileSize = this.maxFileSize;
-      throw err;
+    if (i2 > this.maxFileSize) {
+      const t3 = new Error("");
+      throw t3.code = "FILE-TOO-LARGE", t3.file = e2, t3.maxFileSize = this.maxFileSize, t3;
     }
   }
-  /**
-   * Method to reset the form state.
-   */
   resetFormState() {
     this.fileList.textContent = "";
   }
-  /**
-   * Shows a user-facing validation error inside the dropzone.
-   * @param {object|Error} error Error payload to display inside the dropzone.
-   */
-  showError(error) {
-    if (!this.errorMessage) return;
-    this.errorMessage.textContent = this.getErrorMessage(error);
-    this.errorMessage.hidden = false;
-  }
-  /**
-   * Clears the currently displayed validation error.
-   */
+  showError(e2) {
+    this.errorMessage && (this.errorMessage.textContent = this.getErrorMessage(e2), this.errorMessage.hidden = false);
+  }
   clearError() {
-    if (!this.errorMessage) return;
-    this.errorMessage.textContent = "";
-    this.errorMessage.hidden = true;
-  }
-  /**
-   * Resolves a readable upload error message.
-   * @param {object|Error} error Error payload used to resolve the translated message.
-   * @returns {string}
-   */
-  getErrorMessage(error = {}) {
+    this.errorMessage && (this.errorMessage.textContent = "", this.errorMessage.hidden = true);
+  }
+  getErrorMessage(e2 = {}) {
     var _a;
-    const code = error.code || ((_a = error.detail) == null ? void 0 : _a.code);
-    const messages = {
-      "INVALID-FILE-TYPE": {
-        key: "wj.file.upload.error.invalid.type",
-        fallback: `This file type is not supported. Allowed formats: ${error.acceptedTypes || this.acceptedTypes}.`,
-        params: { acceptedTypes: error.acceptedTypes || this.acceptedTypes }
-      },
-      "FILE-TOO-LARGE": {
-        key: "wj.file.upload.error.file.too.large",
-        fallback: `The file is too large. Maximum size is ${this.localizer.formatNumber(this.maxFileSize / 1024 / 1024)} MB.`,
-        params: { maxFileSize: this.localizer.formatNumber(this.maxFileSize / 1024 / 1024) }
-      },
-      "MAX-FILES-EXCEEDED": {
-        key: "wj.file.upload.error.max.files",
-        fallback: `You can upload up to ${error.maxFiles || this.maxFiles} files.`,
-        params: { maxFiles: error.maxFiles || this.maxFiles }
-      }
-    };
-    const message = messages[code] || {
-      key: "wj.file.upload.error.generic",
-      fallback: "The file could not be uploaded.",
-      params: {}
-    };
-    const translated = this.localizer.translateWithParams(message.key, message.params);
-    return translated === message.key ? message.fallback : translated;
+    const t2 = e2.code || ((_a = e2.detail) == null ? void 0 : _a.code), i2 = { "INVALID-FILE-TYPE": { key: "wj.file.upload.error.invalid.type", fallback: `This file type is not supported. Allowed formats: ${e2.acceptedTypes || this.acceptedTypes}.`, params: { acceptedTypes: e2.acceptedTypes || this.acceptedTypes } }, "FILE-TOO-LARGE": { key: "wj.file.upload.error.file.too.large", fallback: `The file is too large. Maximum size is ${this.localizer.formatNumber(this.maxFileSize / 1024 / 1024)} MB.`, params: { maxFileSize: this.localizer.formatNumber(this.maxFileSize / 1024 / 1024) } }, "MAX-FILES-EXCEEDED": { key: "wj.file.upload.error.max.files", fallback: `You can upload up to ${e2.maxFiles || this.maxFiles} files.`, params: { maxFiles: e2.maxFiles || this.maxFiles } } }[t2] || { key: "wj.file.upload.error.generic", fallback: "The file could not be uploaded.", params: {} }, s2 = this.localizer.translateWithParams(i2.key, i2.params);
+    return s2 === i2.key ? i2.fallback : s2;
   }
 }
-FileUpload.define("wje-file-upload", FileUpload);
+o.define("wje-file-upload", o);
 export {
-  FileUpload as default
+  o as default
 };
 //# sourceMappingURL=wje-file-upload.js.map