feat(core/number-input): ix-number-input scientific values (#2062)

Co-authored-by: Lukas Maurer <[email protected]>
Co-authored-by: Daniel Leroux <[email protected]>

Author: 3 people

.changeset/hot-oranges-jump.md

@@ -0,0 +1,8 @@
+---
+'@siemens/ix-angular': minor
+'@siemens/ix': minor
+'@siemens/ix-react': minor
+'@siemens/ix-vue': minor
+---
+
+Add support for numbers in scientific notation (e.g. 1E-2) for **ix-number-input**.

.changeset/tough-donuts-fail.md

@@ -0,0 +1,10 @@
+---
+'@siemens/ix-angular': minor
+'@siemens/ix': minor
+'@siemens/ix-react': minor
+'@siemens/ix-vue': minor
+---
+
+Add temporary property `allowEmptyValueChange` to **ix-number-input**. Setting this property enables `valueChange` to emit null values.
+
+Fixes #1968.

BREAKING_CHANGES/v4.md

@@ -540,4 +540,8 @@ themeSwitcher.setVariant('light');
 ### ix-flip-tile
 
 - Rename property `state` to `variant`
-- Rename `FlipTileState` to `FlipTileVariant`
+- Rename `FlipTileState` to `FlipTileVariant`
+
+### ix-number-input
+
+- The `valueChange` event type has been changed to `number | undefined`.

packages/angular/src/components.ts

@@ -2002,15 +2002,15 @@ Can be prevented, in which case only the event is triggered, and the modal remai
 
 
 @ProxyCmp({
-  inputs: ['allowedCharactersPattern', 'disabled', 'helperText', 'infoText', 'invalidText', 'label', 'max', 'min', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'showStepperButtons', 'showTextAsTooltip', 'step', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText'],
+  inputs: ['allowEmptyValueChange', 'allowedCharactersPattern', 'disabled', 'helperText', 'infoText', 'invalidText', 'label', 'max', 'min', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'showStepperButtons', 'showTextAsTooltip', 'step', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText'],
   methods: ['getNativeInputElement', 'focusInput']
 })
 @Component({
   selector: 'ix-number-input',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['allowedCharactersPattern', 'disabled', 'helperText', 'infoText', 'invalidText', 'label', 'max', 'min', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'showStepperButtons', 'showTextAsTooltip', 'step', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText'],
+  inputs: ['allowEmptyValueChange', 'allowedCharactersPattern', 'disabled', 'helperText', 'infoText', 'invalidText', 'label', 'max', 'min', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'showStepperButtons', 'showTextAsTooltip', 'step', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText'],
   outputs: ['valueChange', 'validityStateChange', 'ixBlur'],
   standalone: false
 })

packages/angular/standalone/src/components.ts

@@ -2103,15 +2103,15 @@ Can be prevented, in which case only the event is triggered, and the modal remai
 
 @ProxyCmp({
   defineCustomElementFn: defineIxNumberInput,
-  inputs: ['allowedCharactersPattern', 'disabled', 'helperText', 'infoText', 'invalidText', 'label', 'max', 'min', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'showStepperButtons', 'showTextAsTooltip', 'step', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText'],
+  inputs: ['allowEmptyValueChange', 'allowedCharactersPattern', 'disabled', 'helperText', 'infoText', 'invalidText', 'label', 'max', 'min', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'showStepperButtons', 'showTextAsTooltip', 'step', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText'],
   methods: ['getNativeInputElement', 'focusInput']
 })
 @Component({
   selector: 'ix-number-input',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['allowedCharactersPattern', 'disabled', 'helperText', 'infoText', 'invalidText', 'label', 'max', 'min', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'showStepperButtons', 'showTextAsTooltip', 'step', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText'],
+  inputs: ['allowEmptyValueChange', 'allowedCharactersPattern', 'disabled', 'helperText', 'infoText', 'invalidText', 'label', 'max', 'min', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'showStepperButtons', 'showTextAsTooltip', 'step', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText'],
   outputs: ['valueChange', 'validityStateChange', 'ixBlur'],
 })
 export class IxNumberInput {

packages/core/src/components.d.ts

@@ -2505,6 +2505,12 @@ export namespace Components {
      * @form-ready 
      */
     interface IxNumberInput {
+        /**
+          * 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
+          * @default false
+         */
+        "allowEmptyValueChange": boolean;
         /**
           * The allowed characters pattern for the input field
          */
@@ -2570,7 +2576,7 @@ export namespace Components {
          */
         "readonly": boolean;
         /**
-          * Indicates if the field is required
+          * Indicates if the field is required. When required, empty values (undefined) are not accepted.
           * @default false
          */
         "required": boolean;
@@ -2583,8 +2589,8 @@ export namespace Components {
          */
         "showTextAsTooltip"?: boolean;
         /**
-          * Step value to increment or decrement the input value
-          * @since 3.0.0
+          * Step value to increment or decrement the input value. Default step value is 1.
+          * @default 1
          */
         "step"?: string | number;
         /**
@@ -2602,10 +2608,10 @@ export namespace Components {
          */
         "validText"?: string;
         /**
-          * The value of the input field
+          * The value of the input field. Supports numeric values, scientific notation (1E6, 1E-6), or undefined for empty.
           * @default 0
          */
-        "value": number;
+        "value"?: number;
         /**
           * The warning text for the input field
          */
@@ -8425,6 +8431,12 @@ declare namespace LocalJSX {
      * @form-ready 
      */
     interface IxNumberInput {
+        /**
+          * 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
+          * @default false
+         */
+        "allowEmptyValueChange"?: boolean;
         /**
           * The allowed characters pattern for the input field
          */
@@ -8488,7 +8500,7 @@ declare namespace LocalJSX {
          */
         "readonly"?: boolean;
         /**
-          * Indicates if the field is required
+          * Indicates if the field is required. When required, empty values (undefined) are not accepted.
           * @default false
          */
         "required"?: boolean;
@@ -8501,8 +8513,8 @@ declare namespace LocalJSX {
          */
         "showTextAsTooltip"?: boolean;
         /**
-          * Step value to increment or decrement the input value
-          * @since 3.0.0
+          * Step value to increment or decrement the input value. Default step value is 1.
+          * @default 1
          */
         "step"?: string | number;
         /**
@@ -8520,7 +8532,7 @@ declare namespace LocalJSX {
          */
         "validText"?: string;
         /**
-          * The value of the input field
+          * The value of the input field. Supports numeric values, scientific notation (1E6, 1E-6), or undefined for empty.
           * @default 0
          */
         "value"?: number;

packages/core/src/components/input/input.fc.tsx

@@ -83,6 +83,9 @@ export function InputElement(
     textAlignment?: 'start' | 'end';
     inputRef: (el: HTMLInputElement | undefined) => void;
     onKeyPress: (event: KeyboardEvent) => void;
+    onKeyDown?: (event: KeyboardEvent) => void;
+    onBeforeInput?: (event: InputEvent) => void;
+    onPaste?: (event: ClipboardEvent) => void;
     valueChange: (value: string) => void;
     updateFormInternalValue: (value: string) => void;
     onBlur: () => void;
@@ -115,16 +118,25 @@ export function InputElement(
       value={props.value}
       placeholder={props.placeholder}
       onKeyPress={(event) => props.onKeyPress(event)}
+      onKeyDown={(e) => {
+        props.onKeyDown?.(e);
+        handleSubmitOnEnterKeydown(
+          e,
+          !!props.suppressSubmitOnEnter,
+          props.form
+        );
+      }}
+      {...({
+        onBeforeInput: (event: InputEvent) => props.onBeforeInput?.(event),
+      } as any)}
+      onPaste={(event) => props.onPaste?.(event)}
       onInput={(inputEvent) => {
         const target = inputEvent.target as HTMLInputElement;
         props.updateFormInternalValue(target.value);
         props.valueChange(target.value);
       }}
       onBlur={() => props.onBlur()}
       {...props.ariaAttributes}
-      onKeyDown={(e) =>
-        handleSubmitOnEnterKeydown(e, !!props.suppressSubmitOnEnter, props.form)
-      }
     ></input>
   );
 }