@oiz/stzh-components 3.4.0-beta1 → 3.4.0-beta2

package/dist/components/stzh-poicard.js

@@ -0,0 +1,8 @@
+import { S as StzhPoicard$1, d as defineCustomElement$1 } from './stzh-poicard2.js';
+
+const StzhPoicard = StzhPoicard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { StzhPoicard, defineCustomElement };
+
+//# sourceMappingURL=stzh-poicard.js.map

package/dist/components/stzh-poicard.js.map

@@ -0,0 +1 @@
+{"file":"stzh-poicard.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/stzh-poicard2.js

@@ -0,0 +1,108 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$7 } from './stzh-badge2.js';
+import { d as defineCustomElement$6 } from './stzh-chip2.js';
+import { d as defineCustomElement$5 } from './stzh-clamp2.js';
+import { d as defineCustomElement$4 } from './stzh-heading2.js';
+import { d as defineCustomElement$3 } from './stzh-icon2.js';
+import { d as defineCustomElement$2 } from './stzh-link2.js';
+import { d as defineCustomElement$1 } from './stzh-text2.js';
+
+const stzhPoicardCss = ".sc-stzh-poicard-h{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}[hidden].sc-stzh-poicard-h{display:none}.sc-stzh-poicard-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-poicard-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-poicard-h *.sc-stzh-poicard,.sc-stzh-poicard-h *.sc-stzh-poicard::before,.sc-stzh-poicard-h *.sc-stzh-poicard::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)}.sc-stzh-poicard-h .has-focus.sc-stzh-poicard{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-poicard-h .stzh-fylingfocus-focused.sc-stzh-poicard{outline-style:none !important}.sc-stzh-poicard-h .stzh-fylingfocus-focused.sc-stzh-poicard::-moz-focus-inner{border:0 !important}.sc-stzh-poicard-h{--background-color:var(--stzh-color-grey10);--hover-background-color:var(--stzh-color-grey20);--title-color:var(--stzh-color-primary70);--title-hover-color:var(--stzh-color-primary80);--title-background-color:var(--stzh-color-secondary20);--title-hover-background-color:var(--stzh-color-secondary30)}.stzh-poicard.sc-stzh-poicard{display:block;background-color:var(--background-color);text-decoration:none;height:100%}.stzh-poicard.sc-stzh-poicard:hover{--title-color:var(--title-hover-color);--title-background-color:var(--title-hover-background-color);--background-color:var(--hover-background-color)}.stzh-poicard__content.sc-stzh-poicard{display:flex;flex-direction:column;gap:var(--stzh-space-small)}.stzh-poicard__content-with-icon.sc-stzh-poicard,.stzh-poicard__content-with-badge.sc-stzh-poicard{display:flex;align-items:center;gap:var(--stzh-space-xxsmall)}.stzh-poicard__content-with-icon.sc-stzh-poicard stzh-text.sc-stzh-poicard{width:auto;--color:var(--stzh-color-primary70)}.stzh-poicard__content-with-icon.sc-stzh-poicard stzh-icon.sc-stzh-poicard{--color:var(--stzh-color-primary70)}.stzh-poicard__content-with-badge.sc-stzh-poicard stzh-text.sc-stzh-poicard{width:auto;--color:var(--stzh-color-grey80)}.stzh-poicard__content-head.sc-stzh-poicard{display:flex;align-items:center;padding:var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-small);--color:var(--title-color);background-color:var(--title-background-color)}.stzh-poicard__content-head.sc-stzh-poicard stzh-icon.sc-stzh-poicard{--color:var(--stzh-color-primary)}.stzh-poicard__content-title.sc-stzh-poicard{width:100%;--color:var(--stzh-color-grey80)}.stzh-poicard.sc-stzh-poicard:hover .stzh-poicard__content-title.sc-stzh-poicard{--color:var(--stzh-color-black)}.stzh-poicard__content-body.sc-stzh-poicard{padding:var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-medium);display:flex;flex-direction:column;gap:var(--stzh-space-xsmall)}";
+
+const StzhPoicard = /*@__PURE__*/ proxyCustomElement(class StzhPoicard extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.init = () => {
+      this.itemWatcher(this.item);
+    };
+    this.item = "";
+  }
+  itemWatcher(newValue) {
+    if (!newValue) {
+      this._item = undefined;
+    }
+    else if (typeof newValue === "string") {
+      try {
+        this._item = JSON.parse(newValue);
+      }
+      catch (e) {
+        this._item = undefined;
+      }
+    }
+    else {
+      this._item = newValue;
+    }
+  }
+  connectedCallback() {
+    this.init();
+  }
+  render() {
+    const classes = {
+      "stzh-poicard": true,
+    };
+    return (h(Host, null, h("a", { class: classes, href: this._item.url, target: "_blank" }, h("div", { class: "stzh-poicard__content" }, h("div", { class: "stzh-poicard__content-head" }, h("stzh-heading", null, this._item.title)), h("div", { class: "stzh-poicard__content-body" }, this._item.distance && (h("div", { class: "stzh-poicard__content-with-icon" }, h("stzh-icon", { name: "pin" }), h("stzh-text", null, this._item.distance))), this._item.temp && (h("div", { class: "stzh-poicard__content-with-icon" }, h("stzh-icon", { name: "thermometer" }), h("stzh-text", null, this._item.temp))), (this._item.statusMessageContent ||
+      this._item.statusMessage) && (h("div", { class: "stzh-poicard__content-with-badge" }, this._item.statusMessage && (h("stzh-text", { size: "milli" }, this._item.statusMessage)), this._item.statusMessageContent && (h("stzh-chip", { variant: "tag", size: "small", inverted: true, icon: "", type: this._item.success ? "default" : "error", label: this._item.statusMessageContent })))))))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "item": ["itemWatcher"]
+  }; }
+  static get style() { return stzhPoicardCss; }
+}, [2, "stzh-poicard", {
+    "item": [1]
+  }, undefined, {
+    "item": ["itemWatcher"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-poicard", "stzh-badge", "stzh-chip", "stzh-clamp", "stzh-heading", "stzh-icon", "stzh-link", "stzh-text"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-poicard":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhPoicard);
+      }
+      break;
+    case "stzh-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "stzh-chip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "stzh-clamp":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "stzh-heading":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "stzh-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "stzh-link":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "stzh-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { StzhPoicard as S, defineCustomElement as d };
+
+//# sourceMappingURL=stzh-poicard2.js.map

package/dist/components/stzh-poicard2.js.map

@@ -0,0 +1 @@
+{"file":"stzh-poicard2.js","mappings":";;;;;;;;;AAAA,MAAM,cAAc,GAAG,8nGAA8nG;;MCWxoG,WAAW;;;;IAsBd,SAAI,GAAG;MACb,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B,CAAC;gBApB2C,EAAE;;EAI/C,WAAW,CAAC,QAAsC;IAChD,IAAI,CAAC,QAAQ,EAAE;MACb,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;KACxB;SAAM,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MACvC,IAAI;QACF,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;OACnC;MAAC,OAAO,CAAC,EAAE;QACV,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;OACxB;KACF;SAAM;MACL,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;KACvB;GACF;EAMD,iBAAiB;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;GACb;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;KACrB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,SAAG,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,MAAM,EAAC,QAAQ,IACtD,WAAK,KAAK,EAAC,uBAAuB,IAChC,WAAK,KAAK,EAAC,4BAA4B,IACrC,wBAAe,IAAI,CAAC,KAAK,CAAC,KAAK,CAAgB,CAC3C,EACN,WAAK,KAAK,EAAC,4BAA4B,IACpC,IAAI,CAAC,KAAK,CAAC,QAAQ,KAClB,WAAK,KAAK,EAAC,iCAAiC,IAC1C,iBAAW,IAAI,EAAC,KAAK,GAAa,EAClC,qBAAY,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAa,CACxC,CACP,EAEA,IAAI,CAAC,KAAK,CAAC,IAAI,KACd,WAAK,KAAK,EAAC,iCAAiC,IAC1C,iBAAW,IAAI,EAAC,aAAa,GAAa,EAC1C,qBAAY,IAAI,CAAC,KAAK,CAAC,IAAI,CAAa,CACpC,CACP,EAEA,CAAC,IAAI,CAAC,KAAK,CAAC,oBAAoB;MAC/B,IAAI,CAAC,KAAK,CAAC,aAAa,MACxB,WAAK,KAAK,EAAC,kCAAkC,IAC1C,IAAI,CAAC,KAAK,CAAC,aAAa,KACvB,iBAAW,IAAI,EAAC,OAAO,IACpB,IAAI,CAAC,KAAK,CAAC,aAAa,CACf,CACb,EACA,IAAI,CAAC,KAAK,CAAC,oBAAoB,KAC9B,iBACE,OAAO,EAAC,KAAK,EACb,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,IAAI,EACd,IAAI,EAAC,EAAE,EACP,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,SAAS,GAAG,OAAO,EAC9C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,oBAAoB,GAC3B,CACd,CACG,CACP,CACG,CACF,CACJ,CACC,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-poicard/stzh-poicard.scss?tag=stzh-poicard&encapsulation=scoped","src/components/stzh-poicard/stzh-poicard.tsx"],"sourcesContent":[":host {\n  --background-color: var(--stzh-color-grey10);\n  --hover-background-color: var(--stzh-color-grey20);\n  --title-color: var(--stzh-color-primary70);\n  --title-hover-color: var(--stzh-color-primary80);\n  --title-background-color: var(--stzh-color-secondary20);\n  --title-hover-background-color: var(--stzh-color-secondary30);\n}\n\n.stzh-poicard {\n  display: block;\n  background-color: var(--background-color);\n  text-decoration: none;\n  height: 100%;\n\n  &:hover {\n    --title-color: var(--title-hover-color);\n    --title-background-color: var(--title-hover-background-color);\n    --background-color: var(--hover-background-color);\n  }\n\n  /* Content */\n\n  &__content {\n    display: flex;\n    flex-direction: column;\n    gap: var(--stzh-space-small);\n  }\n\n  &__content-with-icon,\n  &__content-with-badge {\n    display: flex;\n    align-items: center;\n    gap: var(--stzh-space-xxsmall);\n  }\n\n  &__content-with-icon stzh-text {\n    width: auto;\n    --color: var(--stzh-color-primary70);\n  }\n\n  &__content-with-icon stzh-icon {\n    --color: var(--stzh-color-primary70);\n  }\n\n  &__content-with-badge stzh-text {\n    width: auto;\n    --color: var(--stzh-color-grey80);\n  }\n\n  /* Content head */\n\n  &__content-head {\n    display: flex;\n    align-items: center;\n    padding: var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-small);\n    --color: var(--title-color);\n    background-color: var(--title-background-color);\n  }\n\n  &__content-head stzh-icon {\n    --color: var(--stzh-color-primary);\n  }\n\n  &__content-title {\n    width: 100%;\n    --color: var(--stzh-color-grey80);\n  }\n\n  &:hover &__content-title {\n    --color: var(--stzh-color-black);\n  }\n\n  /* Content Body */\n\n  &__content-body {\n    padding: var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-medium);\n    display: flex;\n    flex-direction: column;\n    gap: var(--stzh-space-xsmall);\n  }\n}\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\";\nimport { StzhPoiCardItemData } from \"../../index\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-poicard\",\n  styleUrl: \"stzh-poicard.scss\",\n  scoped: true,\n})\nexport class StzhPoicard {\n  @Element() element: HTMLStzhPoicardElement;\n\n  /** Socialmediastream item */\n  @Prop() item: StzhPoiCardItemData | string = \"\";\n  private _item: StzhPoiCardItemData | undefined;\n\n  @Watch(\"item\")\n  itemWatcher(newValue: StzhPoiCardItemData | string) {\n    if (!newValue) {\n      this._item = undefined;\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._item = JSON.parse(newValue);\n      } catch (e) {\n        this._item = undefined;\n      }\n    } else {\n      this._item = newValue;\n    }\n  }\n\n  private init = () => {\n    this.itemWatcher(this.item);\n  };\n\n  connectedCallback() {\n    this.init();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-poicard\": true,\n    };\n\n    return (\n      <Host>\n        <a class={classes} href={this._item.url} target=\"_blank\">\n          <div class=\"stzh-poicard__content\">\n            <div class=\"stzh-poicard__content-head\">\n              <stzh-heading>{this._item.title}</stzh-heading>\n            </div>\n            <div class=\"stzh-poicard__content-body\">\n              {this._item.distance && (\n                <div class=\"stzh-poicard__content-with-icon\">\n                  <stzh-icon name=\"pin\"></stzh-icon>\n                  <stzh-text>{this._item.distance}</stzh-text>\n                </div>\n              )}\n\n              {this._item.temp && (\n                <div class=\"stzh-poicard__content-with-icon\">\n                  <stzh-icon name=\"thermometer\"></stzh-icon>\n                  <stzh-text>{this._item.temp}</stzh-text>\n                </div>\n              )}\n\n              {(this._item.statusMessageContent ||\n                this._item.statusMessage) && (\n                <div class=\"stzh-poicard__content-with-badge\">\n                  {this._item.statusMessage && (\n                    <stzh-text size=\"milli\">\n                      {this._item.statusMessage}\n                    </stzh-text>\n                  )}\n                  {this._item.statusMessageContent && (\n                    <stzh-chip\n                      variant=\"tag\"\n                      size=\"small\"\n                      inverted={true}\n                      icon=\"\"\n                      type={this._item.success ? \"default\" : \"error\"}\n                      label={this._item.statusMessageContent}\n                    ></stzh-chip>\n                  )}\n                </div>\n              )}\n            </div>\n          </div>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-poilist.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface StzhPoilist extends Components.StzhPoilist, HTMLElement {}
+export const StzhPoilist: {
+  prototype: StzhPoilist;
+  new (): StzhPoilist;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/stzh-poilist.js

@@ -0,0 +1,246 @@
+import { proxyCustomElement, HTMLElement, h, Host, Fragment } from '@stencil/core/internal/client';
+import { a as axios } from './axios.js';
+import { d as defineCustomElement$h } from './stzh-badge2.js';
+import { d as defineCustomElement$g } from './stzh-button2.js';
+import { d as defineCustomElement$f } from './stzh-cardlist2.js';
+import { d as defineCustomElement$e } from './stzh-chip2.js';
+import { d as defineCustomElement$d } from './stzh-clamp2.js';
+import { d as defineCustomElement$c } from './stzh-dropdown2.js';
+import { d as defineCustomElement$b } from './stzh-heading2.js';
+import { d as defineCustomElement$a } from './stzh-icon2.js';
+import { d as defineCustomElement$9 } from './stzh-link2.js';
+import { d as defineCustomElement$8 } from './stzh-loader2.js';
+import { d as defineCustomElement$7 } from './stzh-message2.js';
+import { d as defineCustomElement$6 } from './stzh-overlay2.js';
+import { d as defineCustomElement$5 } from './stzh-poicard2.js';
+import { d as defineCustomElement$4 } from './stzh-popover2.js';
+import { d as defineCustomElement$3 } from './stzh-sortable2.js';
+import { d as defineCustomElement$2 } from './stzh-text2.js';
+
+const stzhPoilistCss = ".sc-stzh-poilist-h{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}[hidden].sc-stzh-poilist-h{display:none}.sc-stzh-poilist-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-poilist-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-poilist-h *.sc-stzh-poilist,.sc-stzh-poilist-h *.sc-stzh-poilist::before,.sc-stzh-poilist-h *.sc-stzh-poilist::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)}.sc-stzh-poilist-h .has-focus.sc-stzh-poilist{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-poilist-h .stzh-fylingfocus-focused.sc-stzh-poilist{outline-style:none !important}.sc-stzh-poilist-h .stzh-fylingfocus-focused.sc-stzh-poilist::-moz-focus-inner{border:0 !important}.stzh-poilist__header.sc-stzh-poilist{margin-bottom:var(--stzh-space-small);display:flex;justify-content:space-between;align-items:center}@media screen and (min-width: 900px){.stzh-poilist__header.sc-stzh-poilist{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-poilist__header.sc-stzh-poilist{margin-bottom:var(--stzh-space-large)}}.stzh-poilist__header.sc-stzh-poilist stzh-text.sc-stzh-poilist{--color:var(--stzh-color-grey80);font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-poilist__show-more.sc-stzh-poilist{margin-top:var(--stzh-space-xlarge);display:grid}@media screen and (min-width: 900px){.stzh-poilist__show-more.sc-stzh-poilist{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-poilist__show-more.sc-stzh-poilist{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.stzh-poilist__show-more.sc-stzh-poilist{justify-content:center}}.stzh-poilist.sc-stzh-poilist stzh-dropdown.sc-stzh-poilist{--color:var(--stzh-color-primary90);--icon-color:var(--stzh-color-primary90);--icon-angle-color:var(--stzh-color-primary90)}";
+
+const StzhPoilist$1 = /*@__PURE__*/ proxyCustomElement(class StzhPoilist extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.handleMoreClick = async () => {
+      this.loadingText = this.localization.dataLoading;
+      this.isLoading = true;
+      this.currentOffset++;
+      const { data } = await axios.get(this.getCurrentApiUrl());
+      this.meta = data.meta;
+      this.items = this.items.concat(data.items);
+      this.isLoading = false;
+    };
+    this.onSortChange = async (e) => {
+      this.activeSorting = e.detail.value;
+      this.currentOffset = 0;
+      this.items = [];
+      await this.apiWatcher(this.api);
+    };
+    this.localization = undefined;
+    this.api = undefined;
+    this.currentOffset = 0;
+    this.meta = undefined;
+    this.items = [];
+    this.isLoading = true;
+    this.dropdownOptions = [];
+    this.activeSorting = undefined;
+    this.latitude = 47.3714332;
+    this.longitude = 8.542093;
+    this.geopositionError = "";
+    this.loadingText = "";
+  }
+  async apiWatcher(newValue) {
+    this.loadingText = this.localization.dataLoading;
+    if (!newValue) {
+      return;
+    }
+    // load data from API
+    const { data } = await axios.get(this.getCurrentApiUrl());
+    this.meta = data.meta;
+    this.items = data.items;
+    this.isLoading = false;
+  }
+  getCurrentApiUrl() {
+    return `${this.api}?offset=${this.currentOffset}&sort=${this.activeSorting}:DESC&latitude=${this.latitude}&longitude=${this.longitude}`;
+  }
+  getNumberOfLoadedItems() {
+    if (this.meta.currentPage !== this.meta.totalPages) {
+      return this.meta.itemsPerPage * this.meta.currentPage;
+    }
+    else {
+      return this.meta.totalItems;
+    }
+  }
+  async getUserPosition() {
+    this.loadingText = this.localization.geopositionLoading;
+    try {
+      const position = await this.getPositionAsync();
+      this.latitude = position.coords.latitude;
+      this.longitude = position.coords.longitude;
+    }
+    catch (geopositionNotFoundException) {
+      console.error("geopositionNotFoundException", geopositionNotFoundException);
+      this.geopositionError = this.localization.geopositionError;
+    }
+  }
+  getPositionAsync() {
+    return new Promise((resolve, reject) => {
+      if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition((position) => resolve(position), (error) => reject(error));
+      }
+      else {
+        reject(new Error("Geolocation is not supported by this browser."));
+      }
+    });
+  }
+  async componentWillLoad() {
+    if (!this.localization) {
+      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "poilist");
+    }
+    this.dropdownOptions = [
+      {
+        text: this.localization.sortByDistance,
+        value: "distance",
+      },
+      {
+        text: this.localization.sortByName,
+        value: "name",
+      },
+    ];
+    this.activeSorting = this.dropdownOptions[0].value;
+  }
+  async componentDidLoad() {
+    await this.getUserPosition();
+    await this.apiWatcher(this.api);
+  }
+  render() {
+    const classes = {
+      "stzh-poilist": true,
+    };
+    return (h(Host, null, h("div", { class: classes }, h("stzh-overlay", { open: this.isLoading }, h("stzh-loader", { label: this.loadingText })), this.geopositionError && (h("stzh-message", { type: "error", label: this.geopositionError })), (this.items.length > 0 || this.meta) && (h(Fragment, null, h("div", { class: "stzh-poilist__header" }, h("stzh-text", { size: "micro" }, this.getNumberOfLoadedItems(), " ", this.localization.of, " ", this.meta.totalItems), h("stzh-dropdown", { label: "Sortierung", "hide-optional": true, variant: "plain", noSearch: true, inline: true, noWrap: true, onStzhChange: this.onSortChange, items: Array.isArray(this.activeSorting)
+        ? this.activeSorting
+        : [this.activeSorting], options: this.dropdownOptions })), h("stzh-cardlist", { layout: "teasers" }, this.items.map((item) => (h("stzh-poicard", { item: item })))), this.meta.currentPage !== this.meta.totalPages && (h("div", { class: "stzh-poilist__show-more" }, h("stzh-button", { variant: "secondary", label: this.localization.showMore, onClick: this.handleMoreClick }))))))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "api": ["apiWatcher"]
+  }; }
+  static get style() { return stzhPoilistCss; }
+}, [2, "stzh-poilist", {
+    "localization": [16],
+    "api": [1],
+    "currentOffset": [32],
+    "meta": [32],
+    "items": [32],
+    "isLoading": [32],
+    "dropdownOptions": [32],
+    "activeSorting": [32],
+    "latitude": [32],
+    "longitude": [32],
+    "geopositionError": [32],
+    "loadingText": [32]
+  }, undefined, {
+    "api": ["apiWatcher"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-poilist", "stzh-badge", "stzh-button", "stzh-cardlist", "stzh-chip", "stzh-clamp", "stzh-dropdown", "stzh-heading", "stzh-icon", "stzh-link", "stzh-loader", "stzh-message", "stzh-overlay", "stzh-poicard", "stzh-popover", "stzh-sortable", "stzh-text"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-poilist":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhPoilist$1);
+      }
+      break;
+    case "stzh-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$h();
+      }
+      break;
+    case "stzh-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
+      }
+      break;
+    case "stzh-cardlist":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$f();
+      }
+      break;
+    case "stzh-chip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
+      }
+      break;
+    case "stzh-clamp":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "stzh-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "stzh-heading":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "stzh-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "stzh-link":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "stzh-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "stzh-message":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "stzh-overlay":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "stzh-poicard":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "stzh-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "stzh-sortable":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "stzh-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const StzhPoilist = StzhPoilist$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { StzhPoilist, defineCustomElement };
+
+//# sourceMappingURL=stzh-poilist.js.map

