@pega/angular-sdk-overrides 25.1.10 → 25.1.12

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

@@ -12,7 +12,9 @@
     <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>
+          <label class="mat-form-field-label psdk-label-readonly" [ngClass]="{ 'label-required': bRequired$ && selectionMode === 'multi' }">{{
+            label$
+          }}</label>
         </span>
       </div>
       <div *ngIf="selectionMode === 'multi'; else single">
@@ -38,11 +40,11 @@
           [formControl]="fieldControl"
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
-          >{{ caption$ }}</mat-checkbox
+          ><span [ngClass]="{ 'label-required': bRequired$ }">{{ caption$ }}</span></mat-checkbox
         >
         <p *ngIf="helperText">{{ helperText }}</p>
       </ng-template>
-      <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
+      <mat-error *ngIf="fieldControl.invalid && (fieldControl.touched || fieldControl.dirty)">{{ getErrorMessage() }}</mat-error>
     </div>
   </div>
 </ng-template>

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

@@ -34,3 +34,9 @@ mat-checkbox {
 .mat-mdc-option {
   margin-left: -16px;
 }
+
+.label-required::after {
+  display: inline;
+  content: ' *';
+  vertical-align: top;
+}

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

@@ -18,7 +18,7 @@
         />
         <mat-datepicker-toggle matSuffix [owlDateTimeTrigger]="dtPicker"></mat-datepicker-toggle>
         <owl-date-time #dtPicker [disabled]="bDisabled$" [scrollStrategy]="scrollStrategy"></owl-date-time>
-        <mat-error *ngIf="fieldControl?.invalid">{{ getErrorMessage() }}</mat-error>
+        <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>
   </div>

package/lib/field/location/location.component.html

@@ -9,6 +9,7 @@
       [formControl]="fieldControl"
       [required]="bRequired$"
       [matAutocomplete]="auto"
+      [readonly]="bReadonly$"
       [attr.data-test-id]="testId"
       (blur)="fieldOnBlur()"
     />

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

@@ -2,7 +2,7 @@
   <div *ngIf="!bShowConfirm">
     <div *ngIf="!todo_showTodo$">
       <h2 *ngIf="!isMultiStep">{{ containerName$ }}</h2>
-      <div *ngIf="banners?.length">
+      <div *ngIf="banners.length">
         <component-mapper name="AlertBanner" [props]="{ banners }"></component-mapper>
       </div>
     </div>

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

@@ -11,9 +11,8 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { FlowContainerBaseComponent } from '@pega/angular-sdk-components';
 
 /**
- * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
- * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
- * is totally at your own risk.
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
  */
 
 interface FlowContainerProps {
@@ -66,7 +65,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
   localizedVal: any;
   localeCategory = 'Messages';
   localeReference: any;
-  banners: any[];
+  banners: any[] = [];
   // itemKey: string = "";   // JA - this is what Nebula/Constellation uses to pass to finishAssignment, navigateToStep
 
   pConnectOfActiveContainerItem;
@@ -547,7 +546,11 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
       const oWorkItem = configObject.getPConnect();
       const oWorkData: any = oWorkItem.getDataObject();
 
-      this.containerName$ = this.localizedVal(this.getActiveViewLabel() || oWorkData.caseInfo.assignments?.[0].name, undefined, this.localeReference);
+      this.containerName$ = this.localizedVal(
+        this.getActiveViewLabel() || oWorkData.caseInfo.assignments?.[0]?.name,
+        undefined,
+        this.localeReference
+      );
     });
   }
 

package/lib/infra/Containers/flow-container/helpers.ts

