npm - @oiz/stzh-components - Versions diffs - 4.12.1 → 4.13.0-beta1 - Mend

@oiz/stzh-components 4.12.1 → 4.13.0-beta1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1081) hide show

package/dist/collection/components/stzh-imagecomparison/stzh-imagecomparison.js CHANGED Viewed

@@ -34,9 +34,9 @@ export class StzhImageComparison {
         const classes = {
             "stzh-imagecomparison": true,
         };
-        return (h(Host, { key: '1c97a0a627febed3b7f691efed1f5ef6f7a7cbd5', "aria-roledescription": this.localization.label, style: {
+        return (h(Host, { key: '6ba93f7ab74069f229ac85ab4c35e9c1e9f5884d', "aria-roledescription": this.localization.label, style: {
                 "--exposure": `${this.value.toString()}%`,
-            } }, h("div", { key: '0b08a4adc2171d886a9b1fc1bdc2fbdacc4660ac', class: classes }, h("div", { key: 'dc4c4262d1621ad5a6cb0216115bbd232c722076', class: "stzh-imagecomparison__element" }, h("slot", { key: '4045a2538ec4369e448023dd3574ae8ff8b16a64', name: "image-before" }), h("slot", { key: '481854e7ea1d765010bf6a4ae9c5213f3bf91049', name: "image-after" }), h("label", { key: '03867be00ccf9b2028fd35c09149e8a94c81861f', class: "stzh-imagecomparison__label", "aria-label": this.label || this.localization.label, "aria-describedby": this.a11yDescribedby || null }, h("div", { key: '6be78bb3998220201575b9de718020347ab801d4', class: "stzh-imagecomparison__slider-icon-wrapper" }, h("stzh-icon", { key: '69457905eed68f8fc6ca972c360fa8896551793a', class: "stzh-imagecomparison__slider-icon-left", name: "angle-left" }), h("stzh-icon", { key: 'cf5063dc2b25dbfc7e78d93ded69384363c2e9f0', class: "stzh-imagecomparison__slider-icon-right", name: "angle-right" })), h("div", { key: '863d82f1f7915843a90d5a5b2e5ed9727e36c6d8', class: "stzh-imagecomparison__slider-line" }), h("input", { key: '52e0a1145fe8600a7d7c5715f5e64b817d11fc78', type: "range", class: "stzh-imagecomparison__control", min: "0", max: "100", ref: el => (this.inputElement = el), onInput: this.handleInput })), h("div", { key: 'ebcc398a03c980d58a44f09b460c07f4abb2c0db', class: "stzh-imagecomparison__hint-wrapper" }, h("span", { key: 'a75106a531643552183a2f864f87f5907213e4a3', class: "stzh-imagecomparison__hint-left" }, this.hintLeft ? this.hintLeft : h("slot", { name: "hint-left" })), h("span", { key: '04367102b79c53d1692c9557225979ebe55a02ae', class: "stzh-imagecomparison__hint-right" }, this.hintRight ? this.hintRight : h("slot", { name: "hint-right" })))))));
+            } }, h("div", { key: 'cd73daf474c307a50eab9f09450d7c5911f4ed60', class: classes }, h("div", { key: '45a621cd3e43a1df930f968f080adfdf14e84e86', class: "stzh-imagecomparison__element" }, h("slot", { key: '30051aea2b2dd070399aa0864627503e83f34a0b', name: "image-before" }), h("slot", { key: 'f7edc32eb69a6511070e90b50f6ae70c3852c82f', name: "image-after" }), h("label", { key: 'b116d82cfcff52cd01aa19081cdee358b3914188', class: "stzh-imagecomparison__label", "aria-label": this.label || this.localization.label, "aria-describedby": this.a11yDescribedby || null }, h("div", { key: 'aa69c25517769a9f0959bfe2c45c58096feec6a4', class: "stzh-imagecomparison__slider-icon-wrapper" }, h("stzh-icon", { key: '7e9e98753325e5b25cfd7bc5e68993df0f30a087', class: "stzh-imagecomparison__slider-icon-left", name: "angle-left" }), h("stzh-icon", { key: 'f03bf55f825da9baac7b3ac7dc0f1e906a4497c5', class: "stzh-imagecomparison__slider-icon-right", name: "angle-right" })), h("div", { key: '4e52be7d36382996cf303573a43721cd2edb5598', class: "stzh-imagecomparison__slider-line" }), h("input", { key: 'b783650104e31ff3fb551a294b52ba9c3992c825', type: "range", class: "stzh-imagecomparison__control", min: "0", max: "100", ref: el => (this.inputElement = el), onInput: this.handleInput })), h("div", { key: 'ab54b4125c9943410bbe2509cfe5fd02d0bbe316', class: "stzh-imagecomparison__hint-wrapper" }, h("span", { key: '53ab09c653ef36a0c264e206caa63a4e02e9e4f2', class: "stzh-imagecomparison__hint-left" }, this.hintLeft ? this.hintLeft : h("slot", { name: "hint-left" })), h("span", { key: '64f44bb6b0222f28877d393d1032ad312bc49a21', class: "stzh-imagecomparison__hint-right" }, this.hintRight ? this.hintRight : h("slot", { name: "hint-right" })))))));
     }
     static get is() { return "stzh-imagecomparison"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-input/stzh-input.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { hasSlot } from "../../utils/utils";
+import { hasDefaultSlotContent, hasSlot } from "../../utils/utils";
 import { StzhInputDescription } from "./stzh-input-description";
 let inputCounter = 0;
 /**
@@ -53,19 +53,19 @@ export class StzhInput {
         this.size = "default";
         /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
         this.a11yDescribedby = "";
+        /**
+         * Whether the component has meaningful default-slot content.
+         * Becomes obsolete with the implementation of PDESI-1908.
+         */
         this.hasDefaultSlot = false;
+        /**
+         * Indicates whether default-slot content detection has run at least once.
+         * Used to avoid rendering state-dependent markup before the slot content
+         * has been evaluated.
+         * Becomes obsolete with the implementation of PDESI-1908.
+         */
         this.hasResolvedDefaultSlot = false;
         this.focusedByInput = false;
-        /** Updates default-slot state after initial render and later slot content changes. */
-        this.updateDefaultSlotState = () => {
-            const hasDefaultSlot = this.hasDefaultLabelContent();
-            if (this.hasDefaultSlot !== hasDefaultSlot) {
-                this.hasDefaultSlot = hasDefaultSlot;
-            }
-            if (!this.hasResolvedDefaultSlot) {
-                this.hasResolvedDefaultSlot = true;
-            }
-        };
         this.onClearClick = async (event) => {
             this.value = "";
             this.input.focus();
@@ -145,6 +145,19 @@ export class StzhInput {
                 originalEvent: event,
             });
         };
