Merge branch 'master' into mod/tor/US-642004

Author: samhere06

.github/workflows/mend-scan.yml

@@ -7,7 +7,7 @@ on:
    branches:
    - 'master'
   schedule:
-   - cron:  '0 0 * * *' 
+   - cron:  '0 0 * * 1' 
 jobs:
   mendscan:
     env:
@@ -40,13 +40,13 @@ jobs:
           java -jar wss-unified-agent.jar
         fi
     - name: 'Upload WhiteSource folder'
-      uses: actions/upload-artifact@v2
+      uses: actions/upload-artifact@v4
       with:
         name: Mend
         path: whitesource
         retention-days: 14
     - name: 'Upload Mend folder if failure'
-      uses: actions/upload-artifact@v2
+      uses: actions/upload-artifact@v4
       if: failure()
       with:
         name: Mend

angular.json

@@ -110,7 +110,7 @@
             "customWebpackConfig": {
               "path": "./scripts/extra-webpack.config.js"
             },
-            "allowedCommonJsDependencies": ["downloadjs", "dayjs", "fast-deep-equal", "moment"]
+            "allowedCommonJsDependencies": ["lodash.clonedeep", "downloadjs", "dayjs", "fast-deep-equal", "moment"]
           },
           "configurations": {
             "production": {

packages/angular-sdk-components/doc/KeyReleaseUpdates.md

@@ -1,4 +1,21 @@
-### Angular SDK - Release Announcement - v23.1.10 (20 March 2024)
+### Angular SDK - Release Announcement - v24.1.10 (08 August 2024)
+
+This release - **SDK-A v24.1.10** - is **only compatible with Pega Infinity 24.1**. This release is related to the [**release/24.1.10** branch of the React SDK repository](https://github.com/pegasystems/angular-sdk/tree/release/24.1.10).
+<br>
+
+The SDK-R v24.1.10 release allow React SDK users to to take advantage of the latest [SDK enhancements and fixes noted in **What's New in the SDK?**](https://docs.pega.com/bundle/constellation-sdk/page/constellation-sdks/sdks/react-sdk-updates.html) including:
+
+* Support has been added for the approve and reject case actions
+* Support for the Checkbox group and Combo-Box display options in the MultiSelect mode for the Data Reference and Case Reference fields.
+* Save For Later functionality now works as expected
+* Bug fixes
+* Full set of merged PRs can be found in the [react-sdk-components GitHub repo list of merged PRs](https://github.com/pegasystems/angular-sdk-components/pulls?q=is%3Apr+is%3Amerged+base%3Amaster+). This release includes all PRs since (and including) #153.
+<br />
+<hr />
+
+### Previous Releases
+
+#### Angular SDK - v23.1.10 (20 March 2024)
 
 This release - **SDK-A v23.1.10** - is **only compatible with Pega Infinity 23**. This release is related to the [**release/23.1.10** branch of the Angular SDK repository](https://github.com/pegasystems/angular-sdk/tree/release/23.1.10).
 <br>

packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-case-summary/material-case-summary.component.html

@@ -2,7 +2,7 @@
   <dl class="psdk-case-summary-fields-primary">
     <div *ngFor="let field of primaryFieldsWithStatus$" class="psdk-csf-primary-field">
       <dt class="psdk-csf-primary-field-header">
-        {{ field.config.label }}
+        {{ field.config?.label }}
       </dt>
       <dd *ngIf="field.config.value === ''; else hasValue" class="psdk-csf-primary-field-data">
         <ng-container [ngSwitch]="field.type.toLowerCase()">
@@ -28,10 +28,10 @@
   <dl *ngFor="let field of secondaryFields$" class="psdk-case-summary-fields-secondary">
     <div
       *ngIf="
-        field.config?.label?.toLowerCase() == 'create operator' ||
-          field.displayLabel.toLowerCase() == 'create operator' ||
-          field.config?.label?.toLowerCase() == 'update operator' ||
-          field.displayLabel.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
       "
     >
@@ -40,7 +40,7 @@
     <ng-template #hasSecondaryValue>
       <div class="psdk-csf-secondary-field">
         <dt class="psdk-csf-secondary-field-header">
-          {{ field.config.displayLabel || field.config.label }}
+          {{ field.config?.displayLabel || field.config?.label }}
         </dt>
         <dd class="psdk-csf-secondary-field-data">
           <div [ngSwitch]="field.type">

packages/angular-sdk-components/src/lib/_components/designSystemExtension/operator/operator.component.ts

@@ -45,8 +45,11 @@ export class OperatorComponent implements OnInit, OnChanges, OnDestroy {
     }
   }
 
+  // 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 {

packages/angular-sdk-components/src/lib/_components/field/check-box/check-box.component.ts

@@ -193,15 +193,14 @@ export class CheckBoxComponent implements OnInit, OnDestroy {
         this.bDisabled$ = this.utils.getBooleanValue(this.configProps$.disabled);
       }
 
-      if (this.bDisabled$) {
-        this.fieldControl.disable();
-      } else {
-        this.fieldControl.enable();
-      }
-
       if (this.configProps$.readOnly != null) {
         this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
+      }
+
+      if (this.bDisabled$ || this.bReadonly$) {
         this.fieldControl.disable();
+      } else {
+        this.fieldControl.enable();
       }
 
       this.componentReference = this.pConn$.getStateProps().value;

packages/angular-sdk-components/src/lib/_components/field/currency/currency.component.html

@@ -2,23 +2,32 @@
   <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
-  <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
+  <div *ngIf="bHasForm$; else noEdit">
     <div [formGroup]="formGroup$" *ngIf="bVisible$" class="psdk-currency-field">
       <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
         <mat-label>{{ label$ }}</mat-label>
         <div class="psdk-currency-input">
           <input
-            style="margin-left: 5px"
+            style="margin-left: 5px; margin-top: -1rem"
             type="text"
             matInput
             currencyMask
-            [options]="{ prefix: currSym, thousands: currSep, decimal: currDec, align: 'left', nullable: true }"
+            [options]="{
+              prefix: currSym,
+              thousands: currSep,
+              decimal: currDec,
+              align: 'left',
+              nullable: true,
+              precision: decimalPrecision,
+              inputMode: inputMode
+            }"
             [placeholder]="placeholder"
             [formControlName]="controlName$"
             [required]="bRequired$"
             [formControl]="fieldControl"
             [attr.data-test-id]="testId"
             (blur)="fieldOnBlur($event)"
+            [readonly]="bReadonly$"
           />
         </div>
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>

packages/angular-sdk-components/src/lib/_components/field/currency/currency.component.ts

@@ -4,7 +4,7 @@ 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 { NgxCurrencyDirective, NgxCurrencyInputMode } from 'ngx-currency';
 import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/angular-pconnect';
 import { Utils } from '../../../_helpers/utils';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
@@ -15,6 +15,7 @@ import { PConnFieldProps } from '../../../_types/PConnProps.interface';
 interface CurrrencyProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Currency here
   currencyISOCode?: string;
+  allowDecimals: boolean;
 }
 
 @Component({
@@ -52,6 +53,8 @@ export class CurrencyComponent implements OnInit, OnDestroy {
   currSym: string;
   currSep: string;
   currDec: string;
+  inputMode: any;
+  decimalPrecision: number | undefined;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -116,6 +119,7 @@ export class CurrencyComponent 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') {
@@ -163,6 +167,8 @@ export class CurrencyComponent implements OnInit, OnDestroy {
       this.currencyISOCode = this.configProps$.currencyISOCode;
     }
 
+    this.decimalPrecision = this.configProps$?.allowDecimals ? 2 : 0;
+
     this.componentReference = this.pConn$.getStateProps().value;
 
     // trigger display of error message with field control

packages/angular-sdk-components/src/lib/_components/field/date-time/date-time.component.html

@@ -13,11 +13,11 @@
           [placeholder]="placeholder"
           [formControl]="fieldControl"
           (blur)="fieldOnBlur($event)"
-          (dateTimeChange)="fieldOnBlur($event)"
+          (dateTimeChange)="fieldOnDateChange($event)"
           [value]="value$"
           [required]="bRequired$"
         />
-        <mat-datepicker-toggle matSuffix [for]="$any(dtPicker)" [owlDateTimeTrigger]="dtPicker"></mat-datepicker-toggle>
+        <mat-datepicker-toggle matSuffix [owlDateTimeTrigger]="dtPicker"></mat-datepicker-toggle>
         <owl-date-time #dtPicker></owl-date-time>
         <mat-error *ngIf="fieldControl?.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>

packages/angular-sdk-components/src/lib/_components/field/date-time/date-time.component.ts

@@ -168,6 +168,15 @@ export class DateTimeComponent 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