@oiz/stzh-components 3.0.0 → 3.1.0

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

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { hasSlot } from "../../utils/utils";
 import { StzhInputDescription } from "../stzh-input/stzh-input-description";
 let radioCounter = 0;
@@ -21,7 +21,7 @@ export class StzhRadio {
         component: "stzh-radio",
         originalEvent: event,
         value: this.value,
-        checked: this.checked
+        checked: this.checked,
       });
     };
     this.onRootFocus = () => {
@@ -32,27 +32,27 @@ export class StzhRadio {
     };
     this.onFocus = (event) => {
       this.focusedByInput = true;
-      const focusEvent = new FocusEvent('focus', {
+      const focusEvent = new FocusEvent("focus", {
         view: window,
         bubbles: false,
-        cancelable: false
+        cancelable: false,
       });
       this.element.dispatchEvent(focusEvent);
       this.stzhFocus.emit({
         component: "stzh-radio",
-        originalEvent: event
+        originalEvent: event,
       });
     };
     this.onBlur = (event) => {
-      const blurEvent = new FocusEvent('blur', {
+      const blurEvent = new FocusEvent("blur", {
         view: window,
         bubbles: false,
-        cancelable: false
+        cancelable: false,
       });
       this.element.dispatchEvent(blurEvent);
       this.stzhBlur.emit({
         component: "stzh-radio",
-        originalEvent: event
+        originalEvent: event,
       });
     };
     this.localization = undefined;
@@ -104,14 +104,14 @@ export class StzhRadio {
     this.errorWatcher(this.error);
     this.defaultChecked = typeof this.defaultChecked === "boolean" ? this.defaultChecked : this.checked;
     if (!this.localization) {
-      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'radio');
+      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "radio");
     }
   }
   render() {
-    var _a;
-    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;
-    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;
-    const errorUsed = hasSlot(this.element, 'error') || ((_a = this._error) === null || _a === void 0 ? void 0 : _a.length) > 0;
+    var _a, _b;
+    const descriptionUsed = hasSlot(this.element, "description") || !!this.description;
+    const descriptionLongUsed = hasSlot(this.element, "description-long") || !!this.descriptionLong;
+    const errorUsed = hasSlot(this.element, "error") || ((_a = this._error) === null || _a === void 0 ? void 0 : _a.length) > 0;
     const classes = {
       "stzh-radio": true,
       "stzh-radio--has-description": descriptionUsed,
@@ -119,14 +119,13 @@ export class StzhRadio {
       "stzh-radio--has-error": errorUsed,
       "stzh-radio--is-required": this.required,
       "stzh-radio--is-invalid": this.invalid || errorUsed,
-      "stzh-radio--is-disabled": this.disabled
+      "stzh-radio--is-disabled": this.disabled,
     };
-    return (h(Host, { "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { class: classes }, h("label", { class: "stzh-radio__field-wrapper" }, h("input", { class: "stzh-radio__input", ref: (el) => (this.input = el), type: "radio", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, defaultChecked: this.defaultChecked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), h("div", { class: "stzh-radio__mark" }, h("div", { class: "stzh-radio__check" })), h("div", { class: "stzh-radio__label" }, this.label ? this.label : h("slot", null), !this.hideOptional &&
-      h("span", { class: "stzh-radio__marker" }, h("span", { class: "stzh-radio__marker-symbol", "aria-hidden": "true" }, this.required
-        ? this.localization.$globals.requiredFieldMarker
-        : this.localization.$globals.optionalFieldMarker), h("span", { class: "stzh-radio__marker-text" }, this.required
-        ? this.localization.$globals.requiredFieldText
-        : this.localization.$globals.optionalFieldText)))), h(StzhInputDescription, { classPrefix: "stzh-radio", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }))));
+    return (h(Host, { "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { class: classes }, h("label", { class: "stzh-radio__field-wrapper" }, h("input", { class: "stzh-radio__input", ref: el => (this.input = el), type: "radio", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, defaultChecked: this.defaultChecked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), h("div", { class: "stzh-radio__mark" }, h("div", { class: "stzh-radio__check" })), h("div", { class: "stzh-radio__label" }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { class: "stzh-radio__marker" }, h("span", { class: "stzh-radio__marker-symbol", "aria-hidden": "true" }, this.required
+      ? this.localization.$globals.requiredFieldMarker
+      : this.localization.$globals.optionalFieldMarker), h("span", { class: "stzh-radio__marker-text" }, this.required
+      ? this.localization.$globals.requiredFieldText
+      : this.localization.$globals.optionalFieldText))))), (((_b = this._error) === null || _b === void 0 ? void 0 : _b.length) > 0 || this.description) && (h(StzhInputDescription, { classPrefix: "stzh-radio", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
   }
   static get is() { return "stzh-radio"; }
   static get encapsulation() { return "scoped"; }
@@ -265,7 +264,7 @@ export class StzhRadio {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Hide `(optional)` label (or use `required` inside form ot hide it)"
+          "text": "Hide `(optional)` label (or use `required` inside form to hide it)"
         },
         "attribute": "hide-optional",
         "reflect": true,

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

@@ -1 +1 @@
-{"version":3,"file":"stzh-radio.js","sourceRoot":"","sources":["../../../../src/components/stzh-radio/stzh-radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Host,\n  Component,\n  Prop,\n  Event,\n  Element,\n  EventEmitter,\n  h,\n  Watch,\n  Listen\n} from \"@stencil/core\";\n\nimport {\n  StzhRadioChangeEvent,\n  StzhRadioFocusEvent,\n  StzhRadioBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet radioCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-radio\",\n  styleUrl: \"stzh-radio.scss\",\n  scoped: true\n})\nexport class StzhRadio {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** The name of the input element */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** The value of the input element */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form ot hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Default checked (used by reset) */\n  @Prop({ mutable: true }) defaultChecked: boolean;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Id for element which describes the radio button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Input change event */\n  @Event() stzhChange: EventEmitter<StzhRadioChangeEvent>;\n\n  /** Input focus event */\n  @Event() stzhFocus: EventEmitter<StzhRadioFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhRadioBlurEvent>;\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\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  @Element() element: HTMLStzhRadioElement;\n\n  private input: HTMLInputElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n\n  private handleReset = async () => {\n    this.checked = this.defaultChecked;\n  }\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: \"stzh-radio\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked\n    });\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.input.focus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent('focus', {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-radio\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent('blur', {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-radio\",\n      originalEvent: event\n    });\n  }\n\n  async componentWillLoad() {\n    this.inputId = `stzh-radio-${radioCounter++}`;\n    this.errorWatcher(this.error);\n\n    this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'radio');\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, 'error') || this._error?.length > 0;\n\n    const classes = {\n      \"stzh-radio\": true,\n      \"stzh-radio--has-description\": descriptionUsed,\n      \"stzh-radio--has-description-long\": descriptionLongUsed,\n      \"stzh-radio--has-error\": errorUsed,\n      \"stzh-radio--is-required\": this.required,\n      \"stzh-radio--is-invalid\": this.invalid || errorUsed,\n      \"stzh-radio--is-disabled\": this.disabled\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed} tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <label class=\"stzh-radio__field-wrapper\">\n            <input\n              class=\"stzh-radio__input\"\n              ref={(el) => (this.input = el as HTMLInputElement)}\n              type=\"radio\"\n              id={this.inputId}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n              aria-required={this.required ? \"true\" : \"false\"}\n              aria-invalid={this.invalid ? \"true\" : \"false\"}\n              checked={this.checked}\n              defaultChecked={this.defaultChecked}\n              onInput={this.onInput}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            />\n            <div class=\"stzh-radio__mark\">\n              <div class=\"stzh-radio__check\"></div>\n            </div>\n            <div class=\"stzh-radio__label\">\n              {this.label ? this.label : <slot></slot>}\n              {!this.hideOptional &&\n                <span class=\"stzh-radio__marker\">\n                  <span class=\"stzh-radio__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker\n                    }\n                  </span>\n                  <span class=\"stzh-radio__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText\n                    }\n                  </span>\n                </span>\n              }\n            </div>\n          </label>\n          <StzhInputDescription\n            classPrefix=\"stzh-radio\"\n            id={`${this.inputId}-description`}\n            error={this._error}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            descriptionLongTitle={this.descriptionLongTitle}\n            descriptionLongUsed={descriptionLongUsed}\n            moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-radio.js","sourceRoot":"","sources":["../../../../src/components/stzh-radio/stzh-radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, Watch } from \"@stencil/core\";\n\nimport { StzhRadioBlurEvent, StzhRadioChangeEvent, StzhRadioFocusEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet radioCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-radio\",\n  styleUrl: \"stzh-radio.scss\",\n  scoped: true,\n})\nexport class StzhRadio {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** The name of the input element */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** The value of the input element */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Default checked (used by reset) */\n  @Prop({ mutable: true }) defaultChecked: boolean;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Id for element which describes the radio button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Input change event */\n  @Event() stzhChange: EventEmitter<StzhRadioChangeEvent>;\n\n  /** Input focus event */\n  @Event() stzhFocus: EventEmitter<StzhRadioFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhRadioBlurEvent>;\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\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  @Element() element: HTMLStzhRadioElement;\n\n  private input: HTMLInputElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n\n  private handleReset = async () => {\n    this.checked = this.defaultChecked;\n  };\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: \"stzh-radio\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked,\n    });\n  };\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.input.focus();\n    }\n\n    this.focusedByInput = false;\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-radio\",\n      originalEvent: event,\n    });\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-radio\",\n      originalEvent: event,\n    });\n  };\n\n  async componentWillLoad() {\n    this.inputId = `stzh-radio-${radioCounter++}`;\n    this.errorWatcher(this.error);\n\n    this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"radio\");\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, \"description\") || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, \"description-long\") || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, \"error\") || this._error?.length > 0;\n\n    const classes = {\n      \"stzh-radio\": true,\n      \"stzh-radio--has-description\": descriptionUsed,\n      \"stzh-radio--has-description-long\": descriptionLongUsed,\n      \"stzh-radio--has-error\": errorUsed,\n      \"stzh-radio--is-required\": this.required,\n      \"stzh-radio--is-invalid\": this.invalid || errorUsed,\n      \"stzh-radio--is-disabled\": this.disabled,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed} tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <label class=\"stzh-radio__field-wrapper\">\n            <input\n              class=\"stzh-radio__input\"\n              ref={el => (this.input = el as HTMLInputElement)}\n              type=\"radio\"\n              id={this.inputId}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n              aria-required={this.required ? \"true\" : \"false\"}\n              aria-invalid={this.invalid ? \"true\" : \"false\"}\n              checked={this.checked}\n              defaultChecked={this.defaultChecked}\n              onInput={this.onInput}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            />\n            <div class=\"stzh-radio__mark\">\n              <div class=\"stzh-radio__check\"></div>\n            </div>\n            <div class=\"stzh-radio__label\">\n              {this.label ? this.label : <slot></slot>}\n              {!this.hideOptional && (\n                <span class=\"stzh-radio__marker\">\n                  <span class=\"stzh-radio__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker}\n                  </span>\n                  <span class=\"stzh-radio__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText}\n                  </span>\n                </span>\n              )}\n            </div>\n          </label>\n          {(this._error?.length > 0 || this.description) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-radio\"\n              id={`${this.inputId}-description`}\n              error={this._error}\n              description={this.description}\n              descriptionLong={this.descriptionLong}\n              descriptionLongTitle={this.descriptionLongTitle}\n              descriptionLongUsed={descriptionLongUsed}\n              moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -81,6 +81,9 @@
 /**
  * Pagetitle
  */
+/**
+ * TopnewsMostsearched
+ */
 /**
  * Calendar
  */

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

@@ -2,7 +2,7 @@ import { h, Host } from "@stencil/core";
 import { hasSlot } from "../../utils/utils";
 import { camelCase } from "../../utils/string-utils";
 import { StzhInputDescription } from "../stzh-input/stzh-input-description";
-const SELECTOR_RADIO = 'stzh-radio, stzh-button[type=radio], stzh-card';
+const SELECTOR_RADIO = "stzh-radio, stzh-button[type=radio], stzh-card";
 let radiogroupCounter = 0;
 /**
  * @slot - Slot for `stzh-radio`, `stzh-button[type="radio"]` or `stzh-card` elements
@@ -99,14 +99,14 @@ export class StzhRadiogroup {
   }
   updateRadiosProperty(prop, value) {
     this.radios.forEach((radio) => {
-      if (prop === "name" || (this._preventUpdateProperties.indexOf(prop) === -1)) {
+      if (prop === "name" || this._preventUpdateProperties.indexOf(prop) === -1) {
         radio[camelCase(prop)] = value;
       }
     });
   }
   get errorUsed() {
     var _a;
-    return hasSlot(this.element, 'error') || ((_a = this._error) === null || _a === void 0 ? void 0 : _a.length) > 0;
+    return hasSlot(this.element, "error") || ((_a = this._error) === null || _a === void 0 ? void 0 : _a.length) > 0;
   }
   updateCheckedRadioByValue(value) {
     this.checkedRadio = this.radios.find(radio => radio.value === value);
@@ -131,7 +131,7 @@ export class StzhRadiogroup {
     this.errorWatcher(this.error);
     this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);
     if (!this.localization) {
-      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'radiogroup');
+      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "radiogroup");
     }
   }
   componentShouldUpdate(_newValue, _oldValue, prop) {
@@ -161,8 +161,9 @@ export class StzhRadiogroup {
     }
   }
   render() {
-    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;
-    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;
+    var _a;
+    const descriptionUsed = hasSlot(this.element, "description") || !!this.description;
+    const descriptionLongUsed = hasSlot(this.element, "description-long") || !!this.descriptionLong;
     const classes = {
       "stzh-radiogroup": true,
       "stzh-radiogroup--has-description": descriptionUsed,
@@ -172,15 +173,13 @@ export class StzhRadiogroup {
       "stzh-radiogroup--is-disabled": this.disabled,
       "stzh-radiogroup--is-invalid": this.invalid || this.errorUsed,
       "stzh-radiogroup--hide-legend": this.hideLegend,
-      [`stzh-radiogroup--direction-${this.direction}`]: !!this.direction
+      [`stzh-radiogroup--direction-${this.direction}`]: !!this.direction,
     };
-    return (h(Host, { "is-invalid": this.invalid || this.errorUsed }, h("fieldset", { class: classes }, this.legend &&
-      h("legend", { class: "stzh-radiogroup__legend" }, this.legend, !this.hideOptional &&
-        h("span", { class: "stzh-radiogroup__marker" }, h("span", { class: "stzh-radiogroup__marker-symbol", "aria-hidden": "true" }, this.required
-          ? this.localization.$globals.requiredFieldMarker
-          : this.localization.$globals.optionalFieldMarker), h("span", { class: "stzh-radiogroup__marker-text" }, this.required
-          ? this.localization.$globals.requiredFieldText
-          : this.localization.$globals.optionalFieldText))), h("div", { class: "stzh-radiogroup__fields" }, h("slot", null)), h(StzhInputDescription, { classPrefix: "stzh-radiogroup", id: `${this.radiogroupId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }))));
+    return (h(Host, { "is-invalid": this.invalid || this.errorUsed }, h("fieldset", { class: classes }, this.legend && (h("legend", { class: "stzh-radiogroup__legend" }, this.legend, !this.hideOptional && (h("span", { class: "stzh-radiogroup__marker" }, h("span", { class: "stzh-radiogroup__marker-symbol", "aria-hidden": "true" }, this.required
+      ? this.localization.$globals.requiredFieldMarker
+      : this.localization.$globals.optionalFieldMarker), h("span", { class: "stzh-radiogroup__marker-text" }, this.required
+      ? this.localization.$globals.requiredFieldText
+      : this.localization.$globals.optionalFieldText))))), h("div", { class: "stzh-radiogroup__fields" }, h("slot", null)), (((_a = this._error) === null || _a === void 0 ? void 0 : _a.length) > 0 || this.description) && (h(StzhInputDescription, { classPrefix: "stzh-radiogroup", id: `${this.radiogroupId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
   }
   static get is() { return "stzh-radiogroup"; }
   static get encapsulation() { return "scoped"; }
@@ -335,7 +334,7 @@ export class StzhRadiogroup {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Hide `(optional)` label (or use `required` inside form ot hide it)"
+          "text": "Hide `(optional)` label (or use `required` inside form to hide it)"
         },
         "attribute": "hide-optional",
         "reflect": true,

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

@@ -1 +1 @@
-{"version":3,"file":"stzh-radiogroup.js","sourceRoot":"","sources":["../../../../src/components/stzh-radiogroup/stzh-radiogroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  Element,\n  Watch,\n  h,\n  Listen,\n  Host\n} from \"@stencil/core\";\n\nimport { StzhRadioChangeEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { camelCase } from \"../../utils/string-utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nconst SELECTOR_RADIO = 'stzh-radio, stzh-button[type=radio], stzh-card';\n\nlet radiogroupCounter = 0;\n\n/**\n * @slot - Slot for `stzh-radio`, `stzh-button[type=\"radio\"]` or `stzh-card` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-radiogroup\",\n  styleUrl: \"stzh-radiogroup.scss\",\n  scoped: true\n})\nexport class StzhRadiogroup {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** The name of the input radio elements, will define the radio group. If you have more than one radio group on a page, every group needs to have its own unique name */\n  @Prop({ reflect: true }) name: string;\n\n  /** The legend */\n  @Prop() legend: string;\n\n  /** Hide legend to show only for screenreaders */\n  @Prop({ reflect: true }) hideLegend: boolean = false;\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form ot hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Select a radio by value */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string = \"\";\n\n  /** Direction */\n  @Prop({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Current checked radio element (readonly) */\n  @Prop() checkedRadio: HTMLStzhRadioElement | null = null;\n\n  /** Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid, required, hide-marker) */\n  @Prop() preventUpdateProperties: string[] | string = [];\n  private _preventUpdateProperties: string[] = [];\n\n  /** Host element */\n  @Element() element: HTMLElement;\n\n  @Watch(\"name\")\n  watchName(newValue: string) {\n    this.updateRadiosProperty(\"name\", newValue);\n  }\n\n  @Watch(\"disabled\")\n  watchDisabled(newValue: boolean) {\n    this.updateRadiosProperty(\"disabled\", newValue);\n  }\n\n  @Watch(\"required\")\n  watchRequired(newValue: boolean) {\n    this.updateRadiosProperty(\"required\", newValue);\n  }\n\n  @Watch(\"value\")\n  watchValue(newValue: string) {\n    this.updateCheckedRadioByValue(newValue);\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  @Watch(\"preventUpdateProperties\")\n  preventUpdatePropertiesWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      this._preventUpdateProperties = JSON.parse(newValue);\n    } else {\n      this._preventUpdateProperties = newValue;\n    }\n  }\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n\n  @Listen(\"stzhChange\")\n  onChange(event: CustomEvent<StzhRadioChangeEvent>) {\n    this.value = event.detail.value;\n  }\n\n  /** Radio elements */\n  private radios: HTMLStzhRadioElement[];\n  private radiogroupId: string;\n  private observer: MutationObserver;\n\n  private updateRadiosProperty(prop: string, value: any) {\n    this.radios.forEach((radio: HTMLStzhRadioElement) => {\n      if (prop === \"name\" || (this._preventUpdateProperties.indexOf(prop) === -1)) {\n        radio[camelCase(prop)] = value;\n      }\n    });\n  }\n\n  private get errorUsed(): boolean {\n    return hasSlot(this.element, 'error') || this._error?.length > 0;\n  }\n\n  private updateCheckedRadioByValue(value: string) {\n    this.checkedRadio = this.radios.find(radio => radio.value === value);\n\n    if (this.checkedRadio) {\n      this.checkedRadio.checked = true;\n    }\n\n    this.uncheckRadios();\n  }\n\n  private uncheckRadios() {\n    // make sure that no other radios are checked than the current one or no one\n    this.radios.forEach((radio: HTMLStzhRadioElement) => {\n      if (!this.checkedRadio || radio !== this.checkedRadio) {\n        radio.checked = false;\n      }\n    });\n  }\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n  }\n\n  private init = () => {\n    // update radios\n    this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n    this.updateRadiosProperty(\"hide-optional\", true);\n    this.updateRadiosProperty(\"a11y-describedby\", `${this.radiogroupId}-description`);\n    this.updateRadiosProperty(\"invalid\", this.invalid || this.errorUsed);\n\n    this.watchValue(this.value);\n    this.watchName(this.name);\n    this.watchDisabled(this.disabled);\n    this.watchRequired(this.required);\n  }\n\n  componentDidLoad() {\n    this.defaultValue = this.defaultValue ? this.defaultValue : this.value;\n  }\n\n  async componentWillLoad() {\n    this.radiogroupId = `stzh-radiogroup-${radiogroupCounter++}`;\n    this.errorWatcher(this.error);\n    this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'radiogroup');\n    }\n  }\n\n  componentShouldUpdate(_newValue, _oldValue, prop: string) {\n    return prop !== \"checkedRadio\";\n  }\n\n  componentDidRender() {\n    this.init();\n  }\n\n  connectedCallback() {\n    if (!this.value) {\n      this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n      // try to find a checkbox that might has checked set to true\n      const checkedRadio = this.radios.find(radio => radio.checked);\n\n      if (checkedRadio) {\n        this.value = checkedRadio.value;\n      }\n    }\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n\n    const classes = {\n      \"stzh-radiogroup\": true,\n      \"stzh-radiogroup--has-description\": descriptionUsed,\n      \"stzh-radiogroup--has-description-long\": descriptionLongUsed,\n      \"stzh-radiogroup--has-error\": this.errorUsed,\n      \"stzh-radiogroup--is-required\": this.required,\n      \"stzh-radiogroup--is-disabled\": this.disabled,\n      \"stzh-radiogroup--is-invalid\": this.invalid || this.errorUsed,\n      \"stzh-radiogroup--hide-legend\": this.hideLegend,\n      [`stzh-radiogroup--direction-${this.direction}`]: !!this.direction\n    };\n\n    return (\n      <Host is-invalid={this.invalid || this.errorUsed}>\n        <fieldset class={classes}>\n          {this.legend &&\n            <legend class=\"stzh-radiogroup__legend\">\n              {this.legend}\n              {!this.hideOptional &&\n                <span class=\"stzh-radiogroup__marker\">\n                  <span class=\"stzh-radiogroup__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker\n                    }\n                  </span>\n                  <span class=\"stzh-radiogroup__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText\n                    }\n                  </span>\n                </span>\n              }\n            </legend>\n          }\n          <div class=\"stzh-radiogroup__fields\">\n            <slot></slot>\n          </div>\n          <StzhInputDescription\n            classPrefix=\"stzh-radiogroup\"\n            id={`${this.radiogroupId}-description`}\n            error={this._error}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            descriptionLongTitle={this.descriptionLongTitle}\n            descriptionLongUsed={descriptionLongUsed}\n            moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n          />\n        </fieldset>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-radiogroup.js","sourceRoot":"","sources":["../../../../src/components/stzh-radiogroup/stzh-radiogroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Listen, Prop, Watch } from \"@stencil/core\";\n\nimport { StzhRadioChangeEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { camelCase } from \"../../utils/string-utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nconst SELECTOR_RADIO = \"stzh-radio, stzh-button[type=radio], stzh-card\";\n\nlet radiogroupCounter = 0;\n\n/**\n * @slot - Slot for `stzh-radio`, `stzh-button[type=\"radio\"]` or `stzh-card` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-radiogroup\",\n  styleUrl: \"stzh-radiogroup.scss\",\n  scoped: true,\n})\nexport class StzhRadiogroup {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** The name of the input radio elements, will define the radio group. If you have more than one radio group on a page, every group needs to have its own unique name */\n  @Prop({ reflect: true }) name: string;\n\n  /** The legend */\n  @Prop() legend: string;\n\n  /** Hide legend to show only for screenreaders */\n  @Prop({ reflect: true }) hideLegend: boolean = false;\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Select a radio by value */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string = \"\";\n\n  /** Direction */\n  @Prop({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Current checked radio element (readonly) */\n  @Prop() checkedRadio: HTMLStzhRadioElement | null = null;\n\n  /** Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid, required, hide-marker) */\n  @Prop() preventUpdateProperties: string[] | string = [];\n  private _preventUpdateProperties: string[] = [];\n\n  /** Host element */\n  @Element() element: HTMLElement;\n\n  @Watch(\"name\")\n  watchName(newValue: string) {\n    this.updateRadiosProperty(\"name\", newValue);\n  }\n\n  @Watch(\"disabled\")\n  watchDisabled(newValue: boolean) {\n    this.updateRadiosProperty(\"disabled\", newValue);\n  }\n\n  @Watch(\"required\")\n  watchRequired(newValue: boolean) {\n    this.updateRadiosProperty(\"required\", newValue);\n  }\n\n  @Watch(\"value\")\n  watchValue(newValue: string) {\n    this.updateCheckedRadioByValue(newValue);\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  @Watch(\"preventUpdateProperties\")\n  preventUpdatePropertiesWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      this._preventUpdateProperties = JSON.parse(newValue);\n    } else {\n      this._preventUpdateProperties = newValue;\n    }\n  }\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Listen(\"stzhChange\")\n  onChange(event: CustomEvent<StzhRadioChangeEvent>) {\n    this.value = event.detail.value;\n  }\n\n  /** Radio elements */\n  private radios: HTMLStzhRadioElement[];\n  private radiogroupId: string;\n  private observer: MutationObserver;\n\n  private updateRadiosProperty(prop: string, value: any) {\n    this.radios.forEach((radio: HTMLStzhRadioElement) => {\n      if (prop === \"name\" || this._preventUpdateProperties.indexOf(prop) === -1) {\n        radio[camelCase(prop)] = value;\n      }\n    });\n  }\n\n  private get errorUsed(): boolean {\n    return hasSlot(this.element, \"error\") || this._error?.length > 0;\n  }\n\n  private updateCheckedRadioByValue(value: string) {\n    this.checkedRadio = this.radios.find(radio => radio.value === value);\n\n    if (this.checkedRadio) {\n      this.checkedRadio.checked = true;\n    }\n\n    this.uncheckRadios();\n  }\n\n  private uncheckRadios() {\n    // make sure that no other radios are checked than the current one or no one\n    this.radios.forEach((radio: HTMLStzhRadioElement) => {\n      if (!this.checkedRadio || radio !== this.checkedRadio) {\n        radio.checked = false;\n      }\n    });\n  }\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n  };\n\n  private init = () => {\n    // update radios\n    this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n    this.updateRadiosProperty(\"hide-optional\", true);\n    this.updateRadiosProperty(\"a11y-describedby\", `${this.radiogroupId}-description`);\n    this.updateRadiosProperty(\"invalid\", this.invalid || this.errorUsed);\n\n    this.watchValue(this.value);\n    this.watchName(this.name);\n    this.watchDisabled(this.disabled);\n    this.watchRequired(this.required);\n  };\n\n  componentDidLoad() {\n    this.defaultValue = this.defaultValue ? this.defaultValue : this.value;\n  }\n\n  async componentWillLoad() {\n    this.radiogroupId = `stzh-radiogroup-${radiogroupCounter++}`;\n    this.errorWatcher(this.error);\n    this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"radiogroup\");\n    }\n  }\n\n  componentShouldUpdate(_newValue, _oldValue, prop: string) {\n    return prop !== \"checkedRadio\";\n  }\n\n  componentDidRender() {\n    this.init();\n  }\n\n  connectedCallback() {\n    if (!this.value) {\n      this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n      // try to find a checkbox that might has checked set to true\n      const checkedRadio = this.radios.find(radio => radio.checked);\n\n      if (checkedRadio) {\n        this.value = checkedRadio.value;\n      }\n    }\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, \"description\") || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, \"description-long\") || !!this.descriptionLong;\n\n    const classes = {\n      \"stzh-radiogroup\": true,\n      \"stzh-radiogroup--has-description\": descriptionUsed,\n      \"stzh-radiogroup--has-description-long\": descriptionLongUsed,\n      \"stzh-radiogroup--has-error\": this.errorUsed,\n      \"stzh-radiogroup--is-required\": this.required,\n      \"stzh-radiogroup--is-disabled\": this.disabled,\n      \"stzh-radiogroup--is-invalid\": this.invalid || this.errorUsed,\n      \"stzh-radiogroup--hide-legend\": this.hideLegend,\n      [`stzh-radiogroup--direction-${this.direction}`]: !!this.direction,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || this.errorUsed}>\n        <fieldset class={classes}>\n          {this.legend && (\n            <legend class=\"stzh-radiogroup__legend\">\n              {this.legend}\n              {!this.hideOptional && (\n                <span class=\"stzh-radiogroup__marker\">\n                  <span class=\"stzh-radiogroup__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker}\n                  </span>\n                  <span class=\"stzh-radiogroup__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText}\n                  </span>\n                </span>\n              )}\n            </legend>\n          )}\n          <div class=\"stzh-radiogroup__fields\">\n            <slot></slot>\n          </div>\n          {(this._error?.length > 0 || this.description) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-radiogroup\"\n              id={`${this.radiogroupId}-description`}\n              error={this._error}\n              description={this.description}\n              descriptionLong={this.descriptionLong}\n              descriptionLongTitle={this.descriptionLongTitle}\n              descriptionLongUsed={descriptionLongUsed}\n              moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n            />\n          )}\n        </fieldset>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -81,6 +81,9 @@
 /**
  * Pagetitle
  */
+/**
+ * TopnewsMostsearched
+ */
 /**
  * Calendar
  */

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

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 /**
  * @slot - Slot for e.g. image or video
  */
@@ -14,7 +14,7 @@ export class StzhRatio {
   }
   render() {
     const classes = {
-      "stzh-ratio": true
+      "stzh-ratio": true,
     };
     return (h(Host, null, h("div", { class: classes }, h("slot", null))));
   }

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

@@ -1 +1 @@
-{"version":3,"file":"stzh-ratio.js","sourceRoot":"","sources":["../../../../src/components/stzh-ratio/stzh-ratio.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,OAAO,EACP,IAAI,EACL,MAAM,eAAe,CAAC;AAIvB;;GAEG;AAMH,MAAM,OAAO,SAAS;;iBAE2B,MAAM;sBAEW,SAAS;uBAER,SAAS;sBAEV,SAAS;sBAET,SAAS;oBAG5B,KAAK;eAGE,OAAO;;EAI3D,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,YAAY,EAAE,IAAI;KACnB,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,OAAO;QACjB,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop\n} from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for e.g. image or video\n */\n@Component({\n  tag: \"stzh-ratio\",\n  styleUrl: \"stzh-ratio.scss\",\n  scoped: true\n})\nexport class StzhRatio {\n  /** Aspect ratio */\n  @Prop({ reflect: true }) ratio: Layout.Ratio = \"16:9\";\n  /** Aspect ratio above small breakpoint */\n  @Prop({ reflect: true }) ratioSmall: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above medium breakpoint */\n  @Prop({ reflect: true }) ratioMedium: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above large breakpoint */\n  @Prop({ reflect: true }) ratioLarge: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above ultra breakpoint */\n  @Prop({ reflect: true }) ratioUltra: Layout.Ratio | \"inherit\" = \"inherit\";\n\n  /** Whether aspect ratio is in portrait mode */\n  @Prop({ reflect: true }) portrait: boolean = false;\n\n  /** Fit mode */\n  @Prop({ reflect: true }) fit: \"cover\" | \"contain\" = \"cover\";\n\n  @Element() element: HTMLStzhRatioElement;\n\n  render() {\n    const classes = {\n      \"stzh-ratio\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-ratio.js","sourceRoot":"","sources":["../../../../src/components/stzh-ratio/stzh-ratio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIlE;;GAEG;AAMH,MAAM,OAAO,SAAS;;iBAE2B,MAAM;sBAEW,SAAS;uBAER,SAAS;sBAEV,SAAS;sBAET,SAAS;oBAG5B,KAAK;eAGE,OAAO;;EAI3D,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,YAAY,EAAE,IAAI;KACnB,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,OAAO;QACjB,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for e.g. image or video\n */\n@Component({\n  tag: \"stzh-ratio\",\n  styleUrl: \"stzh-ratio.scss\",\n  scoped: true,\n})\nexport class StzhRatio {\n  /** Aspect ratio */\n  @Prop({ reflect: true }) ratio: Layout.Ratio = \"16:9\";\n  /** Aspect ratio above small breakpoint */\n  @Prop({ reflect: true }) ratioSmall: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above medium breakpoint */\n  @Prop({ reflect: true }) ratioMedium: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above large breakpoint */\n  @Prop({ reflect: true }) ratioLarge: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above ultra breakpoint */\n  @Prop({ reflect: true }) ratioUltra: Layout.Ratio | \"inherit\" = \"inherit\";\n\n  /** Whether aspect ratio is in portrait mode */\n  @Prop({ reflect: true }) portrait: boolean = false;\n\n  /** Fit mode */\n  @Prop({ reflect: true }) fit: \"cover\" | \"contain\" = \"cover\";\n\n  @Element() element: HTMLStzhRatioElement;\n\n  render() {\n    const classes = {\n      \"stzh-ratio\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -81,6 +81,9 @@
 /**
  * Pagetitle
  */
+/**
+ * TopnewsMostsearched
+ */
 /**
  * Calendar
  */

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

@@ -55,6 +55,7 @@ window.rsConf = {
   // hlword: '#a4cbff'
   },
   general: {
+    usePost: true,
     enableSkipAlways: true,
     shadowDomSelector: "stzh-accordion-item,stzh-timeline-item,stzh-disturber"
   },

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

@@ -1 +1 @@
-{"version":3,"file":"stzh-readspeaker.js","sourceRoot":"","sources":["../../../../src/components/stzh-readspeaker/stzh-readspeaker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Method\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n// we use split button implmentation (calling readpage manually):\n// https://wrdev.readspeaker.com/get-started/implementation/split-button-implementation\n\n// we load the library dynamically:\n// https://wrdev.readspeaker.com/get-started/implementation/dynamic-loading\nfunction loadLibrary() {\n  return new Promise((resolve, reject) => {\n    if (window.ReadSpeaker) {\n      resolve(window.ReadSpeaker);\n      return;\n    }\n\n    const oHead = document.getElementsByTagName('HEAD').item(0);\n    const oScript = document.createElement(\"script\");\n\n    oScript.type = \"text/javascript\";\n    // oScript.src = \"//cdn-eu.readspeaker.com/script/4490/webReader/webReader.js?pids=wr&mobile=0\";\n    // we disable predefined mobile UI player bar with mobile=0 parameter\n    oScript.src = `${window.stzhComponents.pathVendors}/readspeaker/webReader.js?pids=wr&mobile=0`;\n    oScript.id = \"rs_req_Init\";\n    oHead.appendChild(oScript);\n\n    oScript.onload = function () {\n      window.ReadSpeaker.mobile = window.ReadSpeaker.mobile;\n      resolve(window.ReadSpeaker);\n      // window.ReadSpeaker.init();\n    }\n\n    oScript.onerror = reject;\n  });\n}\n\nwindow.rsConf = {\n\t// cb: {\n\t// \tui: {\n\t// \t\topen: function() {\n\t// \t\t\tconsole.log('open')\n\t// \t\t},\n  //     close: function() {\n\t// \t\t\tconsole.log('close')\n  //     },\n  //     stop: function() {\n  //       console.log('stop')\n  //     },\n  //     play: function() {\n  //       console.log('play')\n  //     },\n  //     pause: function() {\n  //       console.log('pause')\n  //     }\n\t// \t}\n\t// },\n  settings: {\n    // // The color that will be used for highlighting sentences, expressed as a valid CSS color value.\n\t\t// hlsent: '#beffd6',\n    // // The color that will be used for the text in the highlighted elements, expressed as a valid CSS color value.\n    // hltext: '#000000',\n    // // The color that will be used for highlighting words, expressed as a valid CSS color value\n    // hlword: '#a4cbff'\n\t},\n  general: {\n    enableSkipAlways: true,\n    shadowDomSelector: \"stzh-accordion-item,stzh-timeline-item,stzh-disturber\"\n  },\n  ui: {\n    tools: {\n      voicesettings: false,\n      controlpanel: false,\n      translation: false,\n      dictionary: false,\n      download: false,\n      help: false,\n      formreading: false\n    }\n  }\n};\n\n// window.rspkr.ui.getActivePlayer().getContainer()\n// window.rspkr.ui.addClickEvents()\n// window.rspkr.tools.toggler.add()\n\nlet readspeakerCounter = 0;\n\n/**\n * @slot - Slot for trigger\n */\n@Component({\n  tag: \"stzh-readspeaker\",\n  styleUrl: \"stzh-readspeaker.scss\"\n})\nexport class StzhReadspeaker {\n  /** RS url of site (e.g. https://app-eu.readspeaker.com/cgi-bin/rsent?customerid=4490&lang=de_de&readid=content&url=https://www.stadt-zuerich.ch/portal/de/index/service/kontakt.html) */\n  @Prop() href!: string;\n\n  @Element() element: HTMLStzhReadspeakerElement;\n\n  /** Open player and start reading page */\n  @Method()\n  async openPlayer() {\n    const activePlayer = window.rspkr?.ui?.getActivePlayer();\n\n    if (activePlayer && !this.element.contains(activePlayer.getContainer())) {\n      activePlayer.stop();\n    }\n\n    window.readpage(this.href, this.readspeakerId);\n  }\n\n  /** Close player and finish reading page */\n  @Method()\n  async closePlayer() {\n    const activePlayer = window.rspkr?.ui?.getActivePlayer();\n\n    if (activePlayer && this.element.contains(activePlayer.getContainer())) {\n      activePlayer.close();\n    }\n  }\n\n  private observer: MutationObserver;\n  private triggerElement: HTMLElement;\n\n  private onLinkClick = async (event: MouseEvent) => {\n    event.preventDefault();\n    // library could also be loaded only after first click, but then text selection wouldn't work\n    // await loadLibrary();\n    this.openPlayer();\n  }\n\n  private init = () => {\n    let trigger = this.triggerElement?.firstElementChild as HTMLElement;\n\n    if (!trigger) {\n      const defaultSlot = Array.from(this.element.children)\n        .find(child => !child.hasAttribute('slot')) as HTMLElement;\n\n      trigger = defaultSlot;\n    }\n\n    if (trigger) {\n      trigger.addEventListener('click', this.onLinkClick);\n\n      setPropsIfNull(trigger, {\n        icon: \"volume-medium\",\n        href: this.href\n      } as HTMLStzhLinkElement | HTMLStzhButtonElement)\n    }\n  }\n\n  private readspeakerId: string;\n\n  async componentWillLoad() {\n    this.readspeakerId = `stzh-readspeaker-${readspeakerCounter++}`;\n  }\n\n  async componentDidLoad() {\n    await loadLibrary();\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    window.rspkr?.ui?.destroyActivePlayer();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-readspeaker\": true,\n      \"rs_skip\": true // will prevent component being read by readspeaker\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-readspeaker__actions\">\n            <div\n              ref={(el) => (this.triggerElement = el as HTMLDivElement)}\n              class=\"stzh-readspeaker__trigger\"\n            >\n              <slot></slot>\n            </div>\n            <stzh-button\n              class=\"stzh-readspeaker__close\"\n              variant=\"tertiary\"\n              size=\"small\"\n              icon=\"close-big\"\n              iconOnly={true}\n              onClick={() => { this.closePlayer() }}\n            ></stzh-button>\n          </div>\n\n          {/*\n          <stzh-popover placement=\"bottom-end\">\n            <div slot=\"content\">...</div>\n          </stzh-popover>\n          */}\n\n          <div\n            id={this.readspeakerId}\n            class=\"rs_addtools rs_splitbutton rs_preserve rs_skip rs_exp\"\n          ></div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-readspeaker.js","sourceRoot":"","sources":["../../../../src/components/stzh-readspeaker/stzh-readspeaker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Method\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n// we use split button implmentation (calling readpage manually):\n// https://wrdev.readspeaker.com/get-started/implementation/split-button-implementation\n\n// we load the library dynamically:\n// https://wrdev.readspeaker.com/get-started/implementation/dynamic-loading\nfunction loadLibrary() {\n  return new Promise((resolve, reject) => {\n    if (window.ReadSpeaker) {\n      resolve(window.ReadSpeaker);\n      return;\n    }\n\n    const oHead = document.getElementsByTagName('HEAD').item(0);\n    const oScript = document.createElement(\"script\");\n\n    oScript.type = \"text/javascript\";\n    // oScript.src = \"//cdn-eu.readspeaker.com/script/4490/webReader/webReader.js?pids=wr&mobile=0\";\n    // we disable predefined mobile UI player bar with mobile=0 parameter\n    oScript.src = `${window.stzhComponents.pathVendors}/readspeaker/webReader.js?pids=wr&mobile=0`;\n    oScript.id = \"rs_req_Init\";\n    oHead.appendChild(oScript);\n\n    oScript.onload = function () {\n      window.ReadSpeaker.mobile = window.ReadSpeaker.mobile;\n      resolve(window.ReadSpeaker);\n      // window.ReadSpeaker.init();\n    }\n\n    oScript.onerror = reject;\n  });\n}\n\nwindow.rsConf = {\n\t// cb: {\n\t// \tui: {\n\t// \t\topen: function() {\n\t// \t\t\tconsole.log('open')\n\t// \t\t},\n  //     close: function() {\n\t// \t\t\tconsole.log('close')\n  //     },\n  //     stop: function() {\n  //       console.log('stop')\n  //     },\n  //     play: function() {\n  //       console.log('play')\n  //     },\n  //     pause: function() {\n  //       console.log('pause')\n  //     }\n\t// \t}\n\t// },\n  settings: {\n    // // The color that will be used for highlighting sentences, expressed as a valid CSS color value.\n\t\t// hlsent: '#beffd6',\n    // // The color that will be used for the text in the highlighted elements, expressed as a valid CSS color value.\n    // hltext: '#000000',\n    // // The color that will be used for highlighting words, expressed as a valid CSS color value\n    // hlword: '#a4cbff'\n\t},\n  general: {\n    usePost: true,\n    enableSkipAlways: true,\n    shadowDomSelector: \"stzh-accordion-item,stzh-timeline-item,stzh-disturber\"\n  },\n  ui: {\n    tools: {\n      voicesettings: false,\n      controlpanel: false,\n      translation: false,\n      dictionary: false,\n      download: false,\n      help: false,\n      formreading: false\n    }\n  }\n};\n\n// window.rspkr.ui.getActivePlayer().getContainer()\n// window.rspkr.ui.addClickEvents()\n// window.rspkr.tools.toggler.add()\n\nlet readspeakerCounter = 0;\n\n/**\n * @slot - Slot for trigger\n */\n@Component({\n  tag: \"stzh-readspeaker\",\n  styleUrl: \"stzh-readspeaker.scss\"\n})\nexport class StzhReadspeaker {\n  /** RS url of site (e.g. https://app-eu.readspeaker.com/cgi-bin/rsent?customerid=4490&lang=de_de&readid=content&url=https://www.stadt-zuerich.ch/portal/de/index/service/kontakt.html) */\n  @Prop() href!: string;\n\n  @Element() element: HTMLStzhReadspeakerElement;\n\n  /** Open player and start reading page */\n  @Method()\n  async openPlayer() {\n    const activePlayer = window.rspkr?.ui?.getActivePlayer();\n\n    if (activePlayer && !this.element.contains(activePlayer.getContainer())) {\n      activePlayer.stop();\n    }\n\n    window.readpage(this.href, this.readspeakerId);\n  }\n\n  /** Close player and finish reading page */\n  @Method()\n  async closePlayer() {\n    const activePlayer = window.rspkr?.ui?.getActivePlayer();\n\n    if (activePlayer && this.element.contains(activePlayer.getContainer())) {\n      activePlayer.close();\n    }\n  }\n\n  private observer: MutationObserver;\n  private triggerElement: HTMLElement;\n\n  private onLinkClick = async (event: MouseEvent) => {\n    event.preventDefault();\n    // library could also be loaded only after first click, but then text selection wouldn't work\n    // await loadLibrary();\n    this.openPlayer();\n  }\n\n  private init = () => {\n    let trigger = this.triggerElement?.firstElementChild as HTMLElement;\n\n    if (!trigger) {\n      const defaultSlot = Array.from(this.element.children)\n        .find(child => !child.hasAttribute('slot')) as HTMLElement;\n\n      trigger = defaultSlot;\n    }\n\n    if (trigger) {\n      trigger.addEventListener('click', this.onLinkClick);\n\n      setPropsIfNull(trigger, {\n        icon: \"volume-medium\",\n        href: this.href\n      } as HTMLStzhLinkElement | HTMLStzhButtonElement)\n    }\n  }\n\n  private readspeakerId: string;\n\n  async componentWillLoad() {\n    this.readspeakerId = `stzh-readspeaker-${readspeakerCounter++}`;\n  }\n\n  async componentDidLoad() {\n    await loadLibrary();\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    window.rspkr?.ui?.destroyActivePlayer();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-readspeaker\": true,\n      \"rs_skip\": true // will prevent component being read by readspeaker\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-readspeaker__actions\">\n            <div\n              ref={(el) => (this.triggerElement = el as HTMLDivElement)}\n              class=\"stzh-readspeaker__trigger\"\n            >\n              <slot></slot>\n            </div>\n            <stzh-button\n              class=\"stzh-readspeaker__close\"\n              variant=\"tertiary\"\n              size=\"small\"\n              icon=\"close-big\"\n              iconOnly={true}\n              onClick={() => { this.closePlayer() }}\n            ></stzh-button>\n          </div>\n\n          {/*\n          <stzh-popover placement=\"bottom-end\">\n            <div slot=\"content\">...</div>\n          </stzh-popover>\n          */}\n\n          <div\n            id={this.readspeakerId}\n            class=\"rs_addtools rs_splitbutton rs_preserve rs_skip rs_exp\"\n          ></div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -82,6 +82,9 @@
 /**
  * Pagetitle
  */
+/**
+ * TopnewsMostsearched
+ */
 /**
  * Calendar
  */

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

@@ -81,6 +81,9 @@
 /**
  * Pagetitle
  */
+/**
+ * TopnewsMostsearched
+ */
 /**
  * Calendar
  */

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

@@ -81,6 +81,9 @@
 /**
  * Pagetitle
  */
+/**
+ * TopnewsMostsearched
+ */
 /**
  * Calendar
  */

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

@@ -81,6 +81,9 @@
 /**
  * Pagetitle
  */
+/**
+ * TopnewsMostsearched
+ */
 /**
  * Calendar
  */