@pega/dx-component-builder-sdk 0.25.5 → 0.25.7

package/tests/assets/sdk-a/components/create/custom-sdk/field/pega-dxil-my-test-text/pega-dxil-my-test-text.component.ts

@@ -38,6 +38,7 @@ export class PegaDxilMyTestTextComponent implements OnInit, OnDestroy {
   bHideLabel$ = false;
   testId = '';
   helperText: string;
+  displayMode$?: string = '';
 
   controlName$: string;
   bHasForm$ = true;
@@ -100,15 +101,18 @@ export class PegaDxilMyTestTextComponent implements OnInit, OnDestroy {
 
   // updateSelf
   updateSelf(): void {
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
     // moved this from ngOnInit() and call this from there instead...
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as PegaDxilMyTestTextProps;
 
-    this.value$ = this.configProps$.value || '';
+    if (this.configProps$.value != undefined) {
+      this.value$ = this.configProps$.value;
+    }
     this.testId = this.configProps$.testId;
     this.label$ = this.configProps$.label;
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
+    this.displayMode$ = this.configProps$.displayMode;
 
     if (this.configProps$.visibility != null) {
       this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/alert-banner/alert-banner.component.ts

@@ -22,6 +22,6 @@ export class AlertBannerComponent {
   onAlertClose(config) {
     const { PAGE, type, target } = config;
     const { clearMessages } = PCore.getMessageManager();
-    clearMessages({ category: PAGE, type, context: target } as any);
+    clearMessages({ category: PAGE, type, context: target });
   }
 }

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/case-create-stage/case-create-stage.component.ts

@@ -53,6 +53,6 @@ export class CaseCreateStageComponent implements OnInit, OnDestroy {
   }
 
   updateSelf() {
-    this.arChildren$ = this.pConn$.getChildren() as any[];
+    this.arChildren$ = this.pConn$.getChildren();
   }
 }

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/material-case-summary/material-case-summary.component.scss

@@ -49,7 +49,7 @@
 }
 
 .psdk-case-summary-fields {
-  padding: calc(2 * 0.5rem);
+  // padding: calc(2 * 0.5rem);
   display: grid;
   grid-row-gap: calc(2 * 0.5rem);
 }
@@ -90,6 +90,7 @@
   grid-template-columns: 1fr;
   grid-column-gap: calc(2 * 0.5rem);
   grid-row-gap: calc(1 * 0.5rem);
+  margin: 0;
 }
 
 .psdk-csf-secondary-field {

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/material-case-summary/material-case-summary.component.ts

@@ -27,7 +27,6 @@ export class MaterialCaseSummaryComponent implements OnInit, OnChanges {
     this.updateLabelAndDate(this.secondaryFields$);
   }
 
-  // eslint-disable-next-line sonarjs/no-identical-functions
   ngOnChanges() {
     this.updatePrimaryWithStatus();
     this.updateLabelAndDate(this.primaryFieldsWithStatus$);

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/material-details-fields/material-details-fields.component.html

@@ -10,7 +10,7 @@
     </ng-template>
 
     <ng-template #showDetails>
-      <div class="psdk-grid-filter" *ngIf="field.config.label">
+      <div class="psdk-grid-filter" *ngIf="field.config.label && getVisibility(field.config)">
         <div class="psdk-details-fields-label">
           {{ field.config.label }}
         </div>
@@ -21,7 +21,7 @@
           <a *ngSwitchCase="'email'" href="mailto: {{ field.config.value }}">{{ _getValue(field.config.value) }}</a>
           <span *ngSwitchCase="'date'" class="psdk-details-text-style">{{ _formatDate(field.config.value, field.type) }}</span>
           <span *ngSwitchCase="'caseoperator'"></span>
-          <span *ngSwitchDefault>{{ _getValue(field.config.value) }}</span>
+          <span *ngSwitchDefault>{{ _getValue(field.config.value, field) }}</span>
         </div>
       </div>
     </ng-template>

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/material-details-fields/material-details-fields.component.ts

@@ -16,7 +16,10 @@ export class MaterialDetailsFieldsComponent {
   @Input() arFields$: any[];
   @Input() arHighlightedFields: any[];
 
-  _getValue(configValue) {
+  _getValue(configValue, field: any = {}) {
+    if (field?.type === 'userreference') {
+      return configValue.userName;
+    }
     if (configValue && configValue != '') {
       return configValue;
     }
@@ -26,4 +29,10 @@ export class MaterialDetailsFieldsComponent {
   _formatDate(dateValue: string, dateFormat: string): string {
     return this.utils.generateDate(dateValue, dateFormat);
   }
+
+  getVisibility(config): boolean {
+    const { visibility = true } = config;
+
+    return this.utils.getBooleanValue(visibility);
+  }
 }

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/operator/operator.component.html

@@ -1,4 +1,4 @@
-<div class="psdk-operator psdk-double">
+<div class="psdk-operator psdk-double" [ngClass]="{ 'flex-row': displayLabel }">
   <div class="psdk-label">
     {{ label$ }}
   </div>

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/operator/operator.component.scss

@@ -1,9 +1,18 @@
 .psdk-operator {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   font-size: 0.8rem;
   color: var(--app-neutral-color);
+  padding-left: 0.625rem;
+  margin: 16px 0 8px 0;
+}
+
+.psdk-operator.flex-row {
+  flex-direction: row;
   align-items: center;
+  text-align: center;
+  padding-left: 0;
+  margin: 0;
 }
 
 .psdk-operator-popover {
@@ -35,7 +44,6 @@
 
 .psdk-double {
   column-gap: 1rem;
-  text-align: center;
 }
 
 .psdk-top-pad {

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/operator/operator.component.ts

@@ -13,10 +13,11 @@ import { Utils } from '@pega/angular-sdk-components';
 export class OperatorComponent implements OnInit, OnChanges, OnDestroy {
   @Input() pConn$: typeof PConnect;
   @Input() displayLabel;
+  @Input() name$?: string;
+
   fields$: any[] = [];
   bShowPopover$: boolean;
   date$: string;
-  name$: string;
   label$: string;
   id$: string;
   constructor(
@@ -40,17 +41,20 @@ export class OperatorComponent implements OnInit, OnChanges, OnDestroy {
 
   ngOnChanges(changes: SimpleChanges): void {
     const { pConn$ } = changes;
-    if (pConn$.previousValue !== pConn$.currentValue) {
+    if (pConn$ && pConn$.previousValue !== pConn$.currentValue) {
       this.updateSelf();
     }
   }
 
+  // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
   ngOnDestroy(): void {
-    this.renderer.destroy();
+    // Ref: https://medium.com/@kamil.galek/mythical-angular-component-styles-cleanup-in-angular-17-f799a08b2abc
+    // Commenting the below line as it is causing the Operator component's styles not getting applied.
+    // this.renderer.destroy();
   }
 
   updateSelf(): void {
-    const configProps$ = this.pConn$.getConfigProps() as any;
+    const configProps$ = this.pConn$.getConfigProps();
     this.displayLabel = this.displayLabel?.toLowerCase();
     const label = configProps$?.label?.toLowerCase();
     if (label === 'create operator' || this.displayLabel === 'create operator') {
@@ -66,7 +70,7 @@ export class OperatorComponent implements OnInit, OnChanges, OnDestroy {
       this.id$ = configProps$.resolveOperator.userId;
       this.label$ = configProps$.resolveLabel;
     } else {
-      this.name$ = configProps$?.value.userName;
+      this.name$ = this.name$ || configProps$?.value.userName;
       this.id$ = configProps$?.value.userId;
       this.label$ = configProps$.label;
     }

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/pulse/pulse.component.ts

@@ -17,8 +17,8 @@ export class PulseComponent implements OnInit {
   @Input() pConn$: typeof PConnect;
 
   configProps$: PulseProps;
-  currentUser$: string;
-  currentUserInitials$ = '--';
+  currentUser$: string | undefined;
+  currentUserInitials$: string | undefined = '--';
 
   ngOnInit() {
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
@@ -26,13 +26,13 @@ export class PulseComponent implements OnInit {
     this.currentUser$ = PCore.getEnvironmentInfo().getOperatorName();
 
     if (this.currentUser$ != '') {
-      this.currentUserInitials$ = this.currentUser$.charAt(0);
+      this.currentUserInitials$ = this.currentUser$?.charAt(0);
 
-      if (this.currentUser$.lastIndexOf(' ') > 0) {
-        const lastName = this.currentUser$.substring(this.currentUser$.lastIndexOf(' ') + 1);
+      if (this.currentUser$ && this.currentUser$.lastIndexOf(' ') > 0) {
+        const lastName = this.currentUser$?.substring(this.currentUser$.lastIndexOf(' ') + 1);
         this.currentUserInitials$ += lastName.charAt(0);
-      } else if (this.currentUser$.lastIndexOf('.') > 0) {
-        const lastName = this.currentUser$.substring(this.currentUser$.lastIndexOf('.') + 1);
+      } else if (this.currentUser$ && this.currentUser$.lastIndexOf('.') > 0) {
+        const lastName = this.currentUser$?.substring(this.currentUser$.lastIndexOf('.') + 1);
         this.currentUserInitials$ += lastName.charAt(0);
       }
     }

package/tests/assets/sdk-a/components/create/override-sdk/field/auto-complete/auto-complete.component.html

@@ -11,7 +11,6 @@
           [placeholder]="placeholder"
           [formControl]="fieldControl"
           [attr.data-test-id]="testId"
-          [value]="value$"
           [required]="bRequired$"
           [matAutocomplete]="auto"
           (input)="fieldOnChange($event)"

package/tests/assets/sdk-a/components/create/override-sdk/field/auto-complete/auto-complete.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit, Input, ChangeDetectorRef, forwardRef, OnDestroy } fr
 import { CommonModule } from '@angular/common';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatOptionModule } from '@angular/material/core';
-import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { interval, Observable } from 'rxjs';
@@ -14,6 +14,10 @@ import { DatapageService } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
+interface IOption {
+  key: string;
+  value: string;
+}
 interface AutoCompleteProps extends PConnFieldProps {
   // If any, enter additional props that only exist on AutoComplete here
   deferDatasource?: boolean;
@@ -71,6 +75,8 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
   hideLabel: boolean;
   filteredOptions: Observable<any[]>;
   filterValue = '';
+  actionsApi: Object;
+  propName: string;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -102,10 +108,17 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
 
     this.filteredOptions = this.fieldControl.valueChanges.pipe(
       startWith(''),
-      map(value => this._filter(value || ''))
+      map(value => this._filter((value as string) || ''))
     );
   }
 
+  setOptions(options: IOption[]) {
+    this.options$ = options;
+    const index = this.options$?.findIndex(element => element.key === this.configProps$.value);
+    this.value$ = index > -1 ? this.options$[index].value : this.configProps$.value;
+    this.fieldControl.setValue(this.value$);
+  }
+
   ngOnDestroy(): void {
     if (this.formGroup$) {
       this.formGroup$.removeControl(this.controlName$);
@@ -147,10 +160,14 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
     if (this.configProps$.value != undefined) {
       const index = this.options$?.findIndex(element => element.key === this.configProps$.value);
       this.value$ = index > -1 ? this.options$[index].value : this.configProps$.value;
+      this.fieldControl.setValue(this.value$);
     }
 
     this.setPropertyValuesFromProps();
 
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = this.pConn$.getStateProps().value;
+
     const context = this.pConn$.getContextName();
     const { columns, datasource } = this.generateColumnsAndDataSource();
 
@@ -184,9 +201,10 @@ export class AutoCompleteComponent 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;
     if (this.listType === 'associated') {
-      this.options$ = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject('')); // 1st arg empty string until typedef marked correctly
+      const optionsList = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject('')); // 1st arg empty string until typedef marked correctly
+      this.setOptions(optionsList);
     }
 
     if (!this.displayMode$ && this.listType !== 'associated') {
@@ -220,7 +238,7 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
     let datasource = this.configProps$.datasource;
     let columns = this.configProps$.columns;
     // const { deferDatasource, datasourceMetadata } = this.configProps$;
-    const { deferDatasource, datasourceMetadata }: any = this.pConn$.getConfigProps();
+    const { deferDatasource, datasourceMetadata } = this.pConn$.getConfigProps();
     // convert associated to datapage listtype and transform props
     // Process deferDatasource when datapage name is present. WHhen tableType is promptList / localList
     if (deferDatasource && datasourceMetadata?.datasource?.name) {
@@ -258,7 +276,7 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
       };
       optionsData.push(obj);
     });
-    this.options$ = optionsData;
+    this.setOptions(optionsData);
   }
 
   flattenParameters(params = {}) {
@@ -299,13 +317,14 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
     // this works - this.pConn$.setValue( this.componentReference, this.fieldControl.value);
     // PConnect wants to use changeHandler for onChange
     // this.angularPConnect.changeHandler( this, event);
-    this.filterValue = (event.target as HTMLInputElement).value;
-
-    this.angularPConnectData.actions?.onChange(this, event);
+    const value = (event.target as HTMLInputElement).value;
+    this.filterValue = value;
+    handleEvent(this.actionsApi, 'change', this.propName, value);
   }
 
-  optionChanged(event: MatAutocompleteSelectedEvent) {
-    this.angularPConnectData.actions?.onChange(this, event);
+  optionChanged(event: any) {
+    const value = event?.option?.value;
+    handleEvent(this.actionsApi, 'change', this.propName, value);
   }
 
   fieldOnBlur(event: Event) {
@@ -315,11 +334,8 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
       const index = this.options$?.findIndex(element => element.value === el.value);
       key = index > -1 ? (key = this.options$[index].key) : el.value;
     }
-
     const value = key;
-    const actionsApi = this.pConn$?.getActionsApi();
-    const propName = (this.pConn$?.getStateProps() as any).value;
-    handleEvent(actionsApi, 'changeNblur', propName, value);
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
     if (this.configProps$?.onRecordChange) {
       el.value = value;
       this.configProps$.onRecordChange(event);

package/tests/assets/sdk-a/components/create/override-sdk/field/check-box/check-box.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/create/override-sdk/field/check-box/check-box.component.ts

@@ -69,8 +69,8 @@ export class CheckBoxComponent implements OnInit, OnDestroy {
   selectedvalues: any;
   referenceList: string;
   listOfCheckboxes: any[] = [];
-  actionsApi: any;
-  propName: any;
+  actionsApi: Object;
+  propName: string;
 
   fieldControl = new FormControl('', null);
 
@@ -146,7 +146,7 @@ export class CheckBoxComponent implements OnInit, OnDestroy {
     }
 
     this.actionsApi = this.pConn$.getActionsApi();
-    this.propName = (this.pConn$.getStateProps() as any).value;
+    this.propName = this.pConn$.getStateProps().value;
 
     // multi case
     this.selectionMode = this.configProps$.selectionMode;
@@ -159,7 +159,7 @@ export class CheckBoxComponent implements OnInit, OnDestroy {
       this.datasource = this.configProps$.datasource;
       this.selectionKey = this.configProps$.selectionKey;
       const listSourceItems = this.datasource?.source ?? [];
-      const dataField: any = this.selectionKey?.split?.('.')[1];
+      const dataField = this.selectionKey?.split?.('.')[1] ?? '';
       const listToDisplay: any[] = [];
       listSourceItems.forEach(element => {
         element.selected = this.selectedvalues?.some?.(data => data[dataField] === element.key);
@@ -173,8 +173,8 @@ export class CheckBoxComponent implements OnInit, OnDestroy {
 
       this.caption$ = this.configProps$.caption;
       this.helperText = this.configProps$.helperText;
-      this.trueLabel$ = this.configProps$.trueLabel;
-      this.falseLabel$ = this.configProps$.falseLabel;
+      this.trueLabel$ = this.configProps$.trueLabel || 'Yes';
+      this.falseLabel$ = this.configProps$.falseLabel || 'No';
 
       // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
       setTimeout(() => {
@@ -203,7 +203,7 @@ export class CheckBoxComponent implements OnInit, OnDestroy {
         this.fieldControl.enable();
       }
 
-      this.componentReference = (this.pConn$.getStateProps() as any).value;
+      this.componentReference = this.pConn$.getStateProps().value;
 
       // eslint-disable-next-line sonarjs/no-redundant-boolean
       if (this.value$ === 'true' || this.value$ == true) {
@@ -225,16 +225,17 @@ export class CheckBoxComponent implements OnInit, OnDestroy {
 
   fieldOnChange(event: any) {
     event.value = event.checked;
-
     handleEvent(this.actionsApi, 'changeNblur', this.propName, event.checked);
+    this.pConn$.clearErrorMessages({
+      property: this.propName
+    });
   }
 
   fieldOnBlur(event: any) {
     if (this.selectionMode === 'multi') {
       this.pConn$.getValidationApi().validate(this.selectedvalues, this.selectionList);
     } else {
-      event.value = event.checked;
-      this.angularPConnectData.actions?.onBlur(this, event);
+      this.pConn$.getValidationApi().validate(event.target.checked);
     }
   }
 

package/tests/assets/sdk-a/components/create/override-sdk/field/currency/currency.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$: formattedValue, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="bHasForm$; else noEdit">
@@ -13,9 +13,9 @@
             matInput
             currencyMask
             [options]="{
-              prefix: currSym,
-              thousands: currSep,
-              decimal: currDec,
+              prefix: currencySymbol,
+              thousands: thousandSeparator,
+              decimal: decimalSeparator,
               align: 'left',
               nullable: true,
               precision: decimalPrecision,

package/tests/assets/sdk-a/components/create/override-sdk/field/currency/currency.component.ts

@@ -9,13 +9,15 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
-import { getCurrencyCharacters } from '@pega/angular-sdk-components';
+import { getCurrencyCharacters, getCurrencyOptions } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { format } from '@pega/angular-sdk-components';
 
 interface CurrrencyProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Currency here
   currencyISOCode?: string;
   allowDecimals: boolean;
+  formatter?: string;
 }
 
 @Component({
@@ -50,11 +52,13 @@ export class CurrencyComponent implements OnInit, OnDestroy {
   currencyOptions: Object = {};
 
   fieldControl = new FormControl<number | null>(null, { updateOn: 'blur' });
-  currSym: string;
-  currSep: string;
-  currDec: string;
+  currencySymbol: string;
+  thousandSeparator: string;
+  decimalSeparator: string;
   inputMode: any;
   decimalPrecision: number | undefined;
+  formattedValue: string;
+  formatter;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -126,15 +130,26 @@ export class CurrencyComponent implements OnInit, OnDestroy {
         nValue = parseFloat(nValue);
       }
       this.value$ = nValue;
+      this.fieldControl.setValue(this.value$);
     }
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
-    const currencyISOCode: any = this.configProps$?.currencyISOCode;
+    const currencyISOCode = this.configProps$?.currencyISOCode ?? '';
 
     const theSymbols = getCurrencyCharacters(currencyISOCode);
-    this.currSym = theSymbols.theCurrencySymbol;
-    this.currSep = theSymbols.theDigitGroupSeparator;
-    this.currDec = theSymbols.theDecimalIndicator;
+    this.currencySymbol = theSymbols.theCurrencySymbol;
+    this.thousandSeparator = theSymbols.theDigitGroupSeparator;
+    this.decimalSeparator = theSymbols.theDecimalIndicator;
+    this.formatter = this.configProps$.formatter;
+
+    if (this.displayMode$ === 'DISPLAY_ONLY' || this.displayMode$ === 'STACKED_LARGE_VAL') {
+      const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
+      if (this.formatter) {
+        this.formattedValue = format(this.value$, this.formatter.toLowerCase(), theCurrencyOptions);
+      } else {
+        this.formattedValue = format(this.value$, 'currency', theCurrencyOptions);
+      }
+    }
 
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {
@@ -169,7 +184,7 @@ export class CurrencyComponent implements OnInit, OnDestroy {
 
     this.decimalPrecision = this.configProps$?.allowDecimals ? 2 : 0;
 
-    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 != '') {
@@ -183,17 +198,25 @@ export class CurrencyComponent implements OnInit, OnDestroy {
   }
 
   fieldOnBlur(event: any) {
-    const actionsApi = this.pConn$?.getActionsApi();
-    const propName = (this.pConn$?.getStateProps() as any).value;
-    let value = event?.target?.value;
-    value = value?.substring(1);
-    if (this.currSep === ',') {
-      value = value.replace(/,/g, '');
-    } else {
-      value = value?.replace(/\./g, '');
-      value = value?.replace(/,/g, '.');
+    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/create/override-sdk/field/date/date.component.html

@@ -1,9 +1,5 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper
-    *ngIf="bVisible$ !== false"
-    name="FieldValueList"
-    [props]="{ label$, value$: getFormattedValue(), displayMode$ }"
-  ></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$: formattedValue$, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
@@ -19,11 +15,11 @@
           type="text"
           [value]="value$"
           [required]="bRequired$"
+          [disabled]="bDisabled$"
           [formControl]="fieldControl"
           (dateChange)="fieldOnDateChange($event)"
-          (blur)="fieldOnBlur($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>