@oiz/stzh-components 4.9.0-beta2 → 4.9.0-beta4

package/dist/components/p-CiCuCiqu.js

@@ -0,0 +1,262 @@
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-BOU3cRYl.js';
+import { c as camelCase, h as hasSlot } from './p-CN5apKPb.js';
+import { S as StzhInputDescription } from './p-CF6aqBg9.js';
+import { d as defineCustomElement$3 } from './p-DkuigYKB.js';
+import { d as defineCustomElement$2 } from './p-Bk_CuXEU.js';
+import { d as defineCustomElement$1 } from './p-CEPvA7qH.js';
+
+const stzhRadiogroupCss = () => `.sc-stzh-radiogroup-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-radiogroup-h,[stzh-hidden].sc-stzh-radiogroup-h{display:none}.sc-stzh-radiogroup-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-radiogroup-h *.sc-stzh-radiogroup,.sc-stzh-radiogroup-h *.sc-stzh-radiogroup::before,.sc-stzh-radiogroup-h *.sc-stzh-radiogroup::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-radiogroup-h .has-focus.sc-stzh-radiogroup{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-radiogroup-h .stzh-fylingfocus-focused.sc-stzh-radiogroup{outline-style:none !important}.sc-stzh-radiogroup-h .stzh-fylingfocus-focused.sc-stzh-radiogroup::-moz-focus-inner{border:0 !important}.sc-stzh-radiogroup-h{--legend-color:var(--stzh-radio-group-legend-color, var(--stzh-heading-color))}[disabled].sc-stzh-radiogroup-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}.stzh-radiogroup__marker-symbol.sc-stzh-radiogroup{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-radiogroup__marker-text.sc-stzh-radiogroup{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-radiogroup__description-wrapper.sc-stzh-radiogroup{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-radiogroup__error.sc-stzh-radiogroup,.stzh-radiogroup__description.sc-stzh-radiogroup{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-radiogroup__error.sc-stzh-radiogroup{color:var(--stzh-color-error60)}.stzh-radiogroup__error-list.sc-stzh-radiogroup{list-style:none;margin:0;padding:0}.stzh-radiogroup__description.sc-stzh-radiogroup{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-radiogroup__description-long.sc-stzh-radiogroup{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-radiogroup__description-long.sc-stzh-radiogroup{margin-top:0}}.stzh-radiogroup__description-long-popover.sc-stzh-radiogroup{--width:auto;--max-width:27.3125rem}.stzh-radiogroup__description-long-button.sc-stzh-radiogroup{display:flex;justify-content:center;align-items:center;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-radiogroup.sc-stzh-radiogroup stzh-icon.stzh-radiogroup__description-long-icon.sc-stzh-radiogroup{--size:var(--stzh-icon-size-xsmall)}.stzh-radiogroup--has-error.sc-stzh-radiogroup .stzh-radiogroup__error.sc-stzh-radiogroup,.stzh-radiogroup--has-description.sc-stzh-radiogroup .stzh-radiogroup__description.sc-stzh-radiogroup{margin-top:var(--stzh-space-xxxsmall)}.stzh-radiogroup.sc-stzh-radiogroup{margin:0;padding:0;border:none}.stzh-radiogroup__fields.sc-stzh-radiogroup{display:flex;align-items:flex-start;flex-direction:column;gap:var(--stzh-space-medium)}.stzh-radiogroup__legend.sc-stzh-radiogroup{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--legend-color);padding:0;margin-bottom:var(--stzh-space-xsmall)}.stzh-radiogroup__marker.sc-stzh-radiogroup{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-radiogroup--hide-legend.sc-stzh-radiogroup .stzh-radiogroup__legend.sc-stzh-radiogroup{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-radiogroup--is-invalid.sc-stzh-radiogroup .stzh-radiogroup__legend.sc-stzh-radiogroup,.stzh-radiogroup--has-error.sc-stzh-radiogroup .stzh-radiogroup__legend.sc-stzh-radiogroup{color:var(--stzh-color-error60)}.stzh-radiogroup--is-disabled.sc-stzh-radiogroup .stzh-radiogroup__legend.sc-stzh-radiogroup{color:var(--stzh-color-grey60)}.stzh-radiogroup--direction-horizontal.sc-stzh-radiogroup .stzh-radiogroup__fields.sc-stzh-radiogroup{flex-wrap:wrap;flex-direction:row;row-gap:var(--stzh-space-medium);column-gap:var(--stzh-space-xxlarge)}`;
+
+const SELECTOR_RADIO = "stzh-radio, stzh-button[type=radio], stzh-card";
+let radiogroupCounter = 0;
+const StzhRadiogroup = /*@__PURE__*/ proxyCustomElement(class StzhRadiogroup extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /** Whether the element is disabled or not */
+        this.disabled = false;
+        /** Hide legend to show only for screenreaders */
+        this.hideLegend = false;
+        /** Invalid status */
+        this.invalid = false;
+        /** Required status */
+        this.required = false;
+        /** Hide `(optional)` label (or use `required` inside form to hide it) */
+        this.hideOptional = false;
+        /** Select a radio by value */
+        this.value = "";
+        /** Default value (used by reset) */
+        this.defaultValue = "";
+        /** Direction */
+        this.direction = "vertical";
+        /** Current checked radio element (readonly) */
+        this.checkedRadio = null;
+        /** Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid, required, hide-marker) */
+        this.preventUpdateProperties = [];
+        this._preventUpdateProperties = [];
+        this.handleReset = async () => {
+            this.value = this.defaultValue;
+        };
+        this.init = () => {
+            // update radios
+            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.watchRequired(this.required);
+        };
+    }
+    watchName(newValue) {
+        this.updateRadiosProperty("name", newValue);
+    }
+    watchDisabled(newValue) {
+        this.updateRadiosProperty("disabled", newValue);
+    }
+    watchRequired(newValue) {
+        this.updateRadiosProperty("required", newValue);
+    }
+    watchValue(newValue) {
+        this.updateCheckedRadioByValue(newValue);
+    }
+    errorWatcher(newValue) {
+        if (typeof newValue === "string") {
+            try {
+                this._error = JSON.parse(newValue);
+            }
+            catch (e) {
+                if (newValue) {
+                    this._error = [newValue];
+                }
+                else {
+                    this._error = [];
+                }
+            }
+        }
+        else if (newValue) {
+            this._error = newValue;
+        }
+        else {
+            this._error = [];
+        }
+    }
+    preventUpdatePropertiesWatcher(newValue) {
+        if (typeof newValue === "string") {
+            this._preventUpdateProperties = JSON.parse(newValue);
+        }
+        else {
+            this._preventUpdateProperties = newValue;
+        }
+    }
+    resetListener(event) {
+        if (event.target.contains(this.element)) {
+            requestAnimationFrame(() => {
+                this.handleReset();
+            });
+        }
+    }
+    onChange(event) {
+        this.value = event.detail.value;
+    }
+    updateRadiosProperty(prop, value) {
+        this.radios.forEach((radio) => {
+            if (prop === "disabled") {
+                // Only set the disabled if the radio is not already disabled
+                if (!radio.disabled) {
+                    radio.disabled = value;
+                }
+            }
+            else 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;
+    }
+    updateCheckedRadioByValue(value) {
+        this.checkedRadio = this.radios.find(radio => radio.value === value);
+        if (this.checkedRadio) {
+            this.checkedRadio.checked = true;
+        }
+        this.uncheckRadios();
+    }
+    uncheckRadios() {
+        // make sure that no other radios are checked than the current one or no one
+        this.radios.forEach((radio) => {
+            if (!this.checkedRadio || radio !== this.checkedRadio) {
+                radio.checked = false;
+            }
+        });
+    }
+    componentDidLoad() {
+        this.defaultValue = this.defaultValue ? this.defaultValue : this.value;
+    }
+    async componentWillLoad() {
+        this.radiogroupId = `stzh-radiogroup-${radiogroupCounter++}`;
+        this.errorWatcher(this.error);
+        this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);
+        if (!this.localization) {
+            this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "radiogroup");
+        }
+    }
+    componentShouldUpdate(_newValue, _oldValue, prop) {
+        return prop !== "checkedRadio";
+    }
+    componentDidRender() {
+        this.init();
+    }
+    connectedCallback() {
+        if (!this.value) {
+            this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));
+            // try to find a checkbox that might has checked set to true
+            const checkedRadio = this.radios.find(radio => radio.checked);
+            if (checkedRadio) {
+                this.value = checkedRadio.value;
+            }
+        }
+        this.observer = new MutationObserver(this.init);
+        this.observer.observe(this.element, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
+    render() {
+        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,
+            "stzh-radiogroup--has-description-long": descriptionLongUsed,
+            "stzh-radiogroup--has-error": this.errorUsed,
+            "stzh-radiogroup--is-required": this.required,
+            "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,
+        };
+        return (h(Host, { key: '899a1955959d8aaa4efe64765d27627841178eae', "is-invalid": this.invalid || this.errorUsed }, h("fieldset", { key: '58f9bbae7466c976953e4aae8cfe640449a8a2eb', class: classes }, this.legend && (h("legend", { key: 'f37de0069671e98b92e88a91d884f68031571a01', class: "stzh-radiogroup__legend" }, this.legend, !this.hideOptional && (h("span", { key: 'e312c32c3dfad5959721f1b8661fd0e16435fb94', class: "stzh-radiogroup__marker" }, h("span", { key: '7db2bf5b7a30086b810f1d26914bf9106528bbea', class: "stzh-radiogroup__marker-symbol", "aria-hidden": "true" }, this.required
+            ? this.localization.$globals.requiredFieldMarker
+            : this.localization.$globals.optionalFieldMarker), h("span", { key: '4475d36e61070e43bfc9864caf0000c0ce3d4de4', class: "stzh-radiogroup__marker-text" }, this.required
+            ? this.localization.$globals.requiredFieldText
+            : this.localization.$globals.optionalFieldText))))), h("div", { key: 'dd084175dac3b689df8476c0caf3042ba256cc68', class: "stzh-radiogroup__fields" }, h("slot", { key: '98c4cc78cf74f258f41f83edb7075ab4051bf27b' })), (this.errorUsed || this.description || this.descriptionLong) && (h(StzhInputDescription, { key: 'ee773c4ac851008a09a71cd8704c6eb85df38fcc', 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 })))));
+    }
+    get element() { return this; }
+    static get watchers() { return {
+        "name": ["watchName"],
+        "disabled": ["watchDisabled"],
+        "required": ["watchRequired"],
+        "value": ["watchValue"],
+        "error": ["errorWatcher"],
+        "preventUpdateProperties": ["preventUpdatePropertiesWatcher"]
+    }; }
+    static get style() { return stzhRadiogroupCss(); }
+}, [262, "stzh-radiogroup", {
+        "localization": [16],
+        "disabled": [516],
+        "name": [513],
+        "legend": [1],
+        "hideLegend": [516, "hide-legend"],
+        "invalid": [516],
+        "required": [516],
+        "hideOptional": [516, "hide-optional"],
+        "value": [1025],
+        "defaultValue": [1025, "default-value"],
+        "direction": [513],
+        "description": [1],
+        "descriptionLong": [1, "description-long"],
+        "descriptionLongTitle": [1, "description-long-title"],
+        "error": [1],
+        "checkedRadio": [8, "checked-radio"],
+        "preventUpdateProperties": [1, "prevent-update-properties"]
+    }, [[4, "reset", "resetListener"], [0, "stzhChange", "onChange"]], {
+        "name": ["watchName"],
+        "disabled": ["watchDisabled"],
+        "required": ["watchRequired"],
+        "value": ["watchValue"],
+        "error": ["errorWatcher"],
+        "preventUpdateProperties": ["preventUpdatePropertiesWatcher"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["stzh-radiogroup", "stzh-icon", "stzh-popover", "stzh-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "stzh-radiogroup":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), StzhRadiogroup);
+            }
+            break;
+        case "stzh-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "stzh-popover":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "stzh-text":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { StzhRadiogroup as S, defineCustomElement as d };
+//# sourceMappingURL=p-CiCuCiqu.js.map
+
+//# sourceMappingURL=p-CiCuCiqu.js.map

package/dist/components/p-CiCuCiqu.js.map

@@ -0,0 +1 @@
+{"file":"p-CiCuCiqu.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-radiogroup/stzh-radiogroup.scss?tag=stzh-radiogroup&encapsulation=scoped","src/components/stzh-radiogroup/stzh-radiogroup.tsx"],"sourcesContent":[":host {\n  --legend-color: var(--stzh-radio-group-legend-color, #{$headingColor});\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-radiogroup {\n  @include input-description;\n  margin: 0;\n  padding: 0;\n  border: none;\n\n  &__fields {\n    display: flex;\n    align-items: flex-start;\n    flex-direction: column;\n    gap: space(\"medium\");\n  }\n\n  &__legend {\n    @include font(\"heavy\");\n    @include fontSize(\"micro\");\n    color: var(--legend-color);\n    padding: 0;\n    margin-bottom: space(\"xsmall\");\n  }\n\n  &__marker {\n    @include fontSize(\"nano\");\n    margin-left: calc(-0.25em + #{space(\"xsmall\")});\n  }\n\n  &--hide-legend &__legend {\n    @include visuallyhidden;\n  }\n\n  &--is-invalid &__legend,\n  &--has-error &__legend {\n    color: $colorError60;\n  }\n\n  &--is-disabled &__legend {\n    color: $colorGrey60;\n  }\n\n  &--direction-horizontal &__fields {\n    flex-wrap: wrap;\n    flex-direction: row;\n    row-gap: space(\"medium\");\n    column-gap: space(\"xxlarge\");\n  }\n}\n","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 \"../../index\";\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  /**\n   * **Do not use this property. It will be deprecated with the next major release.**\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 === \"disabled\") {\n        // Only set the disabled if the radio is not already disabled\n        if (!radio.disabled) {\n          radio.disabled = value;\n        }\n      } else 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\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.errorUsed || this.description || this.descriptionLong) && (\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"],"version":3}

package/dist/components/p-CjpVcYf4.js

@@ -0,0 +1,271 @@
+import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host, t as transformTag } from './p-BOU3cRYl.js';
+import { a as addWordBreakToLinks } from './p-CN5apKPb.js';
+import { d as defineCustomElement$6 } from './p-6ax-mKBx.js';
+import { d as defineCustomElement$5 } from './p-8LohUgRI.js';
+import { d as defineCustomElement$4 } from './p-DkuigYKB.js';
+import { d as defineCustomElement$3 } from './p-CphAvN9z.js';
+import { d as defineCustomElement$2 } from './p-CEPvA7qH.js';
+import { d as defineCustomElement$1 } from './p-Drej3tyF.js';
+
+const stzhDatalistItemCss = () => `.sc-stzh-datalist-item-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-datalist-item-h,[stzh-hidden].sc-stzh-datalist-item-h{display:none}.sc-stzh-datalist-item-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datalist-item-h *.sc-stzh-datalist-item,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::before,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-datalist-item-h .has-focus.sc-stzh-datalist-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-datalist-item-h .stzh-fylingfocus-focused.sc-stzh-datalist-item{outline-style:none !important}.sc-stzh-datalist-item-h .stzh-fylingfocus-focused.sc-stzh-datalist-item::-moz-focus-inner{border:0 !important}.sc-stzh-datalist-item-h{--value-font-family:var(--stzh-font-family-medium);--value-font-weight:var(--stzh-font-weight-medium);--value-color:inherit;--action-display:flex;--leading-icon-color:var(--stzh-color-grey90);--nested-display:var(--stzh-datalist-item-nested-display, block);--wrapper-display:var(--stzh-datalist-item-wrapper-display, contents);--vertical-wrapper-padding:var(
+    --stzh-datalist-item-vertical-wrapper-padding,
+    var(--stzh-space-xsmall)
+  );--text-overflow:clip;--white-space:normal;--overflow:visible;--width:initial;--max-width:initial;display:contents}[href].sc-stzh-datalist-item-h:not([href=""]),[a11y-expanded].sc-stzh-datalist-item-h,[a11y-controls].sc-stzh-datalist-item-h{--value-color:var(--stzh-link-color);--value-hover-color:var(--stzh-link-hover-color)}.value-truncate.sc-stzh-datalist-item-h{--text-overflow:ellipsis;--white-space:nowrap;--overflow:hidden;--max-width:100%}.stzh-datalist-item.sc-stzh-datalist-item{position:relative;-webkit-text-decoration-line:none;text-decoration-line:none;display:var(--wrapper-display);align-items:center}.stzh-datalist-item__nested.sc-stzh-datalist-item{display:contents}.stzh-datalist-item__nested-inner.sc-stzh-datalist-item{display:var(--nested-display);grid-column:var(--full-grid-column)}.stzh-datalist-item__vhidden.sc-stzh-datalist-item{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-datalist-item__wrapper.sc-stzh-datalist-item{flex-grow:1;display:grid}.stzh-datalist-item__leading.sc-stzh-datalist-item,.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item__action-list.sc-stzh-datalist-item{color:inherit;display:flex;text-align:left;appearance:none;font-family:inherit;background:transparent;border:none;padding:0;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-datalist-item__leading.is-button.sc-stzh-datalist-item,.stzh-datalist-item__leading.is-link.sc-stzh-datalist-item,.stzh-datalist-item__value.is-button.sc-stzh-datalist-item,.stzh-datalist-item__value.is-link.sc-stzh-datalist-item,.stzh-datalist-item__label.is-button.sc-stzh-datalist-item,.stzh-datalist-item__label.is-link.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-button.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-link.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-button.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-link.sc-stzh-datalist-item{cursor:pointer}.stzh-datalist-item__leading.sc-stzh-datalist-item{flex-shrink:0}.stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty){padding-right:var(--stzh-space-xsmall)}.stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{color:var(--leading-icon-color);transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__value-wrapper.sc-stzh-datalist-item{display:flex;align-items:center;gap:var(--stzh-space-xsmall);color:var(--value-color);transition:color var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__value.sc-stzh-datalist-item{flex-grow:1;flex-direction:column;min-width:0}.stzh-datalist-item__value-text.sc-stzh-datalist-item{--color:initial;min-width:0;font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 900px){.stzh-datalist-item__value-text.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-datalist-item__value-text.sc-stzh-datalist-item{font-family:var(--value-font-family);font-weight:var(--value-font-weight);width:auto}.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height))}@media screen and (min-width: 900px){.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-datalist-item__meta.sc-stzh-datalist-item{justify-content:flex-end}.stzh-datalist-item__meta-text.sc-stzh-datalist-item{display:flex;gap:var(--stzh-space-xsmall);color:var(--stzh-color-grey70)}.stzh-datalist-item__label.sc-stzh-datalist-item{color:var(--stzh-color-grey90)}.stzh-datalist-item__action-list.sc-stzh-datalist-item{display:var(--action-display);justify-content:center;text-align:center}.stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-medium)}.stzh-datalist-item__action.is-non-interactive.sc-stzh-datalist-item{display:flex;justify-content:center;align-items:center;width:var(--stzh-form-input-small-height);height:var(--stzh-form-input-small-height)}.stzh-datalist-item__interactive.sc-stzh-datalist-item{position:absolute;top:0;left:0}.stzh-datalist-item__readspeaker.sc-stzh-datalist-item{width:-moz-fit-content;width:fit-content}.stzh-datalist-item--is-button.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-closed.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:inline-flex}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item .stzh-datalist-item__value-text.sc-stzh-datalist-item{-webkit-text-decoration-line:underline;text-decoration-line:underline}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__value-wrapper.sc-stzh-datalist-item{color:var(--value-hover-color)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__wrapper.sc-stzh-datalist-item{flex-grow:inherit}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__wrapper.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--vertical-wrapper-padding);padding-bottom:var(--vertical-wrapper-padding)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{flex-direction:column;align-items:flex-start}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xxsmall);padding-bottom:var(--stzh-space-xxsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-bottom:var(--stzh-space-xxsmall);padding-top:calc(var(--stzh-space-xxsmall) + 0.75rem)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__readspeaker.sc-stzh-datalist-item{padding-bottom:var(--stzh-space-xxsmall);padding-top:var(--stzh-space-xxsmall);padding-left:var(--stzh-space-medium)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta-status.sc-stzh-datalist-item+.stzh-datalist-item__meta-text.sc-stzh-datalist-item{margin-left:var(--stzh-space-xsmall)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item{color:var(--stzh-color-grey70)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__value-text.sc-stzh-datalist-item{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-small)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty)+.stzh-datalist-item__value.sc-stzh-datalist-item{padding-left:var(--stzh-space-medium)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-medium)}.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);color:var(--stzh-color-grey80)}.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:0;padding-bottom:0}@media screen and (min-width: 600px){.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-small)}}.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty)+.stzh-datalist-item__value.sc-stzh-datalist-item{padding-left:var(--stzh-space-medium)}@media screen and (max-width: 599px){.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty)+.stzh-datalist-item__value.sc-stzh-datalist-item{padding-left:0}}`;
+
+let datalistItemCounter = 0;
+const StzhDatalistItem = /*@__PURE__*/ proxyCustomElement(class StzhDatalistItem extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.stzhItemActionClick = createEvent(this, "stzhItemActionClick");
+        this.stzhClick = createEvent(this, "stzhClick");
+        /** Icon position */
+        this.iconPosition = "right";
+        /** Label */
+        this.label = "";
+        /** Value (or use value slot instead) */
+        this.value = "";
+        /** Whether value should be truncate or not */
+        this.valueTruncate = false;
+        /** Readspeaker label */
+        this.readspeakerLabel = "";
+        /** Readspeaker link */
+        this.readspeakerHref = "";
+        /** Meta */
+        this.meta = "";
+        this._meta = [];
+        /** Status Label */
+        this.statusLabel = "";
+        /** Status Type */
+        this.statusType = "default";
+        /** Whether the item has child items (only used internally by stzh-datalist). */
+        this.hasNested = false;
+        this.direction = "vertical";
+        this.variant = "default";
+        this.bigLabel = false;
+        this.external = false;
+        this.isPhone = false;
+        this.onActionClick = (originalEvent) => {
+            this.stzhItemActionClick.emit({
+                component: "stzh-datalist-item",
+                originalEvent,
+            });
+        };
+        this.onClick = (event) => {
+            this.stzhClick.emit({
+                component: "stzh-datalist-item",
+                originalEvent: event,
+                href: this.href,
+            });
+        };
+        this.handleDirectionChange = (event) => {
+            this.direction = event.detail.value;
+        };
+        this.handleVariantChange = (event) => {
+            this.variant = event.detail.value;
+        };
+        this.handleBigLabelChange = (event) => {
+            this.bigLabel = event.detail.value;
+        };
+    }
+    metaWatcher(newValue) {
+        if (typeof newValue === "string") {
+            try {
+                this._meta = JSON.parse(newValue);
+            }
+            catch (ex) {
+                this._meta = newValue === "" ? [] : [newValue];
+            }
+        }
+        else {
+            this._meta = newValue;
+        }
+    }
+    externalWatcher() {
+        this.external = this.rel && this.rel.includes("external");
+    }
+    hrefWatcher() {
+        this.isPhone = this.href && (this.href.startsWith("tel:") || this.href.startsWith("fax:"));
+    }
+    addWordBreakToLinks() {
+        var _a;
+        const links = Array.from(((_a = this.element) === null || _a === void 0 ? void 0 : _a.getElementsByClassName("stzh-datalist-item__value-text")) || []);
+        addWordBreakToLinks(links);
+    }
+    renderInner(isButton, hasActionButton) {
+        const Item = isButton ? "button" : this.href ? "a" : "div";
+        const Icon = () => (h(Fragment, null, (this.href || this.icon) && !hasActionButton && !isButton && (h("div", { class: "stzh-datalist-item__label-icon" }, h("stzh-icon", { class: "stzh-datalist-item__icon", name: this.icon ? this.icon : this.isPhone ? "phone" : this.external && "external-link" }))), isButton && (h("div", { class: "stzh-datalist-item__label-icon" }, h("stzh-icon", { class: "stzh-datalist-item__icon is-closed", name: this.icon ? this.icon : "plus" }), h("stzh-icon", { class: "stzh-datalist-item__icon is-open", name: this.icon ? this.icon : "minus" })))));
+        return (h(Fragment, null, this.variant === "table" && (h(Item, { "aria-hidden": this.label ? null : "true", tabindex: "-1", id: `${this.datalistItemId}-label`, class: {
+                "stzh-datalist-item__label": true,
+                "is-button": isButton,
+                "is-link": !!this.href,
+            }, href: this.href, rel: this.rel, target: this.target, download: this.download, onClick: this.onClick }, this.label)), h(Item, { id: `${this.datalistItemId}-value`, class: {
+                "stzh-datalist-item__value": true,
+                "is-button": isButton,
+                "is-link": !!this.href,
+            }, href: this.href, rel: this.rel, target: this.target, download: this.download, "aria-labelledby": Item !== "div"
+                ? `${this.variant === "table" ? `${this.datalistItemId}-label` : ""} ${this.datalistItemId}-value ${this.datalistItemId}-meta`
+                : null, "aria-controls": this.a11yControls || null, "aria-expanded": typeof this.a11yExpanded !== "undefined" ? (this.a11yExpanded ? "true" : "false") : null, onClick: this.onClick }, this.variant === "default" && h("div", { class: "stzh-datalist-item__label" }, this.label), this.external && (h("div", { class: "stzh-datalist-item__vhidden" }, this.localization.$globals.externalLinkLabel)), this.download && (h("div", { class: "stzh-datalist-item__vhidden" }, this.localization.$globals.downloadLinkLabel)), h("div", { class: "stzh-datalist-item__value-wrapper" }, this.iconPosition === "left" && h(Icon, null), this.value ? (h("stzh-text", { curve: "none", class: "stzh-datalist-item__value-text", innerHTML: this.value })) : (h("stzh-text", { curve: "none", class: "stzh-datalist-item__value-text" }, h("slot", { name: "value" }))), this.iconPosition === "right" && h(Icon, null))), h(Item, { "aria-hidden": this.statusLabel || this._meta.length > 0 ? null : "true", tabindex: "-1", id: `${this.datalistItemId}-meta`, class: {
+                "stzh-datalist-item__meta": true,
+                "is-button": isButton,
+                "is-link": !!this.href,
+            }, href: this.href, rel: this.rel, target: this.target, download: this.download, onClick: this.onClick }, this.statusLabel && (h("stzh-status", { class: "stzh-datalist-item__meta-status", label: this.statusLabel, type: this.statusType })), this._meta.length > 0 && (h("span", { class: "stzh-datalist-item__meta-text" }, this._meta.map((meta, index) => (h(Fragment, null, h("span", { class: "stzh-datalist-item__meta-text-inner" }, meta), index + 1 !== this._meta.length && h("span", { class: "stzh-datalist-item__meta-separator" }, "|"))))))), this.readspeakerHref && this.readspeakerLabel && (h("stzh-button", { class: "stzh-datalist-item__readspeaker", variant: "tertiary-plain", "no-padding-left": "true", "no-padding-right": "true", "icon-position": "right", icon: "volume-medium", size: "small", href: this.readspeakerHref, target: "_blank" }, this.readspeakerLabel))));
+    }
+    renderLeadingIcon(isButton) {
+        const Item = isButton ? "button" : this.href ? "a" : "div";
+        return (h(Item, { role: "presentation", "aria-hidden": "true", tabindex: "-1", class: {
+                "stzh-datalist-item__leading": true,
+                "is-button": isButton,
+                "is-link": !!this.href,
+            }, href: this.href, rel: this.rel, target: this.target, download: this.download, onClick: this.onClick }, this.leadingIcon && (h("div", { class: "stzh-datalist-item__leading-icon-container" }, h("stzh-icon", { class: "stzh-datalist-item__leading-icon", name: this.leadingIcon })))));
+    }
+    async componentDidLoad() {
+        // execute connectedCallbck again, because sometimes has problem rendering
+        this.connectedCallback();
+        this.addWordBreakToLinks();
+    }
+    async componentWillLoad() {
+        this.datalistItemId = `stzh-datalist-item-${datalistItemCounter++}`;
+        this.metaWatcher(this.meta);
+        this.externalWatcher();
+        this.hrefWatcher();
+        if (!this.localization) {
+            this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "datalist-item");
+        }
+    }
+    async connectedCallback() {
+        var _a, _b, _c;
+        this.datalist = this.element.closest("stzh-datalist");
+        if (this.datalist) {
+            this.variant = this.datalist.variant;
+            this.bigLabel = this.datalist.bigLabel;
+            this.direction = await this.datalist.getCurrentDirection();
+            (_a = this.datalist) === null || _a === void 0 ? void 0 : _a.addEventListener("stzhDirectionChange", this.handleDirectionChange);
+            (_b = this.datalist) === null || _b === void 0 ? void 0 : _b.addEventListener("stzhVariantChange", this.handleVariantChange);
+            (_c = this.datalist) === null || _c === void 0 ? void 0 : _c.addEventListener("stzhBigLabelChange", this.handleBigLabelChange);
+        }
+    }
+    disconnectedCallback() {
+        var _a, _b, _c;
+        if (this.datalist) {
+            (_a = this.datalist) === null || _a === void 0 ? void 0 : _a.removeEventListener("stzhDirectionChange", this.handleDirectionChange);
+            (_b = this.datalist) === null || _b === void 0 ? void 0 : _b.removeEventListener("stzhVariantChange", this.handleVariantChange);
+            (_c = this.datalist) === null || _c === void 0 ? void 0 : _c.removeEventListener("stzhBigLabelChange", this.handleBigLabelChange);
+            this.datalist = null;
+        }
+    }
+    render() {
+        const isButton = typeof this.a11yExpanded !== "undefined" || typeof this.a11yControls !== "undefined";
+        const hasActionButton = !!((!this.href || this.iconHref || this.iconTooltip) && this.icon);
+        const classes = {
+            "stzh-datalist-item": true,
+            "stzh-datalist-item--is-interactive": !!this.href || isButton,
+            "stzh-datalist-item--is-link": !!this.href,
+            "stzh-datalist-item--is-button": isButton,
+            "stzh-datalist-item--is-expanded": this.a11yExpanded,
+            "stzh-datalist-item--big-label": this.bigLabel,
+            [`stzh-datalist-item--direction-${this.direction}`]: !!this.direction && this.variant === "default",
+            [`stzh-datalist-item--${this.variant}`]: !!this.variant,
+        };
+        let ActionItem = isButton ? "button" : hasActionButton ? "div" : "a";
+        const ActionButton = () => {
+            return (h("stzh-button", { class: {
+                    "stzh-datalist-item__action": true,
+                    "is-button": true,
+                }, variant: "tertiary", size: "small", "aria-label": this.iconLabel, iconOnly: true, href: this.iconHref, icon: this.icon, onClick: this.onActionClick }));
+        };
+        return (h(Host, { role: "listitem", class: { "value-truncate": this.valueTruncate } }, h("div", { class: classes }, this.direction === "horizontal" || this.variant === "table" ? (h(Fragment, null, this.renderLeadingIcon(isButton), this.renderInner(isButton, hasActionButton))) : (h(Fragment, null, this.renderLeadingIcon(isButton), h("div", { class: "stzh-datalist-item__wrapper" }, this.renderInner(isButton, hasActionButton)))), h(ActionItem, { role: hasActionButton ? null : "presentation", "aria-hidden": hasActionButton ? null : "true", tabindex: "-1", class: {
+                "stzh-datalist-item__action-list": true,
+                "is-button": isButton,
+                "is-link": !!this.href && !this.iconHref,
+            }, href: !this.iconHref ? this.href : null, rel: !this.iconHref ? this.rel : null, target: !this.iconHref ? this.target : null, download: !this.iconHref ? this.download : null }, hasActionButton &&
+            (this.iconTooltip ? (h("stzh-tooltip", { content: this.iconTooltip }, ActionButton())) : (ActionButton()))), h("div", { class: "stzh-datalist-item__spacer" })), this.hasNested && (h("div", { class: "stzh-datalist-item__nested" }, h("div", { class: "stzh-datalist-item__nested-inner" }, h("slot", null))))));
+    }
+    get element() { return this; }
+    static get watchers() { return {
+        "meta": ["metaWatcher"],
+        "rel": ["externalWatcher"],
+        "href": ["hrefWatcher"]
+    }; }
+    static get style() { return stzhDatalistItemCss(); }
+}, [262, "stzh-datalist-item", {
+        "localization": [16],
+        "href": [513],
+        "rel": [1],
+        "target": [1],
+        "download": [1],
+        "leadingIcon": [1, "leading-icon"],
+        "icon": [1],
+        "iconPosition": [1, "icon-position"],
+        "iconLabel": [1, "icon-label"],
+        "iconTooltip": [1, "icon-tooltip"],
+        "iconHref": [1, "icon-href"],
+        "label": [1],
+        "value": [1],
+        "valueTruncate": [4, "value-truncate"],
+        "readspeakerLabel": [1, "readspeaker-label"],
+        "readspeakerHref": [1, "readspeaker-href"],
+        "meta": [513],
+        "statusLabel": [513, "status-label"],
+        "statusType": [1, "status-type"],
+        "a11yExpanded": [516, "a11y-expanded"],
+        "a11yControls": [1, "a11y-controls"],
+        "hasNested": [4, "has-nested"],
+        "direction": [32],
+        "variant": [32],
+        "bigLabel": [32]
+    }, undefined, {
+        "meta": ["metaWatcher"],
+        "rel": ["externalWatcher"],
+        "href": ["hrefWatcher"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["stzh-datalist-item", "stzh-badge", "stzh-button", "stzh-icon", "stzh-status", "stzh-text", "stzh-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "stzh-datalist-item":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), StzhDatalistItem);
+            }
+            break;
+        case "stzh-badge":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$6();
+            }
+            break;
+        case "stzh-button":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$5();
+            }
+            break;
+        case "stzh-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$4();
+            }
+            break;
+        case "stzh-status":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "stzh-text":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "stzh-tooltip":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { StzhDatalistItem as S, defineCustomElement as d };
+//# sourceMappingURL=p-CjpVcYf4.js.map
+
+//# sourceMappingURL=p-CjpVcYf4.js.map