@pega/angular-sdk-overrides 0.25.14 → 0.26.1

package/lib/field/selectable-card/selectable-card.component.html

@@ -17,6 +17,7 @@
           [checked]="cardContent.commonCardProps.selected"
           [disabled]="disabled || readOnly"
           [attr.data-test-id]="testId + ':' + cardContent.commonCardProps.label"
+          (click)="$event.stopPropagation()"
           (change)="handleChangeMultiMode($event, cardContent.commonCardProps)"
           (blur)="fieldOnBlur()"
           >{{ cardContent.commonCardProps.label }}</mat-checkbox

package/lib/field/selectable-card/selectable-card.component.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { MatCardModule } from '@angular/material/card';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import { deleteInstruction, insertInstruction } from '@pega/angular-sdk-components';
+import { deleteInstruction, insertInstruction, updateNewInstructions } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 import { FieldBase } from '@pega/angular-sdk-components';
@@ -93,21 +93,9 @@ export class SelectableCardComponent extends FieldBase implements OnInit {
     const imagePosition = this.configProps$.imagePosition;
 
     // dynamic styling based on image position and readOnly option
-    let imageWidth = '100%';
-    this.cardStyle = { display: 'flex', flexDirection: 'column', height: '100%' };
-    if (imagePosition && imagePosition !== 'block-start') {
-      imageWidth = '30%';
-      if (imagePosition === 'inline-start') {
-        this.cardStyle = { display: 'flex', flexDirection: 'row', alignItems: this.readOnly ? 'center' : '' };
-      } else if (imagePosition === 'inline-end') {
-        this.cardStyle = {
-          display: 'flex',
-          flexDirection: 'row-reverse',
-          justifyContent: this.readOnly ? 'space-between' : '',
-          alignItems: this.readOnly ? 'center' : ''
-        };
-      }
-    }
+    const { imageWidth, cardStyle } = this.resolveImageLayout(imagePosition);
+    this.cardStyle = cardStyle;
+
     if (this.type === 'radio') {
       const stateProps = this.pConn$.getStateProps();
       image = {
@@ -145,6 +133,12 @@ export class SelectableCardComponent extends FieldBase implements OnInit {
       this.selectedvalues = this.configProps$.readonlyContextList;
       this.showNoValue = this.readOnly && this.selectedvalues?.length === 0; // not used
       this.primaryField = this.configProps$.primaryField;
+
+      // Set reference list so getListActions() uses the correct path on every re-render
+      if (this.selectionList && !this.readOnly) {
+        this.pConn$.setReferenceList(this.selectionList);
+        updateNewInstructions(this.pConn$, this.selectionList);
+      }
     }
 
     this.commonProps = { hideFieldLabels, datasource, additionalProps, image, recordKey, cardLabel, radioBtnValue: this.radioBtnValue ?? '' };
@@ -182,6 +176,27 @@ export class SelectableCardComponent extends FieldBase implements OnInit {
     });
   }
 
+  private resolveImageLayout(imagePosition: string | undefined): { imageWidth: string; cardStyle: object } {
+    if (!imagePosition || imagePosition === 'block-start') {
+      return { imageWidth: '100%', cardStyle: { display: 'flex', flexDirection: 'column', height: '100%' } };
+    }
+    if (imagePosition === 'inline-start') {
+      return { imageWidth: '30%', cardStyle: { display: 'flex', flexDirection: 'row', alignItems: this.readOnly ? 'center' : '' } };
+    }
+    if (imagePosition === 'inline-end') {
+      return {
+        imageWidth: '30%',
+        cardStyle: {
+          display: 'flex',
+          flexDirection: 'row-reverse',
+          justifyContent: this.readOnly ? 'space-between' : '',
+          alignItems: this.readOnly ? 'center' : ''
+        }
+      };
+    }
+    return { imageWidth: '30%', cardStyle: { display: 'flex', flexDirection: 'column', height: '100%' } };
+  }
+
   fieldOnChange(value: any) {
     handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
   }

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

@@ -146,7 +146,6 @@ export class ViewComponent implements OnInit, OnDestroy, OnChanges {
 
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as ViewProps;
     this.inheritedProps$ = this.pConn$.getInheritedProps();
-
     // NOTE: this.configProps$.visibility'] is used in view.component.ts such that
     //  the View will only be rendered when this.configProps$.visibility'] is false.
     //  It WILL render if true or undefined.
@@ -155,7 +154,10 @@ export class ViewComponent implements OnInit, OnDestroy, OnChanges {
     this.title$ = this.configProps$.title || '';
     // label & showLabel within inheritedProps takes precedence over configProps
     this.label$ = this.inheritedProps$.label || this.configProps$.label || '';
-    this.showLabel$ = this.inheritedProps$.showLabel || this.configProps$.showLabel || isDetailsTemplate(this.templateName$);
+    this.showLabel$ =
+      this.inheritedProps$.showLabel !== undefined
+        ? this.inheritedProps$.showLabel
+        : this.configProps$.showLabel || isDetailsTemplate(this.templateName$);
     this.arChildren$ = this.pConn$.getChildren();
     this.visibility$ = this.configProps$.visibility ?? this.visibility$;
 

package/lib/template/base/details-template-base.ts

@@ -1,9 +1,11 @@
 import { Directive, OnInit, OnDestroy, Injector, Input } from '@angular/core';
+import { FormGroup } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 
 @Directive()
 export class DetailsTemplateBase implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
 
   // For interaction with AngularPConnect
   protected angularPConnectData: AngularPConnectData = {};
@@ -64,4 +66,47 @@ export class DetailsTemplateBase implements OnInit, OnDestroy {
       return pConnect.resolveConfigProps(pConnect.getRawMetadata());
     });
   }
+
+  processDetailFields(kid: any): any[] {
+    const pKid = kid.getPConnect();
+    const fields = pKid.getChildren();
+    const processedFields: any[] = [];
+
+    fields?.forEach(field => {
+      const thePConn = field.getPConnect();
+      const theCompType = thePConn.getComponentName().toLowerCase();
+      if (theCompType === 'reference' || theCompType === 'group') {
+        const configProps = thePConn.getConfigProps();
+        configProps.readOnly = true;
+        configProps.displayMode = 'DISPLAY_ONLY';
+        const propToUse = { ...thePConn.getInheritedProps() };
+        configProps.label = propToUse?.label;
+        const options = {
+          context: thePConn.getContextName(),
+          pageReference: thePConn.getPageReference(),
+          referenceList: thePConn.getReferenceList()
+        };
+        const viewContConfig = {
+          meta: {
+            ...thePConn.getMetadata(),
+            type: theCompType,
+            config: configProps
+          },
+          options
+        };
+        const theViewCont = PCore.createPConnect(viewContConfig);
+        processedFields.push({
+          type: theCompType,
+          pConn: theViewCont?.getPConnect()
+        });
+      } else {
+        processedFields.push({
+          type: theCompType,
+          config: thePConn.getConfigProps()
+        });
+      }
+    });
+
+    return processedFields;
+  }
 }

