@oiz/stzh-components 3.0.0-beta5 → 3.0.0

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

package/dist/collection/components/stzh-progressbar-item/stzh-progressbar-item.css

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -22,10 +22,10 @@ export class StzhRadiogroup {
       this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));
       this.updateRadiosProperty("hide-optional", true);
       this.updateRadiosProperty("a11y-describedby", `${this.radiogroupId}-description`);
+      this.updateRadiosProperty("invalid", this.invalid || this.errorUsed);
       this.watchValue(this.value);
       this.watchName(this.name);
       this.watchDisabled(this.disabled);
-      this.watchInvalid(this.invalid);
       this.watchRequired(this.required);
     };
     this.localization = undefined;
@@ -52,9 +52,6 @@ export class StzhRadiogroup {
   watchDisabled(newValue) {
     this.updateRadiosProperty("disabled", newValue);
   }
-  watchInvalid(newValue) {
-    this.updateRadiosProperty("invalid", newValue);
-  }
   watchRequired(newValue) {
     this.updateRadiosProperty("required", newValue);
   }
@@ -107,6 +104,10 @@ export class StzhRadiogroup {
       }
     });
   }
+  get errorUsed() {
+    var _a;
+    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);
     if (this.checkedRadio) {
@@ -160,22 +161,20 @@ export class StzhRadiogroup {
     }
   }
   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;
     const classes = {
       "stzh-radiogroup": true,
       "stzh-radiogroup--has-description": descriptionUsed,
       "stzh-radiogroup--has-description-long": descriptionLongUsed,
-      "stzh-radiogroup--has-error": errorUsed,
+      "stzh-radiogroup--has-error": this.errorUsed,
       "stzh-radiogroup--is-required": this.required,
       "stzh-radiogroup--is-disabled": this.disabled,
-      "stzh-radiogroup--is-invalid": this.invalid || errorUsed,
+      "stzh-radiogroup--is-invalid": this.invalid || this.errorUsed,
       "stzh-radiogroup--hide-legend": this.hideLegend,
       [`stzh-radiogroup--direction-${this.direction}`]: !!this.direction
     };
-    return (h(Host, { "is-invalid": this.invalid || errorUsed }, h("fieldset", { class: classes }, this.legend &&
+    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
@@ -513,9 +512,6 @@ export class StzhRadiogroup {
       }, {
         "propName": "disabled",
         "methodName": "watchDisabled"
-      }, {
-        "propName": "invalid",
-        "methodName": "watchInvalid"
       }, {
         "propName": "required",
         "methodName": "watchRequired"

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(\"invalid\")\n  watchInvalid(newValue: boolean) {\n    this.updateRadiosProperty(\"invalid\", 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 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\n    this.updateRadiosProperty(\"hide-optional\", true);\n    this.updateRadiosProperty(\"a11y-describedby\", `${this.radiogroupId}-description`);\n\n    this.watchValue(this.value);\n    this.watchName(this.name);\n    this.watchDisabled(this.disabled);\n    this.watchInvalid(this.invalid);\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    const errorUsed = hasSlot(this.element, 'error') || this._error?.length > 0;\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\": errorUsed,\n      \"stzh-radiogroup--is-required\": this.required,\n      \"stzh-radiogroup--is-disabled\": this.disabled,\n      \"stzh-radiogroup--is-invalid\": this.invalid || 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 || 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 {\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"]}

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

@@ -47,3 +47,13 @@ export const Default = {
     legend: 'Department options'
   }
 };
+
+export const WithError = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    value: 'UVZ',
+    name: 'department_story_1',
+    legend: 'Department options',
+    error: 'Error'
+  }
+};

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */
@@ -221,6 +221,11 @@ stzh-readspeaker .stzh-fylingfocus-focused::-moz-focus-inner {
     --dropdown-settings-top: var(--stzh-readspeaker-dropdown-settings-top, var(--stzh-form-input-tiny-height));
   }
 }
+@media print {
+  stzh-readspeaker {
+    display: none;
+  }
+}
 
 .stzh-readspeaker {
   position: relative;

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

@@ -28,6 +28,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -58,9 +61,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */
@@ -168,6 +168,7 @@ stzh-search {
   display: block;
   /* default outline value, which will be applied to all elements receiving focus
   the .has-focus class is used by the focus target */
+  --filter-background-color: var(--stzh-search-filter-background-color, var(--stzh-color-grey10));
   --grid-template-areas:
   "filters-main filters-main filters-main filters-main"
   "results results results results";
@@ -296,7 +297,7 @@ stzh-search:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-f
 }
 .stzh-search__filters-main:not(:empty) {
   padding: var(--stzh-space-xlarge);
-  background-color: var(--stzh-color-grey10);
+  background-color: var(--filter-background-color);
 }
 @media screen and (min-width: 900px) {
   .stzh-search__filters-main:not(:empty) {
@@ -313,7 +314,7 @@ stzh-search:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-f
 }
 .stzh-search__filters-aside:not(:empty) {
   padding: var(--stzh-space-xlarge);
-  background-color: var(--stzh-color-grey10);
+  background-color: var(--filter-background-color);
 }
 @media screen and (min-width: 900px) {
   .stzh-search__filters-aside:not(:empty) {

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

package/dist/collection/components/stzh-skin-portal-mitwirken/stzh-skin-portal-mitwirken.css

@@ -28,6 +28,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -58,9 +61,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */
@@ -181,6 +181,18 @@ body {
     -webkit-print-color-adjust: exact !important;
     print-color-adjust: exact !important;
   }
+
+  .stzh-print-break-after-always {
+    page-break-after: always !important;
+    -moz-column-break-after: always !important;
+         break-after: always !important;
+  }
+
+  .stzh-print-break-inside-avoid {
+    page-break-inside: avoid !important;
+    -moz-column-break-inside: avoid !important;
+         break-inside: avoid !important;
+  }
 }
 
 /* Helper for enabling smooth scrolling */
@@ -1188,6 +1200,9 @@ the .has-focus class is used by the focus target */
   /* Header */
   --stzh-header-logobar-background-color: var(--stzh-color-primary70);
 
+  /* Footer */
+  --stzh-footer-background-color: var(--stzh-color-primary100);
+
   /* Accordion */
   --stzh-accordion-content-background: var(--stzh-color-secondary10);
 

package/dist/collection/components/stzh-skin-storybook-preview/stzh-skin-storybook-preview.css

@@ -28,6 +28,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -58,9 +61,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */