@siemens/ix 4.0.0 → 4.1.0

package/dist/collection/components/input/number-input.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2024 Siemens AG
+ * SPDX-FileCopyrightText: 2025 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -23,6 +23,7 @@ import { makeRef } from "../utils/make-ref";
 import { InputElement, SlotEnd, SlotStart } from "./input.fc";
 import { addDisposableChangesAndVisibilityObservers, adjustPaddingForStartAndEnd, checkAllowedKeys, checkInternalValidity, mapValidationResult, onInputBlur, } from "./input.util";
 let numberInputIds = 0;
+const INVALID_NUMBER_INPUT_REGEX = /[^\dEe+\-.,]/;
 /**
  * @form-ready
  * @slot start - Element will be displayed at the start of the input
@@ -31,11 +32,11 @@ let numberInputIds = 0;
 export class NumberInput {
     constructor() {
         /**
-         * The value of the input field
+         * The value of the input field. Supports numeric values, scientific notation (1E6, 1E-6), or undefined for empty.
          */
         this.value = 0;
         /**
-         * Indicates if the field is required
+         * Indicates if the field is required. When required, empty values (undefined) are not accepted.
          */
         this.required = false;
         /**
@@ -46,6 +47,27 @@ export class NumberInput {
          * Indicates if the field is read-only
          */
         this.readonly = false;
+        /**
+         * Step value to increment or decrement the input value. Default step value is 1.
+         *
+         */
+        this.step = 1;
+        /**
+         * If false, pressing Enter will submit the form (if inside a form).
+         * Set to true to suppress submit on Enter.
+         */
+        this.suppressSubmitOnEnter = false;
+        /**
+         * Text alignment within the number input. 'start' aligns the text to the start of the input, 'end' aligns the text to the end of the input.
+         */
+        this.textAlignment = 'end';
+        /**
+         * If true, the valueChange event will return null instead of 0 for an empty input state.
+         * This property will be removed in 5.0.0 and this behaviour will be default.
+         *
+         * @since 4.1.0
+         */
+        this.allowEmptyValueChange = false;
         this.isInvalid = false;
         this.isValid = false;
         this.isInfo = false;
@@ -56,6 +78,70 @@ export class NumberInput {
         this.slotStartRef = makeRef();
         this.numberInputId = `number-input-${numberInputIds++}`;
         this.touched = false;
+        this.handleInputChange = (inputValue) => {
+            const parsedValue = this.convertNumberStringToFloat(inputValue);
+            const isScientificNotation = this.isScientificNotation(inputValue.trim());
+            if (isScientificNotation) {
+                this.formInternals.setFormValue(inputValue);
+            }
+            this.handleValueChangeEvent(parsedValue);
+        };
+        this.handleBlur = () => {
+            if (!this.inputRef.current)
+                return;
+            const inputValue = this.inputRef.current.value;
+            const parsedValue = this.convertNumberStringToFloat(inputValue);
+            if (parsedValue !== undefined) {
+                this.inputRef.current.value = this.formatValue(parsedValue);
+            }
+            this.updateFormInternalValue(parsedValue);
+            onInputBlur(this, this.inputRef.current);
+            this.touched = true;
+        };
+        this.handleKeyDown = (event) => {
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            switch (event.key) {
+                case 'ArrowUp':
+                    event.preventDefault();
+                    this.handleStepOperation('up');
+                    break;
+                case 'ArrowDown':
+                    event.preventDefault();
+                    this.handleStepOperation('down');
+                    break;
+            }
+        };
+        this.handleBeforeInput = (e) => {
+            var _a, _b;
+            if (this.disabled || this.readonly)
+                return;
+            if (e.inputType === 'insertText') {
+                const character = e.data;
+                if (character && INVALID_NUMBER_INPUT_REGEX.test(character)) {
+                    e.preventDefault();
+                }
+            }
+            if (e.inputType === 'insertFromPaste') {
+                const dt = e.dataTransfer || e.clipboardData;
+                const text = (_b = (_a = dt === null || dt === void 0 ? void 0 : dt.getData) === null || _a === void 0 ? void 0 : _a.call(dt, 'text')) !== null && _b !== void 0 ? _b : '';
+                if (INVALID_NUMBER_INPUT_REGEX.test(text)) {
+                    e.preventDefault();
+                }
+            }
+        };
+        this.handlePaste = (e) => {
+            var _a, _b;
+            // Fallback for browsers that don’t fire beforeinput for paste
+            const text = (_b = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) !== null && _b !== void 0 ? _b : '';
+            if (INVALID_NUMBER_INPUT_REGEX.test(text)) {
+                e.preventDefault();
+            }
+        };
+    }
+    onValueChange(newValue) {
+        this.updateFormInternalValue(newValue);
     }
     updateClassMappings(result) {
         mapValidationResult(this, result);
@@ -74,10 +160,60 @@ export class NumberInput {
     updatePaddings() {
         adjustPaddingForStartAndEnd(this.slotStartRef.current, this.slotEndRef.current, this.inputRef.current);
     }
+    convertNumberStringToFloat(input) {
+        if (!input || input.trim() === '') {
+            return undefined;
+        }
+        const parsed = Number.parseFloat(input);
+        return Number.isNaN(parsed) ? undefined : parsed;
+    }
+    isScientificNotation(input) {
+        const parsed = Number.parseFloat(input);
+        return (!Number.isNaN(parsed) && Number.isFinite(parsed) && /[eE]/.test(input));
+    }
+    formatValue(value) {
+        if (value === undefined || value === null) {
+            return '';
+        }
+        return value.toString();
+    }
+    handleValueChangeEvent(value) {
+        this.valueChange.emit(this.allowEmptyValueChange ? value : (value !== null && value !== void 0 ? value : 0));
+    }
     updateFormInternalValue(value) {
-        this.formInternals.setFormValue(value.toString());
+        const formValue = value !== undefined && value !== null ? value.toString() : '';
+        this.formInternals.setFormValue(formValue);
         this.value = value;
     }
+    handleStepOperation(operation) {
+        var _a, _b;
+        if (!this.inputRef.current) {
+            return;
+        }
+        const currentValue = (_a = this.value) !== null && _a !== void 0 ? _a : 0;
+        const stepValue = typeof this.step === 'string'
+            ? Number.parseFloat(this.step)
+            : ((_b = this.step) !== null && _b !== void 0 ? _b : 1);
+        let newValue;
+        if (operation === 'up') {
+            newValue = currentValue + stepValue;
+        }
+        else {
+            newValue = currentValue - stepValue;
+        }
+        if (this.min !== undefined) {
+            const minValue = typeof this.min === 'string' ? Number.parseFloat(this.min) : this.min;
+            newValue = Math.max(newValue, minValue);
+        }
+        if (this.max !== undefined) {
+            const maxValue = typeof this.max === 'string' ? Number.parseFloat(this.max) : this.max;
+            newValue = Math.min(newValue, maxValue);
+        }
+        this.inputRef.current.value = newValue.toString();
+        this.updateFormInternalValue(newValue);
+        checkInternalValidity(this, this.inputRef.current);
+        this.handleValueChangeEvent(newValue);
+    }
     /** @internal */
     async getAssociatedFormElement() {
         return this.formInternals.form;
@@ -86,9 +222,10 @@ export class NumberInput {
     async hasValidValue() {
         const nativeInput = await this.getNativeInputElement();
         if (nativeInput.value === '') {
-            return Promise.resolve(false);
+            return !this.required;
         }
-        return Promise.resolve(this.value !== null && this.value !== undefined && !isNaN(this.value));
+        const parsedValue = this.convertNumberStringToFloat(nativeInput.value);
+        return parsedValue !== undefined;
     }
     /**
      * Returns the native input element used under the hood
@@ -110,36 +247,24 @@ export class NumberInput {
         return Promise.resolve(this.touched);
     }
     render() {
+        var _a;
         const showStepperButtons = this.showStepperButtons && (this.disabled || this.readonly) === false;
-        return (h(Host, { key: 'c42e57d87186db97d228a3c80fa487c3e2bbe5d0', class: {
+        return (h(Host, { key: '4b541dbe6fe2b32b5158eed8f398de300ea71bb4', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, h("ix-field-wrapper", { key: '2180bbdb30f50945159b742399297ce011729cf7', id: this.numberInputId, required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: '905329aff61d43248e3ee53cb900e5d611b74999', class: {
+            } }, h("ix-field-wrapper", { key: '7ef2bb50ba7c9b3b24612752155a2072329e4b61', id: this.numberInputId, required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: '7e71d63d2a9ecbb16550925e68f3dc8dd76c3968', class: {
                 'input-wrapper': true,
                 'show-stepper-buttons': !!this.showStepperButtons,
-            } }, h(SlotStart, { key: '9acae4279a3d0b81e1e863e25875176e5e73cabf', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h(InputElement, { key: 'e9e3bdebcd1165efdcb0359a6cd9fd90ecb5d4ef', id: this.numberInputId, readonly: this.readonly, disabled: this.disabled, step: this.step, min: this.min, max: this.max, pattern: this.pattern, type: 'number', isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, inputRef: this.inputRef, onKeyPress: (event) => checkAllowedKeys(this, event), valueChange: (value) => this.valueChange.emit(Number(value)), updateFormInternalValue: (value) => this.updateFormInternalValue(Number(value)), onBlur: () => {
-                onInputBlur(this, this.inputRef.current);
-                this.touched = true;
-            } }), h(SlotEnd, { key: 'f9e41241aaff4d70ea46315fd39a908cdfe14e11', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("div", { key: '36507af1b806bd2fc6e4cc1d4d34de9fe8dd8ba0', class: {
+            } }, h(SlotStart, { key: '8d936c9126f94c42db87b2d95d34ab178eadd31d', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h(InputElement, { key: 'c56f510ea8a519204d3d36136d4b0a5a17246370', id: this.numberInputId, readonly: this.readonly, disabled: this.disabled, step: this.step, min: this.min, max: this.max, pattern: this.pattern, type: 'number', isInvalid: this.isInvalid, required: this.required, value: this.formatValue(this.value), placeholder: this.placeholder, inputRef: this.inputRef, onKeyPress: (event) => checkAllowedKeys(this, event), onKeyDown: (event) => this.handleKeyDown(event), onBeforeInput: (event) => this.handleBeforeInput(event), onPaste: (event) => this.handlePaste(event), valueChange: this.handleInputChange, updateFormInternalValue: (value) => {
+                const isScientificNotation = this.isScientificNotation(value.trim());
+                if (!isScientificNotation) {
+                    const parsedValue = this.convertNumberStringToFloat(value);
+                    this.updateFormInternalValue(parsedValue);
+                }
+            }, onBlur: this.handleBlur, form: (_a = this.formInternals.form) !== null && _a !== void 0 ? _a : undefined, suppressSubmitOnEnter: this.suppressSubmitOnEnter, textAlignment: this.textAlignment }), h(SlotEnd, { key: '2d7e82c421d51985c9d24c69b6f641279e3e84aa', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("div", { key: '5b1e6f03bf456305386537428b23b3fc2706e411', class: {
                 'number-stepper-container': true,
                 'container-hidden': !showStepperButtons,
-            } }, h("ix-icon-button", { key: '0bef82df236486f49f71da016edb67e7edbd4775', variant: "subtle-tertiary", icon: iconMinus, size: "16", class: "number-stepper-button step-minus", "aria-label": "decrement number", onClick: () => {
-                if (!this.inputRef.current) {
-                    return;
-                }
-                this.inputRef.current.stepDown();
-                checkInternalValidity(this, this.inputRef.current);
-                this.updateFormInternalValue(Number(this.inputRef.current.value));
-                this.valueChange.emit(this.value);
-            } }), h("ix-icon-button", { key: '34f4f8b3dc4e90ec9ada96f15280b39320ed5fb9', variant: "subtle-tertiary", icon: iconPlus, size: "16", class: "number-stepper-button step-plus", "aria-label": "increment number", onClick: () => {
-                if (!this.inputRef.current) {
-                    return;
-                }
-                this.inputRef.current.stepUp();
-                checkInternalValidity(this, this.inputRef.current);
-                this.updateFormInternalValue(Number(this.inputRef.current.value));
-                this.valueChange.emit(this.value);
-            } })))))));
+            } }, h("ix-icon-button", { key: '44a5f583fb174c556a063f384174883ec307f9f4', variant: "subtle-tertiary", icon: iconMinus, size: "16", class: "number-stepper-button step-minus", "aria-label": "decrement number", onClick: () => this.handleStepOperation('down') }), h("ix-icon-button", { key: 'c007fe5451c3f124e61214160c7ebc8cc1150b25', variant: "subtle-tertiary", icon: iconPlus, size: "16", class: "number-stepper-button step-plus", "aria-label": "increment number", onClick: () => this.handleStepOperation('up') })))))));
     }
     static get is() { return "ix-number-input"; }
     static get encapsulation() { return "shadow"; }
@@ -200,14 +325,14 @@ export class NumberInput {
                 "mutable": true,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The value of the input field"
+                    "text": "The value of the input field. Supports numeric values, scientific notation (1E6, 1E-6), or undefined for empty."
                 },
                 "getter": false,
                 "setter": false,
@@ -227,7 +352,7 @@ export class NumberInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Indicates if the field is required"
+                    "text": "Indicates if the field is required. When required, empty values (undefined) are not accepted."
                 },
                 "getter": false,
                 "setter": false,
@@ -513,16 +638,77 @@ export class NumberInput {
                 },
                 "required": false,
                 "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Step value to increment or decrement the input value. Default step value is 1."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "suppressSubmitOnEnter": {
+                "type": "boolean",
+                "attribute": "suppress-submit-on-enter",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If false, pressing Enter will submit the form (if inside a form).\nSet to true to suppress submit on Enter."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "textAlignment": {
+                "type": "string",
+                "attribute": "text-alignment",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'end'",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text alignment within the number input. 'start' aligns the text to the start of the input, 'end' aligns the text to the end of the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'end'"
+            },
+            "allowEmptyValueChange": {
+                "type": "boolean",
+                "attribute": "allow-empty-value-change",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
                 "docs": {
                     "tags": [{
                             "name": "since",
-                            "text": "3.0.0"
+                            "text": "4.1.0"
                         }],
-                    "text": "Step value to increment or decrement the input value"
+                    "text": "If true, the valueChange event will return null instead of 0 for an empty input state.\nThis property will be removed in 5.0.0 and this behaviour will be default."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": true,
+                "defaultValue": "false"
             }
         };
     }
@@ -695,6 +881,12 @@ export class NumberInput {
         };
     }
     static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChange"
+            }];
+    }
     static get attachInternalsMemberName() { return "formInternals"; }
 }
 __decorate([

package/dist/collection/components/input/number-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"number-input.js","sourceRoot":"","sources":["../../../src/components/input/number-input.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { iconMinus, iconPlus } from '@siemens/ix-icons/icons';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport {\n  HookValidationLifecycle,\n  IxInputFieldComponent,\n  ValidationResults,\n} from '../utils/input';\nimport { makeRef } from '../utils/make-ref';\nimport { InputElement, SlotEnd, SlotStart } from './input.fc';\nimport {\n  addDisposableChangesAndVisibilityObservers,\n  adjustPaddingForStartAndEnd,\n  checkAllowedKeys,\n  checkInternalValidity,\n  DisposableChangesAndVisibilityObservers,\n  mapValidationResult,\n  onInputBlur,\n} from './input.util';\n\nlet numberInputIds = 0;\n\n/**\n * @form-ready\n * @slot start - Element will be displayed at the start of the input\n * @slot end - Element will be displayed at the end of the input\n */\n@Component({\n  tag: 'ix-number-input',\n  styleUrl: 'number-input.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NumberInput implements IxInputFieldComponent<number> {\n  @Element() hostElement!: HTMLIxNumberInputElement;\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * name of the input element\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * placeholder of the input element\n   */\n  @Prop({ reflect: true }) placeholder?: string;\n\n  /**\n   * The value of the input field\n   */\n  @Prop({ reflect: true, mutable: true }) value: number = 0;\n\n  /**\n   * Indicates if the field is required\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Disables the input field\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Indicates if the field is read-only\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * The helper text for the input field\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * The info text for the input field\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Indicates if the text should be shown as a tooltip\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  /**\n   * The valid text for the input field\n   */\n  @Prop() validText?: string;\n\n  /**\n   * The warning text for the input field\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * The label for the input field\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /**\n   * The error text for the input field\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * The pattern for the input field\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * The minimum value for the input field\n   */\n  @Prop() min?: string | number;\n\n  /**\n   * The maximum value for the input field\n   */\n  @Prop() max?: string | number;\n\n  /**\n   * The allowed characters pattern for the input field\n   */\n  @Prop() allowedCharactersPattern?: string;\n\n  /**\n   * Indicates if the stepper buttons should be shown\n   */\n  @Prop() showStepperButtons?: boolean;\n\n  /**\n   * Step value to increment or decrement the input value\n   *\n   * @since 3.0.0\n   */\n  @Prop() step?: string | number;\n\n  /**\n   * Event emitted when the value of the input field changes\n   */\n  @Event() valueChange!: EventEmitter<number>;\n\n  /**\n   * Event emitted when the validity state of the input field changes\n   */\n  @Event() validityStateChange!: EventEmitter<ValidityState>;\n\n  /**\n   * Event emitted when the input field loses focus\n   */\n  @Event() ixBlur!: EventEmitter<void>;\n\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n  @State() isInvalidByRequired = false;\n\n  private readonly inputRef = makeRef<HTMLInputElement>();\n  private readonly slotEndRef = makeRef<HTMLDivElement>();\n  private readonly slotStartRef = makeRef<HTMLDivElement>();\n  private readonly numberInputId = `number-input-${numberInputIds++}`;\n  private touched = false;\n\n  private disposableChangesAndVisibilityObservers?: DisposableChangesAndVisibilityObservers;\n\n  @HookValidationLifecycle()\n  updateClassMappings(result: ValidationResults) {\n    mapValidationResult(this, result);\n  }\n\n  componentWillLoad() {\n    this.updateFormInternalValue(this.value);\n  }\n\n  connectedCallback() {\n    this.disposableChangesAndVisibilityObservers =\n      addDisposableChangesAndVisibilityObservers(\n        this.hostElement,\n        this.updatePaddings.bind(this)\n      );\n  }\n\n  disconnectedCallback() {\n    this.disposableChangesAndVisibilityObservers?.();\n  }\n\n  private updatePaddings() {\n    adjustPaddingForStartAndEnd(\n      this.slotStartRef.current,\n      this.slotEndRef.current,\n      this.inputRef.current\n    );\n  }\n\n  updateFormInternalValue(value: number) {\n    this.formInternals.setFormValue(value.toString());\n    this.value = value;\n  }\n\n  /** @internal */\n  @Method()\n  async getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return this.formInternals.form;\n  }\n\n  /** @internal */\n  @Method()\n  async hasValidValue(): Promise<boolean> {\n    const nativeInput = await this.getNativeInputElement();\n    if (nativeInput.value === '') {\n      return Promise.resolve(false);\n    }\n\n    return Promise.resolve(\n      this.value !== null && this.value !== undefined && !isNaN(this.value)\n    );\n  }\n\n  /**\n   * Returns the native input element used under the hood\n   */\n  @Method()\n  getNativeInputElement(): Promise<HTMLInputElement> {\n    return this.inputRef.waitForCurrent();\n  }\n\n  /**\n   * Focuses the input field\n   */\n  @Method()\n  async focusInput(): Promise<void> {\n    return (await this.getNativeInputElement()).focus();\n  }\n\n  /**\n   * Returns true if the input field has been touched\n   * @internal\n   */\n  @Method()\n  isTouched(): Promise<boolean> {\n    return Promise.resolve(this.touched);\n  }\n\n  render() {\n    const showStepperButtons =\n      this.showStepperButtons && (this.disabled || this.readonly) === false;\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          readonly: this.readonly,\n        }}\n      >\n        <ix-field-wrapper\n          id={this.numberInputId}\n          required={this.required}\n          label={this.label}\n          helperText={this.helperText}\n          invalidText={this.invalidText}\n          infoText={this.infoText}\n          warningText={this.warningText}\n          validText={this.validText}\n          showTextAsTooltip={this.showTextAsTooltip}\n          isInvalid={this.isInvalid}\n          isValid={this.isValid}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          controlRef={this.inputRef}\n        >\n          <div\n            class={{\n              'input-wrapper': true,\n              'show-stepper-buttons': !!this.showStepperButtons,\n            }}\n          >\n            <SlotStart\n              slotStartRef={this.slotStartRef}\n              onSlotChange={() => this.updatePaddings()}\n            ></SlotStart>\n\n            <InputElement\n              id={this.numberInputId}\n              readonly={this.readonly}\n              disabled={this.disabled}\n              step={this.step}\n              min={this.min}\n              max={this.max}\n              pattern={this.pattern}\n              type={'number'}\n              isInvalid={this.isInvalid}\n              required={this.required}\n              value={this.value}\n              placeholder={this.placeholder}\n              inputRef={this.inputRef}\n              onKeyPress={(event) => checkAllowedKeys(this, event)}\n              valueChange={(value) => this.valueChange.emit(Number(value))}\n              updateFormInternalValue={(value) =>\n                this.updateFormInternalValue(Number(value))\n              }\n              onBlur={() => {\n                onInputBlur(this, this.inputRef.current);\n                this.touched = true;\n              }}\n            ></InputElement>\n            <SlotEnd\n              slotEndRef={this.slotEndRef}\n              onSlotChange={() => this.updatePaddings()}\n            >\n              <div\n                class={{\n                  'number-stepper-container': true,\n                  'container-hidden': !showStepperButtons,\n                }}\n              >\n                <ix-icon-button\n                  variant=\"subtle-tertiary\"\n                  icon={iconMinus}\n                  size=\"16\"\n                  class=\"number-stepper-button step-minus\"\n                  aria-label=\"decrement number\"\n                  onClick={() => {\n                    if (!this.inputRef.current) {\n                      return;\n                    }\n                    this.inputRef.current.stepDown();\n                    checkInternalValidity(this, this.inputRef.current);\n                    this.updateFormInternalValue(\n                      Number(this.inputRef.current.value)\n                    );\n                    this.valueChange.emit(this.value);\n                  }}\n                ></ix-icon-button>\n                <ix-icon-button\n                  variant=\"subtle-tertiary\"\n                  icon={iconPlus}\n                  size=\"16\"\n                  class=\"number-stepper-button step-plus\"\n                  aria-label=\"increment number\"\n                  onClick={() => {\n                    if (!this.inputRef.current) {\n                      return;\n                    }\n                    this.inputRef.current.stepUp();\n                    checkInternalValidity(this, this.inputRef.current);\n                    this.updateFormInternalValue(\n                      Number(this.inputRef.current.value)\n                    );\n                    this.valueChange.emit(this.value);\n                  }}\n                ></ix-icon-button>\n              </div>\n            </SlotEnd>\n          </div>\n        </ix-field-wrapper>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"number-input.js","sourceRoot":"","sources":["../../../src/components/input/number-input.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2025 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { iconMinus, iconPlus } from '@siemens/ix-icons/icons';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport {\n  HookValidationLifecycle,\n  IxInputFieldComponent,\n  ValidationResults,\n} from '../utils/input';\nimport { makeRef } from '../utils/make-ref';\nimport { InputElement, SlotEnd, SlotStart } from './input.fc';\nimport {\n  addDisposableChangesAndVisibilityObservers,\n  adjustPaddingForStartAndEnd,\n  checkAllowedKeys,\n  checkInternalValidity,\n  DisposableChangesAndVisibilityObservers,\n  mapValidationResult,\n  onInputBlur,\n} from './input.util';\n\nlet numberInputIds = 0;\n\nconst INVALID_NUMBER_INPUT_REGEX = /[^\\dEe+\\-.,]/;\n\n/**\n * @form-ready\n * @slot start - Element will be displayed at the start of the input\n * @slot end - Element will be displayed at the end of the input\n */\n@Component({\n  tag: 'ix-number-input',\n  styleUrl: 'number-input.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NumberInput implements IxInputFieldComponent<number> {\n  @Element() hostElement!: HTMLIxNumberInputElement;\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * name of the input element\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * placeholder of the input element\n   */\n  @Prop({ reflect: true }) placeholder?: string;\n\n  /**\n   * The value of the input field. Supports numeric values, scientific notation (1E6, 1E-6), or undefined for empty.\n   */\n  @Prop({ reflect: true, mutable: true }) value?: number = 0;\n\n  /**\n   * Indicates if the field is required. When required, empty values (undefined) are not accepted.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Disables the input field\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Indicates if the field is read-only\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * The helper text for the input field\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * The info text for the input field\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Indicates if the text should be shown as a tooltip\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  /**\n   * The valid text for the input field\n   */\n  @Prop() validText?: string;\n\n  /**\n   * The warning text for the input field\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * The label for the input field\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /**\n   * The error text for the input field\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * The pattern for the input field\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * The minimum value for the input field\n   */\n  @Prop() min?: string | number;\n\n  /**\n   * The maximum value for the input field\n   */\n  @Prop() max?: string | number;\n\n  /**\n   * The allowed characters pattern for the input field\n   */\n  @Prop() allowedCharactersPattern?: string;\n\n  /**\n   * Indicates if the stepper buttons should be shown\n   */\n  @Prop() showStepperButtons?: boolean;\n\n  /**\n   * Step value to increment or decrement the input value. Default step value is 1.\n   *\n   */\n  @Prop() step?: string | number = 1;\n\n  /**\n   * If false, pressing Enter will submit the form (if inside a form).\n   * Set to true to suppress submit on Enter.\n   */\n  @Prop({ reflect: true }) suppressSubmitOnEnter: boolean = false;\n\n  /**\n   * Text alignment within the number input. 'start' aligns the text to the start of the input, 'end' aligns the text to the end of the input.\n   */\n  @Prop() textAlignment: 'start' | 'end' = 'end';\n\n  /**\n   * If true, the valueChange event will return null instead of 0 for an empty input state.\n   * This property will be removed in 5.0.0 and this behaviour will be default.\n   *\n   * @since 4.1.0\n   */\n  @Prop({ reflect: true }) allowEmptyValueChange: boolean = false;\n\n  /**\n   * Event emitted when the value of the input field changes\n   */\n  @Event() valueChange!: EventEmitter<number>;\n\n  /**\n   * Event emitted when the validity state of the input field changes\n   */\n  @Event() validityStateChange!: EventEmitter<ValidityState>;\n\n  /**\n   * Event emitted when the input field loses focus\n   */\n  @Event() ixBlur!: EventEmitter<void>;\n\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n  @State() isInvalidByRequired = false;\n\n  private readonly inputRef = makeRef<HTMLInputElement>();\n  private readonly slotEndRef = makeRef<HTMLDivElement>();\n  private readonly slotStartRef = makeRef<HTMLDivElement>();\n  private readonly numberInputId = `number-input-${numberInputIds++}`;\n  private touched = false;\n\n  private disposableChangesAndVisibilityObservers?: DisposableChangesAndVisibilityObservers;\n\n  @Watch('value')\n  onValueChange(newValue: number | undefined) {\n    this.updateFormInternalValue(newValue!);\n  }\n\n  @HookValidationLifecycle()\n  updateClassMappings(result: ValidationResults) {\n    mapValidationResult(this, result);\n  }\n\n  componentWillLoad() {\n    this.updateFormInternalValue(this.value!);\n  }\n\n  connectedCallback() {\n    this.disposableChangesAndVisibilityObservers =\n      addDisposableChangesAndVisibilityObservers(\n        this.hostElement,\n        this.updatePaddings.bind(this)\n      );\n  }\n\n  disconnectedCallback() {\n    this.disposableChangesAndVisibilityObservers?.();\n  }\n\n  private updatePaddings() {\n    adjustPaddingForStartAndEnd(\n      this.slotStartRef.current,\n      this.slotEndRef.current,\n      this.inputRef.current\n    );\n  }\n\n  private convertNumberStringToFloat(input: string): number | undefined {\n    if (!input || input.trim() === '') {\n      return undefined;\n    }\n\n    const parsed = Number.parseFloat(input);\n    return Number.isNaN(parsed) ? undefined : parsed;\n  }\n\n  private isScientificNotation(input: string): boolean {\n    const parsed = Number.parseFloat(input);\n    return (\n      !Number.isNaN(parsed) && Number.isFinite(parsed) && /[eE]/.test(input)\n    );\n  }\n\n  private formatValue(value: number | undefined): string {\n    if (value === undefined || value === null) {\n      return '';\n    }\n    return value.toString();\n  }\n\n  private handleValueChangeEvent(value: number | undefined) {\n    this.valueChange.emit(this.allowEmptyValueChange ? value : (value ?? 0));\n  }\n\n  updateFormInternalValue(value: number) {\n    const formValue =\n      value !== undefined && value !== null ? value.toString() : '';\n    this.formInternals.setFormValue(formValue);\n    this.value = value;\n  }\n\n  private readonly handleInputChange = (inputValue: string) => {\n    const parsedValue = this.convertNumberStringToFloat(inputValue);\n    const isScientificNotation = this.isScientificNotation(inputValue.trim());\n\n    if (isScientificNotation) {\n      this.formInternals.setFormValue(inputValue);\n    }\n\n    this.handleValueChangeEvent(parsedValue);\n  };\n\n  private readonly handleBlur = () => {\n    if (!this.inputRef.current) return;\n\n    const inputValue = this.inputRef.current.value;\n\n    const parsedValue = this.convertNumberStringToFloat(inputValue);\n\n    if (parsedValue !== undefined) {\n      this.inputRef.current.value = this.formatValue(parsedValue);\n    }\n\n    this.updateFormInternalValue(parsedValue!);\n\n    onInputBlur(this, this.inputRef.current);\n    this.touched = true;\n  };\n\n  private readonly handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    switch (event.key) {\n      case 'ArrowUp':\n        event.preventDefault();\n        this.handleStepOperation('up');\n        break;\n      case 'ArrowDown':\n        event.preventDefault();\n        this.handleStepOperation('down');\n        break;\n    }\n  };\n\n  private readonly handleBeforeInput = (e: InputEvent) => {\n    if (this.disabled || this.readonly) return;\n\n    if (e.inputType === 'insertText') {\n      const character = e.data;\n\n      if (character && INVALID_NUMBER_INPUT_REGEX.test(character)) {\n        e.preventDefault();\n      }\n    }\n\n    if (e.inputType === 'insertFromPaste') {\n      const dt = e.dataTransfer || (e as any).clipboardData;\n      const text = dt?.getData?.('text') ?? '';\n      if (INVALID_NUMBER_INPUT_REGEX.test(text)) {\n        e.preventDefault();\n      }\n    }\n  };\n\n  private readonly handlePaste = (e: ClipboardEvent) => {\n    // Fallback for browsers that don’t fire beforeinput for paste\n    const text = e.clipboardData?.getData('text') ?? '';\n    if (INVALID_NUMBER_INPUT_REGEX.test(text)) {\n      e.preventDefault();\n    }\n  };\n\n  private handleStepOperation(operation: 'up' | 'down') {\n    if (!this.inputRef.current) {\n      return;\n    }\n\n    const currentValue = this.value ?? 0;\n    const stepValue =\n      typeof this.step === 'string'\n        ? Number.parseFloat(this.step)\n        : (this.step ?? 1);\n\n    let newValue: number;\n\n    if (operation === 'up') {\n      newValue = currentValue + stepValue;\n    } else {\n      newValue = currentValue - stepValue;\n    }\n\n    if (this.min !== undefined) {\n      const minValue =\n        typeof this.min === 'string' ? Number.parseFloat(this.min) : this.min;\n      newValue = Math.max(newValue, minValue);\n    }\n\n    if (this.max !== undefined) {\n      const maxValue =\n        typeof this.max === 'string' ? Number.parseFloat(this.max) : this.max;\n      newValue = Math.min(newValue, maxValue);\n    }\n\n    this.inputRef.current.value = newValue.toString();\n    this.updateFormInternalValue(newValue);\n    checkInternalValidity(this, this.inputRef.current);\n    this.handleValueChangeEvent(newValue);\n  }\n\n  /** @internal */\n  @Method()\n  async getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return this.formInternals.form;\n  }\n\n  /** @internal */\n  @Method()\n  async hasValidValue(): Promise<boolean> {\n    const nativeInput = await this.getNativeInputElement();\n    if (nativeInput.value === '') {\n      return !this.required;\n    }\n\n    const parsedValue = this.convertNumberStringToFloat(nativeInput.value);\n    return parsedValue !== undefined;\n  }\n\n  /**\n   * Returns the native input element used under the hood\n   */\n  @Method()\n  getNativeInputElement(): Promise<HTMLInputElement> {\n    return this.inputRef.waitForCurrent();\n  }\n\n  /**\n   * Focuses the input field\n   */\n  @Method()\n  async focusInput(): Promise<void> {\n    return (await this.getNativeInputElement()).focus();\n  }\n\n  /**\n   * Returns true if the input field has been touched\n   * @internal\n   */\n  @Method()\n  isTouched(): Promise<boolean> {\n    return Promise.resolve(this.touched);\n  }\n\n  render() {\n    const showStepperButtons =\n      this.showStepperButtons && (this.disabled || this.readonly) === false;\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          readonly: this.readonly,\n        }}\n      >\n        <ix-field-wrapper\n          id={this.numberInputId}\n          required={this.required}\n          label={this.label}\n          helperText={this.helperText}\n          invalidText={this.invalidText}\n          infoText={this.infoText}\n          warningText={this.warningText}\n          validText={this.validText}\n          showTextAsTooltip={this.showTextAsTooltip}\n          isInvalid={this.isInvalid}\n          isValid={this.isValid}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          controlRef={this.inputRef}\n        >\n          <div\n            class={{\n              'input-wrapper': true,\n              'show-stepper-buttons': !!this.showStepperButtons,\n            }}\n          >\n            <SlotStart\n              slotStartRef={this.slotStartRef}\n              onSlotChange={() => this.updatePaddings()}\n            ></SlotStart>\n\n            <InputElement\n              id={this.numberInputId}\n              readonly={this.readonly}\n              disabled={this.disabled}\n              step={this.step}\n              min={this.min}\n              max={this.max}\n              pattern={this.pattern}\n              type={'number'}\n              isInvalid={this.isInvalid}\n              required={this.required}\n              value={this.formatValue(this.value)}\n              placeholder={this.placeholder}\n              inputRef={this.inputRef}\n              onKeyPress={(event) => checkAllowedKeys(this, event)}\n              onKeyDown={(event) => this.handleKeyDown(event)}\n              onBeforeInput={(event) => this.handleBeforeInput(event)}\n              onPaste={(event) => this.handlePaste(event)}\n              valueChange={this.handleInputChange}\n              updateFormInternalValue={(value) => {\n                const isScientificNotation = this.isScientificNotation(\n                  value.trim()\n                );\n\n                if (!isScientificNotation) {\n                  const parsedValue = this.convertNumberStringToFloat(value);\n                  this.updateFormInternalValue(parsedValue!);\n                }\n              }}\n              onBlur={this.handleBlur}\n              form={this.formInternals.form ?? undefined}\n              suppressSubmitOnEnter={this.suppressSubmitOnEnter}\n              textAlignment={this.textAlignment}\n            ></InputElement>\n            <SlotEnd\n              slotEndRef={this.slotEndRef}\n              onSlotChange={() => this.updatePaddings()}\n            >\n              <div\n                class={{\n                  'number-stepper-container': true,\n                  'container-hidden': !showStepperButtons,\n                }}\n              >\n                <ix-icon-button\n                  variant=\"subtle-tertiary\"\n                  icon={iconMinus}\n                  size=\"16\"\n                  class=\"number-stepper-button step-minus\"\n                  aria-label=\"decrement number\"\n                  onClick={() => this.handleStepOperation('down')}\n                ></ix-icon-button>\n                <ix-icon-button\n                  variant=\"subtle-tertiary\"\n                  icon={iconPlus}\n                  size=\"16\"\n                  class=\"number-stepper-button step-plus\"\n                  aria-label=\"increment number\"\n                  onClick={() => this.handleStepOperation('up')}\n                ></ix-icon-button>\n              </div>\n            </SlotEnd>\n          </div>\n        </ix-field-wrapper>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/input/textarea.js

@@ -138,10 +138,10 @@ export class Textarea {
     }
     render() {
         var _a;
-        return (h(Host, { key: '886249f3b150fd8d45ef69d6e9e91ade0213aa10', class: {
+        return (h(Host, { key: '50700f0fe24415eff151875bc3dc2a5d53a8f879', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, h("ix-field-wrapper", { key: '178c631726c9e1db43f0d2041f3adca9d4587c78', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.textAreaRef }, !!this.maxLength && this.maxLength > 0 && (h("ix-typography", { key: '83f426ae1fe578142232fb71e3ae40820d55954f', class: "bottom-text", slot: "bottom-right", textColor: "soft" }, ((_a = this.value) !== null && _a !== void 0 ? _a : '').length, "/", this.maxLength)), h("div", { key: '17a8fe75f5f9248fc6559ecf8298e62a4d959f02', class: "input-wrapper" }, h(TextareaElement, { key: 'd9e284e0357cb2608f7b4d1a1fc220dc92ccf4d8', minLength: this.minLength, maxLength: this.maxLength, textareaCols: this.textareaCols, textareaRows: this.textareaRows, textareaHeight: this.isManuallyResized ? this.manualHeight : this.textareaHeight, textareaWidth: this.isManuallyResized ? this.manualWidth : this.textareaWidth, resizeBehavior: this.resizeBehavior, readonly: this.readonly, disabled: this.disabled, isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, textAreaRef: this.textAreaRef, valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => {
+            } }, h("ix-field-wrapper", { key: '9a59b1c2632f975c3a754978c616bb80fc419fc3', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.textAreaRef }, !!this.maxLength && this.maxLength > 0 && (h("ix-typography", { key: '931e49d6a0fd853745f3f46b88f25b087b2038af', class: "bottom-text", slot: "bottom-right", textColor: "soft" }, ((_a = this.value) !== null && _a !== void 0 ? _a : '').length, "/", this.maxLength)), h("div", { key: 'ef476a8a1bb52f9b21d93bd1b4d46b6b91a40872', class: "input-wrapper" }, h(TextareaElement, { key: 'b2b7006983d16c7c99f2229097aa3e45ecee5c15', minLength: this.minLength, maxLength: this.maxLength, textareaCols: this.textareaCols, textareaRows: this.textareaRows, textareaHeight: this.isManuallyResized ? this.manualHeight : this.textareaHeight, textareaWidth: this.isManuallyResized ? this.manualWidth : this.textareaWidth, resizeBehavior: this.resizeBehavior, readonly: this.readonly, disabled: this.disabled, isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, textAreaRef: this.textAreaRef, valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => {
                 onInputBlur(this, this.textAreaRef.current);
                 this.touched = true;
             } })))));

package/dist/collection/components/input-group/input-group.js

@@ -127,7 +127,7 @@ export class InputGroup {
         return width;
     }
     render() {
-        return (h(Host, { key: 'd0f57d858ca77f197bee75874412f218facf40d9', class: { disabled: this.disabled } }, h("div", { key: '7221faf602895189f3c612328adb9f96c9ba511e', class: "group group-start" }, h("slot", { key: '261bed25a0ac9f0fa9cb5ba9945f35a2bdaf0d0d', ref: (el) => (this.startSlotRef = el), name: "input-start" })), h("slot", { key: '624586d74b428624dadc77f7dbaa097e80590110' }), h("div", { key: 'e42e4337ff02ad203f50b080e10c2ce6c76a60fd', class: "group group-end" }, h("slot", { key: '39d2cd0d441e43db924ad528856065bb87efebe3', ref: (el) => (this.endSlotRef = el), name: "input-end" }))));
+        return (h(Host, { key: 'c47a7aab493e832b0d2c14d81bbf10b666f23f6c', class: { disabled: this.disabled } }, h("div", { key: '44cac00e7f527e3a8f12fbb6a0698cbc4e81feeb', class: "group group-start" }, h("slot", { key: '030a2cc484426f92ac56570567d3b6dbec70c615', ref: (el) => (this.startSlotRef = el), name: "input-start" })), h("slot", { key: '36a4cd0a41f2dc250cc24024b2f6470d29948e9b' }), h("div", { key: 'b6f0a7c2651d27bfd8392176c239190d4fe26d9c', class: "group group-end" }, h("slot", { key: '9d9dbff6897c41627ca0d7e133bdecbd68a373b8', ref: (el) => (this.endSlotRef = el), name: "input-end" }))));
     }
     static get is() { return "ix-input-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/key-value/key-value.js

@@ -18,7 +18,7 @@ export class KeyValue {
         this.labelPosition = 'top';
     }
     render() {
-        return (h(Host, { key: 'afb00b426d8c1058f0cbb4f1c36c77f879d4fcc2', class: `keyValue keyValue--${this.labelPosition === 'top' ? 'column' : 'row'}` }, this.icon && (h("ix-icon", { key: 'f965a5b314912431569919f3d12b03e7ecdd7a7f', name: this.icon, size: "24", class: "keyValue__icon", "aria-label": this.ariaLabelIcon })), h("div", { key: '93a20b20f02409e5229d75f9614024771a1e4062', class: "keyValue__content" }, h("div", { key: '86a788b30e518a4fe26c9f266c79faeb71c2a246', class: "content__label" }, this.label), h("div", { key: '9421c0ff618a40335423c624640556b266cb0744', class: {
+        return (h(Host, { key: '7fb93d7b2fbcf2ce8aac64eda186d82a5a45cbe7', class: `keyValue keyValue--${this.labelPosition === 'top' ? 'column' : 'row'}` }, this.icon && (h("ix-icon", { key: '4ec1a309785fba489f0c8d9dfb2c024268c92193', name: this.icon, size: "24", class: "keyValue__icon", "aria-label": this.ariaLabelIcon })), h("div", { key: '95fb53fe545cd00bc84b6eeeba6c910eff2143cc', class: "keyValue__content" }, h("div", { key: '631b09a0969534b81538968c50c886b5337a0765', class: "content__label" }, this.label), h("div", { key: 'd45d5050124bf055a05cd71305b2b4e9d30a572d', class: {
                 content__value: true,
                 'has-customValue': this.value === undefined,
             } }, this.value !== undefined ? (this.value) : (h("slot", { name: "custom-value" }))))));

package/dist/collection/components/key-value-list/key-value-list.js

@@ -15,7 +15,7 @@ export class KeyValueList {
         this.striped = false;
     }
     render() {
-        return (h(Host, { key: '8dba91174048942e97f5c3923693f9773498850e', class: { keyValueList: true, 'keyValueList--striped': this.striped } }, h("slot", { key: '008b5a305508353e90fbbdc664079942b5e72fb6' })));
+        return (h(Host, { key: 'fcc3ec3470c25cac50b88a1006b30be059f778f8', class: { keyValueList: true, 'keyValueList--striped': this.striped } }, h("slot", { key: '05645a91f92d7db584bd8235f73979249870e734' })));
     }
     static get is() { return "ix-key-value-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/kpi/kpi.js

@@ -37,13 +37,13 @@ export class Kpi {
         return tooltip;
     }
     render() {
-        return (h(Host, { key: 'b30b96a30c6462d46df55d826117a7bbca06bd87', title: this.getTooltipText(), tabindex: "1", class: {
+        return (h(Host, { key: '34fcbb68ba73d08619ef12fd9595c9c684aa3d10', title: this.getTooltipText(), tabindex: "1", class: {
                 stacked: this.orientation === 'vertical',
-            } }, h("div", { key: '91df6b79eab2edbf0ccb71d2dd8ee07e1412c546', class: {
+            } }, h("div", { key: 'cd4910a41ee179ea21166c80322e5361dd132850', class: {
                 'kpi-container': true,
                 alarm: this.state === 'alarm',
                 warning: this.state === 'warning',
-            } }, h("span", { key: '8229c1774d9ef82f8c30e1a8f24dafc57b5eed49', class: "kpi-label" }, this.getStateIcon(), h("span", { key: 'e27dbc323999e5e211ee923a07089a19d8de4ad6', class: "kpi-label-text" }, this.label)), h("span", { key: 'a3c2b17de22d8630a05b0e39c4005ac145784a53', class: "kpi-value-container" }, h("span", { key: '1b5f92dbd5f394d6c3bad1c9360427d572127759', class: "kpi-value" }, this.value), this.unit ? h("span", { class: "kpi-unit" }, this.unit) : ''))));
+            } }, h("span", { key: '33226fc8e0561e4db98181be1b6595534561bab7', class: "kpi-label" }, this.getStateIcon(), h("span", { key: '06cb693420e43f2475cfae0d8f2217a2770ac5cc', class: "kpi-label-text" }, this.label)), h("span", { key: '8a837f1466b2670d473983aaffc2742737fb8a9a', class: "kpi-value-container" }, h("span", { key: '5e66113f88a3637aaf83c3482a5625b290e25763', class: "kpi-value" }, this.value), this.unit ? h("span", { class: "kpi-unit" }, this.unit) : ''))));
     }
     static get is() { return "ix-kpi"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/layout-auto/layout-auto.js

@@ -77,7 +77,7 @@ export class LayoutForm {
         });
     }
     render() {
-        return (h(Host, { key: 'c372cee7de4d253246c61f60858b268619592d5d' }, h("div", { key: '205f0444aa85dcffd338abf3f38939ff9eea5d3c', class: "container" }, h("slot", { key: 'e8f39e9e0eb5dd8eee1b0ff66899dc1b0283143a' }))));
+        return (h(Host, { key: '48511195af19191b832713a828ac0945b06a4898' }, h("div", { key: '4a51469ffe227db5c361734fc3122a98f7e0fbcc', class: "container" }, h("slot", { key: '6ab367e83612df056e40392bced22c5f80457486' }))));
     }
     static get is() { return "ix-layout-auto"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/layout-grid/layout-grid.js

@@ -23,12 +23,12 @@ export class LayoutGrid {
         this.columns = 12;
     }
     render() {
-        return (h(Host, { key: '9ce5af84b9a377a949b94778ead107a441c51a78', class: {
+        return (h(Host, { key: '040fa69fa09d20fdbfc6ae40f85cdf70f74b3eee', class: {
                 'no-margin': this.noMargin,
             }, style: {
                 '--ix-layout-grid-columns': `${this.columns}`,
                 '--ix-layout-grid-gutter': `${this.gap}px`,
-            } }, h("slot", { key: '0c3a2747d12aa57a97b45ba478d495fcb0ab47a8' })));
+            } }, h("slot", { key: '50cae64ab0cc69aa2ffe55bfce8f069ea22b240b' })));
     }
     static get is() { return "ix-layout-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/link-button/link-button.css

@@ -51,6 +51,8 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
+  text-decoration: underline;
+  text-underline-offset: 0.2rem;
 }
 :host .link-button:not(.disabled):not(:disabled) {
   cursor: pointer;
@@ -58,20 +60,12 @@
 :host .link-button:not(.disabled):not(:disabled):hover, :host .link-button:not(.disabled):not(:disabled).hover {
   color: var(--theme-color-dynamic--hover);
 }
-:host .link-button:not(.disabled):not(:disabled):hover .link, :host .link-button:not(.disabled):not(:disabled).hover .link {
-  text-decoration: underline;
-  text-underline-offset: 0.2rem;
-}
 :host .link-button:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
 :host .link-button:not(.disabled):not(:disabled):active, :host .link-button:not(.disabled):not(:disabled).active {
   color: var(--theme-color-dynamic--active);
 }
-:host .link-button:not(.disabled):not(:disabled):active .link, :host .link-button:not(.disabled):not(:disabled).active .link {
-  text-decoration: underline;
-  text-underline-offset: 0.2rem;
-}
 :host .link-button.disabled {
   cursor: default;
   color: var(--theme-color-weak-text);

package/dist/collection/components/link-button/link-button.js

@@ -22,13 +22,13 @@ export class LinkButton {
         this.target = '_self';
     }
     render() {
-        return (h(Host, { key: '5d6862720cb7254c81ae048532345670b2725cf6' }, h("a", { key: 'ad09a301c88af52fe06626e71785af1a69f78690', title: this.url, tabindex: "0", class: {
+        return (h(Host, { key: '83b41ef8a3bef06a033a9a20c30a4ae1e83066e8' }, h("a", { key: '955dc6e492eec929e592947ec18009d744d1f973', title: this.url, tabindex: "0", class: {
                 'link-button': true,
                 disabled: this.disabled,
-            }, href: this.disabled ? undefined : this.url, target: this.target }, h("ix-icon", { key: '06f8da3d0dfe027915222ba0525bb6551ebf7472', class: "icon", name: iconChevronRightSmall, size: "16", "aria-hidden": "true" }), h("div", { key: 'c5759a97f5599d15618cd1e83f32a35e656c3ea7', class: {
+            }, href: this.disabled ? undefined : this.url, target: this.target }, h("ix-icon", { key: 'b0589b7cedf757244950b1595916f8c838ae603d', class: "icon", name: iconChevronRightSmall, size: "16", "aria-hidden": "true" }), h("div", { key: 'c3ceb43628b0a48d60bbcd6bb54a4ad493ae3de8', class: {
                 link: true,
                 disabled: this.disabled,
-            } }, h("slot", { key: '0429c8a4ac40936697d6e22d6061135e638c4557' })))));
+            } }, h("slot", { key: '2bd6071e8aad57fb13226d8452b0649367c6b750' })))));
     }
     static get is() { return "ix-link-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menu/menu-expand-icon.js

@@ -49,7 +49,7 @@ export class MenuExpandIcon {
         return this.getSmallScreenIcon();
     }
     render() {
-        return (h(Host, { key: 'c39c90a459dee53b29d4ccd8de683d35dc4abd22', class: {
+        return (h(Host, { key: '702baa75b182df885e9488301b2747fb37f96c52', class: {
                 expanded: this.expanded,
             }, type: "button", "aria-label": this.ixAriaLabel, "aria-pressed": a11yBoolean(this.expanded) }, this.getMenuIcon()));
     }