package/lib/template/data-reference/search-form/search-form.component.ts

@@ -37,6 +37,7 @@ export class SearchFormComponent implements OnInit, OnChanges {
   @Input() pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
   @Input() searchSelectCacheKey;
+  @Input() type: string;
 
   configProps$: any;
   isInitialized = false;
@@ -58,7 +59,12 @@ export class SearchFormComponent implements OnInit, OnChanges {
     this.isInitialized = true;
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
     this.propsToUse = { ...this.pConn$.getInheritedProps() };
-    this.deferLoadedTabs = this.pConn$.getChildren()[2];
+    // When called from ObjectReference, pConn$ itself acts as deferLoadedTabs (no children[2])
+    if (this.type === 'ObjectReference') {
+      this.deferLoadedTabs = { getPConnect: () => this.pConn$ };
+    } else {
+      this.deferLoadedTabs = this.pConn$.getChildren()[2];
+    }
     const cache: any = PCore.getNavigationUtils().getComponentCache(this.searchSelectCacheKey) ?? {};
     const { selectedCategory } = cache;
     const firstTabId = getFirstVisibleTabId(this.deferLoadedTabs, selectedCategory);

package/lib/template/details/details.component.ts

@@ -35,45 +35,7 @@ export class DetailsComponent extends DetailsTemplateBase {
 
     const kids = this.pConn$.getChildren() as any[];
     for (const kid of kids) {
-      this.arFields$ = [];
-      const pKid = kid.getPConnect();
-      const fields = pKid.getChildren();
-      fields?.forEach(field => {
-        const thePConn = field.getPConnect();
-        const theCompType = thePConn.getComponentName().toLowerCase();
-        if (theCompType === 'reference' || theCompType === 'group') {
-          const configProps = thePConn.getConfigProps();
-          configProps.readOnly = true;
-          configProps.displayMode = 'DISPLAY_ONLY';
-          const propToUse = { ...thePConn.getInheritedProps() };
-          configProps.label = propToUse?.label;
-          const options = {
-            context: thePConn.getContextName(),
-            pageReference: thePConn.getPageReference(),
-            referenceList: thePConn.getReferenceList()
-          };
-          const viewContConfig = {
-            meta: {
-              ...thePConn.getMetadata(),
-              type: theCompType,
-              config: configProps
-            },
-            options
-          };
-          const theViewCont = PCore.createPConnect(viewContConfig);
-          const data = {
-            type: theCompType,
-            pConn: theViewCont?.getPConnect()
-          };
-          this.arFields$.push(data);
-        } else {
-          const data = {
-            type: theCompType,
-            config: thePConn.getConfigProps()
-          };
-          this.arFields$.push(data);
-        }
-      });
+      this.arFields$ = this.processDetailFields(kid);
     }
   }
 }

package/lib/template/details-narrow-wide/details-narrow-wide.component.ts

@@ -36,12 +36,10 @@ export class DetailsNarrowWideComponent extends DetailsTemplateBase {
 
     const kids = this.pConn$.getChildren() as any[];
     for (const kid of kids) {
-      const pKid = kid.getPConnect();
-      const pKidData = pKid.resolveConfigProps(pKid.getRawMetadata());
       if (kids.indexOf(kid) == 0) {
-        this.arFields$ = pKidData.children;
+        this.arFields$ = this.processDetailFields(kid);
       } else {
-        this.arFields2$ = pKidData.children;
+        this.arFields2$ = this.processDetailFields(kid);
       }
     }
   }

package/lib/template/details-one-column/details-one-column.component.ts

@@ -39,10 +39,8 @@ export class DetailsOneColumnComponent extends DetailsTemplateBase {
 
     const kids = this.pConn$.getChildren() as any[];
     for (const kid of kids) {
-      const pKid = kid.getPConnect();
-      const pKidData = pKid.resolveConfigProps(pKid.getRawMetadata());
       if (kids.indexOf(kid) == 0) {
-        this.arFields$ = pKidData.children;
+        this.arFields$ = this.processDetailFields(kid);
       }
     }
   }

package/lib/template/details-three-column/details-three-column.component.ts

@@ -43,14 +43,12 @@ export class DetailsThreeColumnComponent extends DetailsTemplateBase {
 
     const kids = this.pConn$.getChildren() as any[];
     for (const kid of kids) {
-      const pKid = kid.getPConnect();
-      const pKidData = pKid.resolveConfigProps(pKid.getRawMetadata());
       if (kids.indexOf(kid) == 0) {
-        this.arFields$ = pKidData.children;
+        this.arFields$ = this.processDetailFields(kid);
       } else if (kids.indexOf(kid) == 1) {
-        this.arFields2$ = pKidData.children;
+        this.arFields2$ = this.processDetailFields(kid);
       } else {
-        this.arFields3$ = pKidData.children;
+        this.arFields3$ = this.processDetailFields(kid);
       }
     }
   }

package/lib/template/details-two-column/details-two-column.component.ts

@@ -43,12 +43,10 @@ export class DetailsTwoColumnComponent extends DetailsTemplateBase {
 
     const kids = this.pConn$.getChildren() as any[];
     for (const kid of kids) {
-      const pKid = kid.getPConnect();
-      const pKidData = pKid.resolveConfigProps(pKid.getRawMetadata());
       if (kids.indexOf(kid) == 0) {
-        this.arFields$ = pKidData.children;
+        this.arFields$ = this.processDetailFields(kid);
       } else {
-        this.arFields2$ = pKidData.children;
+        this.arFields2$ = this.processDetailFields(kid);
       }
     }
   }

package/lib/template/details-wide-narrow/details-wide-narrow.component.ts

@@ -40,12 +40,10 @@ export class DetailsWideNarrowComponent extends DetailsTemplateBase {
 
     const kids = this.pConn$.getChildren() as any[];
     for (const kid of kids) {
-      const pKid = kid.getPConnect();
-      const pKidData = pKid.resolveConfigProps(pKid.getRawMetadata());
       if (kids.indexOf(kid) == 0) {
-        this.arFields$ = pKidData.children;
+        this.arFields$ = this.processDetailFields(kid);
       } else {
-        this.arFields2$ = pKidData.children;
+        this.arFields2$ = this.processDetailFields(kid);
       }
     }
   }

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

@@ -43,6 +43,7 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
   readonlyMode: boolean;
   contextClass: any;
   heading: any;
+  headingPath: string[] = [];
   children: any;
   menuIconOverride$: any;
   referenceListLength = signal<number | null>(null);
@@ -150,11 +151,24 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
     return `${heading} ${index + 1}`;
   };
 
