@oiz/stzh-components 3.3.0-beta6 → 3.3.0

package/dist/components/stzh-upload.js

@@ -1,16 +1,17 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
 import { g as getStzhEnvironment, i as isStzhElement, h as hasSlot } from './utils.js';
-import { t as tc } from './translation-utils.js';
 import { S as StzhInputDescription } from './stzh-input-description.js';
 import { c as createCommonjsModule } from './_commonjsHelpers.js';
-import { d as defineCustomElement$9 } from './stzh-badge2.js';
-import { d as defineCustomElement$8 } from './stzh-button2.js';
-import { d as defineCustomElement$7 } from './stzh-dialog2.js';
-import { d as defineCustomElement$6 } from './stzh-heading2.js';
-import { d as defineCustomElement$5 } from './stzh-icon2.js';
-import { d as defineCustomElement$4 } from './stzh-link2.js';
-import { d as defineCustomElement$3 } from './stzh-popover2.js';
-import { d as defineCustomElement$2 } from './stzh-text2.js';
+import { d as defineCustomElement$b } from './stzh-badge2.js';
+import { d as defineCustomElement$a } from './stzh-button2.js';
+import { d as defineCustomElement$9 } from './stzh-dialog2.js';
+import { d as defineCustomElement$8 } from './stzh-heading2.js';
+import { d as defineCustomElement$7 } from './stzh-icon2.js';
+import { d as defineCustomElement$6 } from './stzh-link2.js';
+import { d as defineCustomElement$5 } from './stzh-popover2.js';
+import { d as defineCustomElement$4 } from './stzh-text2.js';
+import { d as defineCustomElement$3 } from './stzh-toast2.js';
+import { d as defineCustomElement$2 } from './stzh-toastbar2.js';
 
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -13615,6 +13616,11 @@ const StzhUpload$1 = /*@__PURE__*/ proxyCustomElement(class StzhUpload extends H
       });
     }
   }
+  toggleToast(message, type) {
+    document.querySelector('stzh-upload').querySelector('stzh-toastbar').toast(message, {
+      type: type,
+    });
+  }
   componentDidRender() {
     if (this.dropzone) {
       return;
@@ -13919,18 +13925,24 @@ const StzhUpload$1 = /*@__PURE__*/ proxyCustomElement(class StzhUpload extends H
       totalBytes,
       totalBytesSent,
     }));
