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

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

@@ -4,22 +4,12 @@ import { FormBuilder } from '@angular/forms';
 import { configProps, stateProps } from './mock';
 
 import { PegaDxilMyDateComponent } from './pega-dxil-my-date.component';
-window.PCore = {
-  ...window.PCore,
-  getLocaleUtils: (): any => {
-    return {
-      getLocaleValue: value => {
-        return value;
-      }
-    };
-  }
-};
 
 const meta: Meta<PegaDxilMyDateComponent> = {
   title: 'PegaDxilMyDate',
   component: PegaDxilMyDateComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyDateComponent) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {
@@ -32,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/pega-dxil-my-date.component.spec.ts

@@ -4,7 +4,7 @@ import { PegaDxilMyDateComponent } from './pega-dxil-my-date.component';
 
 describe('PegaDxilMyDateComponent', () => {
   let component: PegaDxilMyDateComponent;
-  let fixture: ComponentFixture<DateComponent>;
+  let fixture: ComponentFixture<PegaDxilMyDateComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({

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

@@ -5,22 +5,11 @@ import { configProps, stateProps } from './mock';
 
 import { PegaDxilMyDateTimeComponent } from './pega-dxil-my-date-time.component';
 
-window.PCore = {
-  ...window.PCore,
-  getLocaleUtils: (): any => {
-    return {
-      getLocaleValue: val => {
-        return val;
-      }
-    };
-  }
-};
-
 const meta: Meta<PegaDxilMyDateTimeComponent> = {
   title: 'PegaDxilMyDateTime',
   component: PegaDxilMyDateTimeComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyDateTimeComponent) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {
@@ -33,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

@@ -9,7 +9,7 @@ const meta: Meta<PegaDxilMyDecimalComponent> = {
   title: 'PegaDxilMyDecimal',
   component: PegaDxilMyDecimalComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyDecimalComponent) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {
@@ -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.spec.ts

@@ -4,7 +4,7 @@ import { PegaDxilMyDecimalComponent } from './pega-dxil-my-decimal.component';
 
 describe('PegaDxilMyDecimalComponent', () => {
   let component: PegaDxilMyDecimalComponent;
-  let fixture: ComponentFixture<DecimalComponent>;
+  let fixture: ComponentFixture<PegaDxilMyDecimalComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({

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

@@ -9,7 +9,7 @@ const meta: Meta<PegaDxilMyEmailComponent> = {
   title: 'PegaDxilMyEmail',
   component: PegaDxilMyEmailComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyEmailComponent) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {
@@ -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
   }

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

@@ -159,16 +159,26 @@ export class PegaDxilMyEmailComponent implements OnInit, OnDestroy {
   }
 
   fieldOnChange(event: any) {
-    const value = event?.target?.value;
-    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
-    this.pConn$.clearErrorMessages({
-      property: this.propName
-    });
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = event.target.value.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      const value = event?.target?.value;
+      handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+      this.pConn$.clearErrorMessages({
+        property: this.propName
+      });
+    }
   }
 
   fieldOnBlur(event: any) {
-    const value = event?.target?.value;
-    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = event.target.value.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      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

@@ -5,29 +5,19 @@ import { configProps, stateListData, stateProps } from './mock';
 
 import { PegaDxilMyIconButtonUrlComponent } from './pega-dxil-my-icon-button-url.component';
 
+window.PCore.getDataApiUtils = (): any => {
+  return {
+    getData: () => {
+      return Promise.resolve(stateListData);
+    }
+  };
+};
+
 const meta: Meta<PegaDxilMyIconButtonUrlComponent> = {
   title: 'PegaDxilMyIconButtonUrl',
   component: PegaDxilMyIconButtonUrlComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyIconButtonUrlComponent) => {
-    window.PCore = {
-      ...window.PCore,
-      getConstants: () => {
-        return {
-          CASE_INFO: {
-            CASE_INFO_ID: 'caseInfo.ID'
-          }
-        } as any;
-      },
-      getDataApiUtils: () => {
-        return {
-          getData: () => {
-            return Promise.resolve(stateListData);
-          }
-        } as any;
-      }
-    };
-    return {
+  render: (args) => ({
       props: {
         ...args,
         pConn$: {
@@ -50,15 +40,12 @@ const meta: Meta<PegaDxilMyIconButtonUrlComponent> = {
         } as any,
         formGroup$: new FormBuilder().group({})
       }
-    };
-  }
+  })
 };
 
 export default meta;
 type Story = StoryObj<PegaDxilMyIconButtonUrlComponent>;
 
 export const PegaDxilMyIconButtonUrl: Story = {
-  args: {
-    countryCode: 'USA'
-  }
+  args: {}
 };

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

@@ -9,7 +9,7 @@ const meta: Meta<PegaDxilMyIntegerComponent> = {
   title: 'PegaDxilMyInteger',
   component: PegaDxilMyIntegerComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyIntegerComponent) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {
@@ -22,11 +22,11 @@ const meta: Meta<PegaDxilMyIntegerComponent> = {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {
-              /* nothing */
+            updateFieldValue: (propName, value) => {
+              configProps.value = value;
             },
-            triggerFieldChange: () => {
-              /* nothing */
+            triggerFieldChange: (propName, value) => {
+              configProps.value = value;
             }
           };
         },
@@ -46,7 +46,6 @@ export const PegaDxilMyInteger: 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-integer/pega-dxil-my-integer.component.html

@@ -15,7 +15,7 @@
           [required]="bRequired$"
           [formControl]="fieldControl"
           [attr.data-test-id]="testId"
-          (change)="fieldOnChange()"
+          (change)="fieldOnChange($event)"
           (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.ts

@@ -161,15 +161,25 @@ export class PegaDxilMyIntegerComponent implements OnInit, OnDestroy {
     }
   }
 
-  fieldOnChange() {
-    this.pConn$.clearErrorMessages({
-      property: this.propName
-    });
+  fieldOnChange(event: any) {
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = event.target.value.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      this.pConn$.clearErrorMessages({
+        property: this.propName
+      });
+    }
   }
 
   fieldOnBlur(event: any) {
-    const value = event?.target?.value;
-    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = event.target.value.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      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

@@ -9,7 +9,7 @@ const meta: Meta<PegaDxilMyParagraphComponent> = {
   title: 'PegaDxilMyParagraph',
   component: PegaDxilMyParagraphComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyParagraphComponent) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {
@@ -28,11 +28,11 @@ const meta: Meta<PegaDxilMyParagraphComponent> = {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {
-              /* nothing */
+            updateFieldValue: (propName, value) => {
+              configProps.value = value;
             },
-            triggerFieldChange: () => {
-              /* nothing */
+            triggerFieldChange: (propName, value) => {
+              configProps.value = value;
             }
           };
         },
@@ -52,7 +52,6 @@ export const PegaDxilMyParagraph: 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-paragraph/pega-dxil-my-paragraph.component.html

@@ -2,10 +2,11 @@
   <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
-  <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
+  <div *ngIf="bHasForm$; else noEdit">
     <div [formGroup]="formGroup$">
       <div *ngIf="bVisible$">
         <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+          <mat-label>{{ label$ }}</mat-label>
           <textarea
             matInput
             rows="5"
@@ -15,8 +16,9 @@
             [value]="value$"
             [required]="bRequired$"
             [disabled]="bDisabled$"
+            [readonly]="bReadonly$"
             [formControl]="fieldControl"
-            (change)="fieldOnChange()"
+            (change)="fieldOnChange($event)"
             (blur)="fieldOnBlur($event)"
           ></textarea>
           <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>

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

@@ -159,15 +159,25 @@ export class PegaDxilMyParagraphComponent implements OnInit, OnDestroy {
     }
   }
 
-  fieldOnChange() {
-    this.pConn$.clearErrorMessages({
-      property: this.propName
-    });
+  fieldOnChange(event: any) {
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = event.target.value.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      this.pConn$.clearErrorMessages({
+        property: this.propName
+      });
+    }
   }
 
   fieldOnBlur(event: any) {
-    const value = event?.target?.value;
-    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = event.target.value.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      const value = event?.target?.value;
+      handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+    }
   }
 
   getErrorMessage() {