@pega/dx-component-builder-sdk 24.1.12 → 24.2.11

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

@@ -11,6 +11,8 @@ import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { dateFormatInfoDefault, getDateFormatInfo } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
+import { format } from '@pega/angular-sdk-components';
 
 interface PegaDxilMyDateTimeProps extends PConnFieldProps {
   // If any, enter additional props that only exist on DateTime here
@@ -61,8 +63,11 @@ export class PegaDxilMyDateTimeComponent implements OnInit, OnDestroy {
   // Start with default dateFormatInfo
   dateFormatInfo = dateFormatInfoDefault;
   // and then update, as needed, based on locale, etc.
-  theDateFormat: any = getDateFormatInfo();
+  theDateFormat = getDateFormatInfo();
   placeholder: string;
+  actionsApi: Object;
+  propName: string;
+  formattedValue$: any;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -71,7 +76,7 @@ export class PegaDxilMyDateTimeComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit(): void {
-    this.placeholder = `${this.theDateFormat.dateFormatStringLC}, hh:mm a`;
+    this.placeholder = `${this.theDateFormat.dateFormatStringLC}, hh:mm A`;
     // First thing in initialization is registering and subscribing to the AngularPConnect service
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
     this.controlName$ = this.angularPConnect.getComponentID(this);
@@ -136,6 +141,12 @@ export class PegaDxilMyDateTimeComponent implements OnInit, OnDestroy {
       this.cdRef.detectChanges();
     });
 
+    if (this.displayMode$ === 'DISPLAY_ONLY' || this.displayMode$ === 'STACKED_LARGE_VAL') {
+      this.formattedValue$ = format(this.value$, 'datetime', {
+        format: `${this.theDateFormat.dateFormatString} hh:mm A`
+      });
+    }
+
     if (this.configProps$.visibility != null) {
       this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
     }
@@ -155,7 +166,10 @@ export class PegaDxilMyDateTimeComponent implements OnInit, OnDestroy {
       this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
     }
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
+
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = this.pConn$.getStateProps().value;
 
     // trigger display of error message with field control
     if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
@@ -169,20 +183,12 @@ export class PegaDxilMyDateTimeComponent implements OnInit, OnDestroy {
   }
 
   fieldOnDateChange(event: any) {
+    // this comes from the date pop up
     if (typeof event.value === 'object') {
       // convert date to pega "date" format
       event.value = event.value?.toISOString();
     }
-    this.angularPConnectData.actions?.onChange(this, { value: event.value });
-  }
-
-  fieldOnBlur(event: any) {
-    if (typeof event.value === 'object') {
-      // convert date to pega "date" format
-      event.value = event.value?.toISOString();
-    }
-
-    this.angularPConnectData.actions?.onBlur(this, event);
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, event.value);
   }
 
   getErrorMessage() {

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

@@ -13,28 +13,29 @@ const meta: Meta<PegaDxilMyDecimalComponent> = {
     props: {
       ...args,
       pConn$: {
-      resolveConfigProps: (props) => props,
-      getConfigProps: () => {
-        return configProps;
-      },
-      getStateProps: () => {
-        return stateProps;
-      },
-      getComponentName: () => {
-        return 'Currency';
-      },
-      getActionsApi: () => {
-        return {
-          updateFieldValue: () => {
-            /* nothing */
-          },
-          triggerFieldChange: () => {
-            /* nothing */
-          }
-        };
-      }
-    } as any,
-    formGroup$: new FormBuilder().group({})
+        resolveConfigProps: props => props,
+        getConfigProps: () => {
+          return configProps;
+        },
+        getStateProps: () => {
+          return stateProps;
+        },
+        getComponentName: () => {
+          return 'Currency';
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
+          };
+        },
+        clearErrorMessages: ({}) => {}
+      } as any,
+      formGroup$: new FormBuilder().group({})
     }
   })
 };

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.spec.ts

