@pega/angular-sdk-overrides 0.24.3 → 0.24.5

package/lib/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">

package/lib/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() as any).value;

package/lib/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>

package/lib/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 '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
@@ -15,6 +15,7 @@ import { PConnFieldProps } from '@pega/angular-sdk-components';
 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() as any).value;
 
     // trigger display of error message with field control

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

@@ -16,6 +16,7 @@
             decimal: currDec,
             align: 'left',
             nullable: true,
+            precision: decimalPrecision,
             inputMode: inputMode
           }"
           [placeholder]="placeholder"

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

@@ -187,6 +187,7 @@ export class DecimalComponent implements OnInit, OnDestroy {
     } else {
       this.currSym = '';
     }
+    this.decimalPrecision = this.configProps$?.decimalPrecision ?? 2;
 
     this.componentReference = (this.pConn$.getStateProps() as any).value;
   }

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

@@ -20,11 +20,10 @@
       [matAutocomplete]="auto"
       (input)="fieldOnChange($event)"
       [matChipInputFor]="chipGrid"
-      #trigger="matAutocompleteTrigger"
     />
     <mat-autocomplete #auto="matAutocomplete">
-      <mat-option *ngFor="let item of itemsTree" [value]="item.primary" (click)="optionClicked($event, item, trigger)">
-        <mat-checkbox [checked]="item.selected" (click)="optionClicked($event, item, trigger)">
+      <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>

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

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule, MatAutocompleteSelectedEvent, MatAutocompleteTrigger } from '@angular/material/autocomplete';
+import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatOptionModule } from '@angular/material/core';
@@ -273,9 +273,6 @@ export class MultiselectComponent implements OnInit, OnDestroy {
           selectedRows || []
         ).then(res => {
           this.itemsTree = res || [];
-          if (this.trigger) {
-            this.trigger.openPanel();
-          }
         });
       });
     }
@@ -290,14 +287,13 @@ export class MultiselectComponent implements OnInit, OnDestroy {
     this.angularPConnectData.actions?.onChange(this, event);
   }
 
