@pega/angular-sdk-overrides 0.25.15 → 0.26.2

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

@@ -75,7 +75,7 @@ export class DetailsTemplateBase implements OnInit, OnDestroy {
     fields?.forEach(field => {
       const thePConn = field.getPConnect();
       const theCompType = thePConn.getComponentName().toLowerCase();
-      if (theCompType === 'reference' || theCompType === 'group') {
+      if (theCompType === 'reference' || theCompType === 'group' || theCompType === 'objectreference') {
         const configProps = thePConn.getConfigProps();
         configProps.readOnly = true;
         configProps.displayMode = 'DISPLAY_ONLY';
@@ -97,6 +97,7 @@ export class DetailsTemplateBase implements OnInit, OnDestroy {
         const theViewCont = PCore.createPConnect(viewContConfig);
         processedFields.push({
           type: theCompType,
+          config: thePConn.getConfigProps(),
           pConn: theViewCont?.getPConnect()
         });
       } else {

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

@@ -58,7 +58,6 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
   dataRelationshipContext: any;
   imagePosition: any;
   showImageDescription: any;
-  private isUpdatingFromDataCallback = false;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -70,30 +69,7 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
     this.children = this.pConn$.getChildren();
     this.updateSelf();
-  }
-
-  ngOnDestroy(): void {
-    if (this.angularPConnectData.unsubscribeFn) {
-      this.angularPConnectData.unsubscribeFn();
-    }
-  }
-
-  // Callback passed when subscribing to store change
-  onStateChange() {
-    // Should always check the bridge to see if the component should
-    // update itself (re-render)
-    const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
-
-    // ONLY call updateSelf when the component should update
-    if (bUpdateSelf) {
-      this.updateSelf();
-    }
-  }
 
-  getData() {
-    if (this.isUpdatingFromDataCallback) {
-      return;
-    }
     if (
       this.rawViewMetadata.config?.parameters &&
       !this.isDDSourceDeferred &&
@@ -118,9 +94,7 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
                     }))
                     .filter(item => item.key); // Filtering out undefined entries
               this.dropDownDataSource = ddDataSource;
-              this.isUpdatingFromDataCallback = true;
               this.updateSelf();
-              this.isUpdatingFromDataCallback = false;
             } else {
               const ddDataSource: any = [];
               this.dropDownDataSource = ddDataSource;
@@ -136,6 +110,24 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
     }
   }
 
+  ngOnDestroy(): void {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  // Callback passed when subscribing to store change
+  onStateChange() {
+    // Should always check the bridge to see if the component should
+    // update itself (re-render)
+    const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
+
+    // ONLY call updateSelf when the component should update
+    if (bUpdateSelf) {
+      this.updateSelf();
+    }
+  }
+
   updateSelf() {
     // Update properties based on configProps
     const theConfigProps = this.pConn$.getConfigProps();
@@ -194,7 +186,6 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
 
     this.generateChildrenToRender();
     this.displayChild = !(this.displaySingleRef || this.displayMultiRef);
-    this.getData();
   }
 
   updatePropertiesFromProps(theConfigProps) {

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/default-form/default-form.component.html

@@ -1,6 +1,22 @@
-<div *ngIf="instructions" class="psdk-default-form-instruction-text">
-  <div key="instructions" id="instruction-text" [innerHTML]="instructions"></div>
-</div>
+<ng-container *ngIf="instructions && bShowInstructions$">
+  <component-mapper
+    *ngIf="instructionBannerVariant$; else instructionText"
+    name="Alert"
+    [props]="{
+      message: instructions,
+      messageIsHtml: true,
+      severity: instructionBannerVariant$,
+      hideClose: !bDismissInstructions$
+    }"
+    [parent]="this"
+    [outputEvents]="{ onClose: dismissInstructions }"
+  ></component-mapper>
+  <ng-template #instructionText>
+    <div class="psdk-default-form-instruction-text">
+      <div key="instructions" id="instruction-text" [innerHTML]="instructions"></div>
+    </div>
+  </ng-template>
+</ng-container>
 <div [className]="divClass$">
   <div *ngFor="let kid of arChildren$" [ngClass]="{ 'grid-column': kid.getPConnect().getComponentName() === 'reference' }">
     <component-mapper

package/lib/template/default-form/default-form.component.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
-import { TemplateUtils } from '@pega/angular-sdk-components';
+import { InstructionObject, TemplateUtils } from '@pega/angular-sdk-components';
 import { FormTemplateBase } from '@pega/angular-sdk-components';
 
 function areViewsChanged(oldViews: any[], newViews: any[]): boolean {
@@ -20,7 +20,7 @@ function areViewsChanged(oldViews: any[], newViews: any[]): boolean {
 interface DefaultFormProps {
   // If any, enter additional props that only exist on this component
   NumCols: string;
-  instructions: string;
+  instructions?: string | InstructionObject;
 }
 
 @Component({
@@ -38,7 +38,10 @@ export class DefaultFormComponent extends FormTemplateBase implements OnInit, On
 
   arChildren$: any[];
   divClass$: string;
-  instructions: string;
+  instructions: string | undefined;
+  instructionBannerVariant$: 'warning' | 'info' | 'success' | undefined;
+  bDismissInstructions$ = false;
+  bShowInstructions$ = true;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -70,6 +73,9 @@ export class DefaultFormComponent extends FormTemplateBase implements OnInit, On
     const configProps = this.pConn$.getConfigProps() as DefaultFormProps;
     const kids = this.pConn$.getChildren();
     this.instructions = this.templateUtils.getInstructions(this.pConn$, configProps?.instructions);
+    const instructionsType = this.templateUtils.getInstructionsType(configProps?.instructions);
+    this.instructionBannerVariant$ = instructionsType ? this.templateUtils.mapInstructionsTypeToBannerVariant(instructionsType) : undefined;
+    this.bDismissInstructions$ = this.templateUtils.getDismissBanner(configProps?.instructions);
 
     const numCols = configProps.NumCols ? configProps.NumCols : '1';
     switch (numCols) {
@@ -96,4 +102,8 @@ export class DefaultFormComponent extends FormTemplateBase implements OnInit, On
       this.arChildren$ = children;
     }
   }
+
+  dismissInstructions() {
+    this.bShowInstructions$ = false;
+  }
 }

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

@@ -233,7 +233,7 @@ export const updateFieldLabels = (fields, configFields, primaryFieldsViewIndex,
   return labelsOfFields;
 };
 
-export const buildFieldsForTable = (configFields, pConnect, showDeleteButton, options) => {
+export const buildFieldsForTable = (configFields, pConnect, showActionColumn, options) => {
   const { primaryFieldsViewIndex, fields } = options;
 
   // get resolved field labels for primary fields raw config included in configFields
@@ -260,8 +260,8 @@ export const buildFieldsForTable = (configFields, pConnect, showDeleteButton, op
     };
   });
 
-  // ONLY add DELETE_ICON to fields when the table is requested as EDITABLE
-  if (showDeleteButton) {
+  // Add the action column when either edit or delete is available.
+  if (showActionColumn) {
     fieldDefs.push({
       type: 'text',
       label: '',
@@ -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.html

@@ -3,7 +3,14 @@
     <h3 *ngIf="label" className="label" style="font-weight: bold">
       {{ label }} <span class="results-count">{{ getResultsText() }}</span>
     </h3>
-    <table *ngIf="readOnlyMode || allowEditingInModal" mat-table [dataSource]="elementsData" class="mat-elevation-z8" id="readonly-table" matSort>
+    <table
+      *ngIf="readOnlyMode || allowEditingInModal || hideEditRow"
+      mat-table
+      [dataSource]="elementsData"
+      class="mat-elevation-z8"
+      id="readonly-table"
+      matSort
+    >
       <ng-container *ngFor="let dCol of processedFields; let i = index" [matColumnDef]="dCol.config.name">
         <th mat-header-cell *matHeaderCellDef mat-sort-header (click)="_headerSortClick($event, dCol)" arrowPosition="before">
           <div>{{ dCol.config.label }}</div>
@@ -39,20 +46,25 @@
         </td>
       </ng-container>
       <ng-container matColumnDef="DeleteIcon">
-        <div *ngIf="allowEditingInModal">
-          <th mat-header-cell *matHeaderCellDef></th>
-          <td mat-cell *matCellDef="let element; index as j">
-            <div class="header-icon">
+        <th mat-header-cell *matHeaderCellDef></th>
+        <td mat-cell *matCellDef="let element; index as j">
+          <ng-container *ngIf="allowEditingInModal; else deleteOnly">
+            <div *ngIf="rowActions[j]?.hasAnyAction" class="header-icon">
               <button mat-icon-button [matMenuTriggerFor]="utilityMenu">
                 <mat-icon>more_vert</mat-icon>
               </button>
               <mat-menu #utilityMenu="matMenu" overlapTrigger="false">
-                <button mat-menu-item (click)="editRecord(element, j)">Edit</button>
-                <button mat-menu-item (click)="deleteRecord(j)">Delete</button>
+                <button *ngIf="rowActions[j]?.canEdit" mat-menu-item (click)="editRecord(element, element.__originalIndex)">Edit</button>
+                <button *ngIf="rowActions[j]?.canDelete" mat-menu-item (click)="deleteRecord(element.__originalIndex)">Delete</button>
               </mat-menu>
             </div>
-          </td>
-        </div>
+          </ng-container>
+          <ng-template #deleteOnly>
+            <button *ngIf="rowActions[j]?.canDelete" id="delete-button" mat-icon-button (click)="deleteRecord(j)">
+              <mat-icon>delete</mat-icon>
+            </button>
+          </ng-template>
+        </td>
       </ng-container>
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
@@ -62,7 +74,13 @@
         </td>
       </tr>
     </table>
-    <table *ngIf="editableMode && !allowEditingInModal" mat-table [dataSource]="elementsData" class="mat-elevation-z8" id="editable-table">
+    <table
+      *ngIf="editableMode && !allowEditingInModal && !hideEditRow"
+      mat-table
+      [dataSource]="elementsData"
+      class="mat-elevation-z8"
+      id="editable-table"
+    >
       <ng-container *ngFor="let dCol of fieldDefs; let i = index">
         <ng-container *ngIf="dCol.name != 'DeleteIcon'" [matColumnDef]="dCol.name">
           <th mat-header-cell *matHeaderCellDef class="psdk-mat-header">{{ dCol.label }}</th>
@@ -81,7 +99,7 @@
       <ng-container matColumnDef="DeleteIcon">
         <th mat-header-cell *matHeaderCellDef></th>
         <td mat-cell *matCellDef="let element; index as j">
-          <button id="delete-button" mat-icon-button (click)="deleteRecord(j)">
+          <button *ngIf="rowActions[j]?.canDelete" id="delete-button" mat-icon-button (click)="deleteRecord(j)">
             <mat-icon>delete</mat-icon>
           </button>
         </td>

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

@@ -39,6 +39,7 @@ interface SimpleTableManualProps {
   allowActions?: any;
   allowTableEdit?: boolean;
   allowRowDelete?: any;
+  allowRowEdit?: any;
   editMode?: string;
   addAndEditRowsWithin?: any;
   viewForAddAndEditModal?: any;
@@ -59,6 +60,12 @@ class Group {
   }
 }
 
+interface RowActions {
+  canEdit: boolean;
+  canDelete: boolean;
+  hasAnyAction: boolean;
+}
+
 @Component({
   selector: 'app-simple-table-manual',
   templateUrl: './simple-table-manual.component.html',
@@ -92,7 +99,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 +166,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
   referenceListStr: any;
   bUseSeparateViewForEdit: any;
   editView: any;
+  editType: any;
   defaultActionId: any;
   editActionId: any;
   settingsSvgIcon$: string;
@@ -167,7 +175,12 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
   targetClassLabel: string;
   localizedVal = PCore.getLocaleUtils().getLocaleValue;
   localeCategory = 'SimpleTable';
-  editType: any;
+  hideEditRow: any;
+  hideDeleteRow: boolean;
+  showEditButton: boolean;
+  showDeleteButton: boolean;
+  showActionColumn: boolean;
+  rowActions: RowActions[] = [];
   constructor(
     private angularPConnect: AngularPConnectService,
     public utils: Utils,
@@ -238,7 +251,6 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
       presets,
       allowActions,
       allowTableEdit,
-      allowRowDelete,
       label: labelProp,
       propertyLabel,
       fieldMetadata,
@@ -305,9 +317,15 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     this.editableMode = renderMode === 'Editable';
     const isDisplayModeEnabled = displayMode === 'DISPLAY_ONLY';
     this.showAddRowButton = !this.readOnlyMode && !simpleTableManualProps.hideAddRow;
+    this.hideEditRow = simpleTableManualProps.hideEditRow;
+    this.hideDeleteRow = simpleTableManualProps.hideDeleteRow;
     this.allowEditingInModal =
       (editMode ? editMode === 'modal' : addAndEditRowsWithin === 'modal') && !(renderMode === 'ReadOnly' || isDisplayModeEnabled);
-    const showDeleteButton = this.editableMode && !simpleTableManualProps.hideDeleteRow && evaluateAllowRowAction(allowRowDelete, this.rowData);
+    this.showEditButton = this.allowEditingInModal && !this.hideEditRow;
+    this.showDeleteButton = this.editableMode && !this.hideDeleteRow;
+    this.showActionColumn = this.showEditButton || this.showDeleteButton;
+    const { allowRowEdit, allowRowDelete } = this.pConn$.getComponentConfig?.() ?? {};
+    this.rowActions = this.referenceList.map(row => this.getRowActions(row, allowRowEdit, allowRowDelete));
     this.defaultView = editModeConfig ? editModeConfig.defaultView : viewForAddAndEditModal;
     this.bUseSeparateViewForEdit = editModeConfig ? editModeConfig.useSeparateViewForEdit : useSeparateViewForEdit;
     this.editView = editModeConfig ? editModeConfig.editView : viewForEditModal;
@@ -326,7 +344,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     //  Nebula does). It will also have the "label", and "meta" contains the original,
     //  unchanged config info. For now, much of the info here is carried over from
     //  Nebula and we may not end up using it all.
-    this.fieldDefs = buildFieldsForTable(rawFields, this.pConn$, showDeleteButton, {
+    this.fieldDefs = buildFieldsForTable(rawFields, this.pConn$, this.showActionColumn, {
       primaryFieldsViewIndex,
       fields: resolvedFields
     });
@@ -364,7 +382,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     }
 
     // for edit and adding rows in modal view and to generate readonly list
-    if (!isEqual(this.prevReferenceList, this.referenceList) && (this.readOnlyMode || this.allowEditingInModal)) {
+    if (!isEqual(this.prevReferenceList, this.referenceList) && (this.readOnlyMode || this.allowEditingInModal || this.hideEditRow)) {
       this.generateRowsData();
     }
 
@@ -391,17 +409,21 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
   }
 
   initializeDefaultPageInstructions() {
-    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());
-      }
+    if (!this.isInitialized) {
+      return;
+    }
+
+    this.isInitialized = false;
+
+    if (this.allowEditingInModal) {
+      this.pConn$.getListActions().initDefaultPageInstructions(
+        this.pConn$.getReferenceList(),
+        // Temporary filter for attachments to align with constellation payload behavior.
+        this.fieldDefs.filter(item => item.name && item.meta?.type !== 'Attachment').map(item => item.name)
+      );
+    } else {
+      // @ts-ignore - An argument for 'propertyNames' was not provided.
+      this.pConn$.getListActions().initDefaultPageInstructions(this.pConn$.getReferenceList());
     }
   }
 
@@ -410,6 +432,31 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     return `${recordsCount || 0} result${recordsCount > 1 ? 's' : ''}`;
   }
 
+  private getRowActions(row: any, allowRowEdit: any, allowRowDelete: any): RowActions {
+    const canEdit = this.showEditButton && evaluateAllowRowAction(allowRowEdit, row);
+    const canDelete = this.showDeleteButton && this.isDeleteAllowedForRow(row, allowRowDelete);
+
+    return {
+      canEdit,
+      canDelete,
+      hasAnyAction: canEdit || canDelete
+    };
+  }
+
+  private isDeleteAllowedForRow(row: any, allowRowDelete: any): boolean {
+    if (allowRowDelete === undefined || allowRowDelete === true) return true;
+    if (typeof allowRowDelete === 'string' && allowRowDelete.startsWith('@E ')) {
+      try {
+        const expression = allowRowDelete.replace('@E ', '');
+        // @ts-expect-error - options param is optional per corejs docs
+        return PCore.getExpressionEngine().evaluate(expression, row);
+      } catch {
+        return true;
+      }
+    }
+    return false;
+  }
+
   sortCompare(a, b): number {
     let aValue = a[0][this.compareRef];
     let bValue = b[0][this.compareRef];
@@ -929,9 +976,13 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     // See what data (if any) we have to display
     const refKeys: string[] = inColKey.split('.');
     let valBuilder = inRowData;
+    let index = 0;
+
     for (const key of refKeys) {
-      valBuilder = valBuilder[key] ? valBuilder[key] : valBuilder;
+      index += 1;
+      valBuilder = valBuilder[key] !== undefined || index === refKeys.length ? valBuilder[key] : valBuilder;
     }
+
     return valBuilder;
   }
 
@@ -988,30 +1039,37 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
   }
 
   editRecord(data, index) {
-    if (data) {
+    if (data && Number.isInteger(index) && index >= 0 && index < this.referenceList.length) {
+      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
         );
     }
   }
 
   deleteRecord(index) {
-    this.pConn$.getListActions().deleteEntry(index);
+    if (Number.isInteger(index) && index >= 0 && index < this.referenceList.length) {
+      this.pConn$.getListActions().deleteEntry(index);
+    }
   }
 
   buildElementsForTable() {
     const context = this.pConn$.getContextName();
+    const { allowRowEdit } = this.pConn$.getComponentConfig?.() ?? {};
     const eleData: any = [];
     this.referenceList.forEach((element, index) => {
+      const isRowEditable = evaluateAllowRowAction(allowRowEdit, element);
       const data: any = [];
+      data.__originalIndex = index;
       this.rawFields?.forEach(item => {
         if (!item?.config?.hide) {
           item = {
@@ -1019,7 +1077,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
             config: {
               ...item.config,
               label: '',
-              displayMode: this.readOnlyMode || this.allowEditingInModal ? 'DISPLAY_ONLY' : undefined
+              displayMode: this.readOnlyMode || this.allowEditingInModal || this.hideEditRow || !isRowEditable ? 'DISPLAY_ONLY' : undefined
             }
           };
           const referenceListData = getReferenceList(this.pConn$);

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

@@ -1,4 +1,4 @@
-<div [ngClass]="displayMode ? 'psdk-grid-display' : 'psdk-grid-nondisplay'">
+<div [ngClass]="displayMode ? 'psdk-grid-display' : 'psdk-grid-nondisplay'" [class.psdk-details-reference-value]="isDetails$">
   <div *ngIf="label" class="psdk-grid-label">{{ label }}</div>
   <component-mapper name="SemanticLink" [props]="{ pConn$: newPconn, formGroup$ }"></component-mapper>
 </div>

package/lib/template/single-reference-readonly/single-reference-readonly.component.scss

@@ -11,6 +11,10 @@
   margin-top: 1rem;
 }
 
+.psdk-details-reference-value {
+  margin-top: 0;
+}
+
 .psdk-label {
   color: var(--app-label-color);
   margin: 8px 0px;

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

@@ -14,7 +14,8 @@ import { getDataRelationshipContextFromKey } from '@pega/angular-sdk-components'
 export class SingleReferenceReadonlyComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
-  @Input() dataRelationshipContext?: any;
+  @Input() dataRelationshipContext: any = null;
+  @Input() isDetails$ = false;
 
   angularPConnectData: AngularPConnectData = {};
   configProps: any;
@@ -66,9 +67,8 @@ export class SingleReferenceReadonlyComponent implements OnInit, OnDestroy {
     const hideLabel = this.configProps.hideLabel;
     // const additionalFields = this.configProps.additionalFields;
     const displayAs = this.configProps.displayAs ?? 'readonly';
-    const dataRelationshipContext = (rawViewMetadata?.config as any)?.displayField
-      ? getDataRelationshipContextFromKey((rawViewMetadata?.config as any)?.displayField)
-      : this.dataRelationshipContext;
+    const dataRelationshipContext =
+      this.dataRelationshipContext ?? getDataRelationshipContextFromKey((rawViewMetadata?.config as any)?.displayField ?? '');
     if (propsToUse.showLabel === false) {
       propsToUse.label = '';
     }