@pega/angular-sdk-overrides 0.242.6 → 0.242.8

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

@@ -13,53 +13,42 @@ import { Component } from '@angular/core';
   standalone: true
 })
 export class ReferenceComponent {
-  referencedComponent: any = null;
-
   /* Used to toggle some class-wide logging */
   private static bLogging = false;
 
-  constructor() {
-    // With new static method approach, this shouldn't be called any more
-    window.alert(`in ReferenceComponent constructor!`);
-
-    console.error(`in ReferenceComponent constructor!`);
-  }
-
-  // onStateChange and updateSelf methods removed from original implementation
-  //  when we moved to the static method implementation.
-
-  // STATIC method to create a normalized PConn (a fully realized View that the 'reference'
-  //  component refers to) from the given pConn. Has to add in some stuff as in the constructor
-  static createFullReferencedViewFromRef(inPConn: any) {
-    // BAIL and ERROR if inPConn is NOT a reference!
+  /**
+   * Creates a normalized PConn from a reference component.
+   * Resolves the reference to its fully realized View with proper configuration.
+   *
+   * @param inPConn - The PConn object that represents a reference component
+   * @returns The dereferenced PConnect object, or null if reference can't be resolved
+   */
+  static createFullReferencedViewFromRef(inPConn: any): any {
+    // Validate that inPConn is a reference component
     if (inPConn.getComponentName() !== 'reference') {
-      // debugger;
-
       console.error(`Reference component: createFullReferencedViewFromRef inPConn is NOT a reference! ${inPConn.getComponentName()}`);
+      return null;
     }
 
-    const theResolvedConfigProps = inPConn.resolveConfigProps(inPConn.getConfigProps());
-
-    const referenceConfig = { ...inPConn.getComponentConfig() } || {};
+    // Get reference configuration and make a copy
+    const referenceConfig = { ...inPConn.getComponentConfig() };
 
-    // Since SDK-A implements Reference as static methods and we don't rely on
-    //  the Reference component's handling of the visibility prop, we leave it in
-    //  (and also leaving the others in for now) so the referenced View can act on
-    //  the visibility prop. (The following 3 lines were carried over from React SDK)
+    // Remove properties that should not be inherited by the referenced view
+    // (Maintained from React SDK implementation)
     delete referenceConfig?.name;
-    // delete referenceConfig?.type;
-    // delete referenceConfig?.visibility;
+    delete referenceConfig?.type;
+    delete referenceConfig?.visibility;
 
+    // Get the metadata for the referenced view
     const viewMetadata = inPConn.getReferencedView();
 
+    // Return null if view metadata is not found
     if (!viewMetadata) {
       console.log('View not found ', inPConn.getComponentConfig());
       return null;
     }
 
-    // If we get here, we have metadata for a View component...
-    // const referencedComponentName = viewMetadata.type;
-
+    // Create the view object by merging metadata with reference config
     const viewObject = {
       ...viewMetadata,
       config: {
@@ -68,23 +57,31 @@ export class ReferenceComponent {
       }
     };
 
+    // Resolve configuration properties
+    const resolvedConfigProps = inPConn.resolveConfigProps(inPConn.getConfigProps());
+    const { visibility = true, context, readOnly = false, displayMode = '' } = resolvedConfigProps;
+
+    // Log debug information if logging is enabled
     if (ReferenceComponent.bLogging) {
-      console.log(`Reference: about to call createComponent with pageReference: context: ${theResolvedConfigProps.context}`);
+      console.log(`Reference: about to call createComponent with pageReference: context: ${inPConn.getContextName()}`);
     }
 
+    // Create the component with the right context
     const viewComponent = inPConn.createComponent(viewObject, null, null, {
-      pageReference: theResolvedConfigProps.context
+      pageReference: context && context.startsWith('@CLASS') ? '' : context
     });
 
-    // updating the referencedComponent should trigger a render
+    // Get the PConnect object from the created component
     const newCompPConnect = viewComponent.getPConnect();
 
+    // Set inherited configuration on the new component
     newCompPConnect.setInheritedConfig({
       ...referenceConfig,
-      readOnly: theResolvedConfigProps.readOnly ? theResolvedConfigProps.readOnly : false,
-      displayMode: theResolvedConfigProps.displayMode ? theResolvedConfigProps.displayMode : null
+      readOnly,
+      displayMode
     });
 
+    // Log debug information if logging is enabled
     if (ReferenceComponent.bLogging) {
       console.log(
         `Angular Reference component: createFullReferencedViewFromRef -> newCompPConnect configProps: ${JSON.stringify(
@@ -93,73 +90,63 @@ export class ReferenceComponent {
       );
     }
 
-    return newCompPConnect;
+    // Return the component if it should be visible, otherwise null
+    return visibility !== false ? newCompPConnect : null;
   }
 
-  // STATIC method that other components can call to normalize
-  //  a pConn object that might be a 'reference'. If the incoming
-  //  pConn is a reference, return its dereferenced View PConnect's
-  //  getPConnect. Otherwise, return the passed in pConn unchanged
-  //  inPConn = a PConn object (ex: { getPConnect()} )
-  static normalizePConn(inPConn: any) {
-    // debugger;
-
-    let returnObj = false;
-    let thePConnType = '';
-
-    if (inPConn.getPConnect) {
-      // inPConn is an object (ex: { getPConnect()} ), so we want to return
-      //  any referenced view as the object containing the
-      //  the getPConnect function
-      returnObj = true;
-      thePConnType = inPConn.getPConnect().getComponentName();
-    } else {
-      // inPConn is an object with the PConnect function, so we want
-      //  to return any referenced view as the object containing the
-      //  the c11n function
-      returnObj = false;
-      thePConnType = inPConn.getComponentName();
+  /**
+   * Normalizes a PConn object that might be a 'reference'.
+   * If the incoming PConn is a reference, returns its dereferenced View.
+   * Otherwise, returns the passed in PConn unchanged.
+   *
+   * @param inPConn - A PConn object (ex: { getPConnect() } or direct PConnect)
+   * @returns The normalized PConn object with references resolved
+   */
+  static normalizePConn(inPConn: any): any {
+    // Early return for null or undefined input
+    if (!inPConn) {
+      return inPConn;
     }
 
-    if (thePConnType === 'reference') {
-      if (returnObj) {
-        //  WAS...
-        // const theRefViewPConn = inPConn.getPConnect().getReferencedViewPConnect(true);
-        // Now: ALWAYS calling createFullReferencedViewFromRef to have options, PageReference, etc.
-        //  set correctly in the C11nEnv (PConnect) object
-        // debugger;
-        let theRefViewPConn = this.createFullReferencedViewFromRef(inPConn.getPConnect());
-        // now return its PConnect
-        theRefViewPConn = theRefViewPConn.getComponent();
-
-        // const theFullReference = theRefViewPConn.getPConnect().getFullReference();
-        // console.log(`theFullReference: ${theFullReference}`);
-
-        return theRefViewPConn;
+    // Determine if we have an object with getPConnect method or direct PConnect
+    const hasGetPConnectMethod = !!inPConn.getPConnect;
+
+    // Get the component name in the appropriate way based on the object type
+    const componentName = hasGetPConnectMethod ? inPConn.getPConnect().getComponentName() : inPConn.getComponentName();
+
+    // Only process if this is a reference component
+    if (componentName === 'reference') {
+      if (hasGetPConnectMethod) {
+        // For objects with getPConnect method, get the referenced view and its component
+        const refViewPConn = this.createFullReferencedViewFromRef(inPConn.getPConnect());
+        return refViewPConn?.getComponent();
       }
-      // console.log(`created theFullRefView full reference: ${theFullRefView.getFullReference()}`);
-      // debugger;
 
+      // For direct PConnect objects, just create the referenced view
       return this.createFullReferencedViewFromRef(inPConn);
     }
+
+    // Not a reference component, return unchanged
     return inPConn;
   }
 
-  // STATIC method that other components can call to normalize
-  //  an array of pConn objects where any of the children might
-  //  be a 'reference'. The array returns an array of children
-  //  where any 'reference' is replaced with its ReferencedView
-  //  inPConnArray is an array of PConn objects or functions.
-  //    Its value is passed to normalizePConn
-
-  static normalizePConnArray(inPConnArray: any) {
-    if (!(inPConnArray?.length > 0)) {
-      // null or empty array, return what was passed in
-      return inPConnArray;
+  /**
+   * Normalizes an array of PConn objects by replacing any 'reference' components
+   * with their referenced views.
+   *
+   * @param inPConnArray - Array of PConn objects to normalize
+   * @returns Normalized array with references resolved, or empty array if input is invalid
+   */
+  static normalizePConnArray(inPConnArray: any[]): any[] {
+    // Handle null, undefined, or empty array case
+    if (!inPConnArray?.length) {
+      return inPConnArray || [];
     }
 
-    return inPConnArray.map(child => {
-      return ReferenceComponent.normalizePConn(child);
-    });
+    // Process array: normalize each item and filter out any null/undefined results
+    const normalizedArray = inPConnArray.map(child => ReferenceComponent.normalizePConn(child)).filter(Boolean);
+
+    // Ensure we always return an array (even if filter removes all items)
+    return normalizedArray || [];
   }
 }

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

@@ -1,8 +1,9 @@
-import { Component, OnInit, Input, NgZone, forwardRef, OnDestroy } from '@angular/core';
+import { Component, OnInit, Input, NgZone, forwardRef, OnDestroy, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { interval, Subscription } from 'rxjs';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { ServerConfigService } from '@pega/angular-sdk-components';
 import { ProgressSpinnerService } from '@pega/angular-sdk-components';
 import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { PreviewViewContainerComponent } from '@pega/angular-sdk-components';
@@ -37,6 +38,8 @@ export class RootContainerComponent implements OnInit, OnDestroy {
   @Input() displayOnlyFA$: boolean;
   @Input() isMashup$: boolean;
 
+  scService = inject(ServerConfigService);
+
   // For interaction with AngularPConnect
   angularPConnectData: AngularPConnectData = {};
 
@@ -62,8 +65,6 @@ export class RootContainerComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit(): void {
-    const myContext = 'app';
-
     const { containers } = PCore.getStore().getState();
     const items = Object.keys(containers).filter(item => item.includes('root'));
 
@@ -84,24 +85,11 @@ export class RootContainerComponent implements OnInit, OnDestroy {
 
     this.pvConn$ = configObjPreview.getPConnect();
 
-    const configObjModal = PCore.createPConnect({
-      meta: {
-        type: 'ModalViewContainer',
-        config: {
-          name: 'modal'
-        }
-      },
-      options: {
-        pageReference: 'pyPortal',
-        context: myContext
-      }
-    });
+    this.configureModalContainer();
 
     // clear out hasViewContainer
     sessionStorage.setItem('hasViewContainer', 'false');
 
-    this.mConn$ = configObjModal.getPConnect();
-
     // First thing in initialization is registering and subscribing to the AngularPConnect service
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
 
@@ -181,6 +169,25 @@ export class RootContainerComponent implements OnInit, OnDestroy {
     }
   }
 
+  async configureModalContainer() {
+    const sdkConfig = await this.scService.getSdkConfig();
+    const showModalsInEmbedMode = sdkConfig.serverConfig.showModalsInEmbedMode;
+
+    if (!this.displayOnlyFA$ || showModalsInEmbedMode) {
+      const configObjModal = PCore.createPConnect({
+        meta: {
+          type: 'ModalViewContainer',
+          config: {
+            name: 'modal'
+          }
+        },
+        options
+      });
+
+      this.mConn$ = configObjModal.getPConnect();
+    }
+  }
+
   generateViewContainerForNoPortal() {
     // bootstrap loadMashup resolves to here
     const arChildren = this.pConn$.getChildren() as any[];

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

@@ -1,5 +1,5 @@
 import { Directive, OnDestroy } from '@angular/core';
-import { AngularPConnectData } from 'packages/angular-sdk-components/src/public-api';
+import { AngularPConnectData } from '@pega/angular-sdk-components';
 
 @Directive()
 export class FormTemplateBase implements OnDestroy {
@@ -9,7 +9,7 @@ export class FormTemplateBase implements OnDestroy {
   ngOnDestroy(): void {
     PCore.getContextTreeManager().removeContextTreeNode(this.pConn$.getContextName());
 
-    if (this.angularPConnectData.unsubscribeFn) {
+    if (this.angularPConnectData?.unsubscribeFn) {
       this.angularPConnectData.unsubscribeFn();
     }
   }

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

@@ -1,8 +1,8 @@
-import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
+import { Component, OnInit, Input, forwardRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
-import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { TemplateUtils } from '@pega/angular-sdk-components';
 import { FormTemplateBase } from '@pega/angular-sdk-components';
@@ -31,7 +31,7 @@ interface DefaultFormProps {
   standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class DefaultFormComponent extends FormTemplateBase implements OnInit, OnDestroy {
+export class DefaultFormComponent extends FormTemplateBase implements OnInit {
   @Input() override pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
@@ -86,10 +86,8 @@ export class DefaultFormComponent extends FormTemplateBase implements OnInit, On
     //  normalize them
     const children = ReferenceComponent.normalizePConnArray(kids[0].getPConnect().getChildren());
 
-    const visibleChildren = children?.filter(child => child !== undefined) || [];
-
-    if (areViewsChanged(this.arChildren$, visibleChildren)) {
-      this.arChildren$ = visibleChildren;
+    if (areViewsChanged(this.arChildren$, children)) {
+      this.arChildren$ = children;
     }
   }
 }

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

@@ -1,5 +1,5 @@
 <div id="field-group">
-  <h3 *ngIf="showLabel$" className="label" style="font-weight: bold">
+  <h3 *ngIf="showLabel$" class="field-group-template-header" style="font-weight: bold">
     {{ label$ }}
   </h3>
   <div *ngIf="readonlyMode; else editable">
@@ -11,23 +11,23 @@
   </div>
   <ng-template #editable>
     <div *ngIf="children && children.length > 0">
-      <div *ngFor="let kid of children; let i = index">
+      <div class="field-group-template-item" *ngFor="let child of children; let i = index">
         <div class="header-div">
           <div style="width: 80%">
-            <b>{{ kid.name }}</b>
+            <b>{{ child.name }}</b>
           </div>
-          <div *ngIf="allowAddEdit !== false" style="width: 20%; text-align: right">
+          <div *ngIf="allowDelete && child.allowRowDelete" style="width: 20%; text-align: right">
             <button id="delete-button" mat-icon-button (click)="deleteFieldGroupItem(i)">
               <img class="psdk-utility-card-action-svg-icon" src="{{ menuIconOverride$ }}" />
             </button>
           </div>
         </div>
 
-        <div *ngIf="kid.children.getPConnect().getRawMetadata().type.toLowerCase() == 'region'">
-          <component-mapper name="Region" [props]="{ pConn$: kid.children.getPConnect(), formGroup$ }"></component-mapper>
+        <div *ngIf="child.children.getPConnect().getRawMetadata().type.toLowerCase() == 'region'">
+          <component-mapper name="Region" [props]="{ pConn$: child.children.getPConnect(), formGroup$ }"></component-mapper>
         </div>
       </div>
-      <button *ngIf="allowAddEdit !== false" mat-button color="primary" style="font-size: 16px" (click)="addFieldGroupItem()">+ Add</button>
     </div>
+    <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

@@ -6,3 +6,11 @@
   display: flex;
   align-items: center;
 }
+
+.field-group-template-header {
+  margin-left: 0;
+}
+
+.field-group-template-item {
+  padding-block: 1rem;
+}

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, forwardRef, OnDestroy, OnChanges } from '@angular/core';
+import { Component, OnInit, Input, forwardRef, OnDestroy, OnChanges, AfterViewInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -6,11 +6,14 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { buildView, getReferenceList } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { evaluateAllowRowAction } from './utils';
 
 interface FieldGroupTemplateProps {
   // If any, enter additional props that only exist on this component
   label?: string;
-  showLabel?: boolean;
+  hideLabel?: boolean;
+  allowActions?: any;
+  allowRowDelete?: any;
   referenceList?: any[];
   contextClass: string;
   renderMode?: string;
@@ -19,6 +22,7 @@ interface FieldGroupTemplateProps {
   displayMode?: string;
   fieldHeader?: string;
   allowTableEdit: boolean;
+  targetClassLabel?: string;
 }
 
 @Component({
@@ -28,26 +32,27 @@ interface FieldGroupTemplateProps {
   standalone: true,
   imports: [CommonModule, MatButtonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges {
+export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {
   @Input() configProps$: FieldGroupTemplateProps;
   @Input() pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
   angularPConnectData: AngularPConnectData = {};
-  inheritedProps$: object;
+
   showLabel$?: boolean = true;
   label$?: string;
   readonlyMode: boolean;
   contextClass: any;
-  referenceList: any;
-  pageReference: any;
   heading: any;
   children: any;
   menuIconOverride$: any;
-  prevRefLength: number;
-  allowAddEdit: boolean;
+  referenceListLength: number;
   fieldHeader: any;
 
+  allowAdd = true;
+  allowEdit = true;
+  allowDelete = true;
+
   constructor(
     private angularPConnect: AngularPConnectService,
     private utils: Utils
@@ -58,9 +63,21 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
     this.updateSelf();
 
-    const menuIconOverride$ = 'trash';
-    if (menuIconOverride$) {
-      this.menuIconOverride$ = this.utils.getImageSrc(menuIconOverride$, this.utils.getSDKStaticContentUrl());
+    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);
     }
   }
 
@@ -85,56 +102,57 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
       const props = changes.configProps$;
       if (props.currentValue !== props.previousValue) {
         this.configProps$ = props.currentValue;
+
         if (changes?.pConn$?.currentValue) {
           this.pConn$ = changes?.pConn$?.currentValue;
         }
+
         this.updateSelf();
       }
     }
   }
 
+  ngAfterViewInit() {
+    const resolvedList = getReferenceList(this.pConn$);
+    // @ts-ignore - Expected 3 arguments, but got 1
+    this.pConn$.getListActions().initDefaultPageInstructions(resolvedList);
+  }
+
   updateSelf() {
-    this.inheritedProps$ = this.pConn$.getInheritedProps();
-    this.label$ = this.configProps$.label;
-    this.showLabel$ = this.configProps$.showLabel;
-    // label & showLabel within inheritedProps takes precedence over configProps
-    this.label$ = (this.inheritedProps$ as any).label || this.label$;
-    this.showLabel$ = (this.inheritedProps$ as any).showLabel || this.showLabel$;
+    const inheritedProps: any = this.pConn$.getInheritedProps();
 
-    this.allowAddEdit = this.configProps$.allowTableEdit;
+    const { label, hideLabel, allowRowDelete, referenceList, fieldHeader, renderMode, displayMode, heading, contextClass, lookForChildInConfig } =
+      this.configProps$;
+
+    // label within inheritedProps takes precedence over configProps
+    this.label$ = inheritedProps.label || label;
+
+    this.showLabel$ = referenceList?.length === 0 || !hideLabel;
 
-    const renderMode = this.configProps$.renderMode;
-    const displayMode = this.configProps$.displayMode;
     this.readonlyMode = renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY';
-    this.contextClass = this.configProps$.contextClass;
-    const lookForChildInConfig = this.configProps$.lookForChildInConfig;
-    this.heading = this.configProps$.heading ?? 'Row';
-    this.fieldHeader = this.configProps$.fieldHeader;
+
+    this.contextClass = contextClass;
+    this.heading = heading ?? 'Row';
+    this.fieldHeader = fieldHeader;
+
     const resolvedList = getReferenceList(this.pConn$);
-    this.pageReference = `${this.pConn$.getPageReference()}${resolvedList}`;
     this.pConn$.setReferenceList(resolvedList);
+
     if (this.readonlyMode) {
       this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
     }
-    this.referenceList = this.configProps$.referenceList;
-    if (this.prevRefLength != this.referenceList.length) {
-      // eslint-disable-next-line sonarjs/no-collapsible-if
-      if (!this.readonlyMode) {
-        if (this.referenceList?.length === 0 && this.allowAddEdit !== false) {
-          this.addFieldGroupItem();
-        }
-      }
-      const children: any = [];
-      this.referenceList?.forEach((item, index) => {
-        children.push({
+
+    if (this.referenceListLength != referenceList?.length) {
+      this.children = referenceList?.map((item, index) => {
+        return {
           id: index,
           name: this.fieldHeader === 'propertyRef' ? this.getDynamicHeader(item, index) : this.getStaticHeader(this.heading, index),
-          children: buildView(this.pConn$, index, lookForChildInConfig)
-        });
+          children: buildView(this.pConn$, index, lookForChildInConfig),
+          allowRowDelete: evaluateAllowRowAction(allowRowDelete, item)
+        };
       });
-      this.children = children;
     }
-    this.prevRefLength = this.referenceList.length;
+    this.referenceListLength = referenceList?.length || 0;
   }
 
   getStaticHeader = (heading, index) => {
@@ -149,10 +167,15 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
   };
 
   addFieldGroupItem() {
-    this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceList.length);
+    this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceListLength);
   }
 
   deleteFieldGroupItem(index) {
     this.pConn$.getListActions().deleteEntry(index);
   }
+
+  getAddBtnLabel() {
+    const { targetClassLabel } = this.configProps$;
+    return targetClassLabel ? `+ Add ${targetClassLabel}` : '+ Add';
+  }
 }

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

@@ -0,0 +1,9 @@
+export const evaluateAllowRowAction = (allowRowDelete, rowData) => {
+  if (allowRowDelete === undefined || allowRowDelete === true) return true;
+  if (allowRowDelete.startsWith?.('@E ')) {
+    const expression = allowRowDelete.replace('@E ', '');
+    // @ts-ignore
+    return PCore.getExpressionEngine().evaluate(expression, rowData);
+  }
+  return false;
+};

package/lib/template/field-value-list/field-value-list.component.html

@@ -1,5 +1,5 @@
-<div *ngIf="displayMode$ === 'DISPLAY_ONLY'; else STACKED_LARGE_VAL" class="psdk-container-labels-left">
-  <div class="psdk-grid-label">{{ label$ }}</div>
+<div *ngIf="displayMode$ === 'DISPLAY_ONLY'; else STACKED_LARGE_VAL" [ngClass]="label$ ? 'psdk-container-labels-left' : 'psdk-container-nolabels'">
+  <div *ngIf="label$" class="psdk-grid-label">{{ label$ }}</div>
   <div class="psdk-val-labels-left">
     <ng-container *ngTemplateOutlet="valueTemplate"></ng-container>
   </div>

package/lib/template/field-value-list/field-value-list.component.scss

@@ -6,6 +6,10 @@
   align-items: start;
   padding-block: 8px;
 }
+.psdk-container-nolabels {
+  align-items: start;
+  padding-block: 8px;
+}
 .psdk-value {
   margin: 8px 0px;
 }

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

@@ -180,7 +180,9 @@
               <tr mat-header-row *matHeaderRowDef="displayedColumns$"></tr>
             </table>
           </div>
-          <div class="psdk-no-records" *ngIf="repeatListData?.length === 0">No Records Found.</div>
+          <div class="psdk-no-records" *ngIf="repeatListData?.length === 0">
+            {{ utils.getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.') }}
+          </div>
         </div>
       </div>
     </div>

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

@@ -165,7 +165,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
 
   constructor(
     private psService: ProgressSpinnerService,
-    private utils: Utils
+    public utils: Utils
   ) {}
 
   ngOnInit(): void {