@pega/dx-component-builder-sdk 0.242.11 → 0.242.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/dx-component-builder-sdk",
-  "version": "0.242.11",
+  "version": "0.242.12",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

package/src/tasks/create/templates/SDK-Angular/field/Decimal/decimal.component.html.mustache

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

package/src/tasks/create/templates/SDK-Angular/field/Decimal/decimal.component.ts.mustache

@@ -58,9 +58,9 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   placeholder: string;
 
   fieldControl = new FormControl<number | null>(null, null);
-  currDec: string;
-  currSep: string;
-  currSym: string;
+  decimalSeparator: string;
+  thousandSeparator: string;
+  currencySymbol = '';
   decimalPrecision: number | undefined;
   formatter;
   formattedValue: any;
@@ -143,8 +143,8 @@ export class {{COMPONENT_CLASS_NAME}}Component 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,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     }
 
     if (this.bReadonly$ && this.formatter === 'Currency') {
-      this.currSym = theSymbols.theCurrencySymbol;
-    } else {
-      this.currSym = '';
+      this.currencySymbol = theSymbols.theCurrencySymbol;
     }
     this.decimalPrecision = this.configProps$?.decimalPrecision ?? 2;
 
@@ -196,11 +194,16 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     const actionsApi = this.pConn$?.getActionsApi();
     const propName = this.pConn$?.getStateProps().value;
     let value = event?.target?.value;
-    if (this.currSep === ',') {
-      value = value.replace(/,/g, '');
-    } else {
-      value = value?.replace(/\./g, '');
-      value = value?.replace(/,/g, '.');
+    // 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);
   }

package/src/tasks/create/templates/SDK-Angular/field/Decimal-Currency/decimal-currency.component.html.mustache

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

package/src/tasks/create/templates/SDK-Angular/field/Decimal-Currency/decimal-currency.component.ts.mustache

@@ -52,9 +52,9 @@ export class {{COMPONENT_CLASS_NAME}}Component 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 {{COMPONENT_CLASS_NAME}}Component 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,11 +201,14 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     const propName = this.pConn$?.getStateProps().value;
     let value = event?.target?.value;
     value = value?.substring(1);
-    if (this.currSep === ',') {
-      value = value.replace(/,/g, '');
-    } else {
-      value = value?.replace(/\./g, '');
-      value = value?.replace(/,/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);
   }

package/src/tasks/create/templates/SDK-Angular/field/Decimal-Percentage/decimal-percentage.component.html.mustache

@@ -15,8 +15,8 @@
           [options]="{
             prefix: '',
             suffix: '%',
-            thousands: currSep,
-            decimal: currDec,
+            thousands: thousandSeparator,
+            decimal: decimalSeparator,
             align: 'left',
             nullable: true,
             precision: decimalPrecision,
@@ -31,7 +31,6 @@
           (change)="fieldOnChange()"
           (blur)="fieldOnBlur($event)"
           [readonly]="bReadonly$"
-          [value]="value$"
         />
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>

package/src/tasks/create/templates/SDK-Angular/field/Decimal-Percentage/decimal-percentage.component.ts.mustache

@@ -48,8 +48,8 @@ export class {{COMPONENT_CLASS_NAME}}Component 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);
@@ -121,14 +121,15 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     const nValue: any = this.configProps$.value;
     if (nValue) {
       this.value$ = nValue;
+      this.fieldControl.setValue(nValue);
     }
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
     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;