package/dist/components/stzh-poilist.js.map

@@ -0,0 +1 @@
+{"file":"stzh-poilist.js","mappings":"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","names":["StzhPoilist"],"sources":["src/components/stzh-poilist/stzh-poilist.scss?tag=stzh-poilist&encapsulation=scoped","src/components/stzh-poilist/stzh-poilist.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-poilist {\n  &__header {\n    @include spaceCurve('margin-bottom', 'small');\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  &__header stzh-text {\n    --color: var(--stzh-color-grey80);\n    @include font(heavy);\n  }\n\n  &__show-more {\n    @include spaceCurve('margin-top', 'medium');\n    display: grid;\n\n    @include mq($from: small) {\n      justify-content: center;\n    }\n  }\n\n  stzh-dropdown {\n    --color: var(--stzh-color-primary90);\n    --icon-color: var(--stzh-color-primary90);\n    --icon-angle-color: var(--stzh-color-primary90);\n  }\n}\n","import {\n  Component,\n  Element,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from \"@stencil/core\";\n\nimport axios from \"axios\";\n\nimport {\n  StzhDropdownChangeEvent,\n  StzhDropdownCustomEvent,\n  StzhDropdownOption,\n  StzhPoiCardItemData,\n  StzhPoiListData,\n  StzhPoiListMetaData,\n} from \"../../index\";\nimport { StzhPoilistLocalizedText } from \"./stzh-poilist.localization\"; // export type StzhPoiListMetaData = {\n\n@Component({\n  tag: \"stzh-poilist\",\n  styleUrl: \"stzh-poilist.scss\",\n  scoped: true,\n})\nexport class StzhPoilist {\n  /** Translation strings */\n  @Prop() localization: StzhPoilistLocalizedText;\n\n  /** API URL (`{lang}` is replaced in the URL)  */\n  @Prop() api: string;\n\n  @Element() element: HTMLStzhPoilistElement;\n\n  @State() currentOffset: number = 0;\n  @State() meta: StzhPoiListMetaData;\n  @State() items: StzhPoiCardItemData[] = [];\n  @State() isLoading: boolean = true;\n\n  /** Sorting */\n  @State() dropdownOptions: StzhDropdownOption[] = [];\n  @State() activeSorting: string | string[];\n\n  /** Geoposition (STZH Rathaus by default) */\n  @State() latitude: number = 47.3714332;\n  @State() longitude: number = 8.542093;\n  @State() geopositionError: string = \"\";\n\n  @State() loadingText: string = \"\";\n\n  @Watch(\"api\")\n  async apiWatcher(newValue: string) {\n    this.loadingText = this.localization.dataLoading;\n    if (!newValue) {\n      return;\n    }\n\n    // load data from API\n    const { data } = await axios.get<StzhPoiListData>(this.getCurrentApiUrl());\n    this.meta = data.meta;\n    this.items = data.items;\n    this.isLoading = false;\n  }\n\n  private getCurrentApiUrl() {\n    return `${this.api}?offset=${this.currentOffset}&sort=${this.activeSorting}:DESC&latitude=${this.latitude}&longitude=${this.longitude}`;\n  }\n\n  private handleMoreClick = async () => {\n    this.loadingText = this.localization.dataLoading;\n    this.isLoading = true;\n    this.currentOffset++;\n    const { data } = await axios.get<StzhPoiListData>(this.getCurrentApiUrl());\n    this.meta = data.meta;\n    this.items = this.items.concat(data.items);\n    this.isLoading = false;\n  };\n\n  private getNumberOfLoadedItems(): number {\n    if (this.meta.currentPage !== this.meta.totalPages) {\n      return this.meta.itemsPerPage * this.meta.currentPage;\n    } else {\n      return this.meta.totalItems;\n    }\n  }\n\n  private onSortChange = async (\n    e: StzhDropdownCustomEvent<StzhDropdownChangeEvent>\n  ) => {\n    this.activeSorting = e.detail.value;\n    this.currentOffset = 0;\n    this.items = [];\n    await this.apiWatcher(this.api);\n  };\n\n  private async getUserPosition() {\n    this.loadingText = this.localization.geopositionLoading;\n    try {\n      const position = await this.getPositionAsync();\n      this.latitude = position.coords.latitude;\n      this.longitude = position.coords.longitude;\n    } catch (geopositionNotFoundException) {\n      console.error(\n        \"geopositionNotFoundException\",\n        geopositionNotFoundException\n      );\n      this.geopositionError = this.localization.geopositionError;\n    }\n  }\n\n  private getPositionAsync(): Promise<GeolocationPosition> {\n    return new Promise((resolve, reject) => {\n      if (navigator.geolocation) {\n        navigator.geolocation.getCurrentPosition(\n          (position) => resolve(position),\n          (error) => reject(error)\n        );\n      } else {\n        reject(new Error(\"Geolocation is not supported by this browser.\"));\n      }\n    });\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(\n        this.element,\n        \"poilist\"\n      );\n    }\n    this.dropdownOptions = [\n      {\n        text: this.localization.sortByDistance,\n        value: \"distance\",\n      },\n      {\n        text: this.localization.sortByName,\n        value: \"name\",\n      },\n    ];\n    this.activeSorting = this.dropdownOptions[0].value;\n  }\n\n  async componentDidLoad() {\n    await this.getUserPosition();\n    await this.apiWatcher(this.api);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-poilist\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <stzh-overlay open={this.isLoading}>\n            <stzh-loader label={this.loadingText}></stzh-loader>\n          </stzh-overlay>\n\n          {this.geopositionError && (\n            <stzh-message\n              type=\"error\"\n              label={this.geopositionError}\n            ></stzh-message>\n          )}\n\n          {(this.items.length > 0 || this.meta) && (\n            <Fragment>\n              <div class=\"stzh-poilist__header\">\n                <stzh-text size=\"micro\">\n                  {this.getNumberOfLoadedItems()} {this.localization.of}{\" \"}\n                  {this.meta.totalItems}\n                </stzh-text>\n                <stzh-dropdown\n                  label=\"Sortierung\"\n                  hide-optional={true}\n                  variant=\"plain\"\n                  noSearch={true}\n                  inline={true}\n                  noWrap={true}\n                  onStzhChange={this.onSortChange}\n                  items={\n                    Array.isArray(this.activeSorting)\n                      ? this.activeSorting\n                      : [this.activeSorting]\n                  }\n                  options={this.dropdownOptions}\n                ></stzh-dropdown>\n              </div>\n\n              <stzh-cardlist layout=\"teasers\">\n                {this.items.map((item) => (\n                  <stzh-poicard item={item}></stzh-poicard>\n                ))}\n              </stzh-cardlist>\n\n              {this.meta.currentPage !== this.meta.totalPages && (\n                <div class=\"stzh-poilist__show-more\">\n                  <stzh-button\n                    variant=\"secondary\"\n                    label={this.localization.showMore}\n                    onClick={this.handleMoreClick}\n                  ></stzh-button>\n                </div>\n              )}\n            </Fragment>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-saptcha.js

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$7 } from './stzh-badge2.js';
 import { d as defineCustomElement$6 } from './stzh-button2.js';
 import { d as defineCustomElement$5 } from './stzh-icon2.js';
@@ -13,7 +13,16 @@ const StzhSaptcha$1 = /*@__PURE__*/ proxyCustomElement(class StzhSaptcha extends
   constructor() {
     super();
     this.__registerHost();
+    this.stzhChange = createEvent(this, "stzhChange", 7);
     this._numbers = [];
+    this.onInputChange = (event) => {
+      this.value = event.detail.value;
+      this.stzhChange.emit({
+        component: "stzh-saptcha",
+        originalEvent: event,
+        value: this.value
+      });
+    };
     this.localization = undefined;
     this.numbers = [];
     this.value = "";
@@ -21,10 +30,6 @@ const StzhSaptcha$1 = /*@__PURE__*/ proxyCustomElement(class StzhSaptcha extends
     this.error = undefined;
     this.invalid = false;
     this.disabled = false;
-    this.inputValue = "";
-  }
-  valueWatcher(newValue) {
-    this.inputValue = newValue;
   }
   numbersWatcher(newValue) {
     if (typeof newValue === "string") {
@@ -55,9 +60,6 @@ const StzhSaptcha$1 = /*@__PURE__*/ proxyCustomElement(class StzhSaptcha extends
       this._error = [];
     }
   }
-  componentDidLoad() {
-    this.inputValue = this.value;
-  }
   async componentWillLoad() {
     this.saptchaId = `stzh-saptcha-${saptchaCounter++}`;
     this.numbersWatcher(this.numbers);
@@ -73,11 +75,10 @@ const StzhSaptcha$1 = /*@__PURE__*/ proxyCustomElement(class StzhSaptcha extends
     return (h(Host, { "is-invalid": this.invalid || this._error.length > 0 }, h("div", { class: classes }, h("div", { class: "stzh-saptcha__box" }, h("div", { class: "stzh-saptcha__info", id: `${this.saptchaId}-info` }, this.localization.info, " ", this.localization.question), h("div", { class: "stzh-saptcha__answer", id: `${this.saptchaId}-answer` }, this._numbers.map((number, index) => h("span", { class: "stzh-saptcha__number" }, number, index < this._numbers.length - 1 &&
       (index === this._numbers.length - 2
         ? this.localization.answerOr
-        : ", ")))), h("stzh-input", { class: "stzh-saptcha__input", label: this.localization.answer, name: this.name, invalid: this.invalid, error: this.error, disabled: this.disabled, value: this.inputValue, required: true, a11yDescribedby: `${this.saptchaId}-info ${this.saptchaId}-answer` })))));
+        : ", ")))), h("stzh-input", { class: "stzh-saptcha__input", label: this.localization.answer, name: this.name, invalid: this.invalid, error: this.error, disabled: this.disabled, value: this.value, onStzhChange: this.onInputChange, required: true, a11yDescribedby: `${this.saptchaId}-info ${this.saptchaId}-answer` })))));
   }
   get element() { return this; }
   static get watchers() { return {
-    "value": ["valueWatcher"],
     "numbers": ["numbersWatcher"],
     "error": ["errorWatcher"]
   }; }
@@ -85,14 +86,12 @@ const StzhSaptcha$1 = /*@__PURE__*/ proxyCustomElement(class StzhSaptcha extends
 }, [2, "stzh-saptcha", {
     "localization": [16],
     "numbers": [1],
-    "value": [1],
+    "value": [1025],
     "name": [513],
     "error": [1],
     "invalid": [516],
-    "disabled": [516],
-    "inputValue": [32]
+    "disabled": [516]
   }, undefined, {
-    "value": ["valueWatcher"],
     "numbers": ["numbersWatcher"],
     "error": ["errorWatcher"]
   }]);

package/dist/components/stzh-saptcha.js.map

@@ -1 +1 @@
-{"file":"stzh-saptcha.js","mappings":"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","names":["StzhSaptcha"],"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}
+{"file":"stzh-saptcha.js","mappings":"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","names":["StzhSaptcha"],"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  Event,\n  Prop,\n  Watch, EventEmitter,\n} from \"@stencil/core\";\n\nimport { StzhSaptchaLocalizedText } from './stzh-saptcha.localization';\nimport {StzhInputChangeEvent, StzhSaptchaChangeEvent} from '../../index';\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({ mutable: true }) 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  /** Saptcha change event */\n  @Event() stzhChange: EventEmitter<StzhSaptchaChangeEvent>;\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  private onInputChange = (event: CustomEvent<StzhInputChangeEvent>) => {\n    this.value = event.detail.value;\n\n    this.stzhChange.emit({\n      component: \"stzh-saptcha\",\n      originalEvent: event,\n      value: this.value\n    });\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.value}\n              onStzhChange={this.onInputChange}\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}