@pega/angular-sdk-overrides 23.1.10 → 24.1.10

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,20 @@ 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());
+  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 (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,32 @@
 <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,
+            precision: decimalPrecision,
+            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>

package/lib/field/decimal/decimal.component.ts

@@ -3,18 +3,21 @@ import { CommonModule } from '@angular/common';
 import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { NgxCurrencyDirective, NgxCurrencyInputMode } 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 { ThousandSeparatorDirective } 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 DecimalProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Decimal here
   currencyISOCode?: string;
   decimalPrecision?: number;
   showGroupSeparators?: string;
+  formatter?: string;
 }
 
 @Component({
@@ -28,7 +31,7 @@ interface DecimalProps extends PConnFieldProps {
     FormsModule,
     MatFormFieldModule,
     MatInputModule,
-    ThousandSeparatorDirective,
+    NgxCurrencyDirective,
     forwardRef(() => ComponentMapperComponent)
   ]
 })
@@ -41,7 +44,7 @@ export class DecimalComponent implements OnInit, OnDestroy {
   configProps$: DecimalProps;
 
   label$ = '';
-  value$: number;
+  value$: any;
   bRequired$ = false;
   bReadonly$ = false;
   bDisabled$ = false;
@@ -55,6 +58,13 @@ export class DecimalComponent implements OnInit, OnDestroy {
   placeholder: string;
 
   fieldControl = new FormControl<number | null>(null, null);
+  currDec: string;
+  currSep: string;
+  currSym: string;
+  decimalPrecision: number | undefined;
+  formatter;
+  formattedValue: any;
+  inputMode: any;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -119,6 +129,7 @@ export class DecimalComponent implements OnInit, OnDestroy {
     this.testId = this.configProps$.testId;
     this.label$ = this.configProps$.label;
     this.displayMode$ = this.configProps$.displayMode;
+    this.inputMode = NgxCurrencyInputMode.Natural;
     let nValue: any = this.configProps$.value;
     if (nValue) {
       if (typeof nValue === 'string') {
@@ -128,6 +139,21 @@ export class DecimalComponent implements OnInit, OnDestroy {
     }
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
+    const showGroupSeparators = this.configProps$.showGroupSeparators;
+    const currencyISOCode: any = this.configProps$?.currencyISOCode;
+
+    const theSymbols = getCurrencyCharacters(currencyISOCode);
+    this.currDec = theSymbols.theDecimalIndicator;
+    this.currSep = showGroupSeparators ? theSymbols.theDigitGroupSeparator : '';
+
+    const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
+    this.formatter = this.configProps$.formatter;
+
+    if (this.formatter === 'Currency') {
+      this.formattedValue = format(this.value$, this.formatter.toLowerCase(), theCurrencyOptions);
+    } else {
+      this.formattedValue = format(this.value$, this.pConn$.getComponentName().toLowerCase(), theCurrencyOptions);
+    }
 
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {
@@ -156,6 +182,13 @@ export class DecimalComponent implements OnInit, OnDestroy {
       this.fieldControl.enable();
     }
 
+    if (this.bReadonly$ && this.formatter === 'Currency') {
+      this.currSym = theSymbols.theCurrencySymbol;
+    } else {
+      this.currSym = '';
+    }
+    this.decimalPrecision = this.configProps$?.decimalPrecision ?? 2;
+
     this.componentReference = (this.pConn$.getStateProps() as any).value;
   }
 
@@ -163,8 +196,12 @@ export class DecimalComponent implements OnInit, OnDestroy {
     const actionsApi = this.pConn$?.getActionsApi();
     const propName = (this.pConn$?.getStateProps() as any).value;
     let value = event?.target?.value;
-    value = value.replace(/,/g, '');
-    value = value !== '' ? Number(value) : value;
+    if (this.currSep === ',') {
+      value = value.replace(/,/g, '');
+    } else {
+      value = value?.replace(/\./g, '');
+      value = value?.replace(/,/g, '.');
+    }
     handleEvent(actionsApi, 'changeNblur', propName, value);
   }
 

package/lib/field/dropdown/dropdown.component.ts

@@ -159,7 +159,6 @@ export class DropdownComponent implements OnInit, OnDestroy {
 
     this.componentReference = (this.pConn$.getStateProps() as any).value;
 
-    // @ts-ignore - parameter “contextName” for getDataObject method should be optional
     const optionsList = [...this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject())];
     optionsList?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
     this.options$ = optionsList;
@@ -184,7 +183,6 @@ export class DropdownComponent implements OnInit, OnDestroy {
     this.localizedValue = this.pConn$.getLocalizedValue(
       this.value$,
       this.localePath,
-      // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'.
       this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName)
     );
     // trigger display of error message with field control
@@ -223,7 +221,6 @@ export class DropdownComponent implements OnInit, OnDestroy {
     return this.pConn$.getLocalizedValue(
       opt.value,
       this.localePath,
-      // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'.
       this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName)
     );
   }

package/lib/field/group/group.component.html

@@ -1,4 +1,4 @@
-<ng-container *ngIf="visibility$">
+<ng-container *ngIf="visibility$ && arChildren$.length">
   <component-mapper
     name="FieldGroup"
     [props]="{

package/lib/field/group/group.component.ts

@@ -69,6 +69,10 @@ export class GroupComponent implements OnInit {
     this.instructions$ = this.configProps$.instructions;
     this.collapsible$ = this.configProps$.collapsible;
 
+    if (this.configProps$.visibility === undefined) {
+      this.visibility$ = this.pConn$.getComputedVisibility();
+    }
+
     if (this.configProps$.displayMode === 'LABELS_LEFT') {
       if (this.configProps$.visibility === undefined) this.visibility$ = true;
 

package/lib/field/multiselect/multiselect.component.html

@@ -0,0 +1,33 @@
+<div [formGroup]="formGroup$">
+  <mat-form-field class="psdk-full-width" subscriptSizing="dynamic">
+    <mat-label>{{ label$ }}</mat-label>
+    <mat-chip-grid #chipGrid>
+      <ng-container *ngFor="let select of selectedItems">
+        <mat-chip-row (removed)="removeChip(select)">
+          {{ select.primary }}
+          <button matChipRemove>
+            <mat-icon>cancel</mat-icon>
+          </button>
+        </mat-chip-row>
+      </ng-container>
+    </mat-chip-grid>
+    <input
+      matInput
+      [placeholder]="placeholder"
+      [formControl]="fieldControl"
+      [value]="value$"
+      [required]="bRequired$"
+      [matAutocomplete]="auto"
+      (input)="fieldOnChange($event)"
+      [matChipInputFor]="chipGrid"
+    />
+    <mat-autocomplete #auto="matAutocomplete">
+      <mat-option *ngFor="let item of itemsTree" [value]="item.primary" (click)="optionClicked($event, item)">
+        <mat-checkbox [checked]="item.selected" (click)="optionClicked($event, item)">
+          <span>{{ item.primary }}</span>
+        </mat-checkbox>
+      </mat-option>
+    </mat-autocomplete>
+    <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
+  </mat-form-field>
+</div>

package/lib/field/multiselect/multiselect.component.scss

@@ -0,0 +1,7 @@
+.psdk-full-width {
+  width: 100%;
+}
+
+::ng-deep .mat-mdc-form-field-infix {
+  padding-left: 10px;
+}

package/lib/field/multiselect/multiselect.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MultiselectComponent } from './multiselect.component';
+
+describe('MultiselectComponent', () => {
+  let component: MultiselectComponent;
+  let fixture: ComponentFixture<MultiselectComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [MultiselectComponent]
+    });
+    fixture = TestBed.createComponent(MultiselectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});