@@ -8,9 +8,8 @@ describe('PegaDxilMyDecimalComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ PegaDxilMyDecimalComponent ]
-    })
-    .compileComponents();
+      declarations: [PegaDxilMyDecimalComponent]
+    }).compileComponents();
   }));
 
   beforeEach(() => {

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;
@@ -140,19 +140,19 @@ export class PegaDxilMyDecimalComponent implements OnInit, OnDestroy {
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
     const showGroupSeparators = this.configProps$.showGroupSeparators;
-    const currencyISOCode: any = this.configProps$?.currencyISOCode;
+    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;
 
-    if (this.formatter === 'Currency') {
+    if (this.formatter) {
       this.formattedValue = format(this.value$, this.formatter.toLowerCase(), theCurrencyOptions);
     } else {
-      this.formattedValue = format(this.value$, this.pConn$.getComponentName().toLowerCase(), theCurrencyOptions);
+      this.formattedValue = format(this.value$, 'decimal', theCurrencyOptions);
     }
 
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
@@ -183,24 +183,27 @@ 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;
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
   }
 
   fieldOnBlur(event: any) {
     const actionsApi = this.pConn$?.getActionsApi();
-    const propName = (this.pConn$?.getStateProps() as any).value;
+    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-email/demo.stories.tsx

@@ -13,15 +13,26 @@ const meta: Meta<PegaDxilMyEmailComponent> = {
     props: {
       ...args,
       pConn$: {
-      resolveConfigProps: (props) => props,
-      getConfigProps: () => {
-        return configProps;
-      },
-      getStateProps: () => {
-        return stateProps;
-      }
-    } as any,
-    formGroup$: new FormBuilder().group({})
+        resolveConfigProps: props => props,
+        getConfigProps: () => {
+          return configProps;
+        },
+        getStateProps: () => {
+          return stateProps;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
+          };
+        },
+        clearErrorMessages: ({}) => {}
+      } as any,
+      formGroup$: new FormBuilder().group({})
     }
   })
 };

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

@@ -8,9 +8,8 @@ describe('PegaDxilMyEmailComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ PegaDxilMyEmailComponent ]
-    })
-    .compileComponents();
+      declarations: [PegaDxilMyEmailComponent]
+    }).compileComponents();
   }));
 
   beforeEach(() => {

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

@@ -8,6 +8,7 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 
 interface PegaDxilMyEmailProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Email here
@@ -43,6 +44,8 @@ export class PegaDxilMyEmailComponent implements OnInit, OnDestroy {
   placeholder: string;
 
   fieldControl = new FormControl('', null);
+  actionsApi: Object;
+  propName: string;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -139,7 +142,10 @@ export class PegaDxilMyEmailComponent implements OnInit, OnDestroy {
       this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
     }
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = this.pConn$.getStateProps().value;
+
+    this.componentReference = this.pConn$.getStateProps().value;
 
     // trigger display of error message with field control
     if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
@@ -153,12 +159,16 @@ export class PegaDxilMyEmailComponent implements OnInit, OnDestroy {
   }
 
   fieldOnChange(event: any) {
-    this.angularPConnectData.actions?.onChange(this, event);
+    const value = event?.target?.value;
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+    this.pConn$.clearErrorMessages({
+      property: this.propName
+    });
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const value = event?.target?.value;
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
   }
 
   getErrorMessage() {

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

@@ -48,9 +48,9 @@ const meta: Meta<PegaDxilMyIconButtonUrlComponent> = {
             return value;
           }
         } as any,
-      formGroup$: new FormBuilder().group({})
+        formGroup$: new FormBuilder().group({})
       }
-    }
+    };
   }
 };
 

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-icon-button-url/pega-dxil-my-icon-button-url.component.spec.ts

@@ -1,4 +1,3 @@
-
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { PegaDxilMyIconButtonUrlComponent } from './pega-dxil-my-icon-button-url.component';
@@ -9,9 +8,8 @@ describe('PegaDxilMyIconButtonUrlComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ PegaDxilMyIconButtonUrlComponent ]
-    })
-    .compileComponents();
+      declarations: [PegaDxilMyIconButtonUrlComponent]
+    }).compileComponents();
   }));
 
   beforeEach(() => {

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

@@ -62,7 +62,7 @@ export class PegaDxilMyIconButtonUrlComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit(): void {
-     // First thing in initialization is registering and subscribing to the AngularPConnect service
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
     this.controlName$ = this.angularPConnect.getComponentID(this);
 
@@ -131,7 +131,6 @@ export class PegaDxilMyIconButtonUrlComponent implements OnInit, OnDestroy {
     this.displayMode$ = this.configProps$.displayMode;
 
     this.componentReference = (this.pConn$.getStateProps() as any).value;
-
   }
 
   buttonClick() {
@@ -190,6 +189,6 @@ export class PegaDxilMyIconButtonUrlComponent implements OnInit, OnDestroy {
   }
 
   getErrorMessage() {
-   return '';
+    return '';
   }
 }

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

@@ -13,15 +13,26 @@ const meta: Meta<PegaDxilMyIntegerComponent> = {
     props: {
       ...args,
       pConn$: {
-      resolveConfigProps: (props) => props,
-      getConfigProps: () => {
-        return configProps;
-      },
-      getStateProps: () => {
-        return stateProps;
-      }
-    } as any,
-    formGroup$: new FormBuilder().group({})
+        resolveConfigProps: props => props,
+        getConfigProps: () => {
+          return configProps;
+        },
+        getStateProps: () => {
+          return stateProps;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
+          };
+        },
+        clearErrorMessages: ({}) => {}
+      } as any,
+      formGroup$: new FormBuilder().group({})
     }
   })
 };

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