+        /**
+         * Re-evaluates default-slot content and updates the related render state.
+         * Becomes obsolete with implementation of PDESI-1908.
+         */
+        this.updateDefaultSlotState = () => {
+            const hasDefaultSlot = hasDefaultSlotContent(this.element, ["stzh-input"]);
+            if (this.hasDefaultSlot !== hasDefaultSlot) {
+                this.hasDefaultSlot = hasDefaultSlot;
+            }
+            if (!this.hasResolvedDefaultSlot) {
+                this.hasResolvedDefaultSlot = true;
+            }
+        };
     }
     resetListener(event) {
         if (event.target.contains(this.element)) {
@@ -183,24 +196,6 @@ export class StzhInput {
             throw new Error(`Type ${newValue} not supported`);
         }
     }
-    /** Detects default-slot label content, including Stencil's scoped-slot fallback nodes. */
-    hasDefaultLabelContent() {
-        if (hasSlot(this.element)) {
-            return true;
-        }
-        return Array.from(this.element.childNodes).some(node => {
-            var _a, _b;
-            const slotNode = (_a = node["s-nr"]) !== null && _a !== void 0 ? _a : node;
-            if (slotNode.nodeType === Node.TEXT_NODE) {
-                return ((_b = slotNode.textContent) !== null && _b !== void 0 ? _b : "").trim() !== "";
-            }
-            if (slotNode.nodeType === Node.ELEMENT_NODE) {
-                const element = slotNode;
-                return !element.hasAttribute("slot") && !element.classList.contains("stzh-input");
-            }
-            return false;
-        });
-    }
     waitForNextRender() {
         return new Promise(resolve => (this.renderPromiseResolve = resolve));
     }
@@ -257,18 +252,18 @@ export class StzhInput {
             [`stzh-input--size-${this.size}`]: !!this.size,
             [`stzh-input--type-${this.type}`]: !!this.type,
         };
-        return (h(Host, { key: 'd195c45d4e0040fa255c91f43adfb94941ec2c63', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus, "is-filled": this.filled }, h("div", { key: '02d3ea7c524107257e3e488cdf310dc34fa3857a', class: classes }, labelWrapperUsed && (h("div", { key: '9b4017101f0818c295d9fd781128e10a82b78be7', class: "stzh-input__label-wrapper" }, h("label", { key: 'd94b948c1e96e5bdfa8884bcb0cda7130e6bddb3', class: {
+        return (h(Host, { key: '7aef21c133dfe7591ab75f8fdfd75411e6960dc0', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus, "is-filled": this.filled }, h("div", { key: '47a38d7a7d1b1cd41c1717d496cb86829e9e706c', class: classes }, labelWrapperUsed && (h("div", { key: '408a97bc8187165a347dd285b51a596734b389ef', class: "stzh-input__label-wrapper" }, h("label", { key: '84137dd0e996dbdfd0b9d7e0d9785eb5f73a314f', class: {
                 "stzh-input__label": true,
                 "no-label-truncate": this.noLabelTruncate,
-            }, htmlFor: this.inputId }, this.label ? this.label : h("slot", { onSlotchange: this.updateDefaultSlotState }), labelUsed && !this.hideOptional && (h("span", { key: 'dd99a584802120e48ece9ed57355dabfba286074', class: "stzh-input__marker" }, h("span", { key: 'e52060306a2b697cbb235cdff8f559f0f4786fff', class: "stzh-input__marker-symbol", "aria-hidden": "true" }, this.required
+            }, htmlFor: this.inputId }, this.label ? this.label : h("slot", { onSlotchange: this.updateDefaultSlotState }), labelUsed && !this.hideOptional && (h("span", { key: 'a5ca6200ab248c68779821f2f9cd3e2973e77b66', class: "stzh-input__marker" }, h("span", { key: '5d8a162d63ae70d1b49080c845337519a57a74fa', class: "stzh-input__marker-symbol", "aria-hidden": "true" }, this.required
             ? this.localization.$globals.requiredFieldMarker
-            : this.localization.$globals.optionalFieldMarker), h("span", { key: 'f629992a20c86974922b20dc7f8c8a671981bc17', class: "stzh-input__marker-text" }, this.required
+            : this.localization.$globals.optionalFieldMarker), h("span", { key: '62030af17d59d43f57156c63173ab9da6c8ee99a', class: "stzh-input__marker-text" }, this.required
             ? this.localization.$globals.requiredFieldText
-            : this.localization.$globals.optionalFieldText)))), descriptionLongUsed && (h(StzhInputDescription, { key: 'dab2b867e4c4843496c3d641d05e33e53522172c', classPrefix: "stzh-input", id: `${this.inputId}-description-long`, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel, showError: false, showDescriptionText: false })))), h("div", { key: 'f27b1b23cac724928519b024d50e8760d2c28e83', class: "stzh-input__field-wrapper" }, this.multiline ? this.renderTextarea() : this.renderInput(), this.clearable || this.type === "search" || this.type === "password" ? ((!this.clearable || this.disabled || this.readonly || !this.filled) && this.type === "search" ? (h("stzh-icon", { class: "stzh-input__button-right", name: "search" })) : this.type === "password" ? (h("stzh-button", { class: "stzh-input__button-right", icon: this.showPassword ? "view-hidden" : "view", size: this.size, iconOnly: true, onClick: this.onTogglePasswordVisibilityClick, disabled: this.disabled || this.readonly, a11yLabel: this.type === "password"
+            : this.localization.$globals.optionalFieldText)))), descriptionLongUsed && (h(StzhInputDescription, { key: '46722b98f746f0c00c3f08490a10a016c823f9f4', classPrefix: "stzh-input", id: `${this.inputId}-description-long`, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel, showError: false, showDescriptionText: false })))), h("div", { key: '31cc04f66eb79662d7f5c5429d6247a83706b718', class: "stzh-input__field-wrapper" }, this.multiline ? this.renderTextarea() : this.renderInput(), this.clearable || this.type === "search" || this.type === "password" ? ((!this.clearable || this.disabled || this.readonly || !this.filled) && this.type === "search" ? (h("stzh-icon", { class: "stzh-input__button-right", name: "search" })) : this.type === "password" ? (h("stzh-button", { class: "stzh-input__button-right", icon: this.showPassword ? "view-hidden" : "view", size: this.size, iconOnly: true, onClick: this.onTogglePasswordVisibilityClick, disabled: this.disabled || this.readonly, a11yLabel: this.type === "password"
                 ? this.showPassword
                     ? this.localization.$globals.passwordToggleButtonHideLabel
                     : this.localization.$globals.passwordToggleButtonShowLabel
-                : undefined })) : this.filled ? (h("stzh-button", { class: "stzh-input__button-right", icon: "close", size: this.size, iconOnly: true, onClick: this.onClearClick, a11yLabel: this.localization.$globals.clearButtonLabel, "aria-controls": this.inputId, a11yTabindex: "-1", "aria-hidden": this.clearable ? "true" : undefined })) : (h("slot", { name: "button-right" }))) : (h("slot", { name: "button-right" }))), (errorUsed || descriptionUsed) && (h(StzhInputDescription, { key: '1d377f724be2b431c8177fd66bb2a2b43b7d425d', classPrefix: "stzh-input", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLongUsed: false })))));
+                : undefined })) : this.filled ? (h("stzh-button", { class: "stzh-input__button-right", icon: "close", size: this.size, iconOnly: true, onClick: this.onClearClick, a11yLabel: this.localization.$globals.clearButtonLabel, "aria-controls": this.inputId, a11yTabindex: "-1", "aria-hidden": this.clearable ? "true" : undefined })) : (h("slot", { name: "button-right" }))) : (h("slot", { name: "button-right" }))), (errorUsed || descriptionUsed) && (h(StzhInputDescription, { key: '1262f802e9fa06f66114c9a98794d6df4d390479', classPrefix: "stzh-input", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLongUsed: false })))));
     }
     static get is() { return "stzh-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-input/stzh-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stzh-input.js","sourceRoot":"","sources":["../../../../src/components/stzh-input/stzh-input.tsx"],"names":[],"mappings":"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\";\nimport { StzhInputBlurEvent, StzhInputChangedEvent, StzhInputChangeEvent, StzhInputFocusEvent } from \"../../index\";\nimport { hasSlot } from \"../../utils/utils\";\n\nimport { StzhInputLocalizedText } from \"./stzh-input.localization\";\nimport { StzhInputDescription } from \"./stzh-input-description\";\n\nlet inputCounter = 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 * @slot button-right - Slot for right button\n /\n@Component({\n tag: \"stzh-input\",\n styleUrl: \"stzh-input.scss\",\n scoped: true,\n})\nexport class StzhInput {\n /* Translation strings /\n @Prop() localization: StzhInputLocalizedText;\n\n /* Whether the input is a textarea or an input field /\n @Prop() multiline: boolean = false;\n\n /* Rows attribute if input element is textarea /\n @Prop() rows: number;\n\n /* If input field, this defines the type (if `search`, a search icon will be displayed) /\n @Prop({ reflect: true }) type: \"text\" \| \"search\" \| \"password\" \| \"email\" \| \"url\" \| \"tel\" \| \"number\" \| \"hidden\" =\n \"text\";\n\n /* If input type is number, this will be the step size /\n @Prop() step: number = 1;\n\n /* If input type is number, this will be the minimum step number /\n @Prop() min: number;\n\n /* If input type is number, this will be the maximum step number /\n @Prop() max: number;\n\n /* If input type is number and this property is true, this will show the spin buttons on hover/focus /\n @Prop({ reflect: true }) showSpin: boolean = false;\n\n /* Whether the element is readonly or not /\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /* Whether the element is disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true) /\n @Prop({ reflect: true }) clearable: boolean = false;\n\n /* Hide `(optional)` label (or use `required` inside form to hide it) /\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /* Minimum of characters /\n @Prop() minlength: number;\n\n /* Maxlength of characters /\n @Prop() maxlength: number;\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 /* Default value (used by reset) /\n @Prop({ mutable: true }) defaultValue: 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 /\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 /* Invalid status /\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /* Required status /\n @Prop({ reflect: true }) required: boolean = false;\n\n /\n Specify inputmode.\n * See [MDN](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/inputmode) for possible values\n /\n @Prop() inputmode: string;\n\n /\n Specify what the user agent has to provide as automated assistance.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values\n /\n @Prop() autocomplete: string = \"on\";\n\n /* Whether autocomplete should be turned off /\n @Prop() noAutocomplete: boolean = false;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Whether label should be truncated or not /\n @Prop() noLabelTruncate: boolean = false;\n\n /* Whether label should be visually hidden. /\n @Prop() labelHidden: boolean = false;\n\n /* Size variant /\n @Prop({ reflect: true }) size: \"default\" \| \"small\" = \"default\";\n\n /* Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Whether the input is filled or not /\n @State() filled: boolean;\n\n /* Whether to show the password or not /\n @State() showPassword: boolean;\n\n @State() hasDefaultSlot: boolean = false;\n @State() hasResolvedDefaultSlot: boolean = false;\n\n @Element() element: HTMLStzhInputElement;\n\n /* Input change event /\n @Event() stzhChange: EventEmitter<StzhInputChangeEvent>;\n\n /* Input changed event /\n @Event() stzhChanged: EventEmitter<StzhInputChangedEvent>;\n\n /* Input focus event /\n @Event() stzhFocus: EventEmitter<StzhInputFocusEvent>;\n\n /* Input blur event /\n @Event() stzhBlur: EventEmitter<StzhInputBlurEvent>;\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(\"value\")\n valueWatcher(newValue: string) {\n this.filled = 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(\"type\")\n typeWatcher(newValue: string) {\n const types = [\"text\", \"search\", \"password\", \"email\", \"url\", \"tel\", \"number\", \"hidden\"];\n\n if (!this.multiline && !types.includes(newValue)) {\n throw new Error(`Type ${newValue} not supported`);\n }\n }\n\n private input: HTMLInputElement \| HTMLTextAreaElement;\n private inputId: string;\n private focusedByInput: boolean = false;\n private renderPromiseResolve: (value?: unknown) => void;\n\n /* Detects default-slot label content, including Stencil's scoped-slot fallback nodes. /\n private hasDefaultLabelContent() {\n if (hasSlot(this.element)) {\n return true;\n }\n\n return Array.from(this.element.childNodes).some(node => {\n const slotNode = (node as any)[\"s-nr\"] ?? node;\n\n if (slotNode.nodeType === Node.TEXT_NODE) {\n return (slotNode.textContent ?? \"\").trim() !== \"\";\n }\n\n if (slotNode.nodeType === Node.ELEMENT_NODE) {\n const element = slotNode as HTMLElement;\n\n return !element.hasAttribute(\"slot\") && !element.classList.contains(\"stzh-input\");\n }\n\n return false;\n });\n }\n\n /* Updates default-slot state after initial render and later slot content changes. */\n private updateDefaultSlotState = () => {\n const hasDefaultSlot = this.hasDefaultLabelContent();\n\n if (this.hasDefaultSlot !== hasDefaultSlot) {\n this.hasDefaultSlot = hasDefaultSlot;\n }\n\n if (!this.hasResolvedDefaultSlot) {\n this.hasResolvedDefaultSlot = true;\n }\n };\n\n private waitForNextRender() {\n return new Promise(resolve => (this.renderPromiseResolve = resolve));\n }\n\n private onClearClick = async (event: MouseEvent) => {\n this.value = \"\";\n this.input.focus();\n\n await this.waitForNextRender();\n\n this.stzhChange.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\n });\n\n this.stzhChanged.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\n });\n };\n\n private onTogglePasswordVisibilityClick = async () => {\n this.showPassword = !this.showPassword;\n };\n\n private handleReset = async () => {\n this.value = this.defaultValue;\n // we also update value, since render doesn't get executed sometimes\n this.input.value = this.defaultValue;\n\n // TODO: check if we need own reset event or trigger the change event\n // (custom browser behaviour doesn't send change event, when reset is executed)\n // this.stzhChange.emit({\n // component: \"stzh-input\",\n // originalEvent: event,\n // value: this.value\n // });\n };\n\n private onInput = (event: InputEvent) => {\n this.value = this.input.value;\n\n this.stzhChange.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\n });\n };\n\n private onChange = (event: InputEvent) => {\n this.value = this.input.value;\n\n this.stzhChanged.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\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-input\",\n originalEvent: event,\n });\n };\n\n private onBlur = (event: FocusEvent) => {\n // fixes weird bug where autofill selection doesn't get removed\n this.input.value = this.input.value;\n\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-input\",\n originalEvent: event,\n });\n };\n\n private renderTextarea(): HTMLTextAreaElement {\n return (\n <textarea\n class=\"stzh-input__input stzh-input__input--textarea\"\n ref={el => (this.input = el as HTMLTextAreaElement)}\n id={this.inputId}\n name={this.name}\n value={this.value}\n rows={this.rows}\n disabled={this.disabled}\n readonly={this.readonly}\n minlength={this.minlength}\n maxlength={this.maxlength}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n onChange={this.onChange}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n ></textarea>\n );\n }\n\n private renderInput(): HTMLInputElement {\n return (\n <input\n class=\"stzh-input__input stzh-input__input--input\"\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.inputId}\n type={this.showPassword ? \"text\" : this.type}\n name={this.name}\n value={this.value}\n defaultValue={this.defaultValue}\n min={this.min}\n max={this.max}\n step={this.step}\n inputmode={this.inputmode}\n disabled={this.disabled}\n readonly={this.readonly}\n minlength={this.minlength}\n maxlength={this.maxlength}\n autocomplete={this.noAutocomplete ? \"off\" : this.autocomplete}\n aria-autocomplete={this.noAutocomplete ? \"none\" : undefined}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n onChange={this.onChange}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n );\n }\n\n componentDidRender() {\n if (this.renderPromiseResolve) {\n this.renderPromiseResolve();\n }\n }\n\n componentDidLoad() {\n this.updateDefaultSlotState();\n }\n\n async componentWillLoad() {\n this.inputId = `stzh-input-${inputCounter++}`;\n this.typeWatcher(this.type);\n this.valueWatcher(this.value);\n this.errorWatcher(this.error);\n\n this.defaultValue = this.defaultValue \|\| this.value;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"input\");\n }\n }\n\n render() {\n const buttonRightSlotUsed = hasSlot(this.element, \"button-right\");\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 labelUsed = !!this.label \|\| this.hasDefaultSlot;\n const labelWrapperUsed = !this.hasResolvedDefaultSlot \|\| labelUsed \|\| descriptionLongUsed;\n\n const classes = {\n \"stzh-input\": true,\n \"stzh-input--has-button-right\":\n buttonRightSlotUsed \|\|\n this.type === \"search\" \|\|\n (this.clearable && this.filled && !this.readonly && !this.disabled),\n \"stzh-input--has-description\": descriptionUsed,\n \"stzh-input--has-description-long\": descriptionLongUsed,\n \"stzh-input--has-error\": errorUsed,\n \"stzh-input--has-spin\": this.showSpin,\n \"stzh-input--is-invalid\": this.invalid \|\| errorUsed,\n \"stzh-input--is-disabled\": this.disabled,\n \"stzh-input--is-readonly\": this.readonly,\n \"stzh-input--is-required\": this.required,\n \"stzh-input--is-filled\": this.filled,\n \"stzh-input--is-not-filled\": !this.filled,\n \"stzh-input--is-clearable\": this.clearable,\n \"stzh-input--is-not-clearable\": !this.clearable,\n \"stzh-input--has-label-hidden\": this.labelHidden,\n [`stzh-input--size-${this.size}`]: !!this.size,\n [`stzh-input--type-${this.type}`]: !!this.type,\n };\n\n return (\n <Host\n is-invalid={this.invalid \|\| errorUsed}\n tabindex={this.disabled ? null : \"-1\"}\n onFocus={this.onRootFocus}\n is-filled={this.filled}\n >\n <div class={classes}>\n {labelWrapperUsed && (\n <div class=\"stzh-input__label-wrapper\">\n <label\n class={{\n \"stzh-input__label\": true,\n \"no-label-truncate\": this.noLabelTruncate,\n }}\n htmlFor={this.inputId}\n >\n {this.label ? this.label : <slot onSlotchange={this.updateDefaultSlotState}></slot>}\n\n {labelUsed && !this.hideOptional && (\n <span class=\"stzh-input__marker\">\n <span class=\"stzh-input__marker-symbol\" aria-hidden=\"true\">\n {this.required\n ? this.localization.$globals.requiredFieldMarker\n : this.localization.$globals.optionalFieldMarker}\n </span>\n <span class=\"stzh-input__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText}\n </span>\n </span>\n )}\n </label>\n\n {descriptionLongUsed && (\n <StzhInputDescription\n classPrefix=\"stzh-input\"\n id={`${this.inputId}-description-long`}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n showError={false}\n showDescriptionText={false}\n />\n )}\n </div>\n )}\n <div class=\"stzh-input__field-wrapper\">\n {this.multiline ? this.renderTextarea() : this.renderInput()}\n {this.clearable \|\| this.type === \"search\" \|\| this.type === \"password\" ? (\n (!this.clearable \|\| this.disabled \|\| this.readonly \|\| !this.filled) && this.type === \"search\" ? (\n <stzh-icon class=\"stzh-input__button-right\" name=\"search\"></stzh-icon>\n ) : this.type === \"password\" ? (\n <stzh-button\n class=\"stzh-input__button-right\"\n icon={this.showPassword ? \"view-hidden\" : \"view\"}\n size={this.size}\n iconOnly={true}\n onClick={this.onTogglePasswordVisibilityClick}\n disabled={this.disabled \|\| this.readonly}\n a11yLabel={\n this.type === \"password\"\n ? this.showPassword\n ? this.localization.$globals.passwordToggleButtonHideLabel\n : this.localization.$globals.passwordToggleButtonShowLabel\n : undefined\n }\n ></stzh-button>\n ) : this.filled ? (\n <stzh-button\n class=\"stzh-input__button-right\"\n icon=\"close\"\n size={this.size}\n iconOnly={true}\n onClick={this.onClearClick}\n a11yLabel={this.localization.$globals.clearButtonLabel}\n aria-controls={this.inputId}\n a11yTabindex=\"-1\"\n aria-hidden={this.clearable ? \"true\" : undefined}\n ></stzh-button>\n ) : (\n <slot name=\"button-right\"></slot>\n )\n ) : (\n <slot name=\"button-right\"></slot>\n )}\n </div>\n {(errorUsed \|\| descriptionUsed) && (\n <StzhInputDescription\n classPrefix=\"stzh-input\"\n id={`${this.inputId}-description`}\n error={this._error}\n description={this.description}\n descriptionLongUsed={false}\n />\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"stzh-input.js","sourceRoot":"","sources":["../../../../src/components/stzh-input/stzh-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\";\nimport { StzhInputBlurEvent, StzhInputChangedEvent, StzhInputChangeEvent, StzhInputFocusEvent } from \"../../index\";\nimport { hasDefaultSlotContent, hasSlot } from \"../../utils/utils\";\n\nimport { StzhInputLocalizedText } from \"./stzh-input.localization\";\nimport { StzhInputDescription } from \"./stzh-input-description\";\n\nlet inputCounter = 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 * @slot button-right - Slot for right button\n /\n@Component({\n tag: \"stzh-input\",\n styleUrl: \"stzh-input.scss\",\n scoped: true,\n})\nexport class StzhInput {\n /* Translation strings /\n @Prop() localization: StzhInputLocalizedText;\n\n /* Whether the input is a textarea or an input field /\n @Prop() multiline: boolean = false;\n\n /* Rows attribute if input element is textarea /\n @Prop() rows: number;\n\n /* If input field, this defines the type (if `search`, a search icon will be displayed) /\n @Prop({ reflect: true }) type: \"text\" \| \"search\" \| \"password\" \| \"email\" \| \"url\" \| \"tel\" \| \"number\" \| \"hidden\" =\n \"text\";\n\n /* If input type is number, this will be the step size /\n @Prop() step: number = 1;\n\n /* If input type is number, this will be the minimum step number /\n @Prop() min: number;\n\n /* If input type is number, this will be the maximum step number /\n @Prop() max: number;\n\n /* If input type is number and this property is true, this will show the spin buttons on hover/focus /\n @Prop({ reflect: true }) showSpin: boolean = false;\n\n /* Whether the element is readonly or not /\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /* Whether the element is disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true) /\n @Prop({ reflect: true }) clearable: boolean = false;\n\n /* Hide `(optional)` label (or use `required` inside form to hide it) /\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /* Minimum of characters /\n @Prop() minlength: number;\n\n /* Maxlength of characters /\n @Prop() maxlength: number;\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 /* Default value (used by reset) /\n @Prop({ mutable: true }) defaultValue: 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 /\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 /* Invalid status /\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /* Required status /\n @Prop({ reflect: true }) required: boolean = false;\n\n /\n Specify inputmode.\n * See [MDN](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/inputmode) for possible values\n /\n @Prop() inputmode: string;\n\n /\n Specify what the user agent has to provide as automated assistance.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values\n /\n @Prop() autocomplete: string = \"on\";\n\n /* Whether autocomplete should be turned off /\n @Prop() noAutocomplete: boolean = false;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Whether label should be truncated or not /\n @Prop() noLabelTruncate: boolean = false;\n\n /* Whether label should be visually hidden. /\n @Prop() labelHidden: boolean = false;\n\n /* Size variant /\n @Prop({ reflect: true }) size: \"default\" \| \"small\" = \"default\";\n\n /* Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Whether the input is filled or not /\n @State() filled: boolean;\n\n /* Whether to show the password or not /\n @State() showPassword: boolean;\n\n /\n Whether the component has meaningful default-slot content.\n * Becomes obsolete with the implementation of PDESI-1908.\n /\n @State() hasDefaultSlot: boolean = false;\n\n /\n Indicates whether default-slot content detection has run at least once.\n * Used to avoid rendering state-dependent markup before the slot content\n * has been evaluated.\n * Becomes obsolete with the implementation of PDESI-1908.\n /\n @State() hasResolvedDefaultSlot: boolean = false;\n\n @Element() element: HTMLStzhInputElement;\n\n /* Input change event /\n @Event() stzhChange: EventEmitter<StzhInputChangeEvent>;\n\n /* Input changed event /\n @Event() stzhChanged: EventEmitter<StzhInputChangedEvent>;\n\n /* Input focus event /\n @Event() stzhFocus: EventEmitter<StzhInputFocusEvent>;\n\n /* Input blur event /\n @Event() stzhBlur: EventEmitter<StzhInputBlurEvent>;\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(\"value\")\n valueWatcher(newValue: string) {\n this.filled = 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(\"type\")\n typeWatcher(newValue: string) {\n const types = [\"text\", \"search\", \"password\", \"email\", \"url\", \"tel\", \"number\", \"hidden\"];\n\n if (!this.multiline && !types.includes(newValue)) {\n throw new Error(`Type ${newValue} not supported`);\n }\n }\n\n private input: HTMLInputElement \| HTMLTextAreaElement;\n private inputId: string;\n private focusedByInput: boolean = false;\n private renderPromiseResolve: (value?: unknown) => void;\n\n private waitForNextRender() {\n return new Promise(resolve => (this.renderPromiseResolve = resolve));\n }\n\n private onClearClick = async (event: MouseEvent) => {\n this.value = \"\";\n this.input.focus();\n\n await this.waitForNextRender();\n\n this.stzhChange.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\n });\n\n this.stzhChanged.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\n });\n };\n\n private onTogglePasswordVisibilityClick = async () => {\n this.showPassword = !this.showPassword;\n };\n\n private handleReset = async () => {\n this.value = this.defaultValue;\n // we also update value, since render doesn't get executed sometimes\n this.input.value = this.defaultValue;\n\n // TODO: check if we need own reset event or trigger the change event\n // (custom browser behaviour doesn't send change event, when reset is executed)\n // this.stzhChange.emit({\n // component: \"stzh-input\",\n // originalEvent: event,\n // value: this.value\n // });\n };\n\n private onInput = (event: InputEvent) => {\n this.value = this.input.value;\n\n this.stzhChange.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\n });\n };\n\n private onChange = (event: InputEvent) => {\n this.value = this.input.value;\n\n this.stzhChanged.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\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-input\",\n originalEvent: event,\n });\n };\n\n private onBlur = (event: FocusEvent) => {\n // fixes weird bug where autofill selection doesn't get removed\n this.input.value = this.input.value;\n\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-input\",\n originalEvent: event,\n });\n };\n\n private renderTextarea(): HTMLTextAreaElement {\n return (\n <textarea\n class=\"stzh-input__input stzh-input__input--textarea\"\n ref={el => (this.input = el as HTMLTextAreaElement)}\n id={this.inputId}\n name={this.name}\n value={this.value}\n rows={this.rows}\n disabled={this.disabled}\n readonly={this.readonly}\n minlength={this.minlength}\n maxlength={this.maxlength}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n onChange={this.onChange}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n ></textarea>\n );\n }\n\n private renderInput(): HTMLInputElement {\n return (\n <input\n class=\"stzh-input__input stzh-input__input--input\"\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.inputId}\n type={this.showPassword ? \"text\" : this.type}\n name={this.name}\n value={this.value}\n defaultValue={this.defaultValue}\n min={this.min}\n max={this.max}\n step={this.step}\n inputmode={this.inputmode}\n disabled={this.disabled}\n readonly={this.readonly}\n minlength={this.minlength}\n maxlength={this.maxlength}\n autocomplete={this.noAutocomplete ? \"off\" : this.autocomplete}\n aria-autocomplete={this.noAutocomplete ? \"none\" : undefined}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n onChange={this.onChange}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n );\n }\n\n /\n Re-evaluates default-slot content and updates the related render state.\n * Becomes obsolete with implementation of PDESI-1908.\n */\n private updateDefaultSlotState = () => {\n const hasDefaultSlot = hasDefaultSlotContent(this.element, [\"stzh-input\"]);\n if (this.hasDefaultSlot !== hasDefaultSlot) {\n this.hasDefaultSlot = hasDefaultSlot;\n }\n if (!this.hasResolvedDefaultSlot) {\n this.hasResolvedDefaultSlot = true;\n }\n };\n\n componentDidRender() {\n if (this.renderPromiseResolve) {\n this.renderPromiseResolve();\n }\n }\n\n componentDidLoad() {\n this.updateDefaultSlotState();\n }\n\n async componentWillLoad() {\n this.inputId = `stzh-input-${inputCounter++}`;\n this.typeWatcher(this.type);\n this.valueWatcher(this.value);\n this.errorWatcher(this.error);\n\n this.defaultValue = this.defaultValue \|\| this.value;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"input\");\n }\n }\n\n render() {\n const buttonRightSlotUsed = hasSlot(this.element, \"button-right\");\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 labelUsed = !!this.label \|\| this.hasDefaultSlot;\n const labelWrapperUsed = !this.hasResolvedDefaultSlot \|\| labelUsed \|\| descriptionLongUsed;\n\n const classes = {\n \"stzh-input\": true,\n \"stzh-input--has-button-right\":\n buttonRightSlotUsed \|\|\n this.type === \"search\" \|\|\n (this.clearable && this.filled && !this.readonly && !this.disabled),\n \"stzh-input--has-description\": descriptionUsed,\n \"stzh-input--has-description-long\": descriptionLongUsed,\n \"stzh-input--has-error\": errorUsed,\n \"stzh-input--has-spin\": this.showSpin,\n \"stzh-input--is-invalid\": this.invalid \|\| errorUsed,\n \"stzh-input--is-disabled\": this.disabled,\n \"stzh-input--is-readonly\": this.readonly,\n \"stzh-input--is-required\": this.required,\n \"stzh-input--is-filled\": this.filled,\n \"stzh-input--is-not-filled\": !this.filled,\n \"stzh-input--is-clearable\": this.clearable,\n \"stzh-input--is-not-clearable\": !this.clearable,\n \"stzh-input--has-label-hidden\": this.labelHidden,\n [`stzh-input--size-${this.size}`]: !!this.size,\n [`stzh-input--type-${this.type}`]: !!this.type,\n };\n\n return (\n <Host\n is-invalid={this.invalid \|\| errorUsed}\n tabindex={this.disabled ? null : \"-1\"}\n onFocus={this.onRootFocus}\n is-filled={this.filled}\n >\n <div class={classes}>\n {labelWrapperUsed && (\n <div class=\"stzh-input__label-wrapper\">\n <label\n class={{\n \"stzh-input__label\": true,\n \"no-label-truncate\": this.noLabelTruncate,\n }}\n htmlFor={this.inputId}\n >\n {this.label ? this.label : <slot onSlotchange={this.updateDefaultSlotState}></slot>}\n\n {labelUsed && !this.hideOptional && (\n <span class=\"stzh-input__marker\">\n <span class=\"stzh-input__marker-symbol\" aria-hidden=\"true\">\n {this.required\n ? this.localization.$globals.requiredFieldMarker\n : this.localization.$globals.optionalFieldMarker}\n </span>\n <span class=\"stzh-input__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText}\n </span>\n </span>\n )}\n </label>\n\n {descriptionLongUsed && (\n <StzhInputDescription\n classPrefix=\"stzh-input\"\n id={`${this.inputId}-description-long`}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n showError={false}\n showDescriptionText={false}\n />\n )}\n </div>\n )}\n <div class=\"stzh-input__field-wrapper\">\n {this.multiline ? this.renderTextarea() : this.renderInput()}\n {this.clearable \|\| this.type === \"search\" \|\| this.type === \"password\" ? (\n (!this.clearable \|\| this.disabled \|\| this.readonly \|\| !this.filled) && this.type === \"search\" ? (\n <stzh-icon class=\"stzh-input__button-right\" name=\"search\"></stzh-icon>\n ) : this.type === \"password\" ? (\n <stzh-button\n class=\"stzh-input__button-right\"\n icon={this.showPassword ? \"view-hidden\" : \"view\"}\n size={this.size}\n iconOnly={true}\n onClick={this.onTogglePasswordVisibilityClick}\n disabled={this.disabled \|\| this.readonly}\n a11yLabel={\n this.type === \"password\"\n ? this.showPassword\n ? this.localization.$globals.passwordToggleButtonHideLabel\n : this.localization.$globals.passwordToggleButtonShowLabel\n : undefined\n }\n ></stzh-button>\n ) : this.filled ? (\n <stzh-button\n class=\"stzh-input__button-right\"\n icon=\"close\"\n size={this.size}\n iconOnly={true}\n onClick={this.onClearClick}\n a11yLabel={this.localization.$globals.clearButtonLabel}\n aria-controls={this.inputId}\n a11yTabindex=\"-1\"\n aria-hidden={this.clearable ? \"true\" : undefined}\n ></stzh-button>\n ) : (\n <slot name=\"button-right\"></slot>\n )\n ) : (\n <slot name=\"button-right\"></slot>\n )}\n </div>\n {(errorUsed \|\| descriptionUsed) && (\n <StzhInputDescription\n classPrefix=\"stzh-input\"\n id={`${this.inputId}-description`}\n error={this._error}\n description={this.description}\n descriptionLongUsed={false}\n />\n )}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/stzh-input/stzh-input.stories.js CHANGED Viewed

@@ -266,15 +266,6 @@ export const LongLabel = {
   }
 };
-export const ErrorMessage = {
-  render: (args) => story(args, TEMPLATE),
-  args: {
-    name: 'firstname',
-    label: 'Label',
-    error: ['Please fill the field']
-  }
-};
 const TEMPLATE_ERROR_SLOT = `
 <stzh-input data-testid="${INPUT_TEST_ID}">
   <div slot="error">
@@ -284,6 +275,15 @@ const TEMPLATE_ERROR_SLOT = `
 </stzh-input>
 `;
+export const ErrorMessage = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    name: 'firstname',
+    label: 'Label',
+    error: ['Please fill the field']
+  }
+};
 export const ErrorMessageInSlot = {
   render: (args) => story(args, TEMPLATE_ERROR_SLOT),
   args: {
@@ -422,3 +422,26 @@ export const ButtonRight = {
     });
   }
 };
+const TEMPLATE_LABEL_SLOT = `
+<stzh-input data-testid="${INPUT_TEST_ID}">
+  Label in default slot
+</stzh-input>
+`;
+export const LabelSlotted = {
+  render: (args) => story(args, TEMPLATE_LABEL_SLOT),
+  args: {},
+  play: async ({ canvasElement, step }) => {
+    await step('Assert label via default slot', async () => {
+      stzhInputEl = await getComponentByTestId(canvasElement, INPUT_TEST_ID);
+      expect(stzhInputEl).not.toHaveAttribute('label');
+      const labelEl = stzhInputEl.querySelector('label');
+      expect(labelEl).not.toBeNull();
+      expectIsVisible(labelEl);
+      expect(labelEl).toHaveTextContent('Label in default slot');
+    });
+  }
+};

package/dist/collection/components/stzh-invert/stzh-invert.js CHANGED Viewed

@@ -7,7 +7,7 @@ export class StzhInvert {
         const classes = {
             "stzh-invert": true,
         };
-        return (h(Host, { key: '377f54ecaf08bb107691241c039db1a29cf5f68a' }, h("div", { key: '7261bd15fb90b5a7772ffbc01a787573a2a1bba2', class: classes }, h("slot", { key: 'fcd77a0636614aaa783716d735f97bdfa1062548' }))));
+        return (h(Host, { key: '7fa868ecf1eb6b816db0f1702e27775f6ce510d1' }, h("div", { key: 'a1d8be2f5e5c69b0f1d16c4eed8fe875475e2305', class: classes }, h("slot", { key: '7c0a8b513630e5acbf1afe4e6f7aaaa12d6e1f29' }))));
     }
     static get is() { return "stzh-invert"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-link/stzh-link.js CHANGED Viewed

@@ -128,7 +128,7 @@ export class StzhLink {
             [`stzh-link--${this.href ? "has" : "no"}-href`]: true,
             [`stzh-link--${this.variant}`]: !!this.variant,
         };
-        return (h(Host, { key: '2422039dc14374d8d6d2d092caf48c8f17e9b585', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, this.href ? (h("a", { ref: el => (this.link = el), href: this.disabled ? null : this.href, download: this.download, rel: this.rel, target: this.target, class: classes, id: this.linkId, accessKey: this.linkAccesskey, tabindex: this.a11yTabindex, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, "aria-disabled": typeof this.a11yDisabled !== "undefined" ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined" ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls || null, "aria-current": this.a11yCurrent || null, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))) : (h("button", { ref: el => (this.link = el), class: classes, type: this.type, disabled: this.disabled, id: this.linkId, accessKey: this.linkAccesskey, tabindex: this.a11yTabindex, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, "aria-disabled": typeof this.a11yDisabled !== "undefined" ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined" ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls || null, "aria-current": this.a11yCurrent || null, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed)))));
+        return (h(Host, { key: '677b7b3acde1084ef602c53ed2ab151d95691e4e', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, this.href ? (h("a", { ref: el => (this.link = el), href: this.disabled ? null : this.href, download: this.download, rel: this.rel, target: this.target, class: classes, id: this.linkId, accessKey: this.linkAccesskey, tabindex: this.a11yTabindex, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, "aria-disabled": typeof this.a11yDisabled !== "undefined" ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined" ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls || null, "aria-current": this.a11yCurrent || null, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))) : (h("button", { ref: el => (this.link = el), class: classes, type: this.type, disabled: this.disabled, id: this.linkId, accessKey: this.linkAccesskey, tabindex: this.a11yTabindex, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, "aria-disabled": typeof this.a11yDisabled !== "undefined" ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined" ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls || null, "aria-current": this.a11yCurrent || null, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed)))));
     }
     static get is() { return "stzh-link"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-list/stzh-list.js CHANGED Viewed

@@ -12,7 +12,7 @@ export class StzhList {
             "stzh-list": true,
             [`stzh-list--${this.variant}`]: !!this.variant,
         };
-        return (h(Host, { key: '63b7857182b62e1508a178a9b1053497442c052c' }, h("div", { key: 'd5e95e317aafac53eea1b0d9f885a36a8fa8c0e9', class: classes, role: "list" }, h("slot", { key: '348519a1bbfda9e6a7413d2641acdf05bbd0d208' }))));
+        return (h(Host, { key: '419445aa5d3462dc93323edd6329a67cccbcd459' }, h("div", { key: '91f4ad109bd004ae7398f2ee0b1ab2006bec0d54', class: classes, role: "list" }, h("slot", { key: 'dc4a0339de3b1a2db2605130fcd6c672025d99bf' }))));
     }
     static get is() { return "stzh-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stzh-list-item/stzh-list-item.js CHANGED Viewed

@@ -8,7 +8,7 @@ export class StzhListItem {
         const classes = {
             "stzh-list-item": true,
         };
-        return (h(Host, { key: 'd02bdd8ef1fbc47649b3c2de0bee24c9dd84cbe7' }, h("div", { key: '30aa183a5e6ec9ac22701bc67723dbedd4cd10b2', class: classes, role: "listitem" }, h("div", { key: '724d71b78f5d49720fe31e17bd5d5225867df1ca', class: "stzh-list-item__checkmark-icon", innerHTML: Checkmark }), h("div", { key: '1decc4fe2bfd89e1eb6f030f15af4af4dd32ec66', class: "stzh-list-item__text" }, h("slot", { key: '2c6a43159a65e52bff21e51e6ab689ef8ea9d153' })))));
+        return (h(Host, { key: '2c79f84788f5018ff37f253303393bd8bfacbaa8' }, h("div", { key: '8a3e2c7c8b320a325edb00a5a3cb9b97328e8af0', class: classes, role: "listitem" }, h("div", { key: '532af0aadca647938e43a2d14bf2fc9d00be0061', class: "stzh-list-item__checkmark-icon", innerHTML: Checkmark }), h("div", { key: 'f15313752797391c81e860e189211fe8d48cd088', class: "stzh-list-item__text" }, h("slot", { key: 'a7baac8f56323fd34c343939cc1e821cf6a32a67' })))));
     }
     static get is() { return "stzh-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stzh-loader/stzh-loader.js CHANGED Viewed

@@ -17,7 +17,7 @@ export class StzhLoader {
             "stzh-loader--hide-label": this.hideLabel,
             [`stzh-loader--size-${this.size}`]: !!this.size,
         };
-        return (h(Host, { key: 'ec61d3469c3fd89635e22a1e91a5f27517884e53' }, h("div", { key: 'e27a6ed0e283cf156117b954730065a120f8975d', class: classes }, h("div", { key: '3dfcc59f481d1e3ad42364e90e2bd8f6f32e1bac', class: "stzh-loader__wrapper" }, h("div", { key: '847165ba9d8f9de72c2970363198d02cf2004198', class: "stzh-loader__uil" }, h("div", { key: '3fe42b4a3c389d0d9efdf6729de9a775d75e433d', class: "stzh-loader__ib" }, h("div", { key: '9f04ad49d4a7a77d66acf5342d965ae7d447ed40', class: "stzh-loader__circle" }, h("div", { key: 'f718ec9fc0f79520f871800ab83d72be863b54d6' })), h("div", { key: '42d55d1075acfb476decfc872d2bc35cd7564452', class: "stzh-loader__circle" }, h("div", { key: 'd0dce04e67de30eee329897fc79a329464189014' })), h("div", { key: 'f16c0beb7751999bcbfff9e5d2d8ff64b6719029', class: "stzh-loader__circle" }, h("div", { key: '07510d301f7621911b6c3d448e60716f37425e4c' })), h("div", { key: '157676219b38ce3dbf0a89d7776078bf32e82340', class: "stzh-loader__circle" }, h("div", { key: 'b3bbcaf566ac64923c71efe60706ce340a88afd7' }))))), h("div", { key: '3cfb05c9c569e32b20c200f85224581ff7fadf3c', class: "stzh-loader__label", "aria-live": "polite" }, this.label ? this.label : h("slot", null)))));
+        return (h(Host, { key: '22a3cc1a1a10add666b440b5a4b43a09686e9f14' }, h("div", { key: '2f346af71dd672ab83531b1bdcc8818089a5f78c', class: classes }, h("div", { key: '9133483f877c8689941f114c3363225a407948f4', class: "stzh-loader__wrapper" }, h("div", { key: '441f5c786505c22d9df7df15de9496aa19eaa4d1', class: "stzh-loader__uil" }, h("div", { key: '2f5b00e90b657e287be75a06fa4da18e0f55fa37', class: "stzh-loader__ib" }, h("div", { key: '82fd7a0cd371c9631093788ba445c0127eb7b811', class: "stzh-loader__circle" }, h("div", { key: '20258d48c86c534d8be16912f3cf750b39ec195b' })), h("div", { key: '384dc8220f8e970a112b71f62adcf341af009b71', class: "stzh-loader__circle" }, h("div", { key: '636a9c72d1afa96756a092b5115e2a94e88de86e' })), h("div", { key: 'da357e7c80a9100a159a4a3a6d10c0dfd725d61f', class: "stzh-loader__circle" }, h("div", { key: 'f5d86280f744f9a2c67404307c6f361460d37b61' })), h("div", { key: '594acac4d06c1b645e44fa11d217339b4791a5c4', class: "stzh-loader__circle" }, h("div", { key: 'cf15773adc15fd0531f4cd9dc08872d7d8b87411' }))))), h("div", { key: 'd762938b2e1af3025b51c8cf3ac3ce1577c6da20', class: "stzh-loader__label", "aria-live": "polite" }, this.label ? this.label : h("slot", null)))));
     }
     static get is() { return "stzh-loader"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-loadingbar/stzh-loadingbar.js CHANGED Viewed

@@ -14,7 +14,7 @@ export class StzhLoadingbar {
         const classes = {
             "stzh-loadingbar": true,
         };
-        return (h(Host, { key: '9ed42dd81991c04054b1b30030d49a330d15cb7e' }, h("div", { key: 'f0d6ac0e54759f6caa8e4bcf13e2c96337ad3734', class: classes }, h("div", { key: 'e43ec0142c9463e9d9000c7734f3157e65c32e19', class: "stzh-loadingbar__text" }, this.label && h("div", { key: 'd0b57e8c5ce280d93ffb73fd4dc4f91eb0b7e35b', class: "stzh-loadingbar__label" }, this.label), !this.hidePercent && h("div", { key: '13fc969c2f7c0e10c4fe09ca188bf954641824d2', class: "stzh-loadingbar__percent" }, this.percent, "%")), h("div", { key: '595cf46bb544c9baa09203acbb67cd866354475c', class: "stzh-loadingbar__bar" }, h("div", { key: 'd34dd8b42c9db8e7b38a87077bd1cde96f54f100', class: "stzh-loadingbar__bar-inner", style: {
+        return (h(Host, { key: 'cdcba5f0f868a00cae9b70b69c7d46b52e2019c5' }, h("div", { key: '49f158754cded6ce054c8a08956545c040fb3cf2', class: classes }, h("div", { key: '748647d1993852da85861a77bb5bade1023e5677', class: "stzh-loadingbar__text" }, this.label && h("div", { key: '8975cbf08b932118a3ae557e63ae5caef46259e9', class: "stzh-loadingbar__label" }, this.label), !this.hidePercent && h("div", { key: '3b05ebe169339ed08125fe7dfbfbfbce6cad83ff', class: "stzh-loadingbar__percent" }, this.percent, "%")), h("div", { key: '168ff04f0b0c23b4a8eaf143eec99bcc28c470cf', class: "stzh-loadingbar__bar" }, h("div", { key: '383cc3a39fe8c5b8b5005f803efb2b1270a1189a', class: "stzh-loadingbar__bar-inner", style: {
                 width: `${this.percent}%`,
             } })))));
     }

package/dist/collection/components/stzh-menu/stzh-menu.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class StzhMenu {
     render() {
-        return (h(Host, { key: 'ec71f71a180d8d1d17593223e3c3d832e3e70055', role: "menu" }, h("div", { key: '4d75ad35b23a94dead39127230e4d5817907a018', class: "stzh-menu" }, h("slot", { key: 'b540c23014f559054007918532950f5c2d6f7d1b' }))));
+        return (h(Host, { key: '97a4d9705a20a902a3868baa6dbcde328a0751a5', role: "menu" }, h("div", { key: 'baa9b8fa2bdb5f7ce21925e40862974fba51cb59', class: "stzh-menu" }, h("slot", { key: '3064c3ca9fdb7ca4322c52dec8565a89b40faa22' }))));
     }
     static get is() { return "stzh-menu"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-menu-item/stzh-menu-item.js CHANGED Viewed

@@ -88,7 +88,7 @@ export class StzhMenuItem {
             [`stzh-menu-item--size-${this.size}`]: !!this.size,
             [`stzh-menu-item--${this.variant}`]: !!this.variant,
         };
-        return (h(Host, { key: 'ebbfc5d801e36a9c99bc95dba332ab5703e270d7', role: "menuitem", tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, this.href ? (h("a", { ref: el => (this.menuItem = el), href: this.disabled ? null : this.href, target: this.target, class: classes, "aria-label": this.a11yLabel || null, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))) : (h("button", { ref: el => (this.menuItem = el), class: classes, type: "button", disabled: this.disabled, "aria-label": this.a11yLabel || null, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed)))));
+        return (h(Host, { key: '5b75caecdf88ceef333409eb0699b461d37daf2e', role: "menuitem", tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, this.href ? (h("a", { ref: el => (this.menuItem = el), href: this.disabled ? null : this.href, target: this.target, class: classes, "aria-label": this.a11yLabel || null, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))) : (h("button", { ref: el => (this.menuItem = el), class: classes, type: "button", disabled: this.disabled, "aria-label": this.a11yLabel || null, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed)))));
     }
     static get is() { return "stzh-menu-item"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-message/stzh-message.js CHANGED Viewed

@@ -44,10 +44,10 @@ export class StzhMessage {
             "stzh-message--has-close-hidden": this.hideClose,
             [`stzh-message--type-${this.type}`]: !!this.type,
         };
-        return (h(Host, { key: 'f9c8973ef46672059f0dbd9834fe675311720fa7', hidden: !this.open }, h("div", { key: '3f3c43051e4c182b9c690aa8498fecd83858ddc8', class: classes }, h("div", { key: '95c7536c4970b772f3a871afd3f1ef99e11d3a39', class: "stzh-message__content" }, h("div", { key: '767219fa034a217680e6c4108eb211467e6c77b7', class: "stzh-message__icon-wrapper" }, h("stzh-icon", { key: 'a8f6d151aaa264ae3d7a3ac66c81b5396f420c51', class: "stzh-message__icon", name: ((this.type === "info" || this.type === "page-message") && "info-help-filled") ||
+        return (h(Host, { key: '8f05f3f3bfb25fe32de500180160e2786bc4da07', hidden: !this.open }, h("div", { key: 'fa7421676cb427d9de05aaa747a264a0fb7d20fe', class: classes }, h("div", { key: 'f94b9e07b529a68b6a3ad3ac4a3e02624e9d4cb7', class: "stzh-message__content" }, h("div", { key: '1503d7d90f886ab74afc83ba1b3e53f761b93f32', class: "stzh-message__icon-wrapper" }, h("stzh-icon", { key: '51667fa9dd286152736c112973515e26a00cd658', class: "stzh-message__icon", name: ((this.type === "info" || this.type === "page-message") && "info-help-filled") ||
                 (this.type === "success" && "checkmark-circle-filled") ||
                 (this.type === "warning" && "important-warning-filled") ||
-                (this.type === "error" && "warning-filled") })), h("div", { key: '6939aaddc4549aa9221e8a7ddf887f3f176d14c1', class: "stzh-message__text-wrapper" }, h("div", { key: '6a48a095671aff712fd30284b58b0b11c7b705b9', class: "stzh-message__label" }, this.label ? h("strong", null, this.label) : h("slot", { name: "label" })), h("div", { key: 'a185d89f443a0ad4fc25d28629f28ad3be0d6975', class: "stzh-message__description" }, this.description ? (h("stzh-text", { color: "inherit" }, h("p", null, this.description))) : (h("slot", null))), h("div", { key: '208d811f4ca0f47e488d537b9844ea3eda72fbc7', class: "stzh-message__link" }, h("slot", { key: 'c7c951f18df76bcb3c99f0e63e206c46f35acad9', name: "link" })))), !this.hideClose && (h("stzh-button", { key: '7cec92efb1eb1c97990d0e8290be2166e67068d1', class: "stzh-message__close", onClick: this.onCloseButtonClick, a11yLabel: this.localization.close, variant: "tertiary", size: "small", iconOnly: true, icon: "close-big" })))));
+                (this.type === "error" && "warning-filled") })), h("div", { key: 'de5a8c0bcdb9b7421b12a1c7945a6c72d35bb6e6', class: "stzh-message__text-wrapper" }, h("div", { key: '098e368576af028d23964c7b4cb2fbe2516d3b2a', class: "stzh-message__label" }, this.label ? h("strong", null, this.label) : h("slot", { name: "label" })), h("div", { key: '064c04c0108ef43eb075d658bb6f26086b7b547b', class: "stzh-message__description" }, this.description ? (h("stzh-text", { color: "inherit" }, h("p", null, this.description))) : (h("slot", null))), h("div", { key: '5e5b6bd0a39aeb372a53c1362b185ad2eea21305', class: "stzh-message__link" }, h("slot", { key: '059715c3921f9c1628149b6d79bb85f40efa1979', name: "link" })))), !this.hideClose && (h("stzh-button", { key: '39b07bc312f69c9571688262d1075a1d15958dde', class: "stzh-message__close", onClick: this.onCloseButtonClick, a11yLabel: this.localization.close, variant: "tertiary", size: "small", iconOnly: true, icon: "close-big" })))));
     }
     static get is() { return "stzh-message"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-monthyearpicker/stzh-monthyearpicker.js CHANGED Viewed

@@ -196,7 +196,7 @@ export class StzhMonthyearpicker {
         const classes = {
             "stzh-monthyearpicker": true,
         };
-        return (h(Host, { key: 'c7abf5e9403d0738f30b41149f651d57d1b88243', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '0939a632664de3d8d671edcddcb713cb9fb25dd8', class: classes }, h("input", { key: '8d05c312d7fadabaded8f971ae52d167f2d76eb6', type: "hidden", name: this.name, value: this.value }), h("div", { key: '8a96fb51b2d41d35f0c3edd9a55f87c83b973afb', class: "stzh-monthyearpicker__wrapper" }, h("stzh-dropdown", { key: 'f035136e5c5085a0df305f1a3ae3210fd74e1dd9', open: this.monthOpen, name: `${this.name}-month`, class: "stzh-monthyearpicker__months-dropdown", label: this.monthLabel || this.localization.monthLabel, ref: el => (this.monthsDropdown = el), options: this.dropdownMonthOptions, items: [this.value.split("-")[1]], required: this.required, disabled: this.disabled, size: this.size, hideOptional: this.hideOptional, popoverPlacement: this.popoverPlacement, description: this.descriptionMonth, descriptionLong: this.descriptionLongMonth, error: this.errorMonth, a11yDescribedby: this.a11yDescribedbyMonth, invalid: this.invalidMonth }), h("div", { key: '40f4f5ec816f75ac172c079191172106a2929d4e', class: "stzh-monthyearpicker__separator" }, "/"), h("stzh-dropdown", { key: '5de66875dbcb3fbbdcfb1ac19d1271d117b41f52', open: this.yearOpen, name: `${this.name}-year`, class: "stzh-monthyearpicker__years-dropdown", label: this.yearLabel || this.localization.yearLabel, options: this.dropdownYearOptions, items: [this.value.split("-")[0]], required: this.required, disabled: this.disabled, size: this.size, hideOptional: this.hideOptional, popoverPlacement: this.popoverPlacement, description: this.descriptionYear, descriptionLong: this.descriptionLongYear, error: this.errorYear, a11yDescribedby: this.a11yDescribedbyYear, invalid: this.invalidYear })))));
+        return (h(Host, { key: 'a7869ff2eb42950cb26bac600b482f2a0cdd92ef', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '3ffa2038554c75f29b83fdedfa81c1ec40ad522c', class: classes }, h("input", { key: '045ef3a4c48e9a6c6c002767d84b93bddf3d802a', type: "hidden", name: this.name, value: this.value }), h("div", { key: '16c12161e44bb70b4d6c7e2fcc2897dfafb39060', class: "stzh-monthyearpicker__wrapper" }, h("stzh-dropdown", { key: '64b952c389eb8f702b52fb65ea1462218cede10f', open: this.monthOpen, name: `${this.name}-month`, class: "stzh-monthyearpicker__months-dropdown", label: this.monthLabel || this.localization.monthLabel, ref: el => (this.monthsDropdown = el), options: this.dropdownMonthOptions, items: [this.value.split("-")[1]], required: this.required, disabled: this.disabled, size: this.size, hideOptional: this.hideOptional, popoverPlacement: this.popoverPlacement, description: this.descriptionMonth, descriptionLong: this.descriptionLongMonth, error: this.errorMonth, a11yDescribedby: this.a11yDescribedbyMonth, invalid: this.invalidMonth }), h("div", { key: 'eb3cf2c4a3182652a2c92d68e38ed931d1df882a', class: "stzh-monthyearpicker__separator" }, "/"), h("stzh-dropdown", { key: '9a7c7db8b02e31005ebc0dc163eb523bbadec5d4', open: this.yearOpen, name: `${this.name}-year`, class: "stzh-monthyearpicker__years-dropdown", label: this.yearLabel || this.localization.yearLabel, options: this.dropdownYearOptions, items: [this.value.split("-")[0]], required: this.required, disabled: this.disabled, size: this.size, hideOptional: this.hideOptional, popoverPlacement: this.popoverPlacement, description: this.descriptionYear, descriptionLong: this.descriptionLongYear, error: this.errorYear, a11yDescribedby: this.a11yDescribedbyYear, invalid: this.invalidYear })))));
     }
     static get is() { return "stzh-monthyearpicker"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-offline-indicator/stzh-offline-indicator.js CHANGED Viewed

@@ -89,7 +89,7 @@ export class StzhOfflineIndicator {
         const classes = {
             "stzh-offline-indicator": true,
         };
-        return (h(Host, { key: 'a7c4e4887f24f1e58f80b3a45cb1d877b35d88e1', "is-offline": this.isOffline }, h("div", { key: '279b9293cf33069dd451b4856f8ec7372ad4b3ae', class: classes })));
+        return (h(Host, { key: 'bb4fa559493c8b9a6e373b058f777e5d859e914e', "is-offline": this.isOffline }, h("div", { key: '369a1f3ecca56a5707973dea8162fdffb342203b', class: classes })));
     }
     static get is() { return "stzh-offline-indicator"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-olmap/stzh-olmap.js CHANGED Viewed

@@ -847,7 +847,7 @@ export class StzhOlmap {
             "stzh-olmap--has-no-print-control": !this.printControl,
             "stzh-olmap--has-location-control": this.locationControl,
         };
-        return (h(Host, { key: 'a080f7c5ab57c1d77a963aa45118051db67dc423' }, h("div", { key: 'ece18b67e3f23a60add4e7f68bbe793a640c253b', class: classes }, h("div", { key: '24096ec0cc94cac20b97335030778bc8a1626e81', ref: el => (this.mapElement = el), class: "stzh-olmap__map" }), h("div", { key: 'a71c86d30ba9ae047ac62c33924ad70af1a08dcd', ref: el => (this.popoverElement = el), class: "stzh-olmap__popover" }))));
+        return (h(Host, { key: '28af5e99eb7a3329ea19c1a8e9d8dcaa4a87d4db' }, h("div", { key: 'bfc23a6e76c3b9364d768aa5de70b9b9f4c9e911', class: classes }, h("div", { key: '66f5d7b9846d35ea7810ea5d3ce9fab708c0a035', ref: el => (this.mapElement = el), class: "stzh-olmap__map" }), h("div", { key: 'b4c4fc70120000e4584103b67940c29a17effd89', ref: el => (this.popoverElement = el), class: "stzh-olmap__popover" }))));
     }
     static get is() { return "stzh-olmap"; }
     static get originalStyleUrls() {

package/dist/collection/components/stzh-overlay/stzh-overlay.js CHANGED Viewed

@@ -82,7 +82,7 @@ export class StzhOverlay {
             "stzh-overlay": true,
             "stzh-overlay--is-open": this.open,
         };
-        return (h(Host, { key: 'f87df03b3bdb133052bb8c4fe0db3ec5b65ce644' }, h("div", { key: '75f5f8848477738ac4ccdb41cb10dd6214d7fec7', class: classes }, h("div", { key: 'fb2266d9c31da1723c7bb9ee31622e6e70148b70', class: "stzh-overlay__backdrop" }), h("div", { key: '6dcc3b7f0371b5ae0e60e636051e615bdd8f098b', class: "stzh-overlay__content" }, h("div", { key: '9d2a0a7a9a2f323c7cd6374691c2be3a36e8368d', class: "stzh-overlay__content-inner", ref: el => (this.dialogElement = el), tabindex: "-1", role: "dialog", "aria-label": this.a11yLabel || null, "aria-hidden": this.open ? "false" : "true" }, h("slot", { key: 'fbb28868d6e8a13a1febfd3ea7dedabac241347f' }))))));
+        return (h(Host, { key: '0b15134290cda0babfb67b8abda289cb6efa4083' }, h("div", { key: 'a424f7e6a9991976b9fc9b089737acee645c4d39', class: classes }, h("div", { key: 'f1390b7a7efcbebd9770ab55a8cef3c7df6aabbe', class: "stzh-overlay__backdrop" }), h("div", { key: '69ddf68b7f53400e956b6f985f418175a6b1bdc2', class: "stzh-overlay__content" }, h("div", { key: '5c015d5b7ed1238d812143504be1801973f13197', class: "stzh-overlay__content-inner", ref: el => (this.dialogElement = el), tabindex: "-1", role: "dialog", "aria-label": this.a11yLabel || null, "aria-hidden": this.open ? "false" : "true" }, h("slot", { key: 'e0bf72cca39bcefc45019d9b749805a12776434d' }))))));
     }
     static get is() { return "stzh-overlay"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-pagination/stzh-pagination.js CHANGED Viewed

@@ -74,7 +74,7 @@ export class StzhPagination {
             "stzh-pagination": true,
             [`stzh-pagination--size-${this.size}`]: !!this.size,
         };
-        return (h(Host, { key: 'a6f75265358d0e9528f3fa9e8f40253bd6d8bfaf', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '3cfd1d801e448d12520653767d619c2d9482368d', class: classes }, this.allowManualInput ? (h(Fragment, null, h("stzh-input", { class: "stzh-pagination__input", type: "number", min: 1, max: this.total, label: this.label || this.localization.label, labelHidden: true, ref: el => (this.input = el), onStzhChange: this.onInputChange, value: ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString()) || "", required: this.required, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, a11yDescribedby: this.a11yDescribedby, name: this.name, size: this.size, invalid: this.invalid, hideOptional: true, noAutocomplete: true }), h("div", { class: "stzh-pagination__total" }, this.localization.totalLabel.replace(/\{total\}/gi, this.total.toString())))) : (h("div", { class: "stzh-pagination__total" }, this.value, " ", this.localization.totalLabel.replace(/\{total\}/gi, this.total.toString()))), h("stzh-buttongroup", { key: 'e5ef6d8efa713aaa9e68e06fe6a6090eea7ade51' }, h("stzh-button", { key: '6cfd548163f9ef85ba998f3155f12ece9b41b27e', variant: "tertiary", icon: "angle-left", "icon-only": true, size: this.size, a11yDisabled: this.value <= 1, a11yDescribedby: this.a11yDescribedby, a11yLabel: `${this.label || this.localization.label}, ${this.localization.prevLabel}, ${this.localization.selectedPageLabel} ${this.value}`, disabled: this.disabled, onClick: () => this.prev() }), h("stzh-button", { key: '1788d6d7395903032fea2e7556ba29e4c701e425', variant: "tertiary", icon: "angle-right", "icon-only": true, size: this.size, a11yDisabled: this.value >= this.total, a11yDescribedby: this.a11yDescribedby, a11yLabel: `${this.label || this.localization.label}, ${this.localization.nextLabel}, ${this.localization.selectedPageLabel} ${this.value}`, disabled: this.disabled, onClick: () => this.next() })))));
+        return (h(Host, { key: 'c96bb076a8efad512d90319af275ecef18375c62', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: 'ee505d4f5672e5bf03cdf360dedad66e2b465f19', class: classes }, this.allowManualInput ? (h(Fragment, null, h("stzh-input", { class: "stzh-pagination__input", type: "number", min: 1, max: this.total, label: this.label || this.localization.label, labelHidden: true, ref: el => (this.input = el), onStzhChange: this.onInputChange, value: ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString()) || "", required: this.required, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, a11yDescribedby: this.a11yDescribedby, name: this.name, size: this.size, invalid: this.invalid, hideOptional: true, noAutocomplete: true }), h("div", { class: "stzh-pagination__total" }, this.localization.totalLabel.replace(/\{total\}/gi, this.total.toString())))) : (h("div", { class: "stzh-pagination__total" }, this.value, " ", this.localization.totalLabel.replace(/\{total\}/gi, this.total.toString()))), h("stzh-buttongroup", { key: 'ecd3781f378ecf11bfa0a772e0d32922af3bda7b' }, h("stzh-button", { key: '128b04fd667d1a3f52b5a78c0d05849da3bd1fbb', variant: "tertiary", icon: "angle-left", "icon-only": true, size: this.size, a11yDisabled: this.value <= 1, a11yDescribedby: this.a11yDescribedby, a11yLabel: `${this.label || this.localization.label}, ${this.localization.prevLabel}, ${this.localization.selectedPageLabel} ${this.value}`, disabled: this.disabled, onClick: () => this.prev() }), h("stzh-button", { key: 'ee96341a6dda021fba99cc25d6e817db792b54d6', variant: "tertiary", icon: "angle-right", "icon-only": true, size: this.size, a11yDisabled: this.value >= this.total, a11yDescribedby: this.a11yDescribedby, a11yLabel: `${this.label || this.localization.label}, ${this.localization.nextLabel}, ${this.localization.selectedPageLabel} ${this.value}`, disabled: this.disabled, onClick: () => this.next() })))));
     }
     static get is() { return "stzh-pagination"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-panorama/stzh-panorama.js CHANGED Viewed

@@ -328,9 +328,9 @@ export class StzhPanorama {
             text: imageTitle,
         }));
         const currentScene = this._scenes.find(({ sceneId }) => sceneId === this.scene);
-        return (h(Host, { key: 'e2e17f1a5e0314174c820d8551edf1fbb452bbb0' }, h("div", { key: '816f51b66f11337a27ac7881100e451f21d927d1', class: classes }, h("stzh-figure", { key: '6b390f5f9092d7a7726e41cf4e0a7e6852fa5658', class: "stzh-panorama__figure", heading: this.heading, caption: currentScene.caption || this.caption, copyright: currentScene.copyright || this.copyright }, h("stzh-ratio", { key: '9c888f468827cf86b7d8fdbdccc978982c191b64' }, h("div", { key: '3f1b367eab34307a515793bb04c21a4f428b2df6', ref: el => (this.containerElement = el), class: "stzh-panorama__container", tabindex: "0" }, h("div", { key: 'e86b824b7fbded76e8a3c1040f5215c871323dc9', class: "stzh-panorama__sceneselector" }, sceneOptions.length > 1 && (h("stzh-dropdown", { key: '64188c4f27d7b5645001293e15a127ce2b302ac6', class: "stzh-panorama__sceneselector-dropdown", size: "small", popoverPlacement: "top", label: this.localization.sceneLabel, labelHidden: true, noSearch: true, items: [this.scene], options: sceneOptions, onStzhChange: this.handleSceneDropdownChange })), (currentScene.imageAuthor || currentScene.copyright || this.copyright) && (h("div", { key: '5dd8c6aa6265c51662fa5f41a162c3f7701aa933', class: "stzh-panorama__copyright" }, currentScene.imageAuthor || currentScene.copyright || this.copyright))), h("div", { key: 'a8d65e0c01b01466025a2190dbd948b6b89ff715', class: "stzh-panorama__controls", onKeyDown: this.handleControlsKeydown }, this.showControls && (h(Fragment, { key: 'd983af0ef37487e6ba1776a5a3a8bde7cadde0bc' }, h("stzh-button", { key: '63a496c7595618ba5563697a95d919bec1f17a77', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panLeft, variant: "secondary", icon: "arrow-left", size: "small", onClick: () => this.action("panLeft") }), h("stzh-button", { key: 'f4d2124fbb7dcabcf3629aaf0a2073594e30edba', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panRight, variant: "secondary", icon: "arrow-right", size: "small", onClick: () => this.action("panRight") }), h("stzh-button", { key: '28c5fb49bf771dd41ae826a2107a6295d4b76b0b', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panUp, variant: "secondary", icon: "arrow-up", size: "small", onClick: () => this.action("panUp") }), h("stzh-button", { key: '2e452d171515cbdee667a8edf250f2e6ecd54c04', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panDown, variant: "secondary", icon: "arrow-down", size: "small", onClick: () => this.action("panDown") }), h("stzh-button", { key: '7ce2e270dd5039f860fce36aead3cc38feae01cb', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.zoomIn, variant: "secondary", icon: "plus", size: "small", onClick: () => this.action("zoomIn") }), h("stzh-button", { key: 'd9a2465fc035fb19b2bc49006125733861ac298b', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.zoomOut, variant: "secondary", icon: "minus", size: "small", onClick: () => this.action("zoomOut") }))), this.isOrientationSupported && (h("stzh-button", { key: 'bbc3001ba0d7db4c8a96a0872717b53f1ee9fb2e', class: "stzh-panorama__control", variant: "secondary", a11yLabel: this.isOrientationActive
+        return (h(Host, { key: 'b655766a1672228c550870ac9c31d3a1e8e41e22' }, h("div", { key: 'af1ea689328cf6086abd4d77d47181d242698217', class: classes }, h("stzh-figure", { key: 'fa43dc03602d65d2aca0bbdb13bed50e208abf7e', class: "stzh-panorama__figure", heading: this.heading, caption: currentScene.caption || this.caption, copyright: currentScene.copyright || this.copyright }, h("stzh-ratio", { key: '392f882d38d78e70f9ef0de965789e1dfd5c8a70' }, h("div", { key: '115d0c41fa86c8747aca52e240ca970f05635a48', ref: el => (this.containerElement = el), class: "stzh-panorama__container", tabindex: "0" }, h("div", { key: 'e67d548071fb82b0f53d8260a1e9329ec6fc08b5', class: "stzh-panorama__sceneselector" }, sceneOptions.length > 1 && (h("stzh-dropdown", { key: '7957bd4d735c866387da3995cb4ba93d7183001e', class: "stzh-panorama__sceneselector-dropdown", size: "small", popoverPlacement: "top", label: this.localization.sceneLabel, labelHidden: true, noSearch: true, items: [this.scene], options: sceneOptions, onStzhChange: this.handleSceneDropdownChange })), (currentScene.imageAuthor || currentScene.copyright || this.copyright) && (h("div", { key: 'b8fd89547c99c42d83f331da9abadfb317430c15', class: "stzh-panorama__copyright" }, currentScene.imageAuthor || currentScene.copyright || this.copyright))), h("div", { key: '4091737aeefd0b98b73025de8eb5f49c9307bcb4', class: "stzh-panorama__controls", onKeyDown: this.handleControlsKeydown }, this.showControls && (h(Fragment, { key: '9a9dc27f4c8f32416bf7f0742980afe21241e780' }, h("stzh-button", { key: 'fe2aeddfaa86920668ae99b8980cc15468655ff0', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panLeft, variant: "secondary", icon: "arrow-left", size: "small", onClick: () => this.action("panLeft") }), h("stzh-button", { key: '538ee2ac1943e2f0baac9ebf71aa049839e6a2e2', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panRight, variant: "secondary", icon: "arrow-right", size: "small", onClick: () => this.action("panRight") }), h("stzh-button", { key: '38a04ab80ca4362a726562165d6a6aa6b7444341', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panUp, variant: "secondary", icon: "arrow-up", size: "small", onClick: () => this.action("panUp") }), h("stzh-button", { key: 'b8b492dd85322df74c345c4aafc9eb74c9f505b7', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panDown, variant: "secondary", icon: "arrow-down", size: "small", onClick: () => this.action("panDown") }), h("stzh-button", { key: '0a42a7bc499234b46603eab850d46899c0f6656c', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.zoomIn, variant: "secondary", icon: "plus", size: "small", onClick: () => this.action("zoomIn") }), h("stzh-button", { key: 'ea58a4a8f7909ead4a98a493e21aa851a628c706', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.zoomOut, variant: "secondary", icon: "minus", size: "small", onClick: () => this.action("zoomOut") }))), this.isOrientationSupported && (h("stzh-button", { key: '56aa87820ea94a34055c017cc4b1ec3b05aaa9b2', class: "stzh-panorama__control", variant: "secondary", a11yLabel: this.isOrientationActive
                 ? this.localization.stopOrientation
-                : this.localization.startOrientation, icon: this.isOrientationActive ? "target-bullet" : "target", iconOnly: true, size: "small", onClick: () => this.action(this.isOrientationActive ? "stopOrientation" : "startOrientation") })), h("stzh-button", { key: '228c83e4c03c14f197b87d2eb068d6a98d8ed862', class: "stzh-panorama__control", variant: "secondary", a11yLabel: this.isFullscreen
+                : this.localization.startOrientation, icon: this.isOrientationActive ? "target-bullet" : "target", iconOnly: true, size: "small", onClick: () => this.action(this.isOrientationActive ? "stopOrientation" : "startOrientation") })), h("stzh-button", { key: '558609476a69539b4ec3733de501d5d0c1400bcd', class: "stzh-panorama__control", variant: "secondary", a11yLabel: this.isFullscreen
                 ? this.localization.disableFullscreenLabel
                 : this.localization.enableFullscreenLabel, icon: this.isFullscreen ? "shrink" : "expand", iconOnly: true, size: "small", onClick: () => this.action("fullscreen") }))))))));
     }