Fixed the overrides issues (#302)

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

Author: vishalshrm539

packages/angular-sdk-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/angular-sdk-components",
-  "version": "24.2.10",
+  "version": "24.2.11",
   "peerDependencies": {
     "@angular/common": "^18.2.12",
     "@angular/core": "^18.2.12"

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

@@ -13,7 +13,8 @@ import { ComponentMapperComponent } from '../../../_bridge/component-mapper/comp
 import { dateFormatInfoDefault, getDateFormatInfo } from '../../../_helpers/date-format-utils';
 import { PConnFieldProps } from '../../../_types/PConnProps.interface';
 import { handleEvent } from '../../../_helpers/event-util';
-import { format, convertToTimezone } from '../../../_helpers/formatters';
+import { format } from '../../../_helpers/formatters';
+import { DateFormatters } from '../../../_helpers/formatters/date';
 
 interface DateTimeProps extends PConnFieldProps {
   // If any, enter additional props that only exist on DateTime here
@@ -91,8 +92,9 @@ export class DateTimeComponent implements OnInit, OnDestroy {
       // add control to formGroup
       this.formGroup$.addControl(this.controlName$, this.fieldControl);
       let dateTimeValue = this.value$ ?? '';
+
       if (this.value$) {
-        dateTimeValue = dayjs(convertToTimezone(this.value$, { timezone: this.timezone }))?.toISOString();
+        dateTimeValue = dayjs(DateFormatters?.convertToTimezone(this.value$, { timezone: this.timezone }))?.toISOString();
       }
       this.fieldControl.setValue(dateTimeValue);
       this.bHasForm$ = true;
@@ -140,7 +142,7 @@ export class DateTimeComponent implements OnInit, OnDestroy {
     this.value$ = this.configProps$?.value;
     let dateTimeValue = this.configProps$?.value ?? '';
     if (this.value$) {
-      dateTimeValue = dayjs(convertToTimezone(this.value$, { timezone: this.timezone }))?.toISOString();
+      dateTimeValue = dayjs(DateFormatters?.convertToTimezone(this.value$, { timezone: this.timezone }))?.toISOString();
     }
     this.fieldControl.setValue(dateTimeValue);
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError

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

@@ -11,7 +11,7 @@ function Boolean(value, { allowEmpty = true, tick = '', cross = '' } = {}) {
   return value;
 }
 
-export default {
+export const BooleanFormatters = {
   TrueFalse: (value, options) =>
     Boolean(value, {
       ...options,

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

@@ -63,7 +63,7 @@ function SymbolFormatter(value, { symbol = '$', suffix = true, locale = 'en-US'
   return formattedValue;
 }
 
-export default {
+export const CurrencyFormatters = {
   Currency: (value, options) => CurrencyFormatter(value, options),
   'Currency-Code': (value, options) => CurrencyFormatter(value, { ...options, symbol: false }),
   Decimal: (value, options) => NumberFormatter(value, options),

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

@@ -42,7 +42,7 @@ function TimeFormatter(value, options) {
   return DateFormatter(value, options);
 }
 
-export default {
+export const DateFormatters = {
   'DateTime-Long': (value, options) => DateFormatter(value, { ...options, type: 'customFormat', format: 'LLL' }),
   'DateTime-Short': (value, options) =>
     DateFormatter(value, {

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

@@ -1,12 +1,12 @@
-import Boolean from './boolean';
-import Currency from './currency';
-import DateFormatter from './date';
+import { BooleanFormatters } from './boolean';
+import { CurrencyFormatters } from './currency';
+import { DateFormatters } from './date';
 import { getCurrentTimezone, getLocale } from './common';
 
-export default {
-  ...Boolean,
-  ...Currency,
-  ...DateFormatter
+export const CommonFormatters = {
+  ...BooleanFormatters,
+  ...CurrencyFormatters,
+  ...DateFormatters
 };
 
 function getDateObject(text): Date {
@@ -69,28 +69,28 @@ export function format(value, type, options = {}): string {
         decPlaces: 2
       };
       const params = { ...defaultOptions, ...options };
-      formattedValue = Currency.Currency(value, params);
+      formattedValue = CurrencyFormatters.Currency(value, params);
       break;
     }
 
     case 'percentage': {
       const defaultOptions = { locale: getLocale(), decPlaces: 2 };
       const params = { ...defaultOptions, ...options };
-      formattedValue = Currency.Percentage(value, params);
+      formattedValue = CurrencyFormatters.Percentage(value, params);
       break;
     }
 
     case 'decimal': {
       const defaultOptions = { locale: getLocale(), decPlaces: 2 };
       const params = { ...defaultOptions, ...options };
-      formattedValue = Currency.Decimal(value, params);
+      formattedValue = CurrencyFormatters.Decimal(value, params);
       break;
     }
 
     case 'integer': {
       const defaultOptions = { locale: getLocale() };
       const params = { ...defaultOptions, ...options };
-      formattedValue = Currency.Integer(value, params);
+      formattedValue = CurrencyFormatters.Integer(value, params);
       break;
     }
 
@@ -100,7 +100,7 @@ export function format(value, type, options = {}): string {
         timezone: getCurrentTimezone()
       };
       const params = { ...defaultOptions, ...options };
-      formattedValue = DateFormatter.Date(parseDateInISO(value), params);
+      formattedValue = DateFormatters.Date(parseDateInISO(value), params);
       break;
     }
 
@@ -110,13 +110,13 @@ export function format(value, type, options = {}): string {
         timezone: getCurrentTimezone()
       };
       const params = { ...defaultOptions, ...options };
-      formattedValue = DateFormatter.Date(parseDateInISO(value), params);
+      formattedValue = DateFormatters.Date(parseDateInISO(value), params);
       break;
     }
 
     case 'boolean':
     case 'checkbox': {
-      formattedValue = Boolean.TrueFalse(value, { allowEmpty: false, ...options });
+      formattedValue = BooleanFormatters.TrueFalse(value, { allowEmpty: false, ...options });
       break;
     }
 
@@ -132,7 +132,7 @@ export function format(value, type, options = {}): string {
         timezone: getCurrentTimezone()
       };
       const params = { ...defaultOptions, ...options };
-      formattedValue = DateFormatter['Time-Only'](value, params);
+      formattedValue = DateFormatters['Time-Only'](value, params);
       break;
     }
 
@@ -141,16 +141,3 @@ export function format(value, type, options = {}): string {
   }
   return formattedValue;
 }
-
-export function convertToTimezone(value, options) {
-  if (value && options) {
-    const defaultOptions = {
-      type: 'customFormat',
-      format: 'YYYY-MM-DDTHH:mm:ss',
-      timezone: getCurrentTimezone()
-    };
-    const params = { ...defaultOptions, ...options };
-    return DateFormatter.convertToTimezone(value, params);
-  }
-  return value;
-}

packages/angular-sdk-components/src/public-api.ts

@@ -138,7 +138,10 @@ export * from './lib/_helpers/event-util';
 export * from './lib/_helpers/field-group-utils';
 export * from './lib/_helpers/formatters/format-utils';
 export * from './lib/_helpers/formatters/currency-map';
-export * from './lib/_helpers/formatters';
+export * from './lib/_helpers/formatters/date';
+export * from './lib/_helpers/formatters/boolean';
+export * from './lib/_helpers/formatters/currency';
+export * from './lib/_helpers/formatters/index';
 export * from './lib/_helpers/tab-utils';
 export * from './lib/_helpers/template-utils';
 export * from './lib/_helpers/utils';

packages/angular-sdk-overrides/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/angular-sdk-overrides",
-  "version": "24.2.10",
+  "version": "24.2.11",
   "description": "Angular SDK - Code for overriding components",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"