@pega/dx-component-builder-sdk 0.242.17 → 0.242.19

package/package.json

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

package/src/tasks/create/templates/Constellation/template/PAGE/demo.stories.tsx.mustache

@@ -73,6 +73,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
               />
             );
           }
+          return <></>;
         },
         ignoreSuggestion: () => {/* nothing */},
         acceptSuggestion: () => {/* nothing */},

package/src/tasks/create/templates/SDK-Angular/field/Boolean/boolean.component.ts.mustache

@@ -225,7 +225,6 @@ export class {{COMPONENT_CLASS_NAME}}Component 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/src/tasks/create/templates/SDK-Angular/field/DateTime/date-time.component.html.mustache

@@ -15,7 +15,6 @@
           [placeholder]="placeholder"
           [formControl]="fieldControl"
           (dateTimeChange)="fieldOnDateChange($event)"
-          [value]="value$"
           [required]="bRequired$"
         />
         <mat-datepicker-toggle matSuffix [owlDateTimeTrigger]="dtPicker"></mat-datepicker-toggle>

package/src/tasks/create/templates/SDK-Angular/field/DateTime/date-time.component.ts.mustache

@@ -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 {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on DateTime here
@@ -68,6 +70,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   actionsApi: Object;
   propName: string;
   formattedValue$: any;
+  timezone = PCore.getEnvironmentInfo()?.getTimeZone();
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -88,7 +91,12 @@ export class {{COMPONENT_CLASS_NAME}}Component 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 {{COMPONENT_CLASS_NAME}}Component 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 {{COMPONENT_CLASS_NAME}}Component 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/src/tasks/create/templates/SDK-Angular/field/Decimal/decimal.component.html.mustache

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

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

@@ -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 {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   formatter;
   formattedValue: any;
   inputMode: any;
+  suffix = '';
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -136,6 +138,7 @@ export class {{COMPONENT_CLASS_NAME}}Component 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 {{COMPONENT_CLASS_NAME}}Component 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/src/tasks/create/templates/SDK-Angular/field/Decimal-Currency/decimal-currency.component.ts.mustache

@@ -130,6 +130,7 @@ export class {{COMPONENT_CLASS_NAME}}Component 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 {{COMPONENT_CLASS_NAME}}Component 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/src/tasks/create/templates/SDK-Angular/field/Decimal-Percentage/decimal-percentage.component.html.mustache

@@ -28,7 +28,7 @@
           [required]="bRequired$"
           [formControl]="fieldControl"
           [attr.data-test-id]="testId"
-          (change)="fieldOnChange()"
+          (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
           [readonly]="bReadonly$"
         />

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

@@ -179,27 +179,37 @@ export class {{COMPONENT_CLASS_NAME}}Component 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) {
-    let value = event?.target?.value;
-    value = 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, '.');
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = event.target.value.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      let value = event?.target?.value;
+      value = 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);
     }
-    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
   }
 
   getErrorMessage() {

package/src/tasks/create/templates/SDK-Angular/field/Integer/integer.component.html.mustache

@@ -17,7 +17,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/src/tasks/create/templates/SDK-Angular/field/Integer/integer.component.ts.mustache

@@ -161,15 +161,25 @@ export class {{COMPONENT_CLASS_NAME}}Component 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/src/tasks/create/templates/SDK-Angular/field/Picklist/picklist.component.ts.mustache

@@ -134,6 +134,18 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     }
   }
 
+  set options(options: IOption[]) {
+    this.options$ = options;
+    if (this.displayMode$) {
+      this.value$ = this.options$?.find(option => option.key === this.value$)?.value || this.value$;
+      this.localizedValue = this.pConn$.getLocalizedValue(
+        this.value$ === 'Select...' ? '' : this.value$,
+        this.localePath,
+        this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName)
+      );
+    }
+  }
+
   ngOnDestroy(): void {
     if (this.formGroup$) {
       this.formGroup$.removeControl(this.controlName$);
@@ -215,7 +227,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     if (this.theDatasource) {
       const optionsList = [...this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject())];
       optionsList?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
-      this.options$ = optionsList;
+      this.options = optionsList;
     }
 
     this.actionsApi = this.pConn$.getActionsApi();
@@ -239,6 +251,9 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
       this.localePath,
       this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName)
     );