@@ -187,11 +188,16 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   fieldOnBlur(event: any) {
     let value = event?.target?.value;
     value = value ? value.replace(/%/g, '') : '';
-    if (this.currSep === '.') {
-      value = value?.replace(/\./g, '');
-      value = value?.replace(/,/g, '.');
-    } else {
-      value = value.replace(/,/g, '');
+    // 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(this.actionsApi, 'changeNblur', this.propName, value);
   }

package/src/tasks/create/templates/SDK-Angular/field/Picklist/demo.stories.tsx.mustache

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
 import { FormBuilder } from '@angular/forms';
 import { DatapageService } from '@pega/angular-sdk-components';
 import { configProps, stateProps } from './mock';

package/src/tasks/create/templates/SDK-Angular/field/Picklist/picklist.component.ts.mustache

@@ -5,6 +5,7 @@ import { MatOptionModule } from '@angular/material/core';
 import { MatSelectModule } from '@angular/material/select';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { interval } from 'rxjs';
+import isEqual from 'fast-deep-equal';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { DatapageService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
@@ -12,6 +13,39 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
+function flattenParameters(params = {}) {
+  const flatParams = {};
+  Object.keys(params).forEach(key => {
+    const { name, value: theVal } = params[key];
+    flatParams[name] = theVal;
+  });
+
+  return flatParams;
+}
+
+function preProcessColumns(columnList) {
+  return columnList.map(col => {
+    const tempColObj = { ...col };
+    tempColObj.value = col.value && col.value.startsWith('.') ? col.value.substring(1) : col.value;
+    return tempColObj;
+  });
+}
+
+function getDisplayFieldsMetaData(columnList) {
+  const displayColumns = columnList.filter(col => col.display === 'true');
+  const metaDataObj: any = { key: '', primary: '', secondary: [] };
+  const keyCol = columnList.filter(col => col.key === 'true');
+  metaDataObj.key = keyCol.length > 0 ? keyCol[0].value : 'auto';
+  for (let index = 0; index < displayColumns.length; index += 1) {
+    if (displayColumns[index].primary === 'true') {
+      metaDataObj.primary = displayColumns[index].value;
+    } else {
+      metaDataObj.secondary.push(displayColumns[index].value);
+    }
+  }
+  return metaDataObj;
+}
+
 interface IOption {
   key: string;
   value: string;
@@ -59,7 +93,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   testId = '';
   helperText: string;
   hideLabel: any;
-
+  theDatasource: any[] | null;
   fieldControl = new FormControl('', null);
   fieldMetadata: any[];
   localeContext = '';
@@ -85,8 +119,9 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     // Then, continue on with other initialization
 
     // call updateSelf when initializing
-    // this.updateSelf();
     this.checkAndUpdate();
+    // this should get called afer checkAndUpdate
+    this.getDatapageData();
 
     if (this.formGroup$) {
       // add control to formGroup
@@ -129,8 +164,6 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   updateSelf(): void {
     // moved this from ngOnInit() and call this from there instead...
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as {{COMPONENT_CLASS_NAME}}Props;
-    let { listType, parameters, datasource = [], columns = [] } = this.configProps$;
-    const { deferDatasource, datasourceMetadata } = this.pConn$.getConfigProps() as {{COMPONENT_CLASS_NAME}}Props;
     if (this.configProps$.value != undefined) {
       this.value$ = this.configProps$.value;
     }
@@ -140,7 +173,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     this.label$ = this.configProps$.label;
     this.helperText = this.configProps$.helperText;
     this.hideLabel = this.configProps$.hideLabel;
-    const context = this.pConn$.getContextName();
+    const datasource = this.configProps$.datasource;
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {
       if (this.configProps$.required != null) {
@@ -149,6 +182,11 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
       this.cdRef.detectChanges();
     });
 
+    if (!isEqual(datasource, this.theDatasource)) {
+      // inbound datasource is different, so update theDatasource
+      this.theDatasource = datasource || null;
+    }
+
     if (this.configProps$.visibility != null) {
       this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
     }
@@ -170,40 +208,17 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
 
     this.componentReference = this.pConn$.getStateProps().value;
 
-    const optionsList = [...this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject())];
-    optionsList?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
-    this.options$ = optionsList;
     if (this.value$ === '' && !this.bReadonly$) {
       this.value$ = 'Select';
     }
 
-    this.actionsApi = this.pConn$.getActionsApi();
-    if (deferDatasource && datasourceMetadata?.datasource?.name) {
-      listType = 'datapage';
-      datasource = datasourceMetadata.datasource.name;
-      const { parameters: dataSourceParameters, propertyForDisplayText, propertyForValue } = datasourceMetadata.datasource;
-      parameters = this.flattenParameters(dataSourceParameters);
-      const displayProp = propertyForDisplayText?.startsWith('@P') ? propertyForDisplayText.substring(3) : propertyForDisplayText;
-      const valueProp = propertyForValue?.startsWith('@P') ? propertyForValue.substring(3) : propertyForValue;
-      columns = [
-        {
-          key: 'true',
-          setProperty: 'Associated property',
-          value: valueProp
-        },
-        {
-          display: 'true',
-          primary: 'true',
-          useForSearch: true,
-          value: displayProp
-        }
-      ];
+    if (this.theDatasource) {
+      const optionsList = [...this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject())];
+      optionsList?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
+      this.options$ = optionsList;
     }
 
-    columns = this.preProcessColumns(columns) || [];
-    if (!this.displayMode$ && listType !== 'associated' && typeof datasource === 'string') {
-      this.getData(datasource, parameters, columns, context);
-    }
+    this.actionsApi = this.pConn$.getActionsApi();
 
     this.propName = this.pConn$.getStateProps().value;
     const className = this.pConn$.getCaseInfo().getClassName();
@@ -235,10 +250,43 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     }
   }
 
+  getDatapageData() {
+    const configProps = this.pConn$.getConfigProps() as {{COMPONENT_CLASS_NAME}}Props;
+    let { listType, parameters, datasource = [], columns = [] } = configProps;
+    const { deferDatasource, datasourceMetadata } = configProps;
+    const context = this.pConn$.getContextName();
+    if (deferDatasource && datasourceMetadata?.datasource?.name) {
+      listType = 'datapage';
+      datasource = datasourceMetadata.datasource.name;
+      const { parameters: dataSourceParameters, propertyForDisplayText, propertyForValue } = datasourceMetadata.datasource;
+      parameters = flattenParameters(dataSourceParameters);
+      const displayProp = propertyForDisplayText?.startsWith('@P') ? propertyForDisplayText.substring(3) : propertyForDisplayText;
+      const valueProp = propertyForValue?.startsWith('@P') ? propertyForValue.substring(3) : propertyForValue;
+      columns = [
+        {
+          key: 'true',
+          setProperty: 'Associated property',
+          value: valueProp
+        },
+        {
+          display: 'true',
+          primary: 'true',
+          useForSearch: true,
+          value: displayProp
+        }
+      ];
+    }
+
+    columns = preProcessColumns(columns) || [];
+    if (!this.displayMode$ && listType !== 'associated' && typeof datasource === 'string') {
+      this.getData(datasource, parameters, columns, context);
+    }
+  }
+
   getData(datasource, parameters, columns, context) {
     this.dataPageService.getDataPageData(datasource, parameters, context).then((results: any) => {
       const optionsData: any[] = [];
-      const displayColumn = this.getDisplayFieldsMetaData(columns);
+      const displayColumn = getDisplayFieldsMetaData(columns);
       results?.forEach(element => {
         const val = element[displayColumn.primary]?.toString();
         const obj = {
@@ -252,39 +300,6 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     });
   }
 
-  flattenParameters(params = {}) {
-    const flatParams = {};
-    Object.keys(params).forEach(key => {
-      const { name, value: theVal } = params[key];
-      flatParams[name] = theVal;
-    });
-
-    return flatParams;
-  }
-
-  preProcessColumns(columnList) {
-    return columnList.map(col => {
-      const tempColObj = { ...col };
-      tempColObj.value = col.value && col.value.startsWith('.') ? col.value.substring(1) : col.value;
-      return tempColObj;
-    });
-  }
-
-  getDisplayFieldsMetaData(columnList) {
-    const displayColumns = columnList.filter(col => col.display === 'true');
-    const metaDataObj: any = { key: '', primary: '', secondary: [] };
-    const keyCol = columnList.filter(col => col.key === 'true');
-    metaDataObj.key = keyCol.length > 0 ? keyCol[0].value : 'auto';
-    for (let index = 0; index < displayColumns.length; index += 1) {
-      if (displayColumns[index].primary === 'true') {
-        metaDataObj.primary = displayColumns[index].value;
-      } else {
-        metaDataObj.secondary.push(displayColumns[index].value);
-      }
-    }
-    return metaDataObj;
-  }
-
   isSelected(buttonValue: string): boolean {
     return this.value$ === buttonValue;
   }

package/tests/assets/sdk-a/components/create/override-sdk/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,

package/tests/assets/sdk-a/components/create/override-sdk/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,11 +201,14 @@ export class CurrencyComponent implements OnInit, OnDestroy {
     const propName = this.pConn$?.getStateProps().value;
     let value = event?.target?.value;
     value = value?.substring(1);
-    if (this.currSep === ',') {
-      value = value.replace(/,/g, '');
-    } else {
-      value = value?.replace(/\./g, '');
-      value = value?.replace(/,/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);
   }

package/tests/assets/sdk-a/components/create/override-sdk/field/decimal/decimal.component.html

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

package/tests/assets/sdk-a/components/create/override-sdk/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 = '';
   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,7 @@ export class DecimalComponent implements OnInit, OnDestroy {
     }
 
     if (this.bReadonly$ && this.formatter === 'Currency') {
-      this.currSym = theSymbols.theCurrencySymbol;
-    } else {
-      this.currSym = '';
+      this.currencySymbol = theSymbols.theCurrencySymbol;
     }
     this.decimalPrecision = this.configProps$?.decimalPrecision ?? 2;
 
@@ -196,11 +194,16 @@ export class DecimalComponent implements OnInit, OnDestroy {
     const actionsApi = this.pConn$?.getActionsApi();
     const propName = this.pConn$?.getStateProps().value;
     let value = event?.target?.value;
-    if (this.currSep === ',') {
-      value = value.replace(/,/g, '');
-    } else {
-      value = value?.replace(/\./g, '');
-      value = value?.replace(/,/g, '.');
+    // 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);
   }

package/tests/assets/sdk-a/components/create/override-sdk/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,
@@ -29,7 +29,6 @@
           (change)="fieldOnChange()"
           (blur)="fieldOnBlur($event)"
           [readonly]="bReadonly$"
-          [value]="value$"
         />
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>

package/tests/assets/sdk-a/components/create/override-sdk/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);
@@ -121,14 +121,15 @@ export class PercentageComponent implements OnInit, OnDestroy {
     const nValue: any = this.configProps$.value;
     if (nValue) {
       this.value$ = nValue;
+      this.fieldControl.setValue(nValue);
     }
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
     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;
@@ -187,11 +188,16 @@ export class PercentageComponent implements OnInit, OnDestroy {
   fieldOnBlur(event: any) {
     let value = event?.target?.value;
     value = value ? value.replace(/%/g, '') : '';
-    if (this.currSep === '.') {
-      value = value?.replace(/\./g, '');
-      value = value?.replace(/,/g, '.');
-    } else {
-      value = value.replace(/,/g, '');
+    // 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(this.actionsApi, 'changeNblur', this.propName, value);
   }

package/tests/assets/sdk-a/components/create/override-sdk/template/list-view/list-view.component.html

@@ -1,5 +1,8 @@
 <div class="psdk-list-header">
   <div>
+    <h3 *ngIf="label" class="label" style="font-weight: bold">
+      {{ label }} <span class="results-count">{{ getResultsText() }}</span>
+    </h3>
     <mat-form-field class="psdk-search" *ngIf="bShowSearch$">
       <mat-label><img class="psdk-icon-search" src="{{ searchIcon$ }}" /> <span class="psdk-search-label">Search</span> </mat-label>
       <input matInput id="search" (keyup)="applySearch($event)" placeholder="" />