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

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

@@ -161,15 +161,25 @@ export class PegaDxilMyTextInputComponent 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-time-of-day/demo.stories.tsx

@@ -22,11 +22,11 @@ const meta: Meta<PegaDxilMyTimeOfDayComponent> = {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {
-              /* nothing */
+            updateFieldValue: (propName, value) => {
+              configProps.value = value;
             },
-            triggerFieldChange: () => {
-              /* nothing */
+            triggerFieldChange: (propName, value) => {
+              configProps.value = value;
             }
           };
         },
@@ -46,7 +46,6 @@ export const PegaDxilMyTimeOfDay: Story = {
     helperText: configProps.helperText,
     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-time-of-day/pega-dxil-my-time-of-day.component.html

@@ -14,7 +14,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>
@@ -23,5 +23,5 @@
   </div>
 </ng-template>
 <ng-template #noEdit>
-  <component-mapper *ngIf="bVisible$ !== false" name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="Text" [props]="{ pConn$, formatAs$: 'time' }"></component-mapper>
 </ng-template>

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

@@ -165,15 +165,30 @@ export class PegaDxilMyTimeOfDayComponent 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) {
+      let value = event?.target?.value;
+      const hhmmPattern = /^\d{2}:\d{2}$/;
+      if (hhmmPattern.test(value)) {
+        value = `${value}:00`; // append ":00"
+      }
+
+      handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+    }
   }
 
   getErrorMessage() {

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

@@ -22,11 +22,11 @@ const meta: Meta<PegaDxilMyUrlComponent> = {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {
-              /* nothing */
+            updateFieldValue: (propName, value) => {
+              configProps.value = value;
             },
-            triggerFieldChange: () => {
-              /* nothing */
+            triggerFieldChange: (propName, value) => {
+              configProps.value = value;
             }
           };
         },
@@ -46,8 +46,8 @@ export const PegaDxilMyUrl: Story = {
     helperText: configProps.helperText,
     placeholder: configProps.placeholder,
     bReadonly$: configProps.readOnly,
-    bDisabled$: configProps.disabled,
     bRequired$: configProps.required,
-    displayMode$: configProps.displayMode
+    displayMode$: configProps.displayMode,
+    value$: configProps.value
   }
 };

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

@@ -14,7 +14,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/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-url/pega-dxil-my-url.component.ts

@@ -159,15 +159,25 @@ export class PegaDxilMyUrlComponent 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/template/pega-dxil-my-form/pega-dxil-my-form.component.ts

@@ -1,11 +1,23 @@
 import { Component, OnInit, Input, forwardRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { TemplateUtils } from '@pega/angular-sdk-components';
 import { FormTemplateBase } from '@pega/angular-sdk-components';
 
+function areViewsChanged(oldViews: any[], newViews: any[]): boolean {
+  if (oldViews?.length !== newViews?.length) {
+    return true;
+  }
+
+  return !oldViews?.every((oldView, index) => {
+    const newView = newViews[index];
+    return oldView.getPConnect().viewName === newView.getPConnect().viewName;
+  });
+}
+
 interface PegaDxilMyFormProps {
   // If any, enter additional props that only exist on this component
   NumCols: string;
@@ -23,15 +35,32 @@ export class PegaDxilMyFormComponent extends FormTemplateBase implements OnInit
   @Input() override pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
+  // Used with AngularPConnect
+  override angularPConnectData: AngularPConnectData = {};
+
   arChildren$: any[];
   divClass$: string;
   instructions: string;
 
-  constructor(private templateUtils: TemplateUtils) {
+  constructor(
+    private angularPConnect: AngularPConnectService,
+    private templateUtils: TemplateUtils
+  ) {
     super();
   }
 
   ngOnInit(): void {
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+
+    this.updateSelf();
+  }
+
+  onStateChange() {
+    this.updateSelf();
+  }
+
+  updateSelf() {
     const configProps = this.pConn$.getConfigProps() as PegaDxilMyFormProps;
     const kids = this.pConn$.getChildren();
     this.instructions = this.templateUtils.getInstructions(this.pConn$, configProps?.instructions);
@@ -55,6 +84,10 @@ export class PegaDxilMyFormComponent extends FormTemplateBase implements OnInit
     // repoint children before getting templateArray
     // Children may contain 'reference' component, so we need to
     //  normalize them
-    this.arChildren$ = ReferenceComponent.normalizePConnArray(kids[0].getPConnect().getChildren());
+    const children = ReferenceComponent.normalizePConnArray(kids[0].getPConnect().getChildren());
+
+    if (areViewsChanged(this.arChildren$, children)) {
+      this.arChildren$ = children;
+    }
   }
 }

package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-two-column-form/pega-dxil-my-two-column-form.component.scss

@@ -11,7 +11,7 @@
 .psdk-two-column-column {
   width: 50%;
   float: left;
-  padding: 0rem 1.5rem;
+  padding: 0rem 0.3125rem;
   height: 100%;
 }
 

package/tests/assets/sdk-a/components/createAll/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/createAll/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>

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

@@ -29,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/createAll/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/createAll/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/createAll/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,7 +41,7 @@ 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();
     }
   }
@@ -69,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/createAll/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/createAll/override-sdk/field/auto-complete/auto-complete.component.ts

@@ -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;
@@ -108,6 +112,13 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
     );
   }
 
+  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$);
@@ -149,6 +160,7 @@ 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();
@@ -191,7 +203,8 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
 
     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') {
@@ -263,7 +276,7 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
       };
       optionsData.push(obj);
     });
-    this.options$ = optionsData;
+    this.setOptions(optionsData);
   }
 
   flattenParameters(params = {}) {

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

@@ -130,6 +130,7 @@ 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 || '';
@@ -197,20 +198,25 @@ export class CurrencyComponent 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/override-sdk/field/date/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/override-sdk/field/date-time/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/override-sdk/field/date-time/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 DateTimeProps extends PConnFieldProps {
   // If any, enter additional props that only exist on DateTime here
@@ -68,6 +70,7 @@ export class DateTimeComponent implements OnInit, OnDestroy {
   actionsApi: Object;
   propName: string;
   formattedValue$: any;
+  timezone = PCore.getEnvironmentInfo()?.getTimeZone();
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -88,7 +91,12 @@ export class DateTimeComponent 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 DateTimeComponent 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 DateTimeComponent 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/override-sdk/field/decimal/decimal.component.html

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