@oiz/stzh-components 3.0.0 → 3.1.0

package/dist/components/stzh-upload.js

@@ -10471,7 +10471,7 @@ const StzhUpload$1 = /*@__PURE__*/ proxyCustomElement(class StzhUpload extends H
   }
   nameWatcher(newValue) {
     var _a;
-    const input = (_a = this.hiddenInputContainerElement) === null || _a === void 0 ? void 0 : _a.querySelector('input');
+    const input = (_a = this.hiddenInputContainerElement) === null || _a === void 0 ? void 0 : _a.querySelector("input");
     if (input) {
       input.setAttribute("name", newValue);
     }
@@ -10536,7 +10536,7 @@ const StzhUpload$1 = /*@__PURE__*/ proxyCustomElement(class StzhUpload extends H
     this.existingFilesWatcher(this.existingFiles);
     this.errorWatcher(this.error);
     if (!this.localization) {
-      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'upload');
+      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "upload");
     }
   }
   componentDidRender() {
@@ -10545,7 +10545,7 @@ const StzhUpload$1 = /*@__PURE__*/ proxyCustomElement(class StzhUpload extends H
     }
     const self = this;
     function enableDownload(file) {
-      let fileHref = file.url || '';
+      let fileHref = file.url || "";
       if (file.upload) {
         fileHref = URL.createObjectURL(file);
       }
@@ -10631,7 +10631,7 @@ const StzhUpload$1 = /*@__PURE__*/ proxyCustomElement(class StzhUpload extends H
               </a>`);
             file.previewElement.appendChild(file._removeLink);
           }
-          let removeFileEvent = (e) => {
+          let removeFileEvent = e => {
             e.preventDefault();
             e.stopPropagation();
             if (file.status === window.Dropzone.UPLOADING) {
@@ -10663,7 +10663,7 @@ const StzhUpload$1 = /*@__PURE__*/ proxyCustomElement(class StzhUpload extends H
       // Taken from https://github.com/dropzone/dropzone/blob/v5.9.3/src/options.js#L752
       complete(file) {
         for (let node of file.previewElement.querySelectorAll(`[${ATTR_REMOVE}]`)) {
-          const hasErrorState = (file.status === "error");
+          const hasErrorState = file.status === "error";
           const removeOrDeleteLabel = hasErrorState ? this.options.dictRemoveFile : this.options.dictDeleteFile;
           const isStzh = isStzhElement(node);
           const fileId = self.filePreviewId(file);
@@ -10714,8 +10714,7 @@ const StzhUpload$1 = /*@__PURE__*/ proxyCustomElement(class StzhUpload extends H
               message = self.localization.serverError;
             }
             else {
-              const defaultError = self.localization.responseError
-                .replace("{{statusCode}}", xhr.status);
+              const defaultError = self.localization.responseError.replace("{{statusCode}}", xhr.status);
               message = defaultError;
             }
           }
@@ -10773,63 +10772,98 @@ const StzhUpload$1 = /*@__PURE__*/ proxyCustomElement(class StzhUpload extends H
           </div>
         </div>
       </div>
-      `
+      `,
     });
     this.nameWatcher(this.name);
     this.disabledWatcher();
     this.dropzone.on("addedfile", (file) => this.stzhFileAdded.emit({
-      component: "stzh-upload", file
+      component: "stzh-upload",
+      file,
     }));
     this.dropzone.on("addedfiles", (files) => this.stzhFilesAdded.emit({
-      component: "stzh-upload", files
+      component: "stzh-upload",
+      files,
     }));
     this.dropzone.on("removefile", (file) => this.stzhFileRemove.emit({
-      component: "stzh-upload", file
+      component: "stzh-upload",
+      file,
     }).defaultPrevented === false);
     this.dropzone.on("removedfile", (file, force) => this.stzhFileRemoved.emit({
-      component: "stzh-upload", file, force
+      component: "stzh-upload",
+      file,
+      force,
     }));
     this.dropzone.on("sending", (file, xhr, formData) => this.stzhSending.emit({
-      component: "stzh-upload", file, xhr, formData
+      component: "stzh-upload",
+      file,
+      xhr,
+      formData,
     }));
     this.dropzone.on("sendingmultiple", (files, xhr, formData) => this.stzhSendingMultiple.emit({
-      component: "stzh-upload", files, xhr, formData
+      component: "stzh-upload",
+      files,
+      xhr,
+      formData,
     }));
     this.dropzone.on("processing", (file) => this.stzhProcessing.emit({
-      component: "stzh-upload", file
+      component: "stzh-upload",
+      file,
     }));
     this.dropzone.on("processingmultiple", (files) => this.stzhProcessingMultiple.emit({
-      component: "stzh-upload", files
+      component: "stzh-upload",
+      files,
     }));
     this.dropzone.on("uploadprogress", (file, progress, bytesSent) => this.stzhProgress.emit({
-      component: "stzh-upload", file, progress, bytesSent
+      component: "stzh-upload",
+      file,
+      progress,
+      bytesSent,
     }));
     this.dropzone.on("totaluploadprogress", (totalUploadProgress, totalBytes, totalBytesSent) => this.stzhProgressTotal.emit({
-      component: "stzh-upload", totalUploadProgress, totalBytes, totalBytesSent
+      component: "stzh-upload",
+      totalUploadProgress,
+      totalBytes,
+      totalBytesSent,
     }));
     this.dropzone.on("error", (file, message, xhr) => this.stzhError.emit({
-      component: "stzh-upload", file, message, xhr
+      component: "stzh-upload",
+      file,
+      message,
+      xhr,
     }));
     this.dropzone.on("errormultiple", (files, message, xhr) => this.stzhErrorMultiple.emit({
-      component: "stzh-upload", files, message, xhr
+      component: "stzh-upload",
+      files,
+      message,
+      xhr,
     }));
     this.dropzone.on("success", (file, responseText, event) => this.stzhSuccess.emit({
-      component: "stzh-upload", file, responseText, event
+      component: "stzh-upload",
+      file,
+      responseText,
+      event,
     }));
     this.dropzone.on("successmultiple", (files, responseText, event) => this.stzhSuccessMultiple.emit({
-      component: "stzh-upload", files, responseText, event
+      component: "stzh-upload",
+      files,
+      responseText,
+      event,
     }));
     this.dropzone.on("canceled", (file) => this.stzhCanceled.emit({
-      component: "stzh-upload", file
+      component: "stzh-upload",
+      file,
     }));
     this.dropzone.on("canceledmultiple", (files) => this.stzhCanceledMultiple.emit({
-      component: "stzh-upload", files
+      component: "stzh-upload",
+      files,
     }));
     this.dropzone.on("complete", (file) => this.stzhComplete.emit({
-      component: "stzh-upload", file
+      component: "stzh-upload",
+      file,
     }));
     this.dropzone.on("completemultiple", (files) => this.stzhCompleteMultiple.emit({
-      component: "stzh-upload", files
+      component: "stzh-upload",
+      files,
     }));
     this.dropzone.on("addedfile", (file) => {
       file.previewElement.querySelectorAll(`[${ATTR_NAME}]`).forEach((name) => {
@@ -10847,7 +10881,7 @@ const StzhUpload$1 = /*@__PURE__*/ proxyCustomElement(class StzhUpload extends H
         progressText.innerText = `${progress.toString()}%`;
       });
     });
-    this._existingFiles.forEach((file) => {
+    this._existingFiles.forEach(file => {
       this.dropzone.displayExistingFile(file, null, null, null, null);
     });
   }
@@ -10858,8 +10892,8 @@ const StzhUpload$1 = /*@__PURE__*/ proxyCustomElement(class StzhUpload extends H
     }
   }
   render() {
-    var _a;
-    const errorUsed = hasSlot(this.element, 'error') || ((_a = this._error) === null || _a === void 0 ? void 0 : _a.length) > 0;
+    var _a, _b;
+    const errorUsed = hasSlot(this.element, "error") || ((_a = this._error) === null || _a === void 0 ? void 0 : _a.length) > 0;
     const classes = {
       "stzh-upload": true,
       "stzh-upload--is-invalid": this.invalid || errorUsed,
@@ -10867,9 +10901,9 @@ const StzhUpload$1 = /*@__PURE__*/ proxyCustomElement(class StzhUpload extends H
       "stzh-upload--has-hidden-progress": this.hideProgress,
       "stzh-upload--has-hidden-progress-while-idle": this.hideProgressWhileIdle,
       "stzh-upload--has-error": errorUsed,
-      "stzh-upload--has-instructions": !!this.description || !!this.localization.description
+      "stzh-upload--has-instructions": !!this.description || !!this.localization.description,
     };
-    return (h(Host, { "is-invalid": this.invalid || errorUsed }, h("div", { class: classes, ref: (el) => (this.dropzoneElement = el) }, h("div", { ref: (el) => (this.hiddenInputContainerElement = el) }), h("div", { id: `${this.uploadId}-label` }, this.label && h("div", { class: "stzh-upload__label" }, this.label)), h("div", { class: "stzh-upload__clickarea", ref: (el) => (this.clickareaElement = el) }, h("div", { class: "stzh-upload__heading-wrapper" }, h("div", { class: "stzh-upload__heading-inner-wrapper" }, h("div", { class: "stzh-upload__heading" }, this.heading ? this.heading : this.localization.heading), h("div", { class: "stzh-upload__button-wrapper" }, h("span", null, this.localization.buttonIntro), h("stzh-link", { class: "stzh-upload__button", ref: (el) => (this.linkElement = el), size: "inherit", variant: "secondary", a11yDescribedby: `${this.uploadId}-label ${this.uploadId}-instruction ${this.uploadId}-description`, disabled: this.disabled, a11yControls: `${this.uploadId}-previews` }, this.button ? this.button : tc(this.localization.button, this.maxFiles)))), h("stzh-icon", { class: "stzh-upload__heading-icon", name: "upload" })), h("div", { class: "stzh-upload__instructions", id: `${this.uploadId}-instruction` }, this.description ? this.description : tc(this.localization.description, this.maxFiles))), h(StzhInputDescription, { classPrefix: "stzh-upload", id: `${this.uploadId}-description`, error: this._error }), h("div", { id: `${this.uploadId}-previews`, class: "stzh-upload__previews-wrapper" }, h("div", { class: "stzh-upload__previews-inner-wrapper" }, h("div", { class: "stzh-upload__errors", ref: (el) => (this.errorsElement = el) }), h("div", { class: "stzh-upload__previews dropzone-previews", ref: (el) => (this.previewsElement = el) }))))));
+    return (h(Host, { "is-invalid": this.invalid || errorUsed }, h("div", { class: classes, ref: el => (this.dropzoneElement = el) }, h("div", { ref: el => (this.hiddenInputContainerElement = el) }), h("div", { id: `${this.uploadId}-label` }, this.label && h("div", { class: "stzh-upload__label" }, this.label)), h("div", { class: "stzh-upload__clickarea", ref: el => (this.clickareaElement = el) }, h("div", { class: "stzh-upload__heading-wrapper" }, h("div", { class: "stzh-upload__heading-inner-wrapper" }, h("div", { class: "stzh-upload__heading" }, this.heading ? this.heading : this.localization.heading), h("div", { class: "stzh-upload__button-wrapper" }, h("span", null, this.localization.buttonIntro), h("stzh-link", { class: "stzh-upload__button", ref: el => (this.linkElement = el), size: "inherit", variant: "secondary", a11yDescribedby: `${this.uploadId}-label ${this.uploadId}-instruction ${this.uploadId}-description`, disabled: this.disabled, a11yControls: `${this.uploadId}-previews` }, this.button ? this.button : tc(this.localization.button, this.maxFiles)))), h("stzh-icon", { class: "stzh-upload__heading-icon", name: "upload" })), h("div", { class: "stzh-upload__instructions", id: `${this.uploadId}-instruction` }, this.description ? this.description : tc(this.localization.description, this.maxFiles))), ((_b = this._error) === null || _b === void 0 ? void 0 : _b.length) > 0 && (h(StzhInputDescription, { classPrefix: "stzh-upload", id: `${this.uploadId}-description`, error: this._error })), h("div", { id: `${this.uploadId}-previews`, class: "stzh-upload__previews-wrapper" }, h("div", { class: "stzh-upload__previews-inner-wrapper" }, h("div", { class: "stzh-upload__errors", ref: el => (this.errorsElement = el) }), h("div", { class: "stzh-upload__previews dropzone-previews", ref: el => (this.previewsElement = el) }))))));
   }
   get element() { return this; }
   static get watchers() { return {