+
+    this.localizedValue = this.options$?.find(opt => opt.key === this.value$)?.value || this.localizedValue;
+
     // trigger display of error message with field control
     if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
       const timer = interval(100).subscribe(() => {
@@ -278,7 +293,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     }
 
     columns = preProcessColumns(columns) || [];
-    if (!this.displayMode$ && listType !== 'associated' && typeof datasource === 'string') {
+    if (listType !== 'associated' && typeof datasource === 'string') {
       this.getData(datasource, parameters, columns, context, listType);
     }
   }
@@ -309,7 +324,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
             optionsData.push(obj);
           });
           optionsData?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
-          this.options$ = optionsData;
+          this.options = optionsData;
         });
       });
   }

package/src/tasks/create/templates/SDK-Angular/field/Text-Email/text-email.component.ts.mustache

@@ -159,16 +159,26 @@ export class {{COMPONENT_CLASS_NAME}}Component 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/src/tasks/create/templates/SDK-Angular/field/Text-Input/text.component.html.mustache

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

package/src/tasks/create/templates/SDK-Angular/field/Text-Input/text.component.ts.mustache

@@ -161,15 +161,25 @@ export class {{COMPONENT_CLASS_NAME}}Component 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/src/tasks/create/templates/SDK-Angular/field/Text-Paragraph/text-paragraph.component.html.mustache

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

package/src/tasks/create/templates/SDK-Angular/field/Text-Paragraph/text-paragraph.component.ts.mustache

@@ -159,15 +159,25 @@ export class {{COMPONENT_CLASS_NAME}}Component 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/src/tasks/create/templates/SDK-Angular/field/Text-Phone/text-phone.component.ts.mustache

@@ -38,18 +38,11 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   displayMode$?: string = '';
   controlName$: string;
   bHasForm$ = true;
-  componentReference = '';
   testId: string;
-  separateDialCode = false;
-  afterBlur: boolean;
   helperText: string;
 
   fieldControl = new FormControl('', null);
 
-  phoneForm = new FormGroup({
-    phone: new FormControl<string | null>(null)
-  });
-
   actionsApi: Object;
   propName: string;
 
@@ -117,6 +110,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     this.testId = this.configProps$.testId;
     if (this.configProps$.value != undefined) {
       this.value$ = this.configProps$.value;
+      this.fieldControl.setValue(this.value$);
     }
     this.helperText = this.configProps$.helperText;
 
@@ -150,10 +144,6 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
       this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
     }
 
-    if (this.bReadonly$) {
-      this.phoneForm.setValue({ phone: this.value$ });
-    }
-
     // trigger display of error message with field control
     if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
       const timer = interval(100).subscribe(() => {
@@ -170,9 +160,12 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   }
 
   fieldOnChange() {
-    if (this.formGroup$.controls[this.controlName$].value) {
+    const oldVal = this.value$ ?? '';
+    const newVal = this.formGroup$.controls[this.controlName$].value;
+    const isValueChanged = newVal?.toString() !== oldVal.toString();
+
+    if (isValueChanged && newVal) {
       const value = this.formGroup$.controls[this.controlName$].value;
-      this.afterBlur = true;
       handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
     }
   }

package/src/tasks/create/templates/SDK-Angular/field/Text-URL/text-url.component.html.mustache

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

package/src/tasks/create/templates/SDK-Angular/field/Text-URL/text-url.component.ts.mustache

@@ -159,15 +159,25 @@ export class {{COMPONENT_CLASS_NAME}}Component 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/src/tasks/create/templates/SDK-Angular/field/TimeOfDay/time-of-day.component.html.mustache

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