fix(number-fields): align Currency, Decimal, Integer and Percentage with Constellation

package.json

@@ -87,6 +87,7 @@
     "libphonenumber-js": "^1.13.14",
     "lodash.clonedeep": "^4.5.0",
     "lodash.debounce": "^4.0.8",
+    "lodash.get": "^4.4.2",
     "mat-tel-input": "^21.1.3",
     "ngx-currency": "^19.0.0",
     "rxjs": "^7.8.2",

packages/angular-sdk-components/src/lib/_components/field/currency/currency.component.html

@@ -14,6 +14,7 @@
             currencyMask
             [options]="{
               prefix: currencySymbol,
+              suffix: currencySuffix,
               thousands: thousandSeparator,
               decimal: decimalSeparator,
               align: 'left',

packages/angular-sdk-components/src/lib/_components/field/currency/currency.component.ts

@@ -8,16 +8,27 @@ import { NgxCurrencyDirective, NgxCurrencyInputMode } from 'ngx-currency';
 import { FieldBase } from '../field.base';
 import { FieldWarningDirective } from '../../../_directives/field-warning.directive';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
-import { handleEvent } from '../../../_helpers/event-util';
-import { getCurrencyCharacters, getCurrencyOptions } from '../../../_helpers/currency-utils';
-import { format } from '../../../_helpers/formatters';
+import {
+  formatNumberFieldForDisplay,
+  getCurrencyInputFormat,
+  NumberInputFormat,
+  parseFormattedNumber,
+  saveNumberOnBlur
+} from '../../../_helpers/currency-utils';
 import { PConnFieldProps } from '../../../_types/PConnProps.interface';
 
