@oiz/stzh-components 3.3.0-beta6 → 3.3.0

package/dist/esm/stzh-saptcha.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-saptcha.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-saptcha/stzh-saptcha.scss?tag=stzh-saptcha&encapsulation=scoped","src/components/stzh-saptcha/stzh-saptcha.tsx"],"sourcesContent":["/**\n * @prop --color: Color of section\n * @prop --background-color: Background color of section\n */\n\n:host {\n  --color: #{$colorBlack};\n  --background-color: #{$colorGrey10};\n}\n\n.stzh-saptcha {\n  &__box {\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'medium');\n    padding-left: space('medium');\n    padding-right: space('medium');\n    color: var(--color);\n    background-color: var(--background-color);\n\n    @include mq($from: medium) {\n      padding-left: space('large');\n      padding-right: space('large');\n    }\n  }\n\n  &__info {\n    @include fontSize('milli');\n  }\n\n  &__answer {\n    @include fontSize('regular');\n    color: $colorPrimary;\n    margin-top: space('xsmall');\n  }\n\n  &__input {\n    margin-top: space('medium');\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch\n} from \"@stencil/core\";\n\nimport { StzhSaptchaLocalizedText } from './stzh-saptcha.localization';\n\nlet saptchaCounter = 0;\n\n/**\n * @slot - Slot for content\n */\n@Component({\n  tag: \"stzh-saptcha\",\n  styleUrl: \"stzh-saptcha.scss\",\n  scoped: true\n})\nexport class StzhSaptcha {\n  /** Translation strings */\n  @Prop() localization: StzhSaptchaLocalizedText;\n\n  /** Numbers shown to user for selection */\n  @Prop() numbers: number[] | string = [];\n  private _numbers: number[] = [];\n\n  /** The value of the input element */\n  @Prop() value: string = \"\";\n\n  /** Name of input */\n  @Prop({ reflect: true }) name: string = \"saptcha\";\n\n  /** One or multiple error message */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  @Element() element: HTMLStzhSaptchaElement;\n\n  @Watch(\"numbers\")\n  numbersWatcher(newValue: number[] | string) {\n    if (typeof newValue === \"string\") {\n      this._numbers = JSON.parse(newValue);\n    } else {\n      this._numbers = newValue;\n    }\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  private saptchaId: string;\n\n  async componentWillLoad() {\n    this.saptchaId = `stzh-saptcha-${saptchaCounter++}`;\n\n    this.numbersWatcher(this.numbers);\n    this.errorWatcher(this.error);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'saptcha');\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-saptcha\": true\n    };\n\n    return (\n      <Host is-invalid={this.invalid || this._error.length > 0}>\n        <div class={classes}>\n          <div class=\"stzh-saptcha__box\">\n            <div class=\"stzh-saptcha__info\" id={`${this.saptchaId}-info`}>\n              {this.localization.info} {this.localization.question}\n            </div>\n            <div class=\"stzh-saptcha__answer\" id={`${this.saptchaId}-answer`}>\n              {this._numbers.map((number, index) =>\n                <span class=\"stzh-saptcha__number\">\n                  {number}\n                  {index < this._numbers.length - 1 &&\n                    (index === this._numbers.length - 2\n                      ? this.localization.answerOr\n                      : \", \")\n                  }\n                </span>\n              )}\n            </div>\n            <stzh-input\n              class=\"stzh-saptcha__input\"\n              label={this.localization.answer}\n              name={this.name}\n              invalid={this.invalid}\n              error={this.error}\n              disabled={this.disabled}\n              value={this.value}\n              required\n              a11yDescribedby={`${this.saptchaId}-info ${this.saptchaId}-answer`}\n            ></stzh-input>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-saptcha.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-saptcha/stzh-saptcha.scss?tag=stzh-saptcha&encapsulation=scoped","src/components/stzh-saptcha/stzh-saptcha.tsx"],"sourcesContent":["/**\n * @prop --color: Color of section\n * @prop --background-color: Background color of section\n */\n\n:host {\n  --color: #{$colorBlack};\n  --background-color: #{$colorGrey10};\n}\n\n.stzh-saptcha {\n  &__box {\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'medium');\n    padding-left: space('medium');\n    padding-right: space('medium');\n    color: var(--color);\n    background-color: var(--background-color);\n\n    @include mq($from: medium) {\n      padding-left: space('large');\n      padding-right: space('large');\n    }\n  }\n\n  &__info {\n    @include fontSize('milli');\n  }\n\n  &__answer {\n    @include fontSize('regular');\n    color: $colorPrimary;\n    margin-top: space('xsmall');\n  }\n\n  &__input {\n    margin-top: space('medium');\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch,\n  State\n} from \"@stencil/core\";\n\nimport { StzhSaptchaLocalizedText } from './stzh-saptcha.localization';\n\nlet saptchaCounter = 0;\n\n/**\n * @slot - Slot for content\n */\n@Component({\n  tag: \"stzh-saptcha\",\n  styleUrl: \"stzh-saptcha.scss\",\n  scoped: true\n})\nexport class StzhSaptcha {\n  /** Translation strings */\n  @Prop() localization: StzhSaptchaLocalizedText;\n\n  /** Numbers shown to user for selection */\n  @Prop() numbers: number[] | string = [];\n  private _numbers: number[] = [];\n\n  /** The value of the input element */\n  @Prop() value: string = \"\";\n\n  /** Name of input */\n  @Prop({ reflect: true }) name: string = \"saptcha\";\n\n  /** One or multiple error message */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Mutable input state updated by the value prop */\n  @State() inputValue: string = \"\";\n\n  @Element() element: HTMLStzhSaptchaElement;\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    this.inputValue = newValue;\n  }\n\n  @Watch(\"numbers\")\n  numbersWatcher(newValue: number[] | string) {\n    if (typeof newValue === \"string\") {\n      this._numbers = JSON.parse(newValue);\n    } else {\n      this._numbers = newValue;\n    }\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  private saptchaId: string;\n\n  componentDidLoad() {\n    this.inputValue = this.value;\n  }\n\n  async componentWillLoad() {\n    this.saptchaId = `stzh-saptcha-${saptchaCounter++}`;\n\n    this.numbersWatcher(this.numbers);\n    this.errorWatcher(this.error);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'saptcha');\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-saptcha\": true\n    };\n\n    return (\n      <Host is-invalid={this.invalid || this._error.length > 0}>\n        <div class={classes}>\n          <div class=\"stzh-saptcha__box\">\n            <div class=\"stzh-saptcha__info\" id={`${this.saptchaId}-info`}>\n              {this.localization.info} {this.localization.question}\n            </div>\n            <div class=\"stzh-saptcha__answer\" id={`${this.saptchaId}-answer`}>\n              {this._numbers.map((number, index) =>\n                <span class=\"stzh-saptcha__number\">\n                  {number}\n                  {index < this._numbers.length - 1 &&\n                    (index === this._numbers.length - 2\n                      ? this.localization.answerOr\n                      : \", \")\n                  }\n                </span>\n              )}\n            </div>\n            <stzh-input\n              class=\"stzh-saptcha__input\"\n              label={this.localization.answer}\n              name={this.name}\n              invalid={this.invalid}\n              error={this.error}\n              disabled={this.disabled}\n              value={this.inputValue}\n              required\n              a11yDescribedby={`${this.saptchaId}-info ${this.saptchaId}-answer`}\n            ></stzh-input>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,6 +1,5 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, a as Host, g as getElement } from './index-e3050b18.js';
 import { g as getStzhEnvironment, i as isStzhElement, h as hasSlot } from './utils-4f9b3f37.js';
-import { t as tc } from './translation-utils-ffb7823c.js';
 import { S as StzhInputDescription } from './stzh-input-description-766446dc.js';
 import { c as createCommonjsModule } from './_commonjsHelpers-4d8f6371.js';
 import './string-utils-e252977e.js';
@@ -13607,6 +13606,11 @@ const StzhUpload = class {
       });
     }
   }
+  toggleToast(message, type) {
+    document.querySelector('stzh-upload').querySelector('stzh-toastbar').toast(message, {
+      type: type,
+    });
+  }
   componentDidRender() {
     if (this.dropzone) {
       return;
@@ -13911,18 +13915,24 @@ const StzhUpload = class {
       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,
@@ -13952,6 +13962,7 @@ const StzhUpload = class {
       files,
     }));
     this.dropzone.on("addedfile", (file) => {
+      this.toggleToast(this.localization.uploadSuccessToast, 'success');
       file.previewElement.querySelectorAll(`[${ATTR_NAME}]`).forEach((name) => {
         name.setAttribute("title", file.name);
       });
@@ -13990,7 +14001,7 @@ const StzhUpload = class {
       "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)))))));
   }