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

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="" />

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

@@ -165,3 +165,14 @@ tr.mat-mdc-row {
   background-color: transparent;
   align-items: center;
 }
+
+.results-count {
+  opacity: 0.7;
+  font-size: 0.8rem;
+  font-weight: bold;
+  margin-inline-start: 0.625rem;
+}
+
+.label {
+  margin: 8px;
+}

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

@@ -1,4 +1,3 @@
-/* eslint-disable max-classes-per-file */
 import { Component, OnInit, Input, ViewChild, forwardRef, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatDatepickerModule } from '@angular/material/datepicker';
@@ -29,6 +28,8 @@ declare const window: any;
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
 
 interface ListViewProps {
+  inheritedProps: any;
+  title: string | undefined;
   // If any, enter additional props that only exist on this component
   globalSearch?: boolean;
   referenceList?: any;
@@ -42,6 +43,7 @@ interface ListViewProps {
   grouping: string | boolean;
   value: any;
   readonlyContextList: any;
+  label?: string;
 }
 
 export class Group {
@@ -159,6 +161,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
   xRayApis = PCore.getDebugger().getXRayRuntime();
   xRayUid = this.xRayApis.startXRay();
   checkBoxValue: string;
+  label?: string = '';
 
   constructor(
     private psService: ProgressSpinnerService,
@@ -192,6 +195,18 @@ export class ListViewComponent implements OnInit, OnDestroy {
     this.arFilterMainButtons$.push({ actionID: 'submit', jsAction: 'submit', name: 'Submit' });
     this.arFilterSecondaryButtons$.push({ actionID: 'cancel', jsAction: 'cancel', name: 'Cancel' });
 
+    let title = this.configProps$?.title || this.configProps$?.label || 'List';
+    const inheritedProps = this.configProps$?.inheritedProps;
+    if (title === 'List' && inheritedProps) {
+      for (const inheritedProp of inheritedProps) {
+        if (inheritedProp?.prop === 'label') {
+          title = inheritedProp?.value;
+          break;
+        }
+      }
+    }
+    this.label = title;
+
     this.searchIcon$ = this.utils.getImageSrc('search', this.utils.getSDKStaticContentUrl());
     setTimeout(() => {
       PCore.getPubSubUtils().subscribe(
@@ -1380,6 +1395,11 @@ export class ListViewComponent implements OnInit, OnDestroy {
     return listFields;
   }
 
+  getResultsText() {
+    const recordsCount = this.repeatList$?.paginator?.length || 0;
+    return `${recordsCount || 0} result${recordsCount > 1 ? 's' : ''}`;
+  }
+
   getField(fieldDefs, columnId) {
     const fieldsMap = this.getFieldsMap(fieldDefs);
     return fieldsMap.get(columnId);

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-currency/pega-dxil-my-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/createAll/custom-sdk/field/pega-dxil-my-currency/pega-dxil-my-currency.component.ts

@@ -52,9 +52,9 @@ export class PegaDxilMyCurrencyComponent 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 PegaDxilMyCurrencyComponent 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 PegaDxilMyCurrencyComponent 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/createAll/custom-sdk/field/pega-dxil-my-decimal/pega-dxil-my-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/createAll/custom-sdk/field/pega-dxil-my-decimal/pega-dxil-my-decimal.component.ts

@@ -58,9 +58,9 @@ export class PegaDxilMyDecimalComponent 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 PegaDxilMyDecimalComponent 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 PegaDxilMyDecimalComponent 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 PegaDxilMyDecimalComponent 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/createAll/custom-sdk/field/pega-dxil-my-percentage/pega-dxil-my-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/createAll/custom-sdk/field/pega-dxil-my-percentage/pega-dxil-my-percentage.component.ts

@@ -48,8 +48,8 @@ export class PegaDxilMyPercentageComponent 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 PegaDxilMyPercentageComponent 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 PegaDxilMyPercentageComponent 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/createAll/custom-sdk/field/pega-dxil-my-picklist/demo.stories.tsx

@@ -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';