-interface CurrrencyProps extends PConnFieldProps {
+interface CurrrencyProps extends Omit<PConnFieldProps, 'value'> {
   // If any, enter additional props that only exist on Currency here
+  value?: number | string;
   currencyISOCode?: string;
+  alwaysShowISOCode?: boolean;
   allowDecimals: boolean;
   formatter?: string;
+  currencyDisplay?: 'symbol' | 'code' | 'name';
+  negative?: 'minus-sign' | 'parentheses';
+  notation?: 'standard' | 'compact';
+  currencyDecimalPrecision?: string;
+  decimalPrecision?: number | string;
 }
 
 @Component({
@@ -38,14 +49,14 @@ export class CurrencyComponent extends FieldBase {
   configProps$: CurrrencyProps;
   override fieldControl = new FormControl<number | null>(null, { updateOn: 'blur' });
 
-  currencyOptions: object = {};
   currencySymbol: string;
+  currencySuffix: string;
   thousandSeparator: string;
   decimalSeparator: string;
   decimalPrecision: number | undefined;
   formattedValue: string;
-  formatter;
   inputMode = NgxCurrencyInputMode.Natural;
+  private inputFormat: NumberInputFormat;
 
   /**
    * Updates the component when there are changes in the state.
@@ -59,56 +70,38 @@ export class CurrencyComponent extends FieldBase {
 
     // Extract and normalize the value property
     const { value } = this.configProps$;
-    if (value) {
-      this.value$ = typeof value === 'string' ? parseFloat(value) : value;
-      this.fieldControl.setValue(this.value$);
-    }
+    this.value$ = value === undefined || value === null || value === '' ? '' : Number(value);
+    this.fieldControl.setValue(this.value$ === '' ? null : this.value$);
 
     // update currency properties
     this.updateCurrencyProperties(this.configProps$);
   }
 
   /**
-   * Updates the currency properties
-   *
-   * @param {Object} configProps - Configuration properties.
-   * @param {boolean} configProps.allowDecimals - Whether to allow decimal values.
-   * @param {string} configProps.currencyISOCode - The ISO code of the currency.
-   * @param {string} configProps.formatter - The formatter type (e.g., 'currency').
+   * Updates the input mask and read-only value, matching the Constellation DX Currency component.
    */
-  protected updateCurrencyProperties(configProps): void {
-    const { allowDecimals, currencyISOCode = 'USD', formatter } = configProps;
+  protected updateCurrencyProperties(configProps: CurrrencyProps): void {
+    const { allowDecimals = true, currencyISOCode = 'USD', alwaysShowISOCode = false } = configProps;
 
-    const theSymbols = getCurrencyCharacters(currencyISOCode);
-    this.currencySymbol = theSymbols.theCurrencySymbol;
-    this.thousandSeparator = theSymbols.theDigitGroupSeparator;
-    this.decimalSeparator = theSymbols.theDecimalIndicator;
-    this.decimalPrecision = allowDecimals ? 2 : 0;
+    const inputFormat = getCurrencyInputFormat(
+      currencyISOCode,
+      this.utils.getBooleanValue(alwaysShowISOCode),
+      this.utils.getBooleanValue(allowDecimals)
+    );
+    this.inputFormat = inputFormat;
+    this.currencySymbol = inputFormat.prefix;
+    this.currencySuffix = inputFormat.suffix;
+    this.thousandSeparator = inputFormat.thousandSeparator;
+    this.decimalSeparator = inputFormat.decimalSeparator;
+    this.decimalPrecision = inputFormat.precision;
 
     if (['DISPLAY_ONLY', 'STACKED_LARGE_VAL'].includes(this.displayMode$)) {
-      this.formattedValue = format(this.value$, formatter ? formatter.toLowerCase() : 'currency', getCurrencyOptions(currencyISOCode));
+      this.formattedValue = formatNumberFieldForDisplay('Currency', this.value$, { ...configProps, currencyISOCode });
     }
   }
 
   fieldOnBlur(event: any) {
-    const oldVal = this.value$ ?? '';
-    const isValueChanged = event.target.value.toString() !== oldVal.toString();
-
-    if (isValueChanged) {
-      const actionsApi = this.pConn$?.getActionsApi();
-      const propName = this.pConn$?.getStateProps().value;
-      let value = event?.target?.value;
-      value = value?.substring(1);
-      // replacing thousand separator with empty string as not required in api call
-      const thousandSep = this.thousandSeparator === '.' ? '\\.' : this.thousandSeparator;
-      let regExp = new RegExp(String.raw`${thousandSep}`, 'g');
-      value = value?.replace(regExp, '');
-      // replacing decimal separator with '.'
-      if (this.decimalSeparator !== '.') {
-        regExp = new RegExp(String.raw`${this.decimalSeparator}`, 'g');
-        value = value.replace(regExp, '.');
-      }
-      handleEvent(actionsApi, 'changeNblur', propName, value);
-    }
+    const parsed = parseFormattedNumber(event?.target?.value, this.inputFormat);
+    saveNumberOnBlur(this.pConn$, parsed !== '' ? Number(parsed) : '', this.configProps$?.value);
   }
 }

packages/angular-sdk-components/src/lib/_components/field/decimal/decimal.component.html

@@ -11,8 +11,8 @@
           matInput
           currencyMask
           [options]="{
-            prefix: currencySymbol,
-            suffix: suffix,
+            prefix: '',
+            suffix: '',
             thousands: thousandSeparator,
             decimal: decimalSeparator,
             align: 'left',

packages/angular-sdk-components/src/lib/_components/field/decimal/decimal.component.ts

@@ -8,17 +8,27 @@ import { NgxCurrencyDirective, NgxCurrencyInputMode } from 'ngx-currency';
 import { FieldBase } from '../field.base';
 import { FieldWarningDirective } from '../../../_directives/field-warning.directive';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
-import { handleEvent } from '../../../_helpers/event-util';
-import { getCurrencyCharacters, getCurrencyOptions } from '../../../_helpers/currency-utils';
-import { format } from '../../../_helpers/formatters';
+import {
+  formatNumberFieldForDisplay,
+  getNumberInputFormat,
+  NumberInputFormat,
+  parseDecimalPrecision,
+  parseFormattedNumber,
+  saveNumberOnBlur
+} from '../../../_helpers/currency-utils';
 import { PConnFieldProps } from '../../../_types/PConnProps.interface';
 
-interface DecimalProps extends PConnFieldProps {
+interface DecimalProps extends Omit<PConnFieldProps, 'value'> {
   // If any, enter additional props that only exist on Decimal here
+  value?: number | string;
   currencyISOCode?: string;
-  decimalPrecision?: number;
-  showGroupSeparators?: string;
+  decimalPrecision?: number | string;
+  showGroupSeparators?: boolean | string;
   formatter?: string;
+  currencyDisplay?: 'symbol' | 'code' | 'name';
+  negative?: 'minus-sign' | 'parentheses';
+  notation?: 'standard' | 'compact';
+  currencyDecimalPrecision?: string;
 }
 
 @Component({
@@ -42,12 +52,10 @@ export class DecimalComponent extends FieldBase {
 
   decimalSeparator: string;
   thousandSeparator: string;
-  currencySymbol = '';
   decimalPrecision: number | undefined;
-  formatter;
   formattedValue: any;
   inputMode: any = NgxCurrencyInputMode.Natural;
-  suffix = '';
+  private inputFormat: NumberInputFormat;
 
   /**
    * Updates the component when there are changes in the state.
@@ -61,66 +69,34 @@ export class DecimalComponent extends FieldBase {
 
     // Extract and normalize the value property
     const { value } = this.configProps$;
-    if (value) {
-      this.value$ = typeof value === 'string' ? parseFloat(value) : value;
-      this.fieldControl.setValue(this.value$);
-    }
+    this.value$ = value === undefined || value === null || value === '' ? '' : Number(value);
+    this.fieldControl.setValue(this.value$ === '' ? null : this.value$);
 
     // updates decimal properties
     this.updateDecimalProperties(this.configProps$);
   }
 
   /**
-   * Updates decimal properties based on the provided configuration.
-   *
-   * @param {Object} configProps - Configuration properties.
-   * @param {string} configProps.currencyISOCode - ISO code of the currency.
-   * @param {string} configProps.formatter - Formatter type (e.g., 'decimal', 'currency').
-   * @param {boolean} configProps.showGroupSeparators - Whether to show group separators.
+   * Updates the input mask and read-only value, matching the Constellation DX Decimal component.
    */
-  protected updateDecimalProperties(configProps): void {
-    const { currencyISOCode = '', formatter, showGroupSeparators } = configProps;
-
-    // Extract currency symbols and options
-    const theSymbols = getCurrencyCharacters(currencyISOCode);
-    this.decimalSeparator = theSymbols.theDecimalIndicator;
-    this.thousandSeparator = showGroupSeparators ? theSymbols.theDigitGroupSeparator : '';
-
-    const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
-    const formatterLower = formatter?.toLowerCase() || 'decimal';
-    this.formattedValue = format(this.value$, formatterLower, theCurrencyOptions);
-
-    if (this.bReadonly$ && formatter === 'Currency') {
-      this.currencySymbol = theSymbols.theCurrencySymbol;
+  protected updateDecimalProperties(configProps: DecimalProps): void {
+    const { decimalPrecision, showGroupSeparators = true } = configProps;
+    const numberOfDecimals = parseDecimalPrecision(decimalPrecision, 2);
+    const groupSeparators = this.utils.getBooleanValue(showGroupSeparators);
+
+    this.inputFormat = getNumberInputFormat();
+    this.decimalSeparator = this.inputFormat.decimalSeparator;
+    this.thousandSeparator = groupSeparators ? this.inputFormat.thousandSeparator : '';
+    // ngx-currency needs a fixed precision; Constellation allows any number of decimals when none is configured
+    this.decimalPrecision = numberOfDecimals ?? 2;
+
+    if (['DISPLAY_ONLY', 'STACKED_LARGE_VAL'].includes(this.displayMode$)) {
+      this.formattedValue = formatNumberFieldForDisplay('Decimal', this.value$, configProps);
     }
-
-    if (this.bReadonly$ && formatter === 'Percentage') {
-      this.suffix = '%';
-    }
-
-    this.decimalPrecision = this.configProps$?.decimalPrecision ?? 2;
   }
 
   fieldOnBlur(event: any) {
-    const oldVal = this.value$ ?? '';
-    const isValueChanged = event.target.value.toString() !== oldVal.toString();
-
-    if (isValueChanged) {
-      const actionsApi = this.pConn$?.getActionsApi();
-      const propName = this.pConn$?.getStateProps().value;
-      let value = event?.target?.value;
-      // replacing thousand separator with empty string as not required in api call
-      if (this.configProps$.showGroupSeparators) {
-        const thousandSep = this.thousandSeparator === '.' ? '\\.' : this.thousandSeparator;
-        const regExp = new RegExp(String.raw`${thousandSep}`, 'g');
-        value = value?.replace(regExp, '');
-      }
-      // replacing decimal separator with '.'
-      if (this.decimalSeparator !== '.') {
-        const regExp = new RegExp(String.raw`${this.decimalSeparator}`, 'g');
-        value = value.replace(regExp, '.');
-      }
-      handleEvent(actionsApi, 'changeNblur', propName, value);
-    }
+    const parsed = parseFormattedNumber(event?.target?.value, this.inputFormat);
+    saveNumberOnBlur(this.pConn$, parsed !== '' ? Number(parsed) : '', this.configProps$?.value);
   }
 }

packages/angular-sdk-components/src/lib/_components/field/integer/integer.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$: formattedValue, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
@@ -8,10 +8,19 @@
         <mat-label>{{ label$ }}</mat-label>
         <input
           matInput
+          type="text"
+          currencyMask
+          [options]="{
+            prefix: '',
+            suffix: '',
+            thousands: thousandSeparator,
+            decimal: decimalSeparator,
+            align: 'left',
+            nullable: true,
+            precision: 0,
+            inputMode: inputMode
+          }"
           [placeholder]="placeholder"
-          type="number"
-          step="1"
-          [value]="value$"
           [required]="bRequired$"
           [formControl]="fieldControl"
           [attr.data-test-id]="testId"