-    this.dropzone.on("error", (file, message, xhr) => this.stzhError.emit({
-      component: "stzh-upload",
-      file,
-      message,
-      xhr,
-    }));
-    this.dropzone.on("errormultiple", (files, message, xhr) => this.stzhErrorMultiple.emit({
-      component: "stzh-upload",
-      files,
-      message,
-      xhr,
-    }));
+    this.dropzone.on("error", (file, message, xhr) => {
+      this.toggleToast(this.localization.uploadErrorToast, 'error');
+      this.stzhError.emit({
+        component: "stzh-upload",
+        file,
+        message,
+        xhr,
+      });
+    });
+    this.dropzone.on("errormultiple", (files, message, xhr) => {
+      this.toggleToast(this.localization.uploadErrorToast, 'error');
+      this.stzhErrorMultiple.emit({
+        component: "stzh-upload",
+        files,
+        message,
+        xhr,
+      });
+    });
     this.dropzone.on("success", (file, responseText, event) => this.stzhSuccess.emit({
       component: "stzh-upload",
       file,
@@ -13960,6 +13972,7 @@ const StzhUpload$1 = /*@__PURE__*/ proxyCustomElement(class StzhUpload extends H
       files,
     }));
     this.dropzone.on("addedfile", (file) => {
+      this.toggleToast(this.localization.uploadSuccessToast, 'success');
       file.previewElement.querySelectorAll(`[${ATTR_NAME}]`).forEach((name) => {
         name.setAttribute("title", file.name);
       });
@@ -13998,7 +14011,7 @@ const StzhUpload$1 = /*@__PURE__*/ proxyCustomElement(class StzhUpload extends H
       "stzh-upload--has-instructions": !!this.description || !!this.localization.description,
     };
     const description = this.description ? 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__buttons-wrapper" }, h("stzh-button", { class: "stzh-upload__button", variant: "secondary", size: "small", ref: el => (this.linkElement = el), label: this.button ? this.button : tc(this.localization.button, this.maxFiles), a11yDescribedby: `${this.uploadId}-label ${this.uploadId}-instruction ${this.uploadId}-description`, disabled: this.disabled, a11yControls: `${this.uploadId}-previews` }, h("stzh-icon", { slot: "icon", name: "upload" })), this.isPhotographingAvailable && (h("stzh-button", { class: "stzh-upload__button-scan", variant: "secondary", size: "small", label: this.buttonScan ? this.buttonScan : tc(this.localization.buttonScan, this.maxFiles), onClick: this.onButtonScanClick }, h("stzh-icon", { slot: "icon", name: "camera" })))), h("div", { class: "stzh-upload__hint-wrapper" }, h("span", null, this.localization.buttonIntro)))), h("div", { class: "stzh-upload__instructions", id: `${this.uploadId}-instruction` }, description
+    return (h(Host, { "is-invalid": this.invalid || errorUsed }, h("stzh-toastbar", null), 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__buttons-wrapper" }, h("stzh-button", { class: "stzh-upload__button", variant: "secondary", size: "small", ref: el => (this.linkElement = el), label: this.button ? this.button : this.localization.button, a11yDescribedby: `${this.uploadId}-label ${this.uploadId}-instruction ${this.uploadId}-description`, disabled: this.disabled, a11yControls: `${this.uploadId}-previews` }, h("stzh-icon", { slot: "icon", name: "upload" })), this.isPhotographingAvailable && (h("stzh-button", { class: "stzh-upload__button-scan", variant: "secondary", size: "small", label: this.buttonScan ? this.buttonScan : this.localization.buttonScan, onClick: this.onButtonScanClick }, h("stzh-icon", { slot: "icon", name: "camera" })))), h("div", { class: "stzh-upload__hint-wrapper" }, h("span", null, this.localization.buttonIntro)))), h("div", { class: "stzh-upload__instructions", id: `${this.uploadId}-instruction` }, description
       .replace("{{fileformats}}", this.acceptedFiles ? this.acceptedFiles : "Alle")
       .replace("{{filesize}}", `${this.maxFilesize}`))), h("div", { class: "stzh-upload__description-wrapper" }, ((_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) })))), h("stzh-dialog", { ref: el => (this.photographingOverlayElement = el), onStzhClose: this.closePhotographingWebsocketConnection }, h("stzh-button", { 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, null, h("div", { class: "stzh-upload-photographing__info" }, h("stzh-heading", { level: "3" }, this.localization.photographingTitle1), h("div", { class: "stzh-upload-photographing__text-qrcode" }, h("div", null, h("stzh-text", null, this.localization.photographingText1), !!this.photographingUrlDetails && (h("stzh-link", { class: "stzh-upload-photographing-link", href: this.photographingUrlDetails.url, target: "_blank" }, this.photographingUrlDetails.url))), h("canvas", { class: "stzh-upload-photographing-qrcode", ref: el => (this.photographingQrcodeElement = el) }))), h("div", { class: "stzh-upload-photographing__info" }, h("stzh-heading", { level: "3" }, this.localization.photographingTitle2), h("stzh-text", null, this.localization.photographingText2)))))));
   }
@@ -14073,7 +14086,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["stzh-upload", "stzh-badge", "stzh-button", "stzh-dialog", "stzh-heading", "stzh-icon", "stzh-link", "stzh-popover", "stzh-text"];
+  const components = ["stzh-upload", "stzh-badge", "stzh-button", "stzh-dialog", "stzh-heading", "stzh-icon", "stzh-link", "stzh-popover", "stzh-text", "stzh-toast", "stzh-toastbar"];
   components.forEach(tagName => { switch (tagName) {
     case "stzh-upload":
       if (!customElements.get(tagName)) {
@@ -14082,40 +14095,50 @@ function defineCustomElement$1() {
       break;
     case "stzh-badge":
       if (!customElements.get(tagName)) {
-        defineCustomElement$9();
+        defineCustomElement$b();
       }
       break;
     case "stzh-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$a();
       }
       break;
     case "stzh-dialog":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$9();
       }
       break;
     case "stzh-heading":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$8();
       }
       break;
     case "stzh-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$7();
       }
       break;
     case "stzh-link":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$6();
       }
       break;
     case "stzh-popover":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$5();
       }
       break;
     case "stzh-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "stzh-toast":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "stzh-toastbar":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }