@siemens/ix 4.4.0 → 5.0.0

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

@@ -29,48 +29,120 @@ let inputIds = 0;
  * @slot end - Element will be displayed at the end of the input
  */
 export class Input {
-    constructor() {
-        /**
-         * The type of the text field. Possible values are 'text', 'email', or 'password'.
-         */
-        this.type = 'text';
-        /**
-         * The value of the text field.
-         */
-        this.value = '';
-        /**
-         * Specifies whether the text field is required.
-         */
-        this.required = false;
-        /**
-         * Specifies whether the text field is disabled.
-         */
-        this.disabled = false;
-        /**
-         * Specifies whether the text field is readonly.
-         */
-        this.readonly = false;
-        /**
-         * 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 input. 'start' aligns the text to the start of the input, 'end' aligns the text to the end of the input.
-         */
-        this.textAlignment = 'start';
-        this.isInvalid = false;
-        this.isValid = false;
-        this.isInfo = false;
-        this.isWarning = false;
-        this.isInvalidByRequired = false;
-        this.inputType = 'text';
-        this.inputRef = makeRef();
-        this.slotEndRef = makeRef();
-        this.slotStartRef = makeRef();
-        this.inputId = `input-${inputIds++}`;
-        this.touched = false;
-    }
+    hostElement;
+    formInternals;
+    /**
+     * The type of the text field. Possible values are 'text', 'email', or 'password'.
+     */
+    type = 'text';
+    /**
+     * The name of the text field.
+     */
+    name;
+    /**
+     * The placeholder text for the text field.
+     */
+    placeholder;
+    /**
+     * The value of the text field.
+     */
+    value = '';
+    /**
+     * Specifies whether the text field is required.
+     */
+    required = false;
+    /**
+     * Specifies whether the text field is disabled.
+     */
+    disabled = false;
+    /**
+     * Specifies whether the text field is readonly.
+     */
+    readonly = false;
+    /**
+     * The helper text for the text field.
+     */
+    helperText;
+    /**
+     * The info text for the text field.
+     */
+    infoText;
+    /**
+     * Specifies whether to show the text as a tooltip.
+     */
+    showTextAsTooltip;
+    /**
+     * The valid text for the text field.
+     */
+    validText;
+    /**
+     * The warning text for the text field.
+     */
+    warningText;
+    /**
+     * The label for the text field.
+     */
+    label;
+    /**
+     * The error text for the text field.
+     */
+    invalidText;
+    /**
+     * The pattern for the text field.
+     */
+    pattern;
+    /**
+     * The maximum length of the text field.
+     */
+    maxLength;
+    /**
+     * The minimum length of the text field.
+     */
+    minLength;
+    /**
+     * The allowed characters pattern for the text field.
+     */
+    allowedCharactersPattern;
+    /**
+     * If false, pressing Enter will submit the form (if inside a form).
+     * Set to true to suppress submit on Enter.
+     */
+    suppressSubmitOnEnter = false;
+    /**
+     * Text alignment within the input. 'start' aligns the text to the start of the input, 'end' aligns the text to the end of the input.
+     */
+    textAlignment = 'start';
+    /**
+     * Event emitted when the value of the text field changes.
+     */
+    valueChange;
+    /**
+     * Event emitted when the validity state of the text field changes.
+     */
+    validityStateChange;
+    /**
+     * Event emitted when the text field loses focus.
+     */
+    ixBlur;
+    /**
+     * Event emitted when the text field loses focus and the value has changed.
+     * @since 4.4.0
+     */
+    ixChange;
+    isInvalid = false;
+    isValid = false;
+    isInfo = false;
+    isWarning = false;
+    isInvalidByRequired = false;
+    inputType = 'text';
+    /** @internal */
+    initialValue;
+    inputRef = makeRef();
+    slotEndRef = makeRef();
+    slotStartRef = makeRef();
+    inputId = `input-${inputIds++}`;
+    touched = false;
+    disposableChangesAndVisibilityObservers;
     updateClassMappings(result) {
         mapValidationResult(this, result);
     }
@@ -89,8 +161,7 @@ export class Input {
         adjustPaddingForStartAndEnd(this.slotStartRef.current, this.slotEndRef.current, this.inputRef.current);
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.disposableChangesAndVisibilityObservers) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.disposableChangesAndVisibilityObservers?.();
     }
     updateFormInternalValue(value) {
         this.formInternals.setFormValue(value);
@@ -134,15 +205,14 @@ export class Input {
         return Promise.resolve(this.touched);
     }
     render() {
-        var _a, _b;
         const inputAria = getAriaAttributesForInput(this);
-        return (h(Host, { key: '966efdac8aabf6e8eda4c70a70d996b66406e426', class: {
+        return (h(Host, { key: 'e5c0380187e14c515c1920ff753f02d954b0c468', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, h("ix-field-wrapper", { key: '565c9cf09e3de197bdc6aab9038f05c13eddc311', htmlForLabel: this.inputId, 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: '73f3a4eb7eeec903148afc9ab0e03409808773ce', class: "input-wrapper" }, h(SlotStart, { key: '5610b1d97825d73045a3d5b20cd0b4da1e323a34', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h(InputElement, { key: 'aea0aeb380fac786174a380531143ee08ca94e48', id: this.inputId, readonly: this.readonly, disabled: this.disabled, maxLength: this.maxLength, minLength: this.minLength, pattern: this.pattern, type: this.inputType, isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, inputRef: this.inputRef, onKeyPress: (event) => checkAllowedKeys(this, event), onFocus: () => onInputFocus(this, this.value), onEnterKeyChange: (event) => onEnterKeyChangeEmit(event, this, this.value), valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => {
+            } }, h("ix-field-wrapper", { key: '00ae4da738996eb5fb3fceb3fd2f4bf8f293fd5c', 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: 'ed44a7d89133fcb9ce2574346364212ddbe13630', class: "input-wrapper" }, h(SlotStart, { key: 'f6e0cf1aaa1bb3a945882d89356efd2e15be20df', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h(InputElement, { key: 'a0263a3186ba0aed9dc7f873f209e32008571336', id: this.inputId, readonly: this.readonly, disabled: this.disabled, maxLength: this.maxLength, minLength: this.minLength, pattern: this.pattern, type: this.inputType, isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, inputRef: this.inputRef, onKeyPress: (event) => checkAllowedKeys(this, event), onFocus: () => onInputFocus(this, this.value), onEnterKeyChange: (event) => onEnterKeyChangeEmit(event, this, this.value), valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => {
                 onInputBlurWithChange(this, this.inputRef.current, this.value);
                 this.touched = true;
-            }, ariaAttributes: inputAria, form: (_a = this.formInternals.form) !== null && _a !== void 0 ? _a : undefined, suppressSubmitOnEnter: this.suppressSubmitOnEnter, textAlignment: this.textAlignment }), h(SlotEnd, { key: '3615ad5161239494a9a252ed9aeb3ea493d7d817', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("ix-icon-button", { key: '0b0837ae35a5d110794ce32ba3c28db4dce0083a', color: "color-weak-text", class: {
+            }, ariaAttributes: inputAria, form: this.formInternals.form ?? undefined, suppressSubmitOnEnter: this.suppressSubmitOnEnter, textAlignment: this.textAlignment }), h(SlotEnd, { key: 'ddaf9b30b725f84934c937711cdd5cc6aa4e564b', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("ix-icon-button", { key: '216ce61735239e8b67f767ec08a37976a03ed74b', color: "color-weak-text", class: {
                 'password-eye': true,
                 'eye-hidden': this.type !== 'password' || this.disabled,
             }, variant: "tertiary", size: "16", icon: this.inputType === 'password' ? iconEye : iconEyeCancelled, onClick: () => {
@@ -151,7 +221,7 @@ export class Input {
                     return;
                 }
                 this.inputType = 'password';
-            } }))), !!this.maxLength && this.maxLength > 0 && (h("ix-typography", { key: '0f3ed7f624fe620793cdd7a8fb2695d54dbcea33', class: "bottom-text", slot: "bottom-right", textColor: "soft" }, ((_b = this.value) !== null && _b !== void 0 ? _b : '').length, "/", this.maxLength)))));
+            } }))), !!this.maxLength && this.maxLength > 0 && (h("ix-typography", { key: 'e90d202b3bd47dfd3056c1140f2cabb6aea4e82a', class: "bottom-text", slot: "bottom-right", textColor: "soft" }, (this.value ?? '').length, "/", this.maxLength)))));
     }
     static get is() { return "ix-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -62,14 +62,13 @@ export function onInputBlur(comp, input) {
     checkInternalValidity(comp, input);
 }
 export function applyPaddingEnd(inputElement, width, options) {
-    var _a;
     if (!inputElement) {
         return;
     }
     const remInPixels = 16;
     const padding = convertToRemString(width + remInPixels / 2);
     if (options.slotEnd) {
-        inputElement.style.paddingRight = `calc(${padding} + ${(_a = options.additionalPaddingRight) !== null && _a !== void 0 ? _a : '0rem'})`;
+        inputElement.style.paddingRight = `calc(${padding} + ${options.additionalPaddingRight ?? '0rem'})`;
     }
     else {
         inputElement.style.paddingLeft = padding;

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

@@ -467,7 +467,7 @@ input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.read
   left: var(--theme-input--border-thickness);
 }
 :host .end-container {
-  right: calc(var(--theme-input--border-thickness) + 0.125rem);
+  right: 0.25rem;
 }
 :host .start-container ::slotted(*) {
   margin-left: 0.5rem;
@@ -480,14 +480,14 @@ input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.read
   margin-left: 0;
 }
 :host .end-container ::slotted(*) {
-  margin-right: 0.5rem;
+  margin-right: calc(0.5rem - 0.25rem);
 }
 :host .end-container ::slotted(ix-icon.size-24),
 :host .end-container ::slotted(ix-icon-button.btn-icon-16) {
-  margin-right: 0.25rem;
+  margin-right: calc(0.25rem - 0.25rem);
 }
 :host .end-container ::slotted(ix-icon-button.btn-icon-32) {
-  margin-right: 0;
+  margin-right: calc(0rem - 0.25rem);
 }
 :host .bottom-text {
   margin-top: 0.25rem;

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

@@ -30,116 +30,131 @@ const INVALID_NUMBER_INPUT_REGEX = /[^\dEe+\-.,]/;
  * @slot end - Element will be displayed at the end of the input
  */
 export class NumberInput {
-    constructor() {
-        /**
-         * 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. When required, empty values (undefined) are not accepted.
-         */
-        this.required = false;
-        /**
-         * Disables the input field
-         */
-        this.disabled = false;
-        /**
-         * 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;
-        this.isWarning = false;
-        this.isInvalidByRequired = false;
-        this.inputRef = makeRef();
-        this.slotEndRef = makeRef();
-        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);
-            onInputBlurWithChange(this, this.inputRef.current, parsedValue);
-            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();
-            }
-        };
-    }
+    hostElement;
+    formInternals;
+    /**
+     * name of the input element
+     */
+    name;
+    /**
+     * placeholder of the input element
+     */
+    placeholder;
+    /**
+     * The value of the input field. Supports numeric values, scientific notation (1E6, 1E-6), or undefined for empty.
+     */
+    value = 0;
+    /**
+     * Indicates if the field is required. When required, empty values (undefined) are not accepted.
+     */
+    required = false;
+    /**
+     * Disables the input field
+     */
+    disabled = false;
+    /**
+     * Indicates if the field is read-only
+     */
+    readonly = false;
+    /**
+     * The helper text for the input field
+     */
+    helperText;
+    /**
+     * The info text for the input field
+     */
+    infoText;
+    /**
+     * Indicates if the text should be shown as a tooltip
+     */
+    showTextAsTooltip;
+    /**
+     * The valid text for the input field
+     */
+    validText;
+    /**
+     * The warning text for the input field
+     */
+    warningText;
+    /**
+     * The label for the input field
+     */
+    label;
+    /**
+     * The error text for the input field
+     */
+    invalidText;
+    /**
+     * The pattern for the input field
+     */
+    pattern;
+    /**
+     * The minimum value for the input field
+     */
+    min;
+    /**
+     * The maximum value for the input field
+     */
+    max;
+    /**
+     * The allowed characters pattern for the input field
+     */
+    allowedCharactersPattern;
+    /**
+     * Indicates if the stepper buttons should be shown
+     */
+    showStepperButtons;
+    /**
+     * Step value to increment or decrement the input value. Default step value is 1.
+     *
+     */
+    step = 1;
+    /**
+     * If false, pressing Enter will submit the form (if inside a form).
+     * Set to true to suppress submit on Enter.
+     */
+    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.
+     */
+    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
+     */
+    allowEmptyValueChange = false;
+    /**
+     * Event emitted when the value of the input field changes
+     */
+    valueChange;
+    /**
+     * Event emitted when the validity state of the input field changes
+     */
+    validityStateChange;
+    /**
+     * Event emitted when the input field loses focus
+     */
+    ixBlur;
+    /**
+     * Event emitted when the input field loses focus and the value has changed
+     * @since 4.4.0
+     */
+    ixChange;
+    isInvalid = false;
+    isValid = false;
+    isInfo = false;
+    isWarning = false;
+    isInvalidByRequired = false;
+    inputRef = makeRef();
+    slotEndRef = makeRef();
+    slotStartRef = makeRef();
+    numberInputId = `number-input-${numberInputIds++}`;
+    touched = false;
+    /** @internal */
+    initialValue;
+    disposableChangesAndVisibilityObservers;
     onValueChange(newValue) {
         this.updateFormInternalValue(newValue);
     }
@@ -154,8 +169,7 @@ export class NumberInput {
             addDisposableChangesAndVisibilityObservers(this.hostElement, this.updatePaddings.bind(this));
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.disposableChangesAndVisibilityObservers) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.disposableChangesAndVisibilityObservers?.();
     }
     updatePaddings() {
         adjustPaddingForStartAndEnd(this.slotStartRef.current, this.slotEndRef.current, this.inputRef.current);
@@ -178,7 +192,7 @@ export class NumberInput {
         return value.toString();
     }
     handleValueChangeEvent(value) {
-        this.valueChange.emit(this.allowEmptyValueChange ? value : (value !== null && value !== void 0 ? value : 0));
+        this.valueChange.emit(this.allowEmptyValueChange ? value : (value ?? 0));
     }
     updateFormInternalValue(value) {
         const formValue = value !== undefined && value !== null ? value.toString() : '';
@@ -188,6 +202,66 @@ export class NumberInput {
             checkInternalValidity(this, this.inputRef.current);
         }
     }
+    handleInputChange = (inputValue) => {
+        const parsedValue = this.convertNumberStringToFloat(inputValue);
+        const isScientificNotation = this.isScientificNotation(inputValue.trim());
+        if (isScientificNotation) {
+            this.formInternals.setFormValue(inputValue);
+        }
+        this.handleValueChangeEvent(parsedValue);
+    };
+    handleBlur = () => {
+        if (!this.inputRef.current)
+            return;
+        const inputValue = this.inputRef.current.value;
+        const parsedValue = this.convertNumberStringToFloat(inputValue);
+        this.updateFormInternalValue(parsedValue);
+        if (parsedValue !== undefined && this.inputRef.current) {
+            this.inputRef.current.value = this.formatValue(parsedValue);
+        }
+        this.updateFormInternalValue(parsedValue);
+        onInputBlurWithChange(this, this.inputRef.current, parsedValue);
+        this.touched = true;
+    };
+    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;
+        }
+    };
+    handleBeforeInput = (e) => {
+        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 = dt?.getData?.('text') ?? '';
+            if (INVALID_NUMBER_INPUT_REGEX.test(text)) {
+                e.preventDefault();
+            }
+        }
+    };
+    handlePaste = (e) => {
+        // Fallback for browsers that don’t fire beforeinput for paste
+        const text = e.clipboardData?.getData('text') ?? '';
+        if (INVALID_NUMBER_INPUT_REGEX.test(text)) {
+            e.preventDefault();
+        }
+    };
     getDecimalPlaces(num) {
         // (?:\.(\d+))? --> match[1] --> decimal digits
         // (?:[eE]([+-]?\d+))? --> match[2] --> exponent
@@ -199,14 +273,13 @@ export class NumberInput {
         return Math.max(0, (match[1] ? match[1].length : 0) - (match[2] ? +match[2] : 0));
     }
     handleStepOperation(operation) {
-        var _a, _b;
         if (!this.inputRef.current) {
             return;
         }
-        const currentValue = (_a = this.convertNumberStringToFloat(this.inputRef.current.value)) !== null && _a !== void 0 ? _a : 0;
+        const currentValue = this.convertNumberStringToFloat(this.inputRef.current.value) ?? 0;
         const stepValue = typeof this.step === 'string'
             ? Number.parseFloat(this.step)
-            : ((_b = this.step) !== null && _b !== void 0 ? _b : 1);
+            : (this.step ?? 1);
         let newValue;
         if (operation === 'up') {
             newValue = currentValue + stepValue;
@@ -263,24 +336,29 @@ export class NumberInput {
         return Promise.resolve(this.touched);
     }
     render() {
-        var _a;
         const showStepperButtons = this.showStepperButtons && (this.disabled || this.readonly) === false;
-        return (h(Host, { key: 'c30fd1519c016af6b1ff281846fdf2feb405cb50', class: {
+        return (h(Host, { key: '33890aa9ea0b965a4b78d45fc0ae357ae30daee6', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, h("ix-field-wrapper", { key: '00d434626f802aca4cea4981b600c379419b6f3d', 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: '2c3e976d2867654979b03501e34a34a65be3ed2a', class: {
+            } }, h("ix-field-wrapper", { key: 'eeb301066981e6a0cc6f91c5607948171275f871', 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: 'b72ca95246672d90b96db8ecad0be82f3fe8d28d', class: {
                 'input-wrapper': true,
                 'show-stepper-buttons': !!this.showStepperButtons,
-            } }, h(SlotStart, { key: '46978d9abead04d95eb125e84f3ca7f09eb57af0', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h(InputElement, { key: 'e4f19802f2903ddc1a9c7b871848c66f72f16f9f', 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), onFocus: () => onInputFocus(this, this.value), onEnterKeyChange: (event) => onEnterKeyChangeEmit(event, this, this.value), valueChange: this.handleInputChange, updateFormInternalValue: (value) => {
+            } }, h(SlotStart, { key: '804bfc9ceb55804d55aeb8dec9928ec91af8b574', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h(InputElement, { key: '1ce26e202f7bf9d86eacb1d29fb00765c3df8ce6', 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), onFocus: () => onInputFocus(this, this.value), onEnterKeyChange: (event) => onEnterKeyChangeEmit(event, this, this.value), valueChange: this.handleInputChange, updateFormInternalValue: (value) => {
+                const parsedValue = this.convertNumberStringToFloat(value);
                 const isScientificNotation = this.isScientificNotation(value.trim());
-                if (!isScientificNotation) {
-                    const parsedValue = this.convertNumberStringToFloat(value);
+                if (isScientificNotation) {
+                    // For scientific notation, update form value with raw notation
+                    // but update component value with parsed number
+                    this.formInternals.setFormValue(value);
+                    this.value = parsedValue;
+                }
+                else {
                     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: '9b061d2837b5a95051bd64aebdbbe1b7d2fb823a', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("div", { key: 'e7763c463424c7c7cde61fd94a9b191e6264d45e', class: {
+            }, onBlur: this.handleBlur, form: this.formInternals.form ?? undefined, suppressSubmitOnEnter: this.suppressSubmitOnEnter, textAlignment: this.textAlignment }), h(SlotEnd, { key: 'c0a582046240d94de487cc139d37ac83a511c2bb', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("div", { key: 'aa9d15adc8f79e39fbc334d446427f4350f04584', class: {
                 'number-stepper-container': true,
                 'container-hidden': !showStepperButtons,
-            } }, h("ix-icon-button", { key: 'd139b84fe7f4dbf78ebf88bd912541ec0b020c98', 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: '5b8508bff24a158b473d5e6732d59dcb716c2d97', variant: "subtle-tertiary", icon: iconPlus, size: "16", class: "number-stepper-button step-plus", "aria-label": "increment number", onClick: () => this.handleStepOperation('up') })))))));
+            } }, h("ix-icon-button", { key: '01fec50d28065398e09d1916c6d46950d76f6376', 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: 'bf4ec84bc355505671c9d6938f2d94b4ed2b5cf0', 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"; }