@oiz/stzh-components 4.6.0 → 4.7.0

package/dist/components/stzh-timeline-item.js

@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-
 import { w as waitForEvent } from './p-70ec7e79.js';
 import { s as stopAnimations, a as animateTo, b as shimKeyframesAutoValues } from './p-2c0bec3e.js';
 import { h as hasSlot } from './p-289f5de2.js';
-import { d as defineCustomElement$3 } from './p-b8fda153.js';
+import { d as defineCustomElement$3 } from './p-6a1a040f.js';
 import { d as defineCustomElement$2 } from './p-60d4ef07.js';
 
 const stzhTimelineItemCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--content-padding-bottom:var(--stzh-space-medium);--trigger-size:1.125rem;--icon-size:var(--stzh-icon-size);--description-color:var(--stzh-color-black);--heading-margin-bottom:var(--stzh-space-medium);--button-color:var(--stzh-color-primary70);--button-background-color:transparent;--button-font-size:var(\n    --stzh-timeline-nested-button-font-size,\n    var(--stzh-font-milli-font-size)\n  );--button-line-height:var(\n    --stzh-timeline-nested-button-line-height,\n    var(--stzh-font-milli-heading-line-height)\n  );--button-letter-spacing:var(\n    --stzh-timeline-nested-button-line-height,\n    normal\n  );--bullet-color:var(--stzh-color-primary70);--bullet-background-color:var(--stzh-color-grey20);--content-padding-top:var(--stzh-timeline-content-padding-top);--content-padding-right:0px;--hover-button-color:var(--button-color);--hover-button-background-color:var(--button-background-color);--hover-bullet-color:var(--bullet-color);--hover-bullet-background-color:var(--bullet-background-color)}@media screen and (min-width: 600px){:host{--content-padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host{--content-padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host{--content-padding-bottom:var(--stzh-space-xxlarge)}}@media print{:host{page-break-inside:avoid;break-inside:avoid}}@media screen and (min-width: 600px){:host{--button-font-size:var(\n      --stzh-timeline-nested-button-font-size,\n      var(--stzh-font-centi-font-size)\n    );--button-line-height:var(\n      --stzh-timeline-nested-button-line-height,\n      var(--stzh-font-centi-heading-line-height)\n    )}}:host(:where([is-foldable])){--button-background-color:var(--stzh-color-grey10);--bullet-color:var(--stzh-color-black);--bullet-background-color:var(--stzh-color-secondary20);--hover-button-background-color:var(--stzh-color-grey20);--hover-bullet-color:var(--bullet-color);--hover-bullet-background-color:var(--stzh-color-secondary40)}@media (forced-colors: active), (-ms-high-contrast: active){:host(:where([is-foldable])){--button-color:Highlight;--hover-button-color:Highlight}}:host(:where([open]:not([open=false]))){--heading-margin-bottom:0px}:host(:where([is-foldable][open]:not([open=false]))){--bullet-color:var(--stzh-color-white);--bullet-background-color:var(--stzh-color-primary70);--hover-bullet-color:var(--bullet-color);--hover-bullet-background-color:var(--stzh-color-primary90)}@media (forced-colors: active), (-ms-high-contrast: active){:host(:where([is-foldable][open]:not([open=false]))){--button-color:SelectedItem;--bullet-color:SelectedItem;--hover-button-color:SelectedItem;--hover-bullet-color:SelectedItem}}:host(:where([completed]:not([completed=false]))){--bullet-color:var(--stzh-color-white);--bullet-background-color:var(--stzh-color-secondary60);--hover-bullet-color:var(--bullet-color);--hover-bullet-background-color:var(--bullet-background-color)}:host(:where([is-foldable][open]:not([open=false]))){--hover-bullet-background-color:var(--stzh-color-secondary70)}:host(:where([disabled]:not([disabled=false]))){--button-color:var(--stzh-color-grey80);--bullet-color:var(--stzh-color-white);--bullet-background-color:var(--stzh-color-grey60);--hover-button-color:var(--button-color);--hover-button-background-color:var(--button-background-color);--hover-bullet-color:var(--bullet-color);--hover-bullet-background-color:var(--bullet-background-color)}.stzh-timeline-item{display:flex;flex-direction:column;}.stzh-timeline-item__heading{position:relative;margin:0}.stzh-timeline-item__button{font-size:var(--button-font-size);line-height:var(--button-line-height);letter-spacing:var(--button-letter-spacing);font-family:inherit;width:100%;appearance:none;background-color:transparent;padding:0;border:none;display:flex;color:var(--button-color);text-align:left;transition-property:color;transition-duration:var(--stzh-base-transition-animation-speed);cursor:default}.stzh-timeline-item__button:hover{color:var(--hover-button-color)}@media (prefers-reduced-motion: reduce){.stzh-timeline-item__button{transition:none}}.stzh-timeline-item__button-inner{display:flex;flex-grow:1;align-items:center;padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall);background-color:var(--button-background-color);transition-property:background-color;transition-duration:var(--stzh-base-transition-animation-speed);min-height:var(--stzh-timeline-bullet-size);padding-left:var(--stzh-space-xsmall);padding-right:var(--stzh-space-small)}.stzh-timeline-item__button:hover .stzh-timeline-item__button-inner{background-color:var(--hover-button-background-color)}.stzh-timeline-item__button,.stzh-timeline-item__content-inner{padding-left:var(--stzh-timeline-bullet-size)}.stzh-timeline-item__button-text{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);flex-grow:1}.stzh-timeline-item__button-icon{margin-left:var(--stzh-space-xsmall);align-self:flex-start;position:relative;display:block;width:var(--trigger-size);height:var(--trigger-size);margin-top:var(--stzh-space-xxsmall)}@media screen and (min-width: 600px){.stzh-timeline-item__button-icon{margin-left:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-timeline-item__button-icon{margin-left:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-timeline-item__button-icon{margin-left:var(--stzh-space-xlarge)}}.stzh-timeline-item__button-icon::before,.stzh-timeline-item__button-icon::after{position:absolute;top:50%;left:50%;content:\"\";display:block;width:var(--trigger-size);height:0.15625rem;transition-property:transform;transition-duration:500ms;transform-origin:top left;background-color:currentColor}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-timeline-item__button-icon::before,.stzh-timeline-item__button-icon::after{background-color:CanvasText}}@media (prefers-reduced-motion: reduce){.stzh-timeline-item__button-icon::before,.stzh-timeline-item__button-icon::after{transition:none}}.stzh-timeline-item__button-icon::before{transform:rotate(180deg) translate(-50%, -50%)}.stzh-timeline-item__button-icon::after{transform:rotate(90deg) translate(-50%, -50%)}.stzh-timeline-item__bullet{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);position:absolute;top:0;left:0;z-index:1;display:flex;justify-content:center;align-items:center;width:var(--stzh-timeline-bullet-size);height:var(--stzh-timeline-bullet-size);color:var(--bullet-color);background-color:var(--bullet-background-color);transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed)}@media (prefers-reduced-motion: reduce){.stzh-timeline-item__bullet{transition:none}}.stzh-timeline-item__button:hover .stzh-timeline-item__bullet{color:var(--hover-bullet-color);background-color:var(--hover-bullet-background-color)}.stzh-timeline-item__bullet-icon-wrapper{--stzh-icon-size:var(--icon-size);display:flex}.stzh-timeline-item__content{--stzh-timeline-content-padding-top:var(--stzh-space-xxsmall);--stzh-timeline-nested-button-font-size:var(--stzh-font-micro-font-size);--stzh-timeline-nested-button-line-height:var(\n    --stzh-font-micro-heading-line-height\n  );overflow:hidden}@media screen and (min-width: 900px){.stzh-timeline-item__content{--stzh-timeline-content-padding-top:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-timeline-item__content{--stzh-timeline-content-padding-top:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-timeline-item__content{--stzh-timeline-nested-button-font-size:var(--stzh-font-milli-font-size);--stzh-timeline-nested-button-line-height:var(\n      --stzh-font-milli-heading-line-height\n    )}}@media print{.stzh-timeline-item__content{height:auto !important;overflow:visible !important;display:block !important}}.stzh-timeline-item__content-inner{padding-top:var(--content-padding-top);padding-bottom:var(--content-padding-bottom);padding-right:var(--content-padding-right)}.stzh-timeline-item__badge{position:absolute;right:-0.3125rem;top:-0.375rem}.stzh-timeline-item__description{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height));color:var(--description-color);transition:color var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 900px){.stzh-timeline-item__description{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}@media (prefers-reduced-motion: reduce){.stzh-timeline-item__description{transition:none}}.stzh-timeline-item__heading{margin-bottom:var(--heading-margin-bottom);transition:margin-bottom var(--stzh-base-transition-animation-speed)}@media (prefers-reduced-motion: reduce){.stzh-timeline-item__heading{transition:none}}.stzh-timeline-item__heading-text,.stzh-timeline-item__description{display:block}.stzh-timeline-item--is-foldable .stzh-timeline-item__button{cursor:pointer}.stzh-timeline-item--is-open .stzh-timeline-item__button-icon::before,.stzh-timeline-item--is-open .stzh-timeline-item__button-icon::after{transform:rotate(0) translate(-50%, -50%)}.stzh-timeline-item--is-disabled .stzh-timeline-item__button{cursor:not-allowed}";

package/dist/components/stzh-timepicker.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-8f01554b.js';
-import { d as defineCustomElement$5 } from './p-3d9ce94f.js';
+import { d as defineCustomElement$5 } from './p-f07fda42.js';
 import { d as defineCustomElement$4 } from './p-60d4ef07.js';
 import { d as defineCustomElement$3 } from './p-472ab25f.js';
 import { d as defineCustomElement$2 } from './p-519479b8.js';

package/dist/components/stzh-toast.js

@@ -1,4 +1,4 @@
-import { S as StzhToast$1, d as defineCustomElement$1 } from './p-258d7bde.js';
+import { S as StzhToast$1, d as defineCustomElement$1 } from './p-9a88d047.js';
 
 const StzhToast = StzhToast$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/stzh-toastbar.js

@@ -1,4 +1,4 @@
-import { S as StzhToastbar$1, d as defineCustomElement$1 } from './p-cb0898ca.js';
+import { S as StzhToastbar$1, d as defineCustomElement$1 } from './p-139d2041.js';
 
 const StzhToastbar = StzhToastbar$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/stzh-twocolumns.js

@@ -39,7 +39,7 @@ const StzhTwocolumns$1 = /*@__PURE__*/ proxyCustomElement(class StzhTwocolumns e
             "stzh-twocolumns--has-left": leftSlotUsed,
             "stzh-twocolumns--has-right": rightSlotUsed,
         };
-        return (h(Host, { key: '14b4f38dd3ab3064d0a6809c15d0edc6344007b4' }, h("div", { key: '58f372618ec79e5870aba252a7ed95b9a905e9cb', class: classes }, h("div", { key: 'a31f1b2ebdab1e42b2864ab52c42c987cc7fc246', class: "stzh-twocolumns__left" }, h("slot", { key: '62eaf8a9dee8d89a89748ef737191c4ef81f6c3a', name: "left", onSlotchange: () => forceUpdate(this.element) })), h("div", { key: '988dc8740987bfe0db122dceb689aae038401260', class: "stzh-twocolumns__right" }, h("slot", { key: 'ee09eeb57ba172a0027532b7f487cbab7107b436', name: "right", onSlotchange: () => forceUpdate(this.element) })))));
+        return (h(Host, { key: '7e5a072600b50880000a27f662347fc68e17e4d6' }, h("div", { key: '7455e0a148f5a386e7bff4ddbd604c90c79f7a06', class: classes }, h("div", { key: 'b3339d11389099a514fa5e6f8f69ea85a019f2b9', class: "stzh-twocolumns__left" }, h("slot", { key: '528cf26093876c42faaca122698582a1942a01e8', name: "left", onSlotchange: () => forceUpdate(this.element) })), h("div", { key: '2dcc85d3909ad286ef83c4c2168f4920f4301102', class: "stzh-twocolumns__right" }, h("slot", { key: 'd9745a89e98c19d04c37aa830bace27c0c803a55', name: "right", onSlotchange: () => forceUpdate(this.element) })))));
     }
     get element() { return this; }
     static get style() { return StzhTwocolumnsStyle0; }

package/dist/components/stzh-upload.js

@@ -1,17 +1,17 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-8f01554b.js';
 import { j as getStzhEnvironment, i as isStzhElement, h as hasSlot } from './p-289f5de2.js';
 import { S as StzhInputDescription } from './p-a2148b9d.js';
-import { d as defineCustomElement$c } from './p-b8fda153.js';
-import { d as defineCustomElement$b } from './p-ec5e2f2a.js';
-import { d as defineCustomElement$a } from './p-9dccba17.js';
+import { d as defineCustomElement$c } from './p-6a1a040f.js';
+import { d as defineCustomElement$b } from './p-775cca3b.js';
+import { d as defineCustomElement$a } from './p-cac3a53e.js';
 import { d as defineCustomElement$9 } from './p-694da289.js';
 import { d as defineCustomElement$8 } from './p-60d4ef07.js';
-import { d as defineCustomElement$7 } from './p-2d80d228.js';
-import { d as defineCustomElement$6 } from './p-c4637521.js';
+import { d as defineCustomElement$7 } from './p-31108932.js';
+import { d as defineCustomElement$6 } from './p-3ee4c2ec.js';
 import { d as defineCustomElement$5 } from './p-472ab25f.js';
 import { d as defineCustomElement$4 } from './p-519479b8.js';
-import { d as defineCustomElement$3 } from './p-258d7bde.js';
-import { d as defineCustomElement$2 } from './p-cb0898ca.js';
+import { d as defineCustomElement$3 } from './p-9a88d047.js';
+import { d as defineCustomElement$2 } from './p-139d2041.js';
 
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -13242,7 +13242,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$1 = /*@__PURE__*/ proxyCustomElement(class StzhUpload extends H {
@@ -13336,7 +13336,7 @@ const StzhUpload$1 = /*@__PURE__*/ proxyCustomElement(class StzhUpload extends H
         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;
@@ -13455,7 +13455,7 @@ const StzhUpload$1 = /*@__PURE__*/ proxyCustomElement(class StzhUpload extends H
     /** 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);
@@ -13472,11 +13472,7 @@ const StzhUpload$1 = /*@__PURE__*/ proxyCustomElement(class StzhUpload extends H
     }
     /** 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) {
@@ -13938,6 +13934,35 @@ const StzhUpload$1 = /*@__PURE__*/ proxyCustomElement(class StzhUpload extends H
                 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) {
@@ -13969,6 +13994,11 @@ const StzhUpload$1 = /*@__PURE__*/ proxyCustomElement(class StzhUpload extends H
                     }
                 }
             },
+            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">
@@ -14131,6 +14161,11 @@ const StzhUpload$1 = /*@__PURE__*/ proxyCustomElement(class StzhUpload extends H
             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);
@@ -14171,9 +14206,9 @@ const StzhUpload$1 = /*@__PURE__*/ proxyCustomElement(class StzhUpload extends H
         };
         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 this; }
     static get watchers() { return {