updated currency,datetime,decimal components

Author: mohas22

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

@@ -130,6 +130,7 @@ export class CurrencyComponent implements OnInit, OnDestroy {
         nValue = parseFloat(nValue);
       }
       this.value$ = nValue;
+      this.fieldControl.setValue(this.value$);
     }
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';

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

@@ -6,13 +6,16 @@ import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angular-datetime-picker';
 import { interval } from 'rxjs';
+import dayjs from 'dayjs';
+import moment from 'moment';
 import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/angular-pconnect';
 import { Utils } from '../../../_helpers/utils';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 import { dateFormatInfoDefault, getDateFormatInfo } from '../../../_helpers/date-format-utils';
 import { PConnFieldProps } from '../../../_types/PConnProps.interface';
 import { handleEvent } from '../../../_helpers/event-util';
 import { format } from '../../../_helpers/formatters';
+import DateFormatter from '../../../_helpers/formatters/date';
 
 interface DateTimeProps extends PConnFieldProps {
   // If any, enter additional props that only exist on DateTime here
@@ -68,6 +71,7 @@ export class DateTimeComponent implements OnInit, OnDestroy {
   actionsApi: Object;
   propName: string;
   formattedValue$: any;
+  timezone = PCore.getEnvironmentInfo()?.getTimeZone();
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -88,7 +92,7 @@ export class DateTimeComponent implements OnInit, OnDestroy {
     if (this.formGroup$) {
       // add control to formGroup
       this.formGroup$.addControl(this.controlName$, this.fieldControl);
-      this.fieldControl.setValue(this.value$);
+      this.fieldControl.setValue(dayjs(DateFormatter?.convertToTimezone(this.value$, { timezone: this.timezone }))?.toISOString());
       this.bHasForm$ = true;
     } else {
       this.bReadonly$ = true;
@@ -132,7 +136,7 @@ export class DateTimeComponent implements OnInit, OnDestroy {
     this.testId = this.configProps$.testId;
     this.helperText = this.configProps$.helperText;
     this.value$ = this.configProps$?.value;
-    this.fieldControl.setValue(this.value$);
+    this.fieldControl.setValue(dayjs(DateFormatter?.convertToTimezone(this.value$, { timezone: this.timezone }))?.toISOString());
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {
       if (this.configProps$.required != null) {
@@ -186,7 +190,9 @@ export class DateTimeComponent implements OnInit, OnDestroy {
     // this comes from the date pop up
     if (typeof event.value === 'object') {
       // convert date to pega "date" format
-      event.value = event.value?.toISOString();
+      const dateTime = moment(event.value?.toISOString());
+      const timeZoneDateTime = dayjs.tz(dateTime.format('YYYY-MM-DDTHH:mm:ss'), this.timezone);
+      event.value = timeZoneDateTime && timeZoneDateTime.isValid() ? timeZoneDateTime.toISOString() : '';
     }
     handleEvent(this.actionsApi, 'changeNblur', this.propName, event.value);
   }

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

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

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

@@ -65,6 +65,7 @@ export class DecimalComponent implements OnInit, OnDestroy {
   formatter;
   formattedValue: any;
   inputMode: any;
+  suffix = '';
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -136,6 +137,7 @@ export class DecimalComponent implements OnInit, OnDestroy {
         nValue = parseFloat(nValue);
       }
       this.value$ = nValue;
+      this.fieldControl.setValue(this.value$);
     }
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
@@ -185,6 +187,11 @@ export class DecimalComponent implements OnInit, OnDestroy {
     if (this.bReadonly$ && this.formatter === 'Currency') {
       this.currencySymbol = theSymbols.theCurrencySymbol;
     }
+
+    if (this.bReadonly$ && this.formatter === 'Percentage') {
+      this.suffix = '%';
+    }
+
     this.decimalPrecision = this.configProps$?.decimalPrecision ?? 2;
 
     this.componentReference = this.pConn$.getStateProps().value;

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

@@ -117,6 +117,7 @@ export class PhoneComponent implements OnInit, OnDestroy {
     this.testId = this.configProps$.testId;
     if (this.configProps$.value != undefined) {
       this.value$ = this.configProps$.value;
+      this.fieldControl.setValue(this.value$);
     }
     this.helperText = this.configProps$.helperText;
 

packages/angular-sdk-components/src/lib/_helpers/formatters/common.ts

@@ -7,6 +7,8 @@ export function getLocale(locale: string = '') {
   return Intl.DateTimeFormat().resolvedOptions().locale;
 }
 
-export function getCurrentTimezone() {
-  return PCore?.getEnvironmentInfo?.().getTimeZone?.();
+export function getCurrentTimezone(timezone?: string) {
+  // use timezone if specified
+  if (timezone) return timezone;
+  return PCore?.getLocaleUtils?.().getTimeZoneInUse?.();
 }

packages/angular-sdk-components/src/lib/_helpers/formatters/format-utils.ts

@@ -27,7 +27,14 @@ function CurrencyFormatter(
       currency
     });
 
-    let countryCode = currentLocale?.split('-')[1].toUpperCase();
+    // For currency other than EUR, we need to determine the country code from currency code
+    // If currency is EUR, we use the locale to determine the country code
+    let countryCode: string | undefined;
+    if (currency !== 'EUR') {
+      countryCode = currency.substring(0, 2);
+    } else {
+      countryCode = currentLocale?.split('-')[1].toUpperCase();
+    }
 
     // If countryCode is still undefined, setting it as US
     if (!countryCode) {