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

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

@@ -0,0 +1,181 @@
+import { Fragment, h, Host, } from "@stencil/core";
+import axios from "axios";
+export class StzhPoilist {
+  constructor() {
+    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 }))))))));
+  }
+  static get is() { return "stzh-poilist"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-poilist.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-poilist.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhPoilistLocalizedText",
+          "resolved": "StzhLocaleComponent & { showMore: string; of: string; sortByDistance: string; sortByName: string; geopositionError: string; geopositionLoading: string; dataLoading: string; }",
+          "references": {
+            "StzhPoilistLocalizedText": {
+              "location": "import",
+              "path": "./stzh-poilist.localization",
+              "id": "src/components/stzh-poilist/stzh-poilist.localization.ts::StzhPoilistLocalizedText"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings"
+        }
+      },
+      "api": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "API URL (`{lang}` is replaced in the URL)"
+        },
+        "attribute": "api",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "currentOffset": {},
+      "meta": {},
+      "items": {},
+      "isLoading": {},
+      "dropdownOptions": {},
+      "activeSorting": {},
+      "latitude": {},
+      "longitude": {},
+      "geopositionError": {},
+      "loadingText": {}
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "api",
+        "methodName": "apiWatcher"
+      }];
+  }
+}
+//# sourceMappingURL=stzh-poilist.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-poilist.js","sourceRoot":"","sources":["../../../../src/components/stzh-poilist/stzh-poilist.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/stzh-poilist/stzh-poilist.localization.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=stzh-poilist.localization.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-poilist.localization.js","sourceRoot":"","sources":["../../../../src/components/stzh-poilist/stzh-poilist.localization.ts"],"names":[],"mappings":"","sourcesContent":["import { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nexport type StzhPoilistLocalizedText = StzhLocaleComponent & {\n  showMore: string;\n  of: string;\n  sortByDistance: string;\n  sortByName: string;\n  geopositionError: string;\n  geopositionLoading: string;\n  dataLoading: string;\n};\n"]}

package/dist/collection/components/stzh-poilist/stzh-poilist.stories.js

@@ -0,0 +1,31 @@
+import { createComponentStory } from "../../utils/story-utils";
+import { withActions } from "@storybook/addon-actions/decorator";
+import readme from "./readme.md?raw";
+
+const COMPONENT_NAME = "stzh-poilist";
+const story = createComponentStory(COMPONENT_NAME);
+
+const TEMPLATE = `
+<stzh-poilist></stzh-poilist>
+`;
+
+export default {
+  title: "Components/Poilist",
+  component: COMPONENT_NAME,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  decorators: [withActions],
+};
+
+export const Default = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    api: "mock/poilist.json",
+  },
+};

package/dist/collection/components/stzh-richtext/stzh-richtext.stories.js

@@ -1,10 +1,10 @@
-import { createComponentStory } from '../../utils/story-utils';
-import { withActions } from '@storybook/addon-actions/decorator';
-import readme from './readme.md?raw';
-import { withDesign } from 'storybook-addon-designs';
-import { getFigmaLink } from '../../../figma';
+import { createComponentStory } from "../../utils/story-utils";
+import { withActions } from "@storybook/addon-actions/decorator";
+import readme from "./readme.md?raw";
+import { withDesign } from "storybook-addon-designs";
+import { getFigmaLink } from "../../../figma";
 
-const COMPONENT_NAME = 'stzh-richtext';
+const COMPONENT_NAME = "stzh-richtext";
 const story = createComponentStory(COMPONENT_NAME);
 
 const TEMPLATE = `
@@ -25,6 +25,21 @@ const TEMPLATE = `
   <p>HTML Entity 8308 &#8308; (4)</p>
   <p>HTML Entity 8309 &#8309; (5)</p>
   <p>HTML Entity 8310 &#8310; (6)</p>
+  
+  <h2>H2: Subscript/Superscript</h2>
+  <p>Test Subscript 1 <sub>1</sub></p>
+  <p>Test Subscript 2 <sub>2</sub></p>
+  <p>Test Subscript 3 <sub>3</sub></p>
+  <p>Test Subscript 4 <sub>4</sub></p>
+  <p>Test Subscript 5 <sub>5</sub></p>
+  <p>Test Subscript 6 <sub>6</sub></p>
+  <p>Test Superscript 1 <sup>1</sup></p>
+  <p>Test Superscript 2 <sup>2</sup></p>
+  <p>Test Superscript 3 <sup>3</sup></p>
+  <p>Test Superscript 4 <sup>4</sup></p>
+  <p>Test Superscript 5 <sup>5</sup></p>
+  <p>Test Superscript 6 <sup>6</sup></p>
+  
   <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim.</p>
   <p><strong>Laboris laborum aute</strong> id laboris culpa esse <strong>aliquip nisi anim</strong> velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim.</p>
   <ul>