@@ -15,7 +15,7 @@
           [required]="bRequired$"
           [formControl]="fieldControl"
           [attr.data-test-id]="testId"
-          (change)="fieldOnChange($event)"
+          (change)="fieldOnChange()"
           (blur)="fieldOnBlur($event)"
         />
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>

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

@@ -8,9 +8,8 @@ describe('PegaDxilMyIntegerComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ PegaDxilMyIntegerComponent ]
-    })
-    .compileComponents();
+      declarations: [PegaDxilMyIntegerComponent]
+    }).compileComponents();
   }));
 
   beforeEach(() => {

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

@@ -8,6 +8,7 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 
 interface PegaDxilMyIntegerProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Integer here
@@ -43,6 +44,8 @@ export class PegaDxilMyIntegerComponent implements OnInit, OnDestroy {
   placeholder: string;
 
   fieldControl = new FormControl<number | null>(null, null);
+  actionsApi: Object;
+  propName: string;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -115,6 +118,9 @@ export class PegaDxilMyIntegerComponent implements OnInit, OnDestroy {
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
 
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = this.pConn$.getStateProps().value;
+
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {
       if (this.configProps$.required != null) {
@@ -142,7 +148,7 @@ export class PegaDxilMyIntegerComponent implements OnInit, OnDestroy {
       this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
     }
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
 
     // trigger display of error message with field control
     if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
@@ -155,13 +161,15 @@ export class PegaDxilMyIntegerComponent implements OnInit, OnDestroy {
     }
   }
 
-  fieldOnChange(event: any) {
-    this.angularPConnectData.actions?.onChange(this, event);
+  fieldOnChange() {
+    this.pConn$.clearErrorMessages({
+      property: this.propName
+    });
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const value = event?.target?.value;
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
   }
 
   getErrorMessage() {

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

@@ -13,21 +13,32 @@ const meta: Meta<PegaDxilMyParagraphComponent> = {
     props: {
       ...args,
       pConn$: {
-      resolveConfigProps: (props) => props,
-      getConfigProps: () => {
-        return configProps;
-      },
-      getStateProps: () => {
-        return stateProps;
-      },
-      getRawConfigProps: () => {
-        return rawConfigProps;
-      },
-      getFieldMetadata: () => {
-        return fieldMetadata;
-      }
-    } as any,
-    formGroup$: new FormBuilder().group({})
+        resolveConfigProps: props => props,
+        getConfigProps: () => {
+          return configProps;
+        },
+        getStateProps: () => {
+          return stateProps;
+        },
+        getRawConfigProps: () => {
+          return rawConfigProps;
+        },
+        getFieldMetadata: () => {
+          return fieldMetadata;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
+          };
+        },
+        clearErrorMessages: ({}) => {}
+      } as any,
+      formGroup$: new FormBuilder().group({})
     }
   })
 };

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

@@ -16,7 +16,8 @@
             [required]="bRequired$"
             [disabled]="bDisabled$"
             [formControl]="fieldControl"
-            (change)="fieldOnChange($event)"
+            (change)="fieldOnChange()"
+            (blur)="fieldOnBlur($event)"
           ></textarea>
           <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
         </mat-form-field>

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

@@ -8,9 +8,8 @@ describe('PegaDxilMyParagraphComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ PegaDxilMyParagraphComponent ]
-    })
-    .compileComponents();
+      declarations: [PegaDxilMyParagraphComponent]
+    }).compileComponents();
   }));
 
   beforeEach(() => {

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

@@ -8,6 +8,7 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 
 interface PegaDxilMyParagraphProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextArea here
@@ -44,6 +45,8 @@ export class PegaDxilMyParagraphComponent implements OnInit, OnDestroy {
   helperText: string;
 
   fieldControl = new FormControl('', null);
+  actionsApi: Object;
+  propName: string;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -113,6 +116,9 @@ export class PegaDxilMyParagraphComponent implements OnInit, OnDestroy {
     this.label$ = this.configProps$.label;
     this.helperText = this.configProps$.helperText;
 
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = this.pConn$.getStateProps().value;
+
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {
       if (this.configProps$.required != null) {
@@ -140,7 +146,7 @@ export class PegaDxilMyParagraphComponent implements OnInit, OnDestroy {
       this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
     }
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
 
     // trigger display of error message with field control
     if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
@@ -153,14 +159,15 @@ export class PegaDxilMyParagraphComponent implements OnInit, OnDestroy {
     }
   }
 
-  fieldOnChange(event: any) {
-    // PConnect wants to use changeHandler for onChange
-    this.angularPConnectData.actions?.onChange(this, event);
+  fieldOnChange() {
+    this.pConn$.clearErrorMessages({
+      property: this.propName
+    });
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const value = event?.target?.value;
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
   }
 
   getErrorMessage() {