-  optionClicked = (event: Event, data: any, trigger?: MatAutocompleteTrigger): void => {
+  optionClicked = (event: Event, data: any): void => {
     event.stopPropagation();
-    this.toggleSelection(data, trigger);
+    this.toggleSelection(data);
   };
 
-  toggleSelection = (data: any, trigger?: MatAutocompleteTrigger): void => {
+  toggleSelection = (data: any): void => {
     data.selected = !data.selected;
-    this.trigger = trigger;
     this.itemsTree.map((ele: any) => {
       if (ele.id === data.id) {
         ele.selected = data.selected;

package/lib/field/percentage/percentage.component.html

@@ -2,7 +2,7 @@
   <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$">
       <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
         <mat-label>{{ label$ }}</mat-label>
@@ -10,7 +10,16 @@
           type="text"
           matInput
           currencyMask
-          [options]="{ prefix: '', suffix: '%', thousands: currSep, decimal: currDec, align: 'left', nullable: true }"
+          [options]="{
+            prefix: '',
+            suffix: '%',
+            thousands: currSep,
+            decimal: currDec,
+            align: 'left',
+            nullable: true,
+            precision: decimalPrecision,
+            inputMode: inputMode
+          }"
           [placeholder]="placeholder"
           step=".01"
           [formControlName]="controlName$"
@@ -19,6 +28,7 @@
           [attr.data-test-id]="testId"
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
+          [readonly]="bReadonly$"
         />
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>

package/lib/field/percentage/percentage.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 '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
@@ -48,6 +48,8 @@ export class PercentageComponent implements OnInit, OnDestroy {
   placeholder: string;
   currDec: string;
   currSep: string;
+  inputMode: any;
+  decimalPrecision: number | undefined;
   fieldControl = new FormControl<number | null>(null, null);
 
   constructor(
@@ -110,6 +112,7 @@ export class PercentageComponent 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') {
@@ -152,6 +155,8 @@ export class PercentageComponent implements OnInit, OnDestroy {
       this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
     }
 
+    this.decimalPrecision = this.configProps$?.decimalPrecision ?? 2;
+
     this.componentReference = (this.pConn$.getStateProps() as any).value;
 
     // trigger display of error message with field control

package/lib/infra/Containers/flow-container/flow-container.component.html

@@ -17,7 +17,7 @@
           headerText$: todo_headerText$,
           type$: 'TODO',
           context$: todo_context$,
-          itemKey$: itemKey$
+          isConfirm: true
         }"
       ></component-mapper>
     </div>

package/lib/infra/view/view.component.ts

@@ -159,7 +159,7 @@ export class ViewComponent implements OnInit, OnDestroy, OnChanges {
      * The resolution lies in transferring this responsibility to the Reference component, eliminating the need for this code when Reference
      * component is able to handle it.
      */
-    if (this.pConn$.getPageReference().length > 'caseInfo.content'.length) {
+    if (!this.configProps$.visibility && this.pConn$.getPageReference().length > 'caseInfo.content'.length) {
       this.visibility$ = evaluateVisibility(this.pConn$);
     }
 

package/lib/template/list-view/list-view.component.ts

@@ -172,7 +172,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
     /** If compositeKeys is defined, use dynamic value, else fallback to pyID or pyGUID. */
     this.compositeKeys = this.configProps$?.compositeKeys;
     this.rowID = this.compositeKeys && this.compositeKeys?.length === 1 ? this.compositeKeys[0] : defRowID;
-    this.bShowSearch$ = this.utils.getBooleanValue(this.configProps$.globalSearch ? this.configProps$.globalSearch : this.payload.globalSearch);
+    this.bShowSearch$ = this.utils.getBooleanValue(this.configProps$?.globalSearch ? this.configProps$.globalSearch : this.payload?.globalSearch);
     this.bColumnReorder$ = this.utils.getBooleanValue(this.configProps$.reorderFields);
     this.bGrouping$ = this.utils.getBooleanValue(this.configProps$.grouping);
     this.showDynamicFields = this.configProps$?.showDynamicFields;

package/lib/template/simple-table-manual/simple-table-manual.component.ts

@@ -960,9 +960,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
       this.rawFields?.forEach(item => {
         const referenceListData = getReferenceList(this.pConn$);
         const isDatapage = referenceListData.startsWith('D_');
-        const pageReferenceValue = isDatapage
-          ? `${referenceListData}[${index}]`
-          : `${this.pConn$.getPageReference()}${referenceListData.substring(referenceListData.lastIndexOf('.'))}[${index}]`;
+        const pageReferenceValue = isDatapage ? `${referenceListData}[${index}]` : `${this.pConn$.getPageReference()}${referenceListData}[${index}]`;
         const config = {
           meta: item,
           options: {

package/lib/widget/todo/todo.component.html

@@ -26,7 +26,7 @@
             </div>
           </div>
         </div>
-        <div class="psdk-todo-assignment-action">
+        <div class="psdk-todo-assignment-action" *ngIf="!isConfirm || canPerform">
           <button mat-flat-button color="primary" (click)="clickGo(assignment)">{{ localizedVal('Go', localeCategory) }}</button>
         </div>
       </div>

package/lib/widget/todo/todo.component.ts

@@ -48,6 +48,7 @@ export class TodoComponent implements OnInit, OnDestroy, OnChanges {
   localeCategory = 'Todo';
   showlessLocalizedValue = this.localizedVal('show_less', 'CosmosFields');
   showMoreLocalizedValue = this.localizedVal('show_more', 'CosmosFields');
+  canPerform: boolean;
 
   constructor(
     private psService: ProgressSpinnerService,
@@ -149,6 +150,8 @@ export class TodoComponent implements OnInit, OnDestroy, OnChanges {
       }
     }
 
+    this.canPerform = this.arAssignments$?.[0]?.canPerform === 'true' || this.arAssignments$?.[0]?.canPerform === true;
+
     this.currentUser$ = PCore.getEnvironmentInfo().getOperatorName();
     this.currentUserInitials$ = this.utils.getInitials(this.currentUser$);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/angular-sdk-overrides",
-  "version": "0.24.3",
+  "version": "0.24.5",
   "description": "Angular SDK - Code for overriding components",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"