@@ -87,27 +102,27 @@ const TEMPLATE = `
 `;
 
 export default {
-  title: 'Components/Richtext',
+  title: "Components/Richtext",
   component: COMPONENT_NAME,
   parameters: {
     actions: {
-      handles: []
+      handles: [],
     },
     docs: {
       description: {
-        component: readme
-      }
+        component: readme,
+      },
     },
     design: {
-      type: 'figma',
-      url: getFigmaLink('richtext'),
-      allowFullscreen: true
-    }
+      type: "figma",
+      url: getFigmaLink("richtext"),
+      allowFullscreen: true,
+    },
   },
-  decorators: [withActions, withDesign]
+  decorators: [withActions, withDesign],
 };
 
 export const Default = {
   render: (args) => story(args, TEMPLATE),
-  args: {}
+  args: {},
 };

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

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 let saptchaCounter = 0;
 /**
  * @slot - Slot for content
@@ -6,6 +6,14 @@ let saptchaCounter = 0;
 export class StzhSaptcha {
   constructor() {
     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 = "";
@@ -13,10 +21,6 @@ export class StzhSaptcha {
     this.error = undefined;
     this.invalid = false;
     this.disabled = false;
-    this.inputValue = "";
-  }
-  valueWatcher(newValue) {
-    this.inputValue = newValue;
   }
   numbersWatcher(newValue) {
     if (typeof newValue === "string") {
@@ -47,9 +51,6 @@ export class StzhSaptcha {
       this._error = [];
     }
   }
-  componentDidLoad() {
-    this.inputValue = this.value;
-  }
   async componentWillLoad() {
     this.saptchaId = `stzh-saptcha-${saptchaCounter++}`;
     this.numbersWatcher(this.numbers);
@@ -65,7 +66,7 @@ export class StzhSaptcha {
     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` })))));
   }
   static get is() { return "stzh-saptcha"; }
   static get encapsulation() { return "scoped"; }
@@ -122,7 +123,7 @@ export class StzhSaptcha {
       },
       "value": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -211,17 +212,33 @@ export class StzhSaptcha {
       }
     };
   }
-  static get states() {
-    return {
-      "inputValue": {}
-    };
+  static get events() {
+    return [{
+        "method": "stzhChange",
+        "name": "stzhChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Saptcha change event"
+        },
+        "complexType": {
+          "original": "StzhSaptchaChangeEvent",
+          "resolved": "{ component: \"stzh-saptcha\"; originalEvent: CustomEvent<any>; value: string; }",
+          "references": {
+            "StzhSaptchaChangeEvent": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::StzhSaptchaChangeEvent"
+            }
+          }
+        }
+      }];
   }
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
-        "propName": "value",
-        "methodName": "valueWatcher"
-      }, {
         "propName": "numbers",
         "methodName": "numbersWatcher"
       }, {

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

@@ -1 +1 @@
-{"version":3,"file":"stzh-saptcha.js","sourceRoot":"","sources":["../../../../src/components/stzh-saptcha/stzh-saptcha.tsx"],"names":[],"mappings":"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","sourcesContent":["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","sourceRoot":"","sources":["../../../../src/components/stzh-saptcha/stzh-saptcha.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/stzh-saptcha/stzh-saptcha.stories.js

@@ -21,6 +21,9 @@ export default {
         component: readme
       }
     },
+    actions: {
+      handles: ['stzhChange', 'stzhFocus', 'stzhBlur']
+    },
     design: {
       type: 'figma',
       url: getFigmaLink('saptcha'),

package/dist/collection/components/stzh-search/stzh-search.css

@@ -394,21 +394,21 @@ stzh-search:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-f
   transition-property: opacity;
   transition-duration: var(--stzh-base-transition-animation-speed);
 }
-.stzh-search__results-heading {
+.stzh-search__results-heading, .stzh-search__results-text, .stzh-search__results-subscribe {
   margin-bottom: var(--stzh-space-medium);
 }
 @media screen and (min-width: 600px) {
-  .stzh-search__results-heading {
+  .stzh-search__results-heading, .stzh-search__results-text, .stzh-search__results-subscribe {
     margin-bottom: var(--stzh-space-large);
   }
 }
 @media screen and (min-width: 900px) {
-  .stzh-search__results-heading {
+  .stzh-search__results-heading, .stzh-search__results-text, .stzh-search__results-subscribe {
     margin-bottom: var(--stzh-space-xlarge);
   }
 }
 @media screen and (min-width: 1260px) {
-  .stzh-search__results-heading {
+  .stzh-search__results-heading, .stzh-search__results-text, .stzh-search__results-subscribe {
     margin-bottom: var(--stzh-space-xxlarge);
   }
 }