@pega/dx-component-builder-sdk 24.2.12 → 24.2.13

package/tests/assets/sdk-a/components/create/override-sdk/template/simple-table-manual/simple-table-manual.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 { FormGroup } from '@angular/forms';
@@ -18,11 +17,10 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { DatapageService } from '@pega/angular-sdk-components';
 import { getReferenceList } from '@pega/angular-sdk-components';
 import { buildFieldsForTable, filterDataByCommonFields, filterDataByDate, getContext } from './helpers';
+import { evaluateAllowRowAction } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { getSeconds } from '@pega/angular-sdk-components';
 
-declare const window: any;
-
 interface SimpleTableManualProps {
   // If any, enter additional props that only exist on this component
   visibility?: boolean;
@@ -37,7 +35,9 @@ interface SimpleTableManualProps {
   contextClass?: string;
   propertyLabel?: string;
   fieldMetadata?: any;
+  allowActions?: any;
   allowTableEdit?: boolean;
+  allowRowDelete?: any;
   editMode?: string;
   addAndEditRowsWithin?: any;
   viewForAddAndEditModal?: any;
@@ -104,6 +104,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
   showAddRowButton: boolean;
   prevReferenceList: any[] = [];
   elementsData: MatTableDataSource<any>;
+  originalElementsData: MatTableDataSource<any>;
   rawFields: any;
   label?: string = '';
   searchIcon$: string;
@@ -160,14 +161,16 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
 
   isInitialized = false;
   targetClassLabel: string;
-
+  localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  localeCategory = 'SimpleTable';
   constructor(
     private angularPConnect: AngularPConnectService,
-    private utils: Utils,
+    public utils: Utils,
     private dataPageService: DatapageService
   ) {}
 
   ngOnInit(): void {
+    this.elementsData = new MatTableDataSource<any>([]);
     this.isInitialized = true;
     // First thing in initialization is registering and subscribing to the AngularPConnect service
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
@@ -229,7 +232,9 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
       renderMode,
       children, // destructure children into an array var: "resolvedFields"
       presets,
+      allowActions,
       allowTableEdit,
+      allowRowDelete,
       label: labelProp,
       propertyLabel,
       fieldMetadata,
@@ -243,12 +248,22 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
       targetClassLabel
     } = this.configProps$;
 
+    const simpleTableManualProps: any = {};
+    if (this.checkIfAllowActionsOrRowEditingExist(allowActions) && editMode) {
+      simpleTableManualProps.hideAddRow = allowActions?.allowAdd === false;
+      simpleTableManualProps.hideDeleteRow = allowActions?.allowDelete === false;
+      simpleTableManualProps.hideEditRow = allowActions?.allowEdit === false;
+      simpleTableManualProps.disableDragDrop = allowActions?.allowDragDrop === false;
+    } else if (allowTableEdit === false) {
+      simpleTableManualProps.hideAddRow = true;
+      simpleTableManualProps.hideDeleteRow = true;
+      simpleTableManualProps.disableDragDrop = true;
+    }
+
     this.referenceListStr = getContext(this.pConn$).referenceListStr;
     this.label = labelProp || propertyLabel;
     this.parameters = fieldMetadata?.datasource?.parameters;
     this.targetClassLabel = targetClassLabel;
-    const hideAddRow = allowTableEdit === false;
-    const hideDeleteRow = allowTableEdit === false;
     let { contextClass } = this.configProps$;
     this.referenceList = referenceList;
     if (!contextClass) {
@@ -285,10 +300,10 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     this.readOnlyMode = renderMode === 'ReadOnly';
     this.editableMode = renderMode === 'Editable';
     const isDisplayModeEnabled = displayMode === 'DISPLAY_ONLY';
-    this.showAddRowButton = !this.readOnlyMode && !hideAddRow;
+    this.showAddRowButton = !this.readOnlyMode && !simpleTableManualProps.hideAddRow;
     this.allowEditingInModal =
       (editMode ? editMode === 'modal' : addAndEditRowsWithin === 'modal') && !(renderMode === 'ReadOnly' || isDisplayModeEnabled);
-    const showDeleteButton = this.editableMode && !hideDeleteRow;
+    const showDeleteButton = this.editableMode && !simpleTableManualProps.hideDeleteRow && evaluateAllowRowAction(allowRowDelete, this.rowData);
     this.defaultView = editModeConfig ? editModeConfig.defaultView : viewForAddAndEditModal;
     this.bUseSeparateViewForEdit = editModeConfig ? editModeConfig.useSeparateViewForEdit : useSeparateViewForEdit;
     this.editView = editModeConfig ? editModeConfig.editView : viewForEditModal;
@@ -327,7 +342,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     });
 
     // for adding rows to table when editable and not modal view
-    if (this.prevReferenceList.length !== this.referenceList.length && this.editableMode && !this.allowEditingInModal) {
+    if (this.prevReferenceList.length !== this.referenceList.length) {
       this.buildElementsForTable();
     }
 
@@ -354,6 +369,10 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     //  ties the 3 data structures together.
   }
 
+  checkIfAllowActionsOrRowEditingExist(newflagobject) {
+    return (newflagobject && Object.keys(newflagobject).length > 0) || this.pConn$.getComponentConfig().allowRowEdit;
+  }
+
   initializeDefaultPageInstructions() {
     if (this.isInitialized) {
       this.isInitialized = false;
@@ -375,8 +394,8 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
   }
 
   sortCompare(a, b): number {
-    let aValue = a[this.compareRef];
-    let bValue = b[this.compareRef];
+    let aValue = a[0][this.compareRef];
+    let bValue = b[0][this.compareRef];
 
     if (this.compareType == 'Date' || this.compareType == 'DateTime') {
       aValue = getSeconds(aValue);
@@ -499,17 +518,20 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     // run through list of elements in path, if menu not in th path, then want to
     // hide (toggle) the menu
     const eventPath = event.path;
-    for (let eventIndex = 0; eventIndex < eventPath.length; eventIndex++) {
-      if (
-        eventPath[eventIndex].className == 'psdk-modal-file-top' ||
-        eventPath[eventIndex].tagName == 'BUTTON' ||
-        eventPath[eventIndex].tagName == 'MAT-OPTION' ||
-        eventPath[eventIndex].tagName == 'MAT-INPUT'
-      ) {
-        bInPopUp = true;
-        break;
+    if (eventPath) {
+      for (let eventIndex = 0; eventIndex < eventPath.length; eventIndex++) {
+        if (
+          eventPath[eventIndex].className == 'psdk-modal-file-top' ||
+          eventPath[eventIndex].tagName == 'BUTTON' ||
+          eventPath[eventIndex].tagName == 'MAT-OPTION' ||
+          eventPath[eventIndex].tagName == 'MAT-INPUT'
+        ) {
+          bInPopUp = true;
+          break;
+        }
       }
     }
+
     if (!bInPopUp) {
       // this.bShowFilterPopover$ = false;
 
@@ -628,7 +650,8 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     }
   }
 
-  filterData(item: any) {
+  filterData(element: any) {
+    const item = element[0];
     let bKeep = true;
     for (const filterObj of this.filterByColumns) {
       if (filterObj.containsFilterValue != '' || filterObj.containsFilter == 'null' || filterObj.containsFilter == 'notnull') {
@@ -642,6 +665,8 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
             bKeep = filterDataByCommonFields(item, filterObj);
             break;
         }
+      } else if (filterObj.containsFilterValue === '') {
+        bKeep = true;
       }
 
       // if don't keep stop filtering
@@ -654,14 +679,22 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
   }
 
   filterSortGroupBy() {
-    let theData = this.originalData.slice();
+    let theData = this.originalData.slice().map((item, index) => {
+      return [item, index];
+    });
 
     // last filter config data is global
     theData = theData.filter(this.filterData.bind(this));
 
     // last sort config data is global
     theData.sort(this.sortCompare.bind(this));
-    this.rowData.data = theData;
+    this.rowData.data = theData.map(item => item[0]);
+
+    const newElements: any = new Array(this.rowData.data.length);
+    theData.forEach((item, index) => {
+      newElements[index] = this.originalElementsData[item[1]];
+    });
+    this.elementsData = newElements;
   }
 
   _headerSortClick(event, columnData) {
@@ -960,6 +993,10 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     this.referenceList.forEach((element, index) => {
       const data: any = [];
       this.rawFields?.forEach(item => {
+        item = {
+          ...item,
+          config: { ...item.config, label: '', displayMode: this.readOnlyMode || this.allowEditingInModal ? 'DISPLAY_ONLY' : undefined }
+        };
         const referenceListData = getReferenceList(this.pConn$);
         const isDatapage = referenceListData.startsWith('D_');
         const pageReferenceValue = isDatapage ? `${referenceListData}[${index}]` : `${this.pConn$.getPageReference()}${referenceListData}[${index}]`;
@@ -977,6 +1014,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
       });
       eleData.push(data);
     });
+    this.originalElementsData = eleData;
     this.elementsData = eleData;
   }
 }

package/tests/assets/sdk-a/components/create/override-sdk/widget/feed-container/feed-container.component.ts

@@ -9,8 +9,6 @@ import isEqual from 'fast-deep-equal';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 
-declare const window: any;
-
 @Component({
   selector: 'app-feed-container',
   templateUrl: './feed-container.component.html',

package/tests/assets/sdk-a/components/create/override-sdk/widget/todo/todo.component.html

@@ -1,10 +1,9 @@
 <div class="psdk-todo">
-  <div class="psdk-todo-header">
-    <div *ngIf="showTodoList$" class="psdk-avatar">{{ this.currentUserInitials$ }}</div>
+  <div *ngIf="showTodoList$" class="psdk-todo-header">
+    <div class="psdk-avatar">{{ this.currentUserInitials$ }}</div>
     <div id="worklist" class="psdk-todo-text">{{ headerText$ }}</div>
-    <div *ngIf="showTodoList$" class="psdk-assignment-count">{{ count }}</div>
+    <div class="psdk-assignment-count">{{ count }}</div>
   </div>
-  <br /><br />
   <div *ngIf="showTodoList$" class="psdk-display-divider"></div>
 
   <div class="psdk-todo-assignments">
@@ -27,7 +26,7 @@
             </div>
           </div>
         </div>
-        <div class="psdk-todo-assignment-action" *ngIf="!isConfirm || canPerform">
+        <div *ngIf="!isConfirm || canPerform" class="psdk-todo-assignment-action">
           <button mat-flat-button color="primary" (click)="clickGo(assignment)">{{ localizedVal('Go', localeCategory) }}</button>
         </div>
       </div>

package/tests/assets/sdk-a/components/create/override-sdk/widget/todo/todo.component.scss

@@ -1,5 +1,12 @@
+.psdk-todo-assignments > *:last-child {
+  .psdk-display-divider {
+    display: none;
+  }
+}
+
 .psdk-display-divider {
   border-bottom: 0.0625rem solid var(--app-neutral-light-color);
+  margin-block: 0.5rem;
 }
 
 .psdk-todo {
@@ -12,6 +19,7 @@
 
 .psdk-todo-header {
   display: inline-flex;
+  margin-bottom: 1rem;
 }
 
 .psdk-todo-text {
@@ -58,6 +66,7 @@
   display: inline-flex;
   width: 100%;
   padding: 0.625rem 0rem;
+  align-items: center;
 }
 
 .psdk-todo-assignment-data {

package/tests/assets/sdk-a/components/create/override-sdk/widget/todo/todo.component.ts

@@ -91,7 +91,6 @@ export class TodoComponent implements OnInit, OnDestroy {
   localeCategory = 'Todo';
   showlessLocalizedValue = this.localizedVal('show_less', 'CosmosFields');
   showMoreLocalizedValue = this.localizedVal('show_more', 'CosmosFields');
-  canPerform: boolean;
   count: number;
 
   constructor(
@@ -119,6 +118,10 @@ export class TodoComponent implements OnInit, OnDestroy {
     PCore.getPubSubUtils().unsubscribe(CREATE_STAGE_DELETED, CREATE_STAGE_DELETED);
   }
 
+  get canPerform() {
+    return this.assignmentsSource$?.[0]?.canPerform === 'true' || this.assignmentsSource$?.[0]?.canPerform === true;
+  }
+
   updateList() {
     const {
       WORK_BASKET: {
@@ -156,8 +159,6 @@ export class TodoComponent implements OnInit, OnDestroy {
       }
     }
 
-    this.canPerform = this.arAssignments$?.[0]?.canPerform === 'true' || this.arAssignments$?.[0]?.canPerform === true;
-
     this.currentUser$ = PCore.getEnvironmentInfo().getOperatorName();
     this.currentUserInitials$ = this.utils.getInitials(this.currentUser$ ?? '');
   }

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-boolean/pega-dxil-my-boolean.component.html

@@ -18,6 +18,8 @@
           <mat-checkbox
             [labelPosition]="'after'"
             [checked]="item.selected"
+            [disabled]="bDisabled$ || bReadonly$"
+            [required]="bRequired$"
             [attr.data-test-id]="testId + ':' + item.value"
             (change)="handleChangeMultiMode($event, item)"
             (blur)="fieldOnBlur($event)"
@@ -29,6 +31,8 @@
         <mat-checkbox
           [labelPosition]="'after'"
           [checked]="isChecked$"
+          [disabled]="bDisabled$ || bReadonly$"
+          [required]="bRequired$"
           [attr.data-test-id]="testId"
           [formControl]="fieldControl"
           (change)="fieldOnChange($event)"

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-boolean/pega-dxil-my-boolean.component.ts

@@ -225,7 +225,6 @@ export class PegaDxilMyBooleanComponent implements OnInit, OnDestroy {
 
   fieldOnChange(event: any) {
     event.value = event.checked;
-
     handleEvent(this.actionsApi, 'changeNblur', this.propName, event.checked);
     this.pConn$.clearErrorMessages({
       property: this.propName

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-currency/demo.stories.tsx

@@ -46,7 +46,6 @@ export const PegaDxilMyCurrency: Story = {
     helperText: configProps.helperText,
     testId: configProps.testId,
     bReadonly$: configProps.readOnly,
-    bDisabled$: configProps.disabled,
     bRequired$: configProps.required,
     displayMode$: configProps.displayMode
   }

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-currency/pega-dxil-my-currency.component.ts

@@ -130,6 +130,7 @@ export class PegaDxilMyCurrencyComponent implements OnInit, OnDestroy {
         nValue = parseFloat(nValue);
       }
       this.value$ = nValue;
+      this.fieldControl.setValue(this.value$);
     }
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
@@ -197,20 +198,25 @@ export class PegaDxilMyCurrencyComponent implements OnInit, OnDestroy {
   }
 
   fieldOnBlur(event: any) {
-    const actionsApi = this.pConn$?.getActionsApi();
-    const propName = this.pConn$?.getStateProps().value;
-    let value = event?.target?.value;
-    value = value?.substring(1);
-    // 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, '.');
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = event.target.value.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      const actionsApi = this.pConn$?.getActionsApi();
+      const propName = this.pConn$?.getStateProps().value;
+      let value = event?.target?.value;
+      value = value?.substring(1);
+      // 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);
     }
-    handleEvent(actionsApi, 'changeNblur', propName, value);
   }
 
   getErrorMessage() {

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-date/demo.stories.tsx

@@ -22,11 +22,11 @@ const meta: Meta<PegaDxilMyDateComponent> = {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {
-              /* nothing */
+            updateFieldValue: (propName, value) => {
+              configProps.value = value;
             },
-            triggerFieldChange: () => {
-              /* nothing */
+            triggerFieldChange: (propName, value) => {
+              configProps.value = value;
             }
           };
         },

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-date/pega-dxil-my-date.component.html

@@ -15,10 +15,11 @@
           type="text"
           [value]="value$"
           [required]="bRequired$"
+          [disabled]="bDisabled$"
           [formControl]="fieldControl"
           (dateChange)="fieldOnDateChange($event)"
         />
-        <mat-datepicker-toggle matSuffix [for]="pegadate"></mat-datepicker-toggle>
+        <mat-datepicker-toggle matSuffix [for]="pegadate" [disabled]="bDisabled$"></mat-datepicker-toggle>
         <mat-datepicker #pegadate [startAt]="value$"></mat-datepicker>
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-date-time/demo.stories.tsx

@@ -22,11 +22,11 @@ const meta: Meta<PegaDxilMyDateTimeComponent> = {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {
-              /* nothing */
+            updateFieldValue: (propName, value) => {
+              configProps.value = value;
             },
-            triggerFieldChange: () => {
-              /* nothing */
+            triggerFieldChange: (propName, value) => {
+              configProps.value = value;
             }
           };
         },

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-date-time/pega-dxil-my-date-time.component.html

@@ -13,11 +13,11 @@
           [placeholder]="placeholder"
           [formControl]="fieldControl"
           (dateTimeChange)="fieldOnDateChange($event)"
-          [value]="value$"
           [required]="bRequired$"
+          [readonly]="bDisabled$"
         />
         <mat-datepicker-toggle matSuffix [owlDateTimeTrigger]="dtPicker"></mat-datepicker-toggle>
-        <owl-date-time #dtPicker></owl-date-time>
+        <owl-date-time #dtPicker [disabled]="bDisabled$"></owl-date-time>
         <mat-error *ngIf="fieldControl?.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-date-time/pega-dxil-my-date-time.component.ts

@@ -6,6 +6,7 @@ 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 { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
@@ -13,6 +14,7 @@ import { dateFormatInfoDefault, getDateFormatInfo } from '@pega/angular-sdk-comp
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
 import { format } from '@pega/angular-sdk-components';
+import { DateFormatters } from '@pega/angular-sdk-components';
 
 interface PegaDxilMyDateTimeProps extends PConnFieldProps {
   // If any, enter additional props that only exist on DateTime here
@@ -68,6 +70,7 @@ export class PegaDxilMyDateTimeComponent implements OnInit, OnDestroy {
   actionsApi: Object;
   propName: string;
   formattedValue$: any;
+  timezone = PCore.getEnvironmentInfo()?.getTimeZone();
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -88,7 +91,12 @@ export class PegaDxilMyDateTimeComponent implements OnInit, OnDestroy {
     if (this.formGroup$) {
       // add control to formGroup
       this.formGroup$.addControl(this.controlName$, this.fieldControl);
-      this.fieldControl.setValue(this.value$);
+      let dateTimeValue = this.value$ ?? '';
+
+      if (this.value$) {
+        dateTimeValue = dayjs(DateFormatters?.convertToTimezone(this.value$, { timezone: this.timezone }))?.toISOString();
+      }
+      this.fieldControl.setValue(dateTimeValue);
       this.bHasForm$ = true;
     } else {
       this.bReadonly$ = true;
@@ -132,7 +140,11 @@ export class PegaDxilMyDateTimeComponent implements OnInit, OnDestroy {
     this.testId = this.configProps$.testId;
     this.helperText = this.configProps$.helperText;
     this.value$ = this.configProps$?.value;
-    this.fieldControl.setValue(this.value$);
+    let dateTimeValue = this.configProps$?.value ?? '';
+    if (this.value$) {
+      dateTimeValue = dayjs(DateFormatters?.convertToTimezone(this.value$, { timezone: this.timezone }))?.toISOString();
+    }
+    this.fieldControl.setValue(dateTimeValue);
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {
       if (this.configProps$.required != null) {
@@ -186,7 +198,9 @@ export class PegaDxilMyDateTimeComponent 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 = dayjs(event.value?.toISOString());
+      const timeZoneDateTime = (dayjs as any).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);
   }

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-decimal/demo.stories.tsx

@@ -49,7 +49,6 @@ export const PegaDxilMyDecimal: Story = {
     helperText: configProps.helperText,
     testId: configProps.testId,
     bReadonly$: configProps.readOnly,
-    bDisabled$: configProps.disabled,
     bRequired$: configProps.required,
     displayMode$: configProps.displayMode
   }

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-decimal/pega-dxil-my-decimal.component.html

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

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-decimal/pega-dxil-my-decimal.component.ts

@@ -4,6 +4,7 @@ import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angul
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { NgxCurrencyDirective, NgxCurrencyInputMode } from 'ngx-currency';
+import { interval } from 'rxjs';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
@@ -65,6 +66,7 @@ export class PegaDxilMyDecimalComponent implements OnInit, OnDestroy {
   formatter;
   formattedValue: any;
   inputMode: any;
+  suffix = '';
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -136,6 +138,7 @@ export class PegaDxilMyDecimalComponent 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,27 +188,47 @@ export class PegaDxilMyDecimalComponent 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;
+
+    // trigger display of error message with field control
+    if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
+      const timer = interval(100).subscribe(() => {
+        this.fieldControl.setErrors({ message: true });
+        this.fieldControl.markAsTouched();
+
+        timer.unsubscribe();
+      });
+    }
   }
 
   fieldOnBlur(event: any) {
-    const actionsApi = this.pConn$?.getActionsApi();
-    const propName = this.pConn$?.getStateProps().value;
-    let value = event?.target?.value;
-    // 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);
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = event.target.value.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      const actionsApi = this.pConn$?.getActionsApi();
+      const propName = this.pConn$?.getStateProps().value;
+      let value = event?.target?.value;
+      // 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);
+    }
   }
 
   getErrorMessage() {

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-email/demo.stories.tsx

@@ -22,11 +22,11 @@ const meta: Meta<PegaDxilMyEmailComponent> = {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {
-              /* nothing */
+            updateFieldValue: (propName, value) => {
+              configProps.value = value;
             },
-            triggerFieldChange: () => {
-              /* nothing */
+            triggerFieldChange: (propName, value) => {
+              configProps.value = value;
             }
           };
         },
@@ -47,7 +47,6 @@ export const PegaDxilMyEmail: Story = {
     testId: configProps.testId,
     placeholder: configProps.placeholder,
     bReadonly$: configProps.readOnly,
-    bDisabled$: configProps.disabled,
     bRequired$: configProps.required,
     displayMode$: configProps.displayMode
   }