@oiz/stzh-components 4.6.0 → 4.7.0

package/dist/esm/stzh-upload.entry.js

@@ -13232,7 +13232,7 @@ const ATTR_META_ID = "data-dz-meta-id";
 const ATTR_ERROR_MESSAGE_ID = "data-dz-error-message-id";
 const ATTR_PROGRESS_TEXT = "data-dz-progress-text";
 const ATTR_REMOVE = "data-dz-remove";
-const ACCEPTED_FILES_DEFAULT = '.jpg,.png,.pdf';
+const ACCEPTED_FILES_DEFAULT = ".jpg,.png,.pdf";
 let uploadCounter = 0;
 let previewCounter = 0;
 const StzhUpload = class {
@@ -13325,7 +13325,7 @@ const StzhUpload = class {
         this.downloadDisabled = false;
         this.downloadDisabledWhileProcessing = false;
         this.error = undefined;
-        this.acceptedFiles = '.jpg,.png,.pdf';
+        this.acceptedFiles = ".jpg,.png,.pdf";
         this.autoProcessQueue = true;
         this.hideProgress = false;
         this.hideProgressWhileIdle = false;
@@ -13444,7 +13444,7 @@ const StzhUpload = class {
     /** Sets the focus on the choose file button, when stzh-upload is focused. */
     async setFocus(options) {
         var _a;
-        (_a = document.querySelector('stzh-flyingfocus')) === null || _a === void 0 ? void 0 : _a.activate();
+        (_a = document.querySelector("stzh-flyingfocus")) === null || _a === void 0 ? void 0 : _a.activate();
         this.uploadEl.focus(options);
         if (this.chooseFileButtonEl && (options === null || options === void 0 ? void 0 : options.deep) !== false) {
             this.chooseFileButtonEl.focus(options);
@@ -13461,11 +13461,7 @@ const StzhUpload = class {
     }
     /** a11y description for the 2 buttons (choose file and photograph) */
     get a11yDescribedby() {
-        return [
-            `${this.uploadId}-label`,
-            `${this.uploadId}-instruction`,
-            `${this.uploadId}-description`
-        ].join(' ');
+        return [`${this.uploadId}-label`, `${this.uploadId}-instruction`, `${this.uploadId}-description`].join(" ");
     }
     cleanLabel(input) {
         if (input === "" || input === undefined) {
@@ -13927,6 +13923,35 @@ const StzhUpload = class {
                 self.totalFileSize -= fileSizeInMiB;
                 // set focus to upload
                 self.chooseFileButtonEl.focus();
+                const dz = this;
+                const maxFiles = dz.options.maxFiles;
+                if (maxFiles != null) {
+                    const accepted = dz.getAcceptedFiles();
+                    if (accepted.length < maxFiles) {
+                        const allExtraFiles = dz.files.filter((f) => f._maxFilesExceeded && f.status === window.Dropzone.ERROR);
+                        for (const f of allExtraFiles) {
+                            if (dz.getAcceptedFiles().length >= maxFiles) {
+                                break;
+                            }
+                            f._maxFilesExceeded = false;
+                            f.accepted = true;
+                            f.status = window.Dropzone.QUEUED;
+                            if (f.previewElement) {
+                                f.previewElement.classList.remove("dz-error");
+                                f.previewElement
+                                    .querySelectorAll("[data-dz-errormessage]")
+                                    .forEach((node) => (node.textContent = ""));
+                                if (f.previewElement.parentNode === self.errorsElement) {
+                                    self.previewsElement.appendChild(f.previewElement);
+                                }
+                            }
+                            if (dz.options.autoProcessQueue) {
+                                dz.enqueueFile(f);
+                                dz.processQueue();
+                            }
+                        }
+                    }
+                }
                 return this._updateMaxFilesReachedClass();
             },
             error(file, message, xhr) {
@@ -13958,6 +13983,11 @@ const StzhUpload = class {
                     }
                 }
             },
+            maxfilesexceeded(file) {
+                file._maxFilesExceeded = true;
+                this.emit("error", file, self.localization.maxFilesExceeded);
+                this.emit("complete", file);
+            },
             previewTemplate: `
       <div class="stzh-upload__preview">
         <div class="stzh-upload__image">
@@ -14120,6 +14150,11 @@ const StzhUpload = class {
             component: "stzh-upload",
             files,
         }));
+        this.dropzone.on("maxfilesexceeded", (file) => {
+            file._maxFilesExceeded = true;
+            this.dropzone.emit("error", file, this.localization.maxFilesExceeded);
+            this.dropzone.emit("complete", file);
+        });
         this.dropzone.on("addedfile", (file) => {
             file.previewElement.querySelectorAll(`[${ATTR_NAME}]`).forEach((name) => {
                 name.setAttribute("title", file.name);
@@ -14160,9 +14195,9 @@ const StzhUpload = class {
         };
         const fileRestrictionsLocalization = this.localization.description;
         const totalFileSizeLimitLocalization = this.localization.descriptionTotalFileSizeLimit;
-        return (h(Host, { key: '8fd0d6e131fa0f4e1c1980a545e2458157d7309e', tabindex: this.disabled ? null : "-1", "is-invalid": this.invalid || errorUsed, "aria-invalid": (this.invalid || errorUsed) ? 'true' : 'false', "aria-describedby": ((this.invalid || errorUsed)) ? this.error : undefined, role: "group" }, h("stzh-toastbar", { key: 'c59f2382e959b3f6693b3a5ac50f018c21d99fe9' }), h("div", { key: 'db9405f89abac268d864acb52d9f815656682f0e', class: classes, ref: el => (this.dropzoneElement = el) }, h("div", { key: '90e1d097ede950004e06e8e62b3bb1de8999a96e', ref: el => (this.hiddenInputContainerElement = el) }), h("div", { key: '02e231eb4ea2092be0d2035bac757dc4b70e3153', id: `${this.uploadId}-label` }, this.label && h("div", { key: '533aa81de372947ddde91292063d246684f5b976', class: "stzh-upload__label" }, this.label)), h("div", { key: '256bcf36e0f415917c913a726bcffdb0d5618b3b', class: "stzh-upload__clickarea", ref: el => (this.clickareaElement = el) }, h("div", { key: '939cc665dd20738cccf4dc12e61450d50d2519bd', class: "stzh-upload__heading-wrapper" }, h("div", { key: 'a3ad11bfa4ce7cec9e696d7f883533e4f762bd33', class: "stzh-upload__heading-inner-wrapper" }, h("div", { key: 'a710c3e394e12720a8807d9759b87e4bfa6b3281', class: "stzh-upload__heading" }, this.heading ? this.heading : this.localization.heading), h("div", { key: '8c0004875cbb217527a2c3419328b616f003a3ca', class: "stzh-upload__buttons-wrapper" }, h("stzh-button", { key: '026548c04f826bc544e6b3681c4c4c222d0ec6e3', id: `${this.uploadId}-button`, class: "stzh-upload__button", variant: "secondary", size: "small", ref: el => (this.chooseFileButtonEl = el), label: this.button ? this.button : this.localization.button, a11yDescribedby: this.a11yDescribedby, a11yControls: `${this.uploadId}-previews`, "aria-invalid": (this.invalid || errorUsed) ? 'true' : 'false', disabled: this.disabled }, h("stzh-icon", { key: 'df0095ab8ac82207ee52dd15933fb7092ad25594', slot: "icon", name: "upload" })), this.isPhotographingAvailable && (h("stzh-button", { key: '201db7c288bffbce346dcf682381ae19e751fec6', onClick: this.onButtonScanClick, class: "stzh-upload__button-scan", variant: "secondary", size: "small", label: this.buttonScan ? this.buttonScan : this.localization.buttonScan, a11yDescribedby: this.a11yDescribedby, "aria-invalid": (this.invalid || errorUsed) ? 'true' : 'false', disabled: this.disabled }, h("stzh-icon", { key: '215682cd5e04fe62411faad703d2091148befdd7', slot: "icon", name: "camera" })))), h("div", { key: 'b02e09c4c4df968cb08a8fd8e54565a8d044c2fc', class: "stzh-upload__hint-wrapper" }, h("span", { key: 'ad49b9e9bc643fd8e148368cff80596fcb236d22' }, this.localization.buttonIntro)))), h("div", { key: '8386559ae9d16ba721b8ee8fd5f04b4f67f22745', class: "stzh-upload__instructions", id: `${this.uploadId}-instruction` }, h("p", { key: 'db59219d19bcee448a52c378d0663260e6789c8f' }, this.description && (h("span", { key: '4732f7b9cb409f611993c5b44764a1afa94a9035', class: "stzh-upload__instructions__description" }, this.description, h("br", { key: '29a86d082a30393246398aa3a19866cb60dd260d' }))), fileRestrictionsLocalization
+        return (h(Host, { key: '6a44ee3e2dc12bd5ebc59eed88f51a3a61c5ea44', tabindex: this.disabled ? null : "-1", "is-invalid": this.invalid || errorUsed, "aria-invalid": this.invalid || errorUsed ? "true" : "false", "aria-describedby": this.invalid || errorUsed ? this.error : undefined, role: "group" }, h("stzh-toastbar", { key: '6f21af8a2f23d2bb138e09950ff489184caf6610' }), h("div", { key: '9a97bdddc471298eba2ad38e3a38eedcfbfa66b1', class: classes, ref: el => (this.dropzoneElement = el) }, h("div", { key: '059095bd1098dc65eb56f5ece874ed51afec20a9', ref: el => (this.hiddenInputContainerElement = el) }), h("div", { key: '8406fbd8766d9af3ee4dae01014194bc6ff0fc55', id: `${this.uploadId}-label` }, this.label && h("div", { key: '8268b8138e20e4014e76b69a73792043608b8c42', class: "stzh-upload__label" }, this.label)), h("div", { key: 'f29d2d00d3e0e9ddfc8bb075f51d8d5c9f712ce2', class: "stzh-upload__clickarea", ref: el => (this.clickareaElement = el) }, h("div", { key: '9851c10972203810136b1fb200339dda2e0bcd84', class: "stzh-upload__heading-wrapper" }, h("div", { key: 'b78539573b0dbda675ef754c98bce5bf58f28fbc', class: "stzh-upload__heading-inner-wrapper" }, h("div", { key: '2651a2e7f76e04f85dd3e584fce673207d17f513', class: "stzh-upload__heading" }, this.heading ? this.heading : this.localization.heading), h("div", { key: 'e9cd35582ff659b0671c9ebece64d1b4f74ec6e5', class: "stzh-upload__buttons-wrapper" }, h("stzh-button", { key: '051528bd6706a9528d7303093bc636f2d6cfa3e8', id: `${this.uploadId}-button`, class: "stzh-upload__button", variant: "secondary", size: "small", ref: el => (this.chooseFileButtonEl = el), label: this.button ? this.button : this.localization.button, a11yDescribedby: this.a11yDescribedby, a11yControls: `${this.uploadId}-previews`, "aria-invalid": this.invalid || errorUsed ? "true" : "false", disabled: this.disabled }, h("stzh-icon", { key: 'c5acf8502d14d687f84ef2629d0594801635e06b', slot: "icon", name: "upload" })), this.isPhotographingAvailable && (h("stzh-button", { key: '03eba191dca2bf581a28ab742fe9fca0a9f44603', onClick: this.onButtonScanClick, class: "stzh-upload__button-scan", variant: "secondary", size: "small", label: this.buttonScan ? this.buttonScan : this.localization.buttonScan, a11yDescribedby: this.a11yDescribedby, "aria-invalid": this.invalid || errorUsed ? "true" : "false", disabled: this.disabled }, h("stzh-icon", { key: '1bbd36199368b8c30c4fc25b95377fac85060737', slot: "icon", name: "camera" })))), h("div", { key: 'be7463167905af5b7479d96f6d1f57ac7adcb664', class: "stzh-upload__hint-wrapper" }, h("span", { key: '74a7ed263030869f1923d7ee6ee99e3aba88530e' }, this.localization.buttonIntro)))), h("div", { key: '4e9bff7163a3cf7bff4aa3198264e3feb720b93f', class: "stzh-upload__instructions", id: `${this.uploadId}-instruction` }, h("p", { key: '309ff1be0b617795c32956db4305763f5e92a603' }, this.description && (h("span", { key: '1298da1267a16108c68e6b34e35ceaff3a05181c', class: "stzh-upload__instructions__description" }, this.description, h("br", { key: 'da8e2381562dd82c92e20ada2af206dd641a4c34' }))), fileRestrictionsLocalization
             .replace("{{fileformats}}", this.acceptedFiles)
-            .replace("{{filesize}}", `${this.maxFilesize}`), h("br", { key: 'a754be930a2397978c2ba85fb599e7345f130599' }), totalFileSizeLimitLocalization.replace("{{maxFilesizeTotal}}", `${this.maxFilesizeTotal}`)))), errorUsed && (h("div", { key: 'f1a3639d01adc489d118e72176a4ec9c6ebff265', class: "stzh-upload__description-wrapper" }, h(StzhInputDescription, { key: 'dfa85a8c18e074759ff6b6d61df8f1f2a833f50e', classPrefix: "stzh-upload", id: `${this.uploadId}-description`, error: this._error }))), h("div", { key: 'fcebc3f00e07b7acae09bc11650cc021aacaf5e6', id: `${this.uploadId}-previews`, class: "stzh-upload__previews-wrapper" }, h("div", { key: 'fb22a546281e00c5ca02ebb6423a4a49cd9c5845', class: "stzh-upload__previews-inner-wrapper" }, h("div", { key: 'efa5f2358dbe82f6aec0526134b7d643d7bd2775', class: "stzh-upload__errors", ref: el => (this.errorsElement = el) }), h("div", { key: '77a1c90395beee627ae0938ffd52b2b5f9b88cd5', class: "stzh-upload__previews dropzone-previews", ref: el => (this.previewsElement = el) })))), this.duplicateDetected && (h("div", { key: 'bf3646edcf70a58f40de1b06ebe284ecd3911f16', class: "stzh-upload__previews-message-wrapper" }, h("stzh-message", { key: '929eb4a24db19d85608e07bfc4d69968506fd126', type: "error", label: this.localization.duplicateFileUploadHeading, onStzhClose: () => (this.duplicateDetected = false) }, h("stzh-text", { key: 'e319ae131132fb332042e41e3a0816c722a8518e' }, h("p", { key: '834eb58329c47c1242827ec74098c61632e4327d' }, "\u00AB", this.duplicateFileName, "\u00BB (", this.duplicateFileSize, ")"), h("p", { key: 'faa64c92c242b4f8860c110ba633eb3b3993eada' }, this.localization.duplicateFileUploadParagraph))))), this.totalTooBig && (h("div", { key: 'c0eef09f970e984aedd28cf79bd15c6141af6ade', class: "stzh-upload__previews-message-wrapper" }, h("stzh-message", { key: '72754f9bb6e82a470ed8b31a09f649a6c0449f3b', type: "warning", label: this.totalTooBigMessageHeading, onStzhClose: () => (this.totalTooBig = false) }, h("stzh-text", { key: 'c1ed543c5c0f8906190e82b767a4647d9ae95602' }, h("p", { key: '0ad9f92e3e5b0c7bea24b73462a8776550e89d79' }, this.totalTooBigMessageBody, " ", this.totalTooBigMessageBody2))))), h("stzh-dialog", { key: '2b20ffdbb1d6f999b63b83c4154201eeb8d477c0', ref: el => (this.photographingOverlayElement = el), onStzhClose: this.closePhotographingWebsocketConnection, class: this.isPhotographingAvailable && "stzh-dialog--fit-content", heading: this.localization.photographingTitle1 }, h("stzh-button", { key: 'f1b59876ec98c4fe3981a3b2ea9b4456f683edb0', class: "stzh-upload-photographing__back-button", icon: "arrow-left", size: "small", variant: "tertiary-plain", "no-padding-left": "true", "no-padding-right": "true", onClick: this.closePhotographingOverlay }, this.localization.back), this.isPhotographingAvailable && (h(Fragment, { key: 'b64212a799240976d7013be0f148f5aaa8c0bca8' }, h("div", { key: 'd007fdf97274102656e29c53cc453c7aaf026d75', class: "stzh-upload-photographing__info" }, h("div", { key: '70a3806f3817f63fd43e6f7db88489f601aec58c', class: "stzh-upload-photographing__text-qrcode" }, h("div", { key: '63cc562e8ee6ebdbad72db34df7125641734d6b9', class: "stzh-upload-photographing-qrlink-container" }, h("stzh-text", { key: '54233b37cbd691e85aa5cf762511b46c39cf7de6' }, this.localization.photographingText1)), h("div", { key: 'b86b7dbf29bfa3e4d6365f65ab23dfdaca99825e', class: "stzh-upload-photographing-qrcode-container" }, h("canvas", { key: 'bcc7010a7093ed54e4ebfba60d720e23beb69bd9', class: "stzh-upload-photographing-qrcode", ref: el => (this.photographingQrcodeElement = el) })))), h("div", { key: 'c51cbd074026995b3aeb691d91b1cb43b8c6fd72', class: "stzh-upload-photographing__info" }, h("stzh-heading", { key: '3baf7c3894729a1bad4598a40c6ab5d846affcf5', level: "3" }, this.localization.photographingTitle2), h("stzh-text", { key: '69d07fab8681f54b6a04274396df26984be0401f' }, this.localization.photographingText2)), h("div", { key: '738375e9288b980fa5c9129d12707d93207982f0', class: "stzh-upload-photographing__continue" }, !!this.photographingUrlDetails && (h("stzh-link", { key: '9735296285059ee69e4b18f9ffefe40759db7b4f', class: "stzh-upload-photographing-link", href: this.photographingUrlDetails.url + "&label=" + this.cleanLabel(this.label), target: "_blank" }, this.localization.photographingContinue))))))));
+            .replace("{{filesize}}", `${this.maxFilesize}`), h("br", { key: 'd99f6a3f5444fafcd07f6440451298dd47523cb5' }), totalFileSizeLimitLocalization.replace("{{maxFilesizeTotal}}", `${this.maxFilesizeTotal}`)))), errorUsed && (h("div", { key: '77c6306d44f41ff2b233ecec282f6391a8dfe1eb', class: "stzh-upload__description-wrapper" }, h(StzhInputDescription, { key: '9720f0f87ce675874336492569ad94ded65d1009', classPrefix: "stzh-upload", id: `${this.uploadId}-description`, error: this._error }))), h("div", { key: '7fbc7d4d0548f52bd352b3b7b00883b7815e3d45', id: `${this.uploadId}-previews`, class: "stzh-upload__previews-wrapper" }, h("div", { key: 'be18e35eded635ba468728585d880dd3af106baa', class: "stzh-upload__previews-inner-wrapper" }, h("div", { key: '241b80274d2f0420ace0356f087a59e8c2b7fdd9', class: "stzh-upload__errors", ref: el => (this.errorsElement = el) }), h("div", { key: '45857fd4a8b43f5fc4697e6c8be2dbf3757e8878', class: "stzh-upload__previews dropzone-previews", ref: el => (this.previewsElement = el) })))), this.duplicateDetected && (h("div", { key: '18e087b19bf5ff1a95b6f29537692567ec8f0c02', class: "stzh-upload__previews-message-wrapper" }, h("stzh-message", { key: '4cad928019ee8748d0cfd45d7a34aff09e8e42ce', type: "error", label: this.localization.duplicateFileUploadHeading, onStzhClose: () => (this.duplicateDetected = false) }, h("stzh-text", { key: 'aae71c0e0132896ec2c368850afd2124664728cc' }, h("p", { key: 'd11019b925a56eaedc3894450b7f1d1ff0b3bd41' }, "\u00AB", this.duplicateFileName, "\u00BB (", this.duplicateFileSize, ")"), h("p", { key: '76eaad2b28c10b37f59ebe8728d439da7764887d' }, this.localization.duplicateFileUploadParagraph))))), this.totalTooBig && (h("div", { key: '0ce75f017642dc55a7be4c4bc1227a63805a7cdd', class: "stzh-upload__previews-message-wrapper" }, h("stzh-message", { key: '42fcaf1b956c972f8a4a81b8db28fede58aafa3b', type: "warning", label: this.totalTooBigMessageHeading, onStzhClose: () => (this.totalTooBig = false) }, h("stzh-text", { key: 'c0ab490ad07ab9e0263c8f3ca2371d228de42984' }, h("p", { key: 'c3263b9083ef9ebff7516fdb3af7d14506202ab2' }, this.totalTooBigMessageBody, " ", this.totalTooBigMessageBody2))))), h("stzh-dialog", { key: '1f978ef748d6256cb57d428a0579b1613f04e316', ref: el => (this.photographingOverlayElement = el), onStzhClose: this.closePhotographingWebsocketConnection, class: this.isPhotographingAvailable && "stzh-dialog--fit-content", heading: this.localization.photographingTitle1 }, h("stzh-button", { key: 'd4c311d4d5e35df0dae298948aaeadc0aa583d1e', class: "stzh-upload-photographing__back-button", icon: "arrow-left", size: "small", variant: "tertiary-plain", "no-padding-left": "true", "no-padding-right": "true", onClick: this.closePhotographingOverlay }, this.localization.back), this.isPhotographingAvailable && (h(Fragment, { key: 'b31a59a47b777a9136e3fe89a71be790a494b947' }, h("div", { key: '645e610ce58436cc73c7a3c911abbdf8761f9ddb', class: "stzh-upload-photographing__info" }, h("div", { key: '687ee9d9ccf712a11c46b6d78a4bdd085b05db46', class: "stzh-upload-photographing__text-qrcode" }, h("div", { key: '3a0e3794daf34cb02bb92b655bcba409c9415ea9', class: "stzh-upload-photographing-qrlink-container" }, h("stzh-text", { key: '2d4412fa833b28868e898edc3bc0c3e43c12cd54' }, this.localization.photographingText1)), h("div", { key: 'ec8468c3fa2fff773d889a853317da1ec2563774', class: "stzh-upload-photographing-qrcode-container" }, h("canvas", { key: 'd40e6ab0785c7ad2ff43c4091039f66238414bde', class: "stzh-upload-photographing-qrcode", ref: el => (this.photographingQrcodeElement = el) })))), h("div", { key: 'aca271628926ed56f254cc4553c171c507e52358', class: "stzh-upload-photographing__info" }, h("stzh-heading", { key: '30d5c72967e12098c5a3e902899260fca3fbf010', level: "3" }, this.localization.photographingTitle2), h("stzh-text", { key: 'c00aa3d6054a5028302c3e7c297f99e33d6288fd' }, this.localization.photographingText2)), h("div", { key: 'decc1eea73cf7f66b63dcc3f6ae2f6e6ed2f7f20', class: "stzh-upload-photographing__continue" }, !!this.photographingUrlDetails && (h("stzh-link", { key: '6b960c9b9b8a993b6e0120aab47aee57917c28c8', class: "stzh-upload-photographing-link", href: this.photographingUrlDetails.url + "&label=" + this.cleanLabel(this.label), target: "_blank" }, this.localization.photographingContinue))))))));
     }
     get uploadEl() { return getElement(this); }
     static get watchers() { return {