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

package/src/tasks/create/templates/Constellation/template/DETAILS/Avatar.tsx.mustache

@@ -22,8 +22,8 @@ function Avatar(props: {{COMPONENT_CLASS_NAME}}AvatarProps) {
   // TODO Below if conditions can be removed once we have apis to get worklist/mywork info
   // This is non CaseView case (Dashboard, MyWork etc)
   if (!metaObj) {
-    userName = PCore.getEnvironmentInfo().getOperatorName();
-    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier();
+    userName = PCore.getEnvironmentInfo().getOperatorName() ?? "";
+    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier() ?? "";
   } else {
     userName = metaObj.name;
     userIdentifier = metaObj.ID;
@@ -46,22 +46,20 @@ function Avatar(props: {{COMPONENT_CLASS_NAME}}AvatarProps) {
     const currentState = PCore.getMessagingServiceManager().getUserPresence().getUserState(userIdentifier);
     const [userState, setUserState]: any  = useState(currentState === 'online' ? 'active' : 'inactive');
 
-    // @ts-ignore
-    const handleUserStateChange = ({ state }) => {
+    const handleUserStateChange = ({ state }: any) => {
       setUserState(state === 'online' ? 'active' : 'inactive');
     };
 
     useEffect(() => {
       const subId = PCore.getMessagingServiceManager()
         .getUserPresence()
-        // @ts-ignore
-        .subscribe(userIdentifier, handleUserStateChange);
+        .subscribe(userIdentifier, handleUserStateChange, '');
 
       return function cleanup() {
         PCore.getMessagingServiceManager().getUserPresence().unsubscribe(userIdentifier, subId);
       };
     }, [userIdentifier, handleUserStateChange]);
-    // @ts-ignore
+
     return <CosmosAvatar name={userName} imageSrc={imageBlobUrl as React.SetStateAction<any>} status={userState} />;
   }
 

package/src/tasks/create/templates/Constellation/template/DETAILS-region/Avatar.tsx.mustache

@@ -22,8 +22,8 @@ function Avatar(props: {{COMPONENT_CLASS_NAME}}AvatarProps) {
   // TODO Below if conditions can be removed once we have apis to get worklist/mywork info
   // This is non CaseView case (Dashboard, MyWork etc)
   if (!metaObj) {
-    userName = PCore.getEnvironmentInfo().getOperatorName();
-    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier();
+    userName = PCore.getEnvironmentInfo().getOperatorName() ?? "";
+    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier() ?? "";
   } else {
     userName = metaObj.name;
     userIdentifier = metaObj.ID;
@@ -46,22 +46,20 @@ function Avatar(props: {{COMPONENT_CLASS_NAME}}AvatarProps) {
     const currentState = PCore.getMessagingServiceManager().getUserPresence().getUserState(userIdentifier);
     const [userState, setUserState]: any  = useState(currentState === 'online' ? 'active' : 'inactive');
 
-    // @ts-ignore
-    const handleUserStateChange = ({ state }) => {
+    const handleUserStateChange = ({ state }: any) => {
       setUserState(state === 'online' ? 'active' : 'inactive');
     };
 
     useEffect(() => {
       const subId = PCore.getMessagingServiceManager()
         .getUserPresence()
-        // @ts-ignore
-        .subscribe(userIdentifier, handleUserStateChange);
+        .subscribe(userIdentifier, handleUserStateChange, '');
 
       return function cleanup() {
         PCore.getMessagingServiceManager().getUserPresence().unsubscribe(userIdentifier, subId);
       };
     }, [userIdentifier, handleUserStateChange]);
-    // @ts-ignore
+
     return <CosmosAvatar name={userName} imageSrc={imageBlobUrl as React.SetStateAction<any>} status={userState} />;
   }
 

package/src/tasks/create/templates/Constellation/widget/PAGE-CASE/Avatar.tsx.mustache

@@ -22,8 +22,8 @@ function Avatar(props: {{COMPONENT_CLASS_NAME}}AvatarProps) {
   // TODO Below if conditions can be removed once we have apis to get worklist/mywork info
   // This is non CaseView case (Dashboard, MyWork etc)
   if (!metaObj) {
-    userName = PCore.getEnvironmentInfo().getOperatorName();
-    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier();
+    userName = PCore.getEnvironmentInfo().getOperatorName() ?? "";
+    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier() ?? "";
   } else {
     userName = metaObj.name;
     userIdentifier = metaObj.ID;
@@ -46,22 +46,20 @@ function Avatar(props: {{COMPONENT_CLASS_NAME}}AvatarProps) {
     const currentState = PCore.getMessagingServiceManager().getUserPresence().getUserState(userIdentifier);
     const [userState, setUserState]: any  = useState(currentState === 'online' ? 'active' : 'inactive');
 
-    // @ts-ignore
-    const handleUserStateChange = ({ state }) => {
+    const handleUserStateChange = ({ state }: any) => {
       setUserState(state === 'online' ? 'active' : 'inactive');
     };
 
     useEffect(() => {
       const subId = PCore.getMessagingServiceManager()
         .getUserPresence()
-        // @ts-ignore
-        .subscribe(userIdentifier, handleUserStateChange);
+        .subscribe(userIdentifier, handleUserStateChange, '');
 
       return function cleanup() {
         PCore.getMessagingServiceManager().getUserPresence().unsubscribe(userIdentifier, subId);
       };
     }, [userIdentifier, handleUserStateChange]);
-    // @ts-ignore
+
     return <CosmosAvatar name={userName} imageSrc={imageBlobUrl as React.SetStateAction<any>} status={userState} />;
   }
 

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

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

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

@@ -69,8 +69,8 @@ export class {{COMPONENT_CLASS_NAME}}Component 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 {{COMPONENT_CLASS_NAME}}Component 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 {{COMPONENT_CLASS_NAME}}Component 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 {{COMPONENT_CLASS_NAME}}Component 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 {{COMPONENT_CLASS_NAME}}Component 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) {
@@ -227,14 +227,16 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     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/src/tasks/create/templates/SDK-Angular/field/Boolean/demo.stories.tsx.mustache

@@ -12,14 +12,12 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   render: (args: {{COMPONENT_CLASS_NAME}}Component) => ({
     props: {
       ...args,
-      pConn$: 
-      
-      {
+      pConn$: {
         resolveConfigProps: props => props,
         getConfigProps: () => {
           return configProps;
         },
-         getActionsApi: () => {
+        getActionsApi: () => {
           return {
             updateFieldValue: () => {
               /* nothing */
@@ -31,7 +29,8 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
         },
         getStateProps: () => {
           return stateProps;
-        }
+        },
+        clearErrorMessages: ({}) => {}
       } as any,
       formGroup$: new FormBuilder().group({})
     }

package/src/tasks/create/templates/SDK-Angular/field/Date/date.component.html.mustache

@@ -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>
 {{! pick new delimiters for mustache }}
 {{=<% %>=}}
@@ -23,7 +19,6 @@
           [required]="bRequired$"
           [formControl]="fieldControl"
           (dateChange)="fieldOnDateChange($event)"
-          (blur)="fieldOnBlur($event)"
         />
         <mat-datepicker-toggle matSuffix [for]="pegadate"></mat-datepicker-toggle>
         <mat-datepicker #pegadate [startAt]="value$"></mat-datepicker>

package/src/tasks/create/templates/SDK-Angular/field/Date/date.component.spec.ts.mustache

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

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

@@ -1,4 +1,3 @@
-/* eslint-disable max-classes-per-file */
 import { Component, OnInit, Input, ChangeDetectorRef, forwardRef, Inject, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
@@ -15,13 +14,14 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { dateFormatInfoDefault, getDateFormatInfo } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 import { format } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on Date here
 }
 
 class MyFormat {
-  theDateFormat: any = getDateFormatInfo();
+  theDateFormat = getDateFormatInfo();
 
   get display() {
     return {
@@ -83,7 +83,10 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   // Start with default dateFormatInfo
   dateFormatInfo = dateFormatInfoDefault;
   // and then update, as needed, based on locale, etc.
-  theDateFormat: any = getDateFormatInfo();
+  theDateFormat = getDateFormatInfo();
+  actionsApi: Object;
+  propName: string;
+  formattedValue$: any;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -146,27 +149,16 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     // moved this from ngOnInit() and call this from there instead...
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as {{COMPONENT_CLASS_NAME}}Props;
 
-    if (this.configProps$.value != undefined) {
-      let sDateValue: any = '';
-      sDateValue = this.configProps$.value;
-
-      if (sDateValue != '') {
-        if (typeof sDateValue === 'object') {
-          sDateValue = sDateValue.toISOString();
-        } else if (sDateValue.indexOf('/') < 0) {
-          // if we have the "pega" format, then for display, convert to standard format (US)
-          // sDateValue = this.formatDate(sDateValue);
-          sDateValue = this.utils.generateDate(sDateValue, 'Date-Long-Custom-YYYY');
-        }
-        this.value$ = new Date(sDateValue);
-      }
-    }
+    this.value$ = this.configProps$.value;
     this.testId = this.configProps$.testId;
     this.label$ = this.configProps$.label;
     this.displayMode$ = this.configProps$.displayMode;
     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) {
@@ -175,6 +167,12 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
       this.cdRef.detectChanges();
     });
 
+    if (this.displayMode$ === 'DISPLAY_ONLY' || this.displayMode$ === 'STACKED_LARGE_VAL') {
+      this.formattedValue$ = format(this.value$, 'date', {
+        format: this.theDateFormat.dateFormatString
+      });
+    }
+
     if (this.configProps$.visibility != null) {
       this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
     }
@@ -194,7 +192,7 @@ export class {{COMPONENT_CLASS_NAME}}Component 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 != '') {
@@ -209,20 +207,11 @@ export class {{COMPONENT_CLASS_NAME}}Component 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) {
-    // PConnect wants to use eventHandler for onBlur
-    if (typeof event.value === 'object') {
-      // convert date to pega "date" format
-      event.value = event.value?.toISOString();
-    }
-    this.angularPConnectData.actions?.onBlur(this, { value: event.value });
+    const value = event?.target?.value.format('YYYY-MM-DD');
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+    this.pConn$.clearErrorMessages({
+      property: this.propName
+    });
   }
 
   hasErrors() {
@@ -243,10 +232,4 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     }
     return errMessage;
   }
-
-  getFormattedValue() {
-    return format(this.value$, 'date', {
-      format: this.theDateFormat.dateFormatString
-    });
-  }
 }

package/src/tasks/create/templates/SDK-Angular/field/Date/demo.stories.tsx.mustache

@@ -8,7 +8,7 @@ window.PCore = {
   ...window.PCore,
   getLocaleUtils: (): any => {
     return {
-      getLocaleValue: (value) => {
+      getLocaleValue: value => {
         return value;
       }
     };
@@ -23,25 +23,26 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
     props: {
       ...args,
       pConn$: {
-      resolveConfigProps: (props) => props,
-      getConfigProps: () => {
-        return configProps;
-      },
-      getStateProps: () => {
-        return stateProps;
-      },
-      getActionsApi: () => {
-        return {
-          updateFieldValue: () => {
-            /* nothing */
-          },
-          triggerFieldChange: () => {
-            /* nothing */
-          }
-        };
-      }
-    } 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/src/tasks/create/templates/SDK-Angular/field/DateTime/date-time.component.html.mustache

@@ -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>
 {{! pick new delimiters for mustache }}
 {{=<% %>=}}
@@ -14,7 +14,6 @@
           [attr.data-test-id]="testId"
           [placeholder]="placeholder"
           [formControl]="fieldControl"
-          (blur)="fieldOnBlur($event)"
           (dateTimeChange)="fieldOnDateChange($event)"
           [value]="value$"
           [required]="bRequired$"

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

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

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

@@ -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 {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on DateTime here
@@ -61,8 +63,11 @@ export class {{COMPONENT_CLASS_NAME}}Component 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 {{COMPONENT_CLASS_NAME}}Component 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 {{COMPONENT_CLASS_NAME}}Component 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 {{COMPONENT_CLASS_NAME}}Component 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 {{COMPONENT_CLASS_NAME}}Component 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/src/tasks/create/templates/SDK-Angular/field/DateTime/demo.stories.tsx.mustache

@@ -9,7 +9,7 @@ window.PCore = {
   ...window.PCore,
   getLocaleUtils: (): any => {
     return {
-      getLocaleValue: (val) => {
+      getLocaleValue: val => {
         return val;
       }
     };
@@ -24,25 +24,26 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
     props: {
       ...args,
       pConn$: {
-      resolveConfigProps: (props) => props,
-      getConfigProps: () => {
-        return configProps;
-      },
-      getStateProps: () => {
-        return stateProps;
-      },
-      getActionsApi: () => {
-        return {
-          updateFieldValue: () => {
-            /* nothing */
-          },
-          triggerFieldChange: () => {
-            /* nothing */
-          }
-        };
-      }
-    } 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/src/tasks/create/templates/SDK-Angular/field/Decimal/decimal.component.html.mustache

@@ -13,9 +13,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/src/tasks/create/templates/SDK-Angular/field/Decimal/decimal.component.spec.ts.mustache

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