updated formatting of decimal,currency and percentage (#249)

Co-authored-by: mohas22 <[email protected]>

Author: samhere06

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

@@ -17,6 +17,7 @@ interface CurrrencyProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Currency here
   currencyISOCode?: string;
   allowDecimals: boolean;
+  formatter?: string;
 }
 
 @Component({
@@ -57,6 +58,7 @@ export class CurrencyComponent implements OnInit, OnDestroy {
   inputMode: any;
   decimalPrecision: number | undefined;
   formattedValue: string;
+  formatter;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -137,10 +139,15 @@ export class CurrencyComponent implements OnInit, OnDestroy {
     this.currSym = theSymbols.theCurrencySymbol;
     this.currSep = theSymbols.theDigitGroupSeparator;
     this.currDec = theSymbols.theDecimalIndicator;
+    this.formatter = this.configProps$.formatter;
 
     if (this.displayMode$ === 'DISPLAY_ONLY' || this.displayMode$ === 'STACKED_LARGE_VAL') {
       const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
-      this.formattedValue = format(this.configProps$.value, this.pConn$?.getComponentName()?.toLowerCase(), theCurrencyOptions);
+      if (this.formatter) {
+        this.formattedValue = format(this.value$, this.formatter.toLowerCase(), theCurrencyOptions);
+      } else {
+        this.formattedValue = format(this.value$, 'currency', theCurrencyOptions);
+      }
     }
 
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError

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

@@ -149,10 +149,10 @@ export class DecimalComponent implements OnInit, OnDestroy {
     const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
     this.formatter = this.configProps$.formatter;
 
-    if (this.formatter === 'Currency') {
+    if (this.formatter) {
       this.formattedValue = format(this.value$, this.formatter.toLowerCase(), theCurrencyOptions);
     } else {
-      this.formattedValue = format(this.value$, this.pConn$.getComponentName()?.toLowerCase(), theCurrencyOptions);
+      this.formattedValue = format(this.value$, 'decimal', theCurrencyOptions);
     }
 
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError

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

@@ -9,7 +9,7 @@ import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/an
 import { Utils } from '../../../_helpers/utils';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 import { handleEvent } from '../../../_helpers/event-util';
-import { getCurrencyCharacters, getCurrencyOptions } from '../../../_helpers/currency-utils';
+import { getCurrencyCharacters } from '../../../_helpers/currency-utils';
 import { PConnFieldProps } from '../../../_types/PConnProps.interface';
 import { format } from '../../../_helpers/formatters';
 
@@ -124,7 +124,6 @@ export class PercentageComponent implements OnInit, OnDestroy {
     }
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
-    const currencyISOCode = this.configProps$?.currencyISOCode ?? '';
     const showGroupSeparators = this.configProps$.showGroupSeparators;
 
     const theSymbols = getCurrencyCharacters('');
@@ -135,8 +134,7 @@ export class PercentageComponent implements OnInit, OnDestroy {
     this.propName = this.pConn$.getStateProps().value;
 
     if (this.displayMode$ === 'DISPLAY_ONLY' || this.displayMode$ === 'STACKED_LARGE_VAL') {
-      const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
-      this.formattedValue = format(nValue, this.pConn$?.getComponentName()?.toLowerCase(), theCurrencyOptions);
+      this.formattedValue = format(nValue, 'percentage');
     }
 
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError