@pega/angular-sdk-overrides 0.23.7 → 0.24.2

package/lib/designSystemExtension/material-case-summary/material-case-summary.component.html

@@ -28,11 +28,14 @@
   <dl *ngFor="let field of secondaryFields$" class="psdk-case-summary-fields-secondary">
     <div
       *ngIf="
-        field.config?.label?.toLowerCase() == 'create operator' || field.config?.label?.toLowerCase() == 'update operator';
+        field.config?.label?.toLowerCase() == 'create operator' ||
+          field.displayLabel.toLowerCase() == 'create operator' ||
+          field.config?.label?.toLowerCase() == 'update operator' ||
+          field.displayLabel.toLowerCase() == 'update operator';
         else hasSecondaryValue
       "
     >
-      <component-mapper name="Operator" [props]="{ pConn$: field?.kid }"></component-mapper>
+      <component-mapper name="Operator" [props]="{ pConn$: field?.kid, displayLabel: field?.displayLabel }"></component-mapper>
     </div>
     <ng-template #hasSecondaryValue>
       <div class="psdk-csf-secondary-field">

package/lib/designSystemExtension/material-case-summary/material-case-summary.component.ts

@@ -19,7 +19,8 @@ export class MaterialCaseSummaryComponent implements OnInit, OnChanges {
   primaryFieldsWithStatus$: any[];
 
   constructor(private utils: Utils) {}
-
+  localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  localeCategory = 'ModalContainer';
   ngOnInit(): void {
     this.updatePrimaryWithStatus();
     this.updateLabelAndDate(this.primaryFieldsWithStatus$);
@@ -63,6 +64,7 @@ export class MaterialCaseSummaryComponent implements OnInit, OnChanges {
   updatePrimaryWithStatus() {
     this.primaryFieldsWithStatus$ = [];
     for (const prim of this.primaryFields$) {
+      prim.config.value = this.localizedVal(prim.config.value, this.localeCategory);
       this.primaryFieldsWithStatus$.push(prim);
     }
 

package/lib/designSystemExtension/material-vertical-tabs/material-vertical-tabs.component.html

@@ -1,5 +1,5 @@
 <div>
-  <mat-button-toggle-group vertical (change)="onChange($event.value)" [value]="selectedTabId$" aria-label="Tabs">
+  <mat-button-toggle-group vertical hideSingleSelectionIndicator (change)="onChange($event.value)" [value]="selectedTabId$" aria-label="Tabs">
     <mat-button-toggle *ngFor="let tab of tabConfig$" [value]="tab.id" style="text-align: left">
       <div style="display: flex">
         <div style="flex-grow: 10">{{ tab.name }}</div>

package/lib/designSystemExtension/operator/operator.component.ts

@@ -12,7 +12,7 @@ import { Utils } from '@pega/angular-sdk-components';
 })
 export class OperatorComponent implements OnInit, OnChanges, OnDestroy {
   @Input() pConn$: typeof PConnect;
-
+  @Input() displayLabel;
   fields$: any[] = [];
   bShowPopover$: boolean;
   date$: string;
@@ -51,15 +51,17 @@ export class OperatorComponent implements OnInit, OnChanges, OnDestroy {
 
   updateSelf(): void {
     const configProps$ = this.pConn$.getConfigProps() as any;
-    if (configProps$?.label?.toLowerCase() == 'create operator') {
+    this.displayLabel = this.displayLabel?.toLowerCase();
+    const label = configProps$?.label?.toLowerCase();
+    if (label === 'create operator' || this.displayLabel === 'create operator') {
       this.name$ = configProps$.createOperator.userName;
       this.id$ = configProps$.createOperator.userId;
       this.label$ = configProps$.createLabel;
-    } else if (configProps$?.label?.toLowerCase() == 'update operator') {
+    } else if (label === 'update operator' || this.displayLabel === 'update operator') {
       this.name$ = configProps$.updateOperator.userName;
       this.id$ = configProps$.updateOperator.userId;
       this.label$ = configProps$.updateLabel;
-    } else if (configProps$?.label?.toLowerCase() == 'resolve operator') {
+    } else if (label === 'resolve operator' || this.displayLabel === 'resolve operator') {
       this.name$ = configProps$.resolveOperator.userName;
       this.id$ = configProps$.resolveOperator.userId;
       this.label$ = configProps$.resolveLabel;

package/lib/field/check-box/check-box.component.html

@@ -6,36 +6,37 @@
   ></component-mapper>
 </div>
 <ng-template #noDisplayMode>
-  <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
+  <div *ngIf="bHasForm$; else noEdit">
     <div [formGroup]="formGroup$" *ngIf="bVisible$">
       <div class="mat-form-field-infix" *ngIf="showLabel$">
         <span>
           <label class="mat-form-field-label psdk-label-readonly">{{ label$ }}</label>
         </span>
-        <mat-checkbox
-          [labelPosition]="'after'"
-          [checked]="isChecked$"
-          [disabled]="bDisabled$"
-          [attr.data-test-id]="testId"
-          [formControl]="fieldControl"
-          (change)="fieldOnChange($event)"
-          (blur)="fieldOnBlur($event)"
-          >{{ caption$ }}</mat-checkbox
-        >
       </div>
-      <div class="mat-form-field-infix" *ngIf="!bReadonly$ && !showLabel$">
+      <div *ngIf="selectionMode === 'multi'; else single">
+        <mat-option *ngFor="let item of listOfCheckboxes" (click)="handleChangeMultiMode($event, item)">
+          <mat-checkbox
+            [labelPosition]="'after'"
+            [checked]="item.selected"
+            [attr.data-test-id]="testId + ':' + item.value"
+            (change)="handleChangeMultiMode($event, item)"
+            (blur)="fieldOnBlur($event)"
+            >{{ item.text ?? item.value }}
+          </mat-checkbox>
+        </mat-option>
+      </div>
+      <ng-template #single>
         <mat-checkbox
           [labelPosition]="'after'"
           [checked]="isChecked$"
-          [disabled]="bDisabled$"
           [attr.data-test-id]="testId"
           [formControl]="fieldControl"
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
           >{{ caption$ }}</mat-checkbox
         >
-      </div>
-      <mat-hint *ngIf="helperText">{{ helperText }}</mat-hint>
+        <p *ngIf="helperText">{{ helperText }}</p>
+      </ng-template>
       <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
     </div>
   </div>

package/lib/field/check-box/check-box.component.scss

@@ -8,10 +8,10 @@
   top: 0rem;
   margin-top: 0.625rem;
   font-size: 0.875rem;
-  display: block;
   transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px);
   -ms-transform: translateY(-1.28125em) scale(0.75);
   width: 133.33333%;
+  color: rgba(0, 0, 0, 0.6);
 }
 
 .psdk-data-readonly {
@@ -22,3 +22,16 @@
 ::ng-deep .mat-mdc-form-field-infix {
   width: auto;
 }
+
+p {
+  font-size: 0.75rem;
+  color: rgba(0, 0, 0, 0.58);
+}
+
+mat-checkbox {
+  margin-left: -11px;
+}
+
+.mat-mdc-option {
+  margin-left: -16px;
+}

package/lib/field/check-box/check-box.component.ts

@@ -3,10 +3,14 @@ import { CommonModule } from '@angular/common';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatOptionModule } from '@angular/material/core';
+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';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { deleteInstruction, insertInstruction, updateNewInstructions } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 
 interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
   // If any, enter additional props that only exist on Checkbox here
@@ -15,6 +19,13 @@ interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
   caption?: string;
   trueLabel?: string;
   falseLabel?: string;
+  selectionMode?: string;
+  datasource?: any;
+  selectionKey?: string;
+  selectionList?: any;
+  primaryField: string;
+  readonlyContextList: any;
+  referenceList: string;
 }
 
 @Component({
@@ -22,7 +33,7 @@ interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
   templateUrl: './check-box.component.html',
   styleUrls: ['./check-box.component.scss'],
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, MatCheckboxModule, MatFormFieldModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatCheckboxModule, MatFormFieldModule, MatOptionModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class CheckBoxComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
@@ -50,6 +61,17 @@ export class CheckBoxComponent implements OnInit, OnDestroy {
   trueLabel$?: string;
   falseLabel$?: string;
 
+  selectionMode?: string;
+  datasource?: any;
+  selectionKey?: string;
+  selectionList?: any;
+  primaryField: string;
+  selectedvalues: any;
+  referenceList: string;
+  listOfCheckboxes: any[] = [];
+  actionsApi: any;
+  propName: any;
+
   fieldControl = new FormControl('', null);
 
   constructor(
@@ -69,6 +91,11 @@ export class CheckBoxComponent implements OnInit, OnDestroy {
     // this.updateSelf();
     this.checkAndUpdate();
 
+    if (this.selectionMode === 'multi' && this.referenceList?.length > 0) {
+      this.pConn$.setReferenceList(this.selectionList);
+      updateNewInstructions(this.pConn$, this.selectionList);
+    }
+
     if (this.formGroup$) {
       // add control to formGroup
       this.formGroup$.addControl(this.controlName$, this.fieldControl);
@@ -111,68 +138,124 @@ export class CheckBoxComponent implements OnInit, OnDestroy {
     // moved this from ngOnInit() and call this from there instead...
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as CheckboxProps;
 
-    if (this.configProps$.value != undefined) {
-      this.value$ = this.configProps$.value;
-    }
     this.testId = this.configProps$.testId;
-    this.label$ = this.configProps$.label;
     this.displayMode$ = this.configProps$.displayMode;
+    this.label$ = this.configProps$.label;
+    if (this.label$ != '') {
+      this.showLabel$ = true;
+    }
 
-    this.caption$ = this.configProps$.caption;
-    this.helperText = this.configProps$.helperText;
-    this.trueLabel$ = this.configProps$.trueLabel;
-    this.falseLabel$ = this.configProps$.falseLabel;
-
-    // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
-    setTimeout(() => {
-      if (this.configProps$.required != null) {
-        this.bRequired$ = this.utils.getBooleanValue(this.configProps$.required);
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = (this.pConn$.getStateProps() as any).value;
+
+    // multi case
+    this.selectionMode = this.configProps$.selectionMode;
+    if (this.selectionMode === 'multi') {
+      this.referenceList = this.configProps$.referenceList;
+      this.selectionList = this.configProps$.selectionList;
+      this.selectedvalues = this.configProps$.readonlyContextList;
+      this.primaryField = this.configProps$.primaryField;
+
+      this.datasource = this.configProps$.datasource;
+      this.selectionKey = this.configProps$.selectionKey;
+      const listSourceItems = this.datasource?.source ?? [];
+      const dataField: any = this.selectionKey?.split?.('.')[1];
+      const listToDisplay: any[] = [];
+      listSourceItems.forEach(element => {
+        element.selected = this.selectedvalues?.some?.(data => data[dataField] === element.key);
+        listToDisplay.push(element);
+      });
+      this.listOfCheckboxes = listToDisplay;
+    } else {
+      if (this.configProps$.value != undefined) {
+        this.value$ = this.configProps$.value;
       }
-      this.cdRef.detectChanges();
-    });
-
-    if (this.configProps$.visibility != null) {
-      this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
-    }
 
-    // disabled
-    if (this.configProps$.disabled != undefined) {
-      this.bDisabled$ = this.utils.getBooleanValue(this.configProps$.disabled);
-    }
+      this.caption$ = this.configProps$.caption;
+      this.helperText = this.configProps$.helperText;
+      this.trueLabel$ = this.configProps$.trueLabel;
+      this.falseLabel$ = this.configProps$.falseLabel;
+
+      // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
+      setTimeout(() => {
+        if (this.configProps$.required != null) {
+          this.bRequired$ = this.utils.getBooleanValue(this.configProps$.required);
+        }
+        this.cdRef.detectChanges();
+      });
+
+      if (this.configProps$.visibility != null) {
+        this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
+      }
 
-    if (this.bDisabled$) {
-      this.fieldControl.disable();
-    } else {
-      this.fieldControl.enable();
-    }
+      // disabled
+      if (this.configProps$.disabled != undefined) {
+        this.bDisabled$ = this.utils.getBooleanValue(this.configProps$.disabled);
+      }
 
-    if (this.configProps$.readOnly != null) {
-      this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
-    }
+      if (this.bDisabled$) {
+        this.fieldControl.disable();
+      } else {
+        this.fieldControl.enable();
+      }
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+      if (this.configProps$.readOnly != null) {
+        this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
+        this.fieldControl.disable();
+      }
 
-    if (this.label$ != '') {
-      this.showLabel$ = true;
-    }
+      this.componentReference = (this.pConn$.getStateProps() as any).value;
 
-    // eslint-disable-next-line sonarjs/no-redundant-boolean
-    if (this.value$ === 'true' || this.value$ == true) {
-      this.isChecked$ = true;
-    } else {
-      this.isChecked$ = false;
+      // eslint-disable-next-line sonarjs/no-redundant-boolean
+      if (this.value$ === 'true' || this.value$ == true) {
+        this.isChecked$ = true;
+      } else {
+        this.isChecked$ = false;
+      }
+      // 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();
+        });
+      }
     }
   }
 
   fieldOnChange(event: any) {
     event.value = event.checked;
 
-    this.angularPConnectData.actions?.onChange(this, event);
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, event.checked);
   }
 
   fieldOnBlur(event: any) {
-    event.value = event.checked;
-    this.angularPConnectData.actions?.onBlur(this, event);
+    if (this.selectionMode === 'multi') {
+      this.pConn$.getValidationApi().validate(this.selectedvalues, this.selectionList);
+    } else {
+      event.value = event.checked;
+      this.angularPConnectData.actions?.onBlur(this, event);
+    }
+  }
+
+  handleChangeMultiMode(event, element) {
+    if (!element.selected) {
+      insertInstruction(this.pConn$, this.selectionList, this.selectionKey, this.primaryField, {
+        id: element.key,
+        primary: element.text ?? element.value
+      });
+    } else {
+      deleteInstruction(this.pConn$, this.selectionList, this.selectionKey, {
+        id: element.key,
+        primary: element.text ?? element.value
+      });
+    }
+    this.pConn$.clearErrorMessages({
+      property: this.selectionList,
+      category: '',
+      context: ''
+    });
   }
 
   getErrorMessage() {

package/lib/field/currency/currency.component.html

@@ -7,17 +7,17 @@
       <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
         <mat-label>{{ label$ }}</mat-label>
         <div class="psdk-currency-input">
-          <span>{{ symbol }}</span>
           <input
             style="margin-left: 5px"
-            type="float"
+            type="text"
             matInput
+            currencyMask
+            [options]="{ prefix: currSym, thousands: currSep, decimal: currDec, align: 'left', nullable: true }"
             [placeholder]="placeholder"
-            [value]="value$ | number: '1.2-2'"
+            [formControlName]="controlName$"
             [required]="bRequired$"
             [formControl]="fieldControl"
             [attr.data-test-id]="testId"
-            (change)="fieldOnChange($event)"
             (blur)="fieldOnBlur($event)"
           />
         </div>

package/lib/field/currency/currency.component.ts

@@ -4,9 +4,11 @@ import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { interval } from 'rxjs';
+import { NgxCurrencyDirective } from 'ngx-currency';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 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 { PConnFieldProps } from '@pega/angular-sdk-components';
 
@@ -20,7 +22,7 @@ interface CurrrencyProps extends PConnFieldProps {
   templateUrl: './currency.component.html',
   styleUrls: ['./currency.component.scss'],
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, NgxCurrencyDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class CurrencyComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
@@ -31,7 +33,7 @@ export class CurrencyComponent implements OnInit, OnDestroy {
   configProps$: CurrrencyProps;
 
   label$ = '';
-  value$: number | null;
+  value$: any;
   bRequired$ = false;
   bReadonly$ = false;
   bDisabled$ = false;
@@ -47,9 +49,9 @@ export class CurrencyComponent implements OnInit, OnDestroy {
   currencyOptions: Object = {};
 
   fieldControl = new FormControl<number | null>(null, { updateOn: 'blur' });
-  symbol: string;
-  thousandsSep: string;
-  decimalSep: string;
+  currSym: string;
+  currSep: string;
+  currDec: string;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -114,10 +116,21 @@ export class CurrencyComponent implements OnInit, OnDestroy {
     this.testId = this.configProps$.testId;
     this.label$ = this.configProps$.label;
     this.displayMode$ = this.configProps$.displayMode;
-    const nValue: any = this.configProps$.value;
-    this.value$ = nValue && typeof nValue === 'string' ? parseFloat(nValue) : nValue;
+    let nValue: any = this.configProps$.value;
+    if (nValue) {
+      if (typeof nValue === 'string') {
+        nValue = parseFloat(nValue);
+      }
+      this.value$ = nValue;
+    }
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
+    const currencyISOCode: any = this.configProps$?.currencyISOCode;
+
+    const theSymbols = getCurrencyCharacters(currencyISOCode);
+    this.currSym = theSymbols.theCurrencySymbol;
+    this.currSep = theSymbols.theDigitGroupSeparator;
+    this.currDec = theSymbols.theDecimalIndicator;
 
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {
@@ -150,11 +163,6 @@ export class CurrencyComponent implements OnInit, OnDestroy {
       this.currencyISOCode = this.configProps$.currencyISOCode;
     }
 
-    const theSymbols = getCurrencyCharacters(this.currencyISOCode);
-    this.symbol = theSymbols.theCurrencySymbol;
-    this.thousandsSep = theSymbols.theDigitGroupSeparator;
-    this.decimalSep = theSymbols.theDecimalIndicator;
-
     this.componentReference = (this.pConn$.getStateProps() as any).value;
 
     // trigger display of error message with field control
@@ -168,14 +176,18 @@ export class CurrencyComponent implements OnInit, OnDestroy {
     }
   }
 
-  fieldOnChange(event: any) {
-    this.angularPConnectData.actions?.onChange(this, event);
-  }
-
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-
-    this.angularPConnectData.actions?.onBlur(this, event);
+    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, '.');
+    }
+    handleEvent(actionsApi, 'changeNblur', propName, value);
   }
 
   getErrorMessage() {

package/lib/field/date-time/date-time.component.html

@@ -8,18 +8,18 @@
         <mat-label>{{ label$ }}</mat-label>
         <input
           matInput
+          [owlDateTime]="dtPicker"
           [attr.data-test-id]="testId"
-          [ngxMatDatetimePicker]="picker"
           [placeholder]="placeholder"
           [formControl]="fieldControl"
-          (dateChange)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
+          (dateTimeChange)="fieldOnBlur($event)"
           [value]="value$"
           [required]="bRequired$"
         />
-        <mat-datepicker-toggle matSuffix [for]="$any(picker)"></mat-datepicker-toggle>
-        <ngx-mat-datetime-picker #picker [stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond"> </ngx-mat-datetime-picker>
-        <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
+        <mat-datepicker-toggle matSuffix [for]="$any(dtPicker)" [owlDateTimeTrigger]="dtPicker"></mat-datepicker-toggle>
+        <owl-date-time #dtPicker></owl-date-time>
+        <mat-error *ngIf="fieldControl?.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>
   </div>

package/lib/field/date-time/date-time.component.ts

@@ -1,44 +1,21 @@
-/* eslint-disable max-classes-per-file */
 import { Component, OnInit, Input, ChangeDetectorRef, forwardRef, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NGX_MAT_DATE_FORMATS } from '@angular-material-components/datetime-picker';
-import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
-import { MomentDateModule } from '@angular/material-moment-adapter';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 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 { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { dateFormatInfoDefault, getDateFormatInfo } from '@pega/angular-sdk-components';
-import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
 interface DateTimeProps extends PConnFieldProps {
   // If any, enter additional props that only exist on DateTime here
 }
 
-class MyFormat {
-  theDateFormat: any = getDateFormatInfo();
-
-  get display() {
-    return {
-      dateInput: `${this.theDateFormat.dateFormatString}, LT`,
-      monthYearLabel: 'MMM YYYY',
-      dateA11yLabel: 'LL',
-      monthYearA11yLabel: 'MMMM YYYY'
-    };
-  }
-
-  get parse() {
-    return {
-      dateInput: `${this.theDateFormat.dateFormatString}, LT`
-    };
-  }
-}
-
 @Component({
   selector: 'app-date-time',
   templateUrl: './date-time.component.html',
@@ -50,13 +27,10 @@ class MyFormat {
     MatFormFieldModule,
     MatInputModule,
     MatDatepickerModule,
-    NgxMatMomentModule,
-    NgxMatDatetimePickerModule,
-    NgxMatTimepickerModule,
-    MomentDateModule,
+    OwlDateTimeModule,
+    OwlNativeDateTimeModule,
     forwardRef(() => ComponentMapperComponent)
-  ],
-  providers: [{ provide: NGX_MAT_DATE_FORMATS, useClass: MyFormat }]
+  ]
 })
 export class DateTimeComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
@@ -194,16 +168,11 @@ export class DateTimeComponent implements OnInit, OnDestroy {
     }
   }
 
-  fieldOnChange(event: any) {
-    const value = event.value && event.value.isValid() ? event.value : null;
-    const actionsApi = this.pConn$?.getActionsApi();
-    const propName = (this.pConn$?.getStateProps() as any).value;
-    handleEvent(actionsApi, 'changeNblur', propName, value?.toISOString());
-  }
-
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    if (event.target.value) event.value = event.target.value;
+    if (typeof event.value === 'object') {
+      // convert date to pega "date" format
+      event.value = event.value?.toISOString();
+    }
 
     this.angularPConnectData.actions?.onBlur(this, event);
   }

package/lib/field/decimal/decimal.component.html

@@ -1,22 +1,31 @@
 <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="!bReadonly$ && bHasForm$; else noEdit">
+  <div *ngIf="bHasForm$; else noEdit">
     <div [formGroup]="formGroup$" *ngIf="bVisible$">
       <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
         <mat-label>{{ label$ }}</mat-label>
         <input
           type="text"
           matInput
-          appThousandSeparator
+          currencyMask
+          [options]="{
+            prefix: bReadonly$ && formatter === 'Currency' ? currSym : '',
+            thousands: currSep,
+            decimal: currDec,
+            align: 'left',
+            nullable: true,
+            inputMode: inputMode
+          }"
           [placeholder]="placeholder"
           step="0.01"
-          [value]="value$"
+          [formControlName]="controlName$"
           [required]="bRequired$"
           [formControl]="fieldControl"
           [attr.data-test-id]="testId"
           (blur)="fieldOnBlur($event)"
+          [readonly]="bReadonly$"
         />
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>