@@ -33,7 +33,7 @@ export function hasAssignments(pConnect) {
   const assignments = pConnect.getValue(CASE_INFO.D_CASE_ASSIGNMENTS_RESULTS);
   const childCasesAssignments = getChildCaseAssignments(pConnect);
 
-  return assignments || childCasesAssignments?.length || isCaseWideLocalAction(pConnect);
+  return assignments?.length || childCasesAssignments?.length || isCaseWideLocalAction(pConnect);
 }
 
 export const showBanner = getPConnect => {

package/lib/infra/Containers/hybrid-view-container/hybrid-view-container.component.ts

@@ -3,9 +3,8 @@ import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 
 /**
- * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
- * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
- * is totally at your own risk.
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
  */
 
 // Right this is a skeleton, as Hybrid ViewContainer hasn't been implemented

package/lib/infra/Containers/modal-view-container/modal-view-container.component.ts

@@ -9,9 +9,8 @@ import { getBanners } from '@pega/angular-sdk-components';
 import { ReferenceComponent } from '@pega/angular-sdk-components';
 
 /**
- * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
- * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
- * is totally at your own risk.
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
  */
 
 @Component({

package/lib/infra/Containers/preview-view-container/preview-view-container.component.ts

@@ -1,9 +1,8 @@
 import { Component, OnInit, Input } from '@angular/core';
 
 /**
- * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
- * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
- * is totally at your own risk.
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
  */
 
 // Right this is a skeleton, as Preview hasn't been implemented

package/lib/infra/Containers/view-container/view-container.component.ts

@@ -8,9 +8,8 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { configureBrowserBookmark } from './helper';
 
 /**
- * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
- * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
- * is totally at your own risk.
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
  */
 
 interface ViewContainerProps {

package/lib/infra/assignment/assignment.component.ts

@@ -225,7 +225,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
       // this.containerName$ = oWorkMeta["name"];
 
       if (oWorkData.caseInfo && oWorkData.caseInfo.assignments !== null) {
-        this.containerName$ = oWorkData.caseInfo.assignments?.[0].name;
+        this.containerName$ = oWorkData.caseInfo.assignments?.[0]?.name;
 
         // get caseInfo
         const oCaseInfo = oData.caseInfo;

package/lib/infra/defer-load/defer-load.component.ts

@@ -6,9 +6,8 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 
 /**
- * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
- * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
- * is totally at your own risk.
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
  */
 
 @Component({

package/lib/infra/reference/reference.component.ts

@@ -1,9 +1,8 @@
 import { Component } from '@angular/core';
 
 /**
- * WARNING: It is not expected that this file should be modified.  It is part of infrastructure code that works with
- * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
- * is totally at your own risk.
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
  */
 
 @Component({

package/lib/infra/root-container/root-container.component.ts

@@ -11,9 +11,8 @@ import { ModalViewContainerComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 
 /**
- * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
- * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
- * is totally at your own risk.
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
  */
 
 const options = { context: 'app' };

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

@@ -24,9 +24,8 @@ function isDetailsTemplate(template) {
 }
 
 /**
- * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
- * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
- * is totally at your own risk.
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
  */
 
 /**

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

@@ -28,6 +28,6 @@
         </div>
       </div>
     </div>
-    <button *ngIf="allowAdd" mat-button color="primary" style="font-size: 16px" (click)="addFieldGroupItem()">{{ getAddBtnLabel() }}</button>
+    <button *ngIf="allowAdd()" mat-button color="primary" style="font-size: 16px" (click)="addFieldGroupItem()">{{ getAddBtnLabel() }}</button>
   </ng-template>
 </div>

package/lib/template/field-group-template/field-group-template.component.scss

@@ -1,5 +1,6 @@
 .psdk-utility-card-action-svg-icon {
   width: 1.4rem;
+  filter: var(--app-primary-color-filter);
 }
 
 .header-div {

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, forwardRef, OnDestroy, OnChanges, signal } from '@angular/core';
+import { Component, OnInit, Input, forwardRef, OnDestroy, OnChanges, signal, effect } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -48,32 +48,26 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
   referenceListLength = signal<number | null>(null);
   fieldHeader: any;
 
-  allowAdd = true;
-  allowEdit = true;
+  allowAdd = signal(true);
+  allowEdit = signal(true);
   allowDelete = true;
 
   constructor(
     private angularPConnect: AngularPConnectService,
     private utils: Utils
-  ) {}
+  ) {
+    effect(() => {
+      const allowAdd = this.allowAdd();
+      const allowEdit = this.allowEdit();
+      const referenceList = this.configProps$?.referenceList;
+      if (referenceList?.length === 0 && (allowAdd || allowEdit)) {
+        this.pConn$.getListActions().insert({ classID: this.contextClass }, referenceList.length);
+      }
+    });
+  }
 
   ngOnInit(): void {
     this.menuIconOverride$ = this.utils.getImageSrc('trash', this.utils.getSDKStaticContentUrl());
-
-    const { allowActions, allowTableEdit, referenceList } = this.configProps$;
-
-    if (allowActions && Object.keys(allowActions).length > 0) {
-      this.allowAdd = allowActions.allowAdd ?? allowTableEdit ?? true;
-      this.allowEdit = allowActions.allowEdit ?? true;
-      this.allowDelete = allowActions.allowDelete ?? allowTableEdit ?? true;
-    } else {
-      this.allowAdd = allowTableEdit ?? true;
-      this.allowDelete = allowTableEdit ?? true;
-    }
-
-    if (referenceList?.length === 0 && (this.allowAdd || this.allowEdit)) {
-      this.pConn$.getListActions().insert({ classID: this.contextClass }, referenceList.length);
-    }
   }
 
   ngOnDestroy(): void {
@@ -121,6 +115,17 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
     const resolvedList = getReferenceList(this.pConn$);
     this.pConn$.setReferenceList(resolvedList);
 
+    const { allowActions, allowTableEdit } = this.configProps$;
+
+    if (allowActions && Object.keys(allowActions).length > 0) {
+      this.allowAdd.set(allowActions.allowAdd ?? allowTableEdit ?? true);
+      this.allowEdit.set(allowActions.allowEdit ?? true);
+      this.allowDelete = allowActions.allowDelete ?? allowTableEdit ?? true;
+    } else {
+      this.allowAdd.set(allowTableEdit ?? true);
+      this.allowDelete = allowTableEdit ?? true;
+    }
+
     if (this.readonlyMode) {
       this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
     }

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

@@ -176,7 +176,7 @@
           <tr mat-header-row *matHeaderRowDef="displayedColumns$"></tr>
           <tr mat-row *matRowDef="let row; columns: displayedColumns$"></tr>
         </table>
-        <div *ngIf="repeatListData?.length === 0">
+        <div *ngIf="repeatListData.length === 0">
           <table id="list-view" mat-table [dataSource]="[]">
             <!-- Define columns for headers -->
             <ng-container *ngFor="let col of displayedColumns$" [matColumnDef]="col">
@@ -189,7 +189,7 @@
             <tr mat-header-row *matHeaderRowDef="displayedColumns$"></tr>
           </table>
         </div>
-        <div class="psdk-no-records" *ngIf="repeatListData?.length === 0">
+        <div class="psdk-no-records" *ngIf="repeatListData.length === 0">
           {{ utils.getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.') }}
         </div>
       </div>

package/lib/template/multi-reference-readonly/multi-reference-readonly.component.html

@@ -1,4 +1,4 @@
 <div>
   <h3 style="font-weight: bold; margin: 0">{{ label }}</h3>
-  <component-mapper name="SimpleTable" [props]="{ pConn$ }"></component-mapper>
+  <component-mapper name="SimpleTable" [props]="{ pConn$: newPConn.getPConnect() }"></component-mapper>
 </div>

package/lib/template/multi-reference-readonly/multi-reference-readonly.component.ts

@@ -4,6 +4,8 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 
 interface MultiReferenceReadOnlyProps {
+  readonlyContextList: string;
+  referenceList: string;
   label: string;
   hideLabel: boolean;
 }
@@ -21,6 +23,7 @@ export class MultiReferenceReadonlyComponent implements OnInit, OnDestroy {
   angularPConnectData: AngularPConnectData = {};
   configProps$: MultiReferenceReadOnlyProps;
   label: string;
+  newPConn: any;
 
   constructor(private angularPConnect: AngularPConnectService) {}
 
@@ -49,5 +52,29 @@ export class MultiReferenceReadonlyComponent implements OnInit, OnDestroy {
   updateSelf() {
     this.configProps$ = this.pConn$.getConfigProps() as MultiReferenceReadOnlyProps;
     this.label = this.configProps$.label;
+
+    const config = (this.pConn$.getMetadata() as any)?.config;
+    const { referenceList, readonlyContextList } = config;
+    let readonlyContextObject;
+    if (!PCore.getAnnotationUtils().isProperty(referenceList)) {
+      readonlyContextObject = {
+        referenceList: readonlyContextList
+      };
+    }
+    const hideLabel = this.configProps$.hideLabel ?? false;
+    this.newPConn = this.pConn$.createComponent(
+      {
+        type: 'SimpleTable',
+        config: {
+          ...config,
+          ...readonlyContextObject,
+          label: this.label,
+          hideLabel
+        }
+      },
+      '',
+      0,
+      {}
+    );
   }
 }

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

@@ -46,7 +46,7 @@ export const getContext = thePConn => {
   const pageReference = thePConn.getPageReference();
   const { readonlyContextList, referenceList = readonlyContextList } = thePConn.getStateProps()?.config || thePConn.getStateProps();
 
-  const pageReferenceForRows = referenceList.startsWith('.') ? `${pageReference}.${referenceList.substring(1)}` : referenceList;
+  const pageReferenceForRows = referenceList?.startsWith('.') ? `${pageReference}.${referenceList?.substring(1)}` : referenceList;
   const viewName = thePConn.viewName;
 
   // removing "caseInfo.content" prefix to avoid setting it as a target while preparing pageInstructions

package/package.json

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