updated variable names for better understanding

Author: mohas22

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

@@ -13,9 +13,9 @@
             matInput
             currencyMask
             [options]="{
-              prefix: currSym,
-              thousands: currSep,
-              decimal: currDec,
+              prefix: currencySymbol,
+              thousands: thousandSeparator,
+              decimal: decimalSeparator,
               align: 'left',
               nullable: true,
               precision: decimalPrecision,

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

@@ -52,9 +52,9 @@ export class CurrencyComponent implements OnInit, OnDestroy {
   currencyOptions: Object = {};
 
   fieldControl = new FormControl<number | null>(null, { updateOn: 'blur' });
-  currSym: string;
-  currSep: string;
-  currDec: string;
+  currencySymbol: string;
+  thousandSeparator: string;
+  decimalSeparator: string;
   inputMode: any;
   decimalPrecision: number | undefined;
   formattedValue: string;
@@ -136,9 +136,9 @@ export class CurrencyComponent implements OnInit, OnDestroy {
     const currencyISOCode = this.configProps$?.currencyISOCode ?? '';
 
     const theSymbols = getCurrencyCharacters(currencyISOCode);
-    this.currSym = theSymbols.theCurrencySymbol;
-    this.currSep = theSymbols.theDigitGroupSeparator;
-    this.currDec = theSymbols.theDecimalIndicator;
+    this.currencySymbol = theSymbols.theCurrencySymbol;
+    this.thousandSeparator = theSymbols.theDigitGroupSeparator;
+    this.decimalSeparator = theSymbols.theDecimalIndicator;
     this.formatter = this.configProps$.formatter;
 
     if (this.displayMode$ === 'DISPLAY_ONLY' || this.displayMode$ === 'STACKED_LARGE_VAL') {
@@ -201,16 +201,13 @@ export class CurrencyComponent implements OnInit, OnDestroy {
     const propName = this.pConn$?.getStateProps().value;
     let value = event?.target?.value;
     value = value?.substring(1);
-    // replacing thousand seperator with empty string as not required in api call
-    if (this.currSep === '.') {
-      value = value?.replace(/\./g, '');
-    } else {
-      const regExp = new RegExp(String.raw`${this.currSep}`, 'g');
-      value = value.replace(regExp, '');
-    }
-    // replacing decimal seperator with '.'
-    if (this.currDec !== '.') {
-      const regExp = new RegExp(String.raw`${this.currDec}`, 'g');
+    // 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);

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

@@ -11,9 +11,9 @@
           matInput
           currencyMask
           [options]="{
-            prefix: bReadonly$ && formatter === 'Currency' ? currSym : '',
-            thousands: currSep,
-            decimal: currDec,
+            prefix: bReadonly$ && formatter === 'Currency' ? currencySymbol : '',
+            thousands: thousandSeparator,
+            decimal: decimalSeparator,
             align: 'left',
             nullable: true,
             precision: decimalPrecision,

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

@@ -58,9 +58,9 @@ export class DecimalComponent implements OnInit, OnDestroy {
   placeholder: string;
 
   fieldControl = new FormControl<number | null>(null, null);
-  currDec: string;
-  currSep: string;
-  currSym: string;
+  decimalSeparator: string;
+  thousandSeparator: string;
+  currencySymbol: string;
   decimalPrecision: number | undefined;
   formatter;
   formattedValue: any;
@@ -143,8 +143,8 @@ export class DecimalComponent implements OnInit, OnDestroy {
     const currencyISOCode = this.configProps$?.currencyISOCode ?? '';
 
     const theSymbols = getCurrencyCharacters(currencyISOCode);
-    this.currDec = theSymbols.theDecimalIndicator;
-    this.currSep = showGroupSeparators ? theSymbols.theDigitGroupSeparator : '';
+    this.decimalSeparator = theSymbols.theDecimalIndicator;
+    this.thousandSeparator = showGroupSeparators ? theSymbols.theDigitGroupSeparator : '';
 
     const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
     this.formatter = this.configProps$.formatter;
@@ -183,9 +183,9 @@ export class DecimalComponent implements OnInit, OnDestroy {
     }
 
     if (this.bReadonly$ && this.formatter === 'Currency') {
-      this.currSym = theSymbols.theCurrencySymbol;
+      this.currencySymbol = theSymbols.theCurrencySymbol;
     } else {
-      this.currSym = '';
+      this.currencySymbol = '';
     }
     this.decimalPrecision = this.configProps$?.decimalPrecision ?? 2;
 
@@ -196,18 +196,15 @@ export class DecimalComponent implements OnInit, OnDestroy {
     const actionsApi = this.pConn$?.getActionsApi();
     const propName = this.pConn$?.getStateProps().value;
     let value = event?.target?.value;
-    // replacing thousand seperator with empty string as not required in api call
+    // replacing thousand separator with empty string as not required in api call
     if (this.configProps$.showGroupSeparators) {
-      if (this.currSep === '.') {
-        value = value?.replace(/\./g, '');
-      } else {
-        const regExp = new RegExp(String.raw`${this.currSep}`, 'g');
-        value = value.replace(regExp, '');
-      }
+      const thousandSep = this.thousandSeparator === '.' ? '\\.' : this.thousandSeparator;
+      const regExp = new RegExp(String.raw`${thousandSep}`, 'g');
+      value = value?.replace(regExp, '');
     }
-    // replacing decimal seperator with '.'
-    if (this.currDec !== '.') {
-      const regExp = new RegExp(String.raw`${this.currDec}`, 'g');
+    // 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);

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

@@ -13,8 +13,8 @@
           [options]="{
             prefix: '',
             suffix: '%',
-            thousands: currSep,
-            decimal: currDec,
+            thousands: thousandSeparator,
+            decimal: decimalSeparator,
             align: 'left',
             nullable: true,
             precision: decimalPrecision,

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

@@ -48,8 +48,8 @@ export class PercentageComponent implements OnInit, OnDestroy {
   testId: string;
   helperText: string;
   placeholder: string;
-  currDec: string;
-  currSep: string;
+  decimalSeparator: string;
+  thousandSeparator: string;
   inputMode: any;
   decimalPrecision: number | undefined;
   fieldControl = new FormControl<number | null>(null, null);
@@ -128,8 +128,8 @@ export class PercentageComponent implements OnInit, OnDestroy {
     const showGroupSeparators = this.configProps$.showGroupSeparators;
 
     const theSymbols = getCurrencyCharacters('');
-    this.currDec = theSymbols.theDecimalIndicator || '2';
-    this.currSep = showGroupSeparators ? theSymbols.theDigitGroupSeparator : '';
+    this.decimalSeparator = theSymbols.theDecimalIndicator;
+    this.thousandSeparator = showGroupSeparators ? theSymbols.theDigitGroupSeparator : '';
 
     this.actionsApi = this.pConn$.getActionsApi();
     this.propName = this.pConn$.getStateProps().value;
@@ -188,18 +188,15 @@ export class PercentageComponent implements OnInit, OnDestroy {
   fieldOnBlur(event: any) {
     let value = event?.target?.value;
     value = value ? value.replace(/%/g, '') : '';
-    // replacing thousand seperator with empty string as not required in api call
+    // replacing thousand separator with empty string as not required in api call
     if (this.configProps$.showGroupSeparators) {
-      if (this.currSep === '.') {
-        value = value?.replace(/\./g, '');
-      } else {
-        const regExp = new RegExp(String.raw`${this.currSep}`, 'g');
-        value = value.replace(regExp, '');
-      }
+      const thousandSep = this.thousandSeparator === '.' ? '\\.' : this.thousandSeparator;
+      const regExp = new RegExp(String.raw`${thousandSep}`, 'g');
+      value = value?.replace(regExp, '');
     }
-    // replacing decimal seperator with '.'
-    if (this.currDec !== '.') {
-      const regExp = new RegExp(String.raw`${this.currDec}`, 'g');
+    // replacing decimal separator with '.'
+    if (this.decimalSeparator !== '.') {
+      const regExp = new RegExp(String.raw`${this.decimalSeparator}`, 'g');
       value = value.replace(regExp, '.');
     }
     handleEvent(this.actionsApi, 'changeNblur', this.propName, value);