-  getDynamicHeader = (item, index) => {
-    if (this.heading && item[this.heading.substring(1)]) {
-      return item[this.heading.substring(1)];
+  getDynamicHeader = (item: Record<string, unknown>, index: number): string => {
+    if (this.heading) {
+      let value: any = item;
+      this.headingPath = this.heading.substring(1).split('.');
+
+      for (const key of this.headingPath) {
+        if (value === null || typeof value !== 'object' || !(key in value)) {
+          value = undefined;
+          break;
+        }
+        value = Reflect.get(value, key);
+      }
+
+      if (value !== undefined && value !== null && value !== '') {
+        return value.toString();
+      }
     }
-    return `Row ${index + 1}`;
+    return `${PCore.getLocaleUtils().getLocaleValue('Row', 'SimpleTable')} ${index + 1}`;
   };
 
   addFieldGroupItem() {

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

@@ -82,6 +82,11 @@ export class SimpleTableComponent implements OnInit, OnDestroy {
     // moved this from ngOnInit() and call this from there instead...
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as SimpleTableProps;
 
+    // Reset rendering state on every update
+    this.fieldGroupProps = null;
+    this.listViewProps = null;
+    this.refToPConnect = null;
+
     if (this.configProps$.visibility != null) {
       this.bVisible$ = this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
     }
@@ -95,6 +100,7 @@ export class SimpleTableComponent implements OnInit, OnDestroy {
     }
     if (multiRecordDisplayAs === 'fieldGroup') {
       this.fieldGroupProps = { ...this.configProps$, contextClass };
+      return;
     }
 
     const {

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

@@ -354,8 +354,8 @@ export const filterDataByDate = (item, filterObj) => {
 
 export const filterDataByCommonFields = (item, filterObj) => {
   let bKeep = true;
-  const value = item[filterObj.ref].toLowerCase();
-  const filterValue = filterObj.containsFilterValue.toLowerCase();
+  const value = String(item?.[filterObj.ref] ?? '').toLowerCase();
+  const filterValue = String(filterObj.containsFilterValue ?? '').toLowerCase();
 
   switch (filterObj.containsFilter) {
     case 'contains':

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

@@ -130,6 +130,7 @@ td.mat-mdc-cell:last-child {
   align-items: center;
   height: 100%;
   width: 100%;
+  background-color: var(--app-dialog-background-color);
   position: fixed;
   z-index: 999;
   top: 0px;
@@ -140,10 +141,11 @@ td.mat-mdc-cell:last-child {
   display: table;
   margin: auto;
   min-width: 150px;
-  border: 1px solid var(--app-inverse-form-color);
+  background-color: var(--mat-sys-surface-container);
+  border: 1px solid var(--mat-sys-outline-variant);
   border-radius: 10px;
   padding: 20px;
-  box-shadow: 0 0 10px 3px var(--app-box-shadow-color);
+  box-shadow: 0 0 10px 3px var(--mat-sys-level3);
 }
 
 tr.mat-mdc-row {

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

@@ -92,7 +92,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
 
   bVisible$ = true;
   displayedColumns: string[] = [];
-  rowData: MatTableDataSource<any>;
+  rowData = new MatTableDataSource<any>([]);
   originalData: any[] = [];
   processedFields: any[] = [];
   fieldDefs: any[] = [];
@@ -159,6 +159,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
   referenceListStr: any;
   bUseSeparateViewForEdit: any;
   editView: any;
+  editType: any;
   defaultActionId: any;
   editActionId: any;
   settingsSvgIcon$: string;
@@ -167,7 +168,6 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
   targetClassLabel: string;
   localizedVal = PCore.getLocaleUtils().getLocaleValue;
   localeCategory = 'SimpleTable';
-  editType: any;
   constructor(
     private angularPConnect: AngularPConnectService,
     public utils: Utils,
@@ -391,17 +391,15 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
   }
 
   initializeDefaultPageInstructions() {
-    if (this.isInitialized) {
+    if (this.allowEditingInModal) {
+      this.pConn$.getListActions().initDefaultPageInstructions(
+        this.pConn$.getReferenceList(),
+        this.fieldDefs.filter(item => item.name).map(item => item.name)
+      );
+    } else if (this.isInitialized) {
       this.isInitialized = false;
-      if (this.allowEditingInModal) {
-        this.pConn$.getListActions().initDefaultPageInstructions(
-          this.pConn$.getReferenceList(),
-          this.fieldDefs.filter(item => item.name).map(item => item.name)
-        );
-      } else {
-        // @ts-ignore - An argument for 'propertyNames' was not provided.
-        this.pConn$.getListActions().initDefaultPageInstructions(this.pConn$.getReferenceList());
-      }
+      // @ts-ignore - An argument for 'propertyNames' was not provided.
+      this.pConn$.getListActions().initDefaultPageInstructions(this.pConn$.getReferenceList());
     }
   }
 
@@ -930,7 +928,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     const refKeys: string[] = inColKey.split('.');
     let valBuilder = inRowData;
     for (const key of refKeys) {
-      valBuilder = valBuilder[key];
+      valBuilder = valBuilder[key] ? valBuilder[key] : valBuilder;
     }
     return valBuilder;
   }
@@ -989,16 +987,18 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
 
   editRecord(data, index) {
     if (data) {
+      const viewForEdit = this.bUseSeparateViewForEdit ? this.editView : this.defaultView;
       this.pConn$
         .getActionsApi()
-        // @ts-expect-error
         .openEmbeddedDataModal(
-          this.bUseSeparateViewForEdit ? this.editView : this.defaultView,
+          viewForEdit,
           this.pConn$ as any,
           this.referenceListStr,
           index,
           PCore.getConstants().RESOURCE_STATUS.UPDATE,
-          this.targetClassLabel
+          this.targetClassLabel,
+          this.editType,
+          this.editActionId
         );
     }
   }

package/package.json

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