@pega/angular-sdk-overrides 24.2.10 → 25.1.10

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

@@ -0,0 +1,64 @@
+import { Component, OnInit, Input, forwardRef, OnChanges, SimpleChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReferenceComponent } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+interface DefaultPageProps {
+  // If any, enter additional props that only exist on this component
+  layout?: string;
+  title?: string;
+  heading?: string;
+  message?: string;
+  backgroundImage?: string;
+  enableBanner?: boolean;
+}
+
+@Component({
+  selector: 'app-default-page',
+  templateUrl: './default-page.component.html',
+  styleUrls: ['./default-page.component.scss'],
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class DefaultPageComponent implements OnInit, OnChanges {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: any;
+
+  configProps$: DefaultPageProps;
+  arChildren$: any[];
+  title?: string;
+  heading: any;
+  message?: string;
+  backgroundImage?: string;
+  layout$?: string;
+  enableBanner$?: boolean;
+
+  constructor() {
+    this.backgroundImage = this.configProps$?.backgroundImage;
+  }
+
+  ngOnInit() {
+    this.backgroundImage = this.configProps$?.backgroundImage;
+    this.updateSelf();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const { pConn$ } = changes;
+    this.backgroundImage = this.configProps$?.backgroundImage;
+
+    if (pConn$.previousValue && pConn$.previousValue !== pConn$.currentValue) {
+      this.updateSelf();
+    }
+  }
+
+  updateSelf() {
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as DefaultPageProps;
+
+    this.layout$ = this.configProps$.layout;
+    this.heading = this.configProps$.heading;
+    this.message = this.configProps$.message;
+    this.backgroundImage = this.configProps$.backgroundImage;
+    this.enableBanner$ = this.configProps$.enableBanner;
+
+    this.arChildren$ = ReferenceComponent.normalizePConnArray(this.pConn$.getChildren());
+  }
+}

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

@@ -6,7 +6,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details',
   templateUrl: './details.component.html',
   styleUrls: ['./details.component.scss'],
-  standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
 export class DetailsComponent extends DetailsTemplateBase {

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

@@ -6,7 +6,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details-narrow-wide',
   templateUrl: './details-narrow-wide.component.html',
   styleUrls: ['./details-narrow-wide.component.scss'],
-  standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
 export class DetailsNarrowWideComponent extends DetailsTemplateBase {

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

@@ -6,7 +6,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details-one-column',
   templateUrl: './details-one-column.component.html',
   styleUrls: ['./details-one-column.component.scss'],
-  standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
 export class DetailsOneColumnComponent extends DetailsTemplateBase {

package/lib/template/details-sub-tabs/details-sub-tabs.component.ts

@@ -9,7 +9,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details-sub-tabs',
   templateUrl: './details-sub-tabs.component.html',
   styleUrls: ['./details-sub-tabs.component.scss'],
-  standalone: true,
   imports: [MatTabsModule, CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class DetailsSubTabsComponent extends DetailsTemplateBase {

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

@@ -6,7 +6,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details-three-column',
   templateUrl: './details-three-column.component.html',
   styleUrls: ['./details-three-column.component.scss'],
-  standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
 export class DetailsThreeColumnComponent extends DetailsTemplateBase {

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

@@ -6,7 +6,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details-two-column',
   templateUrl: './details-two-column.component.html',
   styleUrls: ['./details-two-column.component.scss'],
-  standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
 export class DetailsTwoColumnComponent extends DetailsTemplateBase {

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

@@ -6,7 +6,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details-wide-narrow',
   templateUrl: './details-wide-narrow.component.html',
   styleUrls: ['./details-wide-narrow.component.scss'],
-  standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
 export class DetailsWideNarrowComponent extends DetailsTemplateBase {

package/lib/template/dynamic-tabs/dynamic-tabs.component.ts

@@ -17,7 +17,6 @@ interface DynamicTabsProps {
   selector: 'app-dynamic-tabs',
   templateUrl: './dynamic-tabs.component.html',
   styleUrls: ['./dynamic-tabs.component.scss'],
-  standalone: true,
   imports: [CommonModule, MatTabsModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class DynamicTabsComponent implements OnInit, OnDestroy {

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

@@ -1,5 +1,4 @@
 .psdk-details-fields-label {
-  color: var(--app-label-color);
   margin: 8px 0px;
 }
 

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

@@ -6,7 +6,6 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   selector: 'app-field-group-list',
   templateUrl: './field-group-list.component.html',
   styleUrls: ['./field-group-list.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class FieldGroupListComponent {

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, signal } 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 '@pega/angular-sdk-components';
 
 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,13 +22,13 @@ interface FieldGroupTemplateProps {
   displayMode?: string;
   fieldHeader?: string;
   allowTableEdit: boolean;
+  targetClassLabel?: string;
 }
 
 @Component({
   selector: 'app-field-group-template',
   templateUrl: './field-group-template.component.html',
   styleUrls: ['./field-group-template.component.scss'],
-  standalone: true,
   imports: [CommonModule, MatButtonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges {
@@ -34,33 +37,42 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
   @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 = signal<number | null>(null);
   fieldHeader: any;
 
+  allowAdd = true;
+  allowEdit = true;
+  allowDelete = true;
+
   constructor(
     private angularPConnect: AngularPConnectService,
     private utils: Utils
   ) {}
 
   ngOnInit(): void {
-    // First thing in initialization is registering and subscribing to the AngularPConnect service
-    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
-    this.updateSelf();
+    this.menuIconOverride$ = this.utils.getImageSrc('trash', this.utils.getSDKStaticContentUrl());
+
+    const { allowActions, allowTableEdit, referenceList } = this.configProps$;
 
-    const menuIconOverride$ = 'trash';
-    if (menuIconOverride$) {
-      this.menuIconOverride$ = this.utils.getImageSrc(menuIconOverride$, this.utils.getSDKStaticContentUrl());
+    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);
     }
   }
 
@@ -70,71 +82,63 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
     }
   }
 
-  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();
-    }
-  }
-
   ngOnChanges(changes) {
     if (changes && changes.configProps$) {
       const props = changes.configProps$;
       if (props.currentValue !== props.previousValue) {
         this.configProps$ = props.currentValue;
+
         if (changes?.pConn$?.currentValue) {
           this.pConn$ = changes?.pConn$?.currentValue;
         }
+
         this.updateSelf();
+
+        setTimeout(() => {
+          this.angularPConnect.shouldComponentUpdate(this);
+        }, 100);
       }
     }
   }
 
   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) {
+      // @ts-ignore - Expected 3 arguments, but got 1
+      this.pConn$.getListActions().initDefaultPageInstructions(resolvedList);
+
+      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.set(referenceList?.length || 0);
   }
 
   getStaticHeader = (heading, index) => {
@@ -142,17 +146,22 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
   };
 
   getDynamicHeader = (item, index) => {
-    if (this.fieldHeader === 'propertyRef' && this.heading && item[this.heading.substring(1)]) {
+    if (this.heading && item[this.heading.substring(1)]) {
       return item[this.heading.substring(1)];
     }
     return `Row ${index + 1}`;
   };
 
   addFieldGroupItem() {
-    this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceList.length);
+    this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceListLength() as number);
   }
 
   deleteFieldGroupItem(index) {
     this.pConn$.getListActions().deleteEntry(index);
   }
+
+  getAddBtnLabel() {
+    const { targetClassLabel } = this.configProps$;
+    return targetClassLabel ? `+ Add ${targetClassLabel}` : '+ Add';
+  }
 }

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/field-value-list/field-value-list.component.ts

@@ -5,7 +5,6 @@ import { Component, Input } from '@angular/core';
   selector: 'app-field-value-list',
   templateUrl: './field-value-list.component.html',
   styleUrls: ['./field-value-list.component.scss'],
-  standalone: true,
   imports: [CommonModule]
 })
 export class FieldValueListComponent {

package/lib/template/inline-dashboard/inline-dashboard.component.ts

@@ -13,7 +13,6 @@ interface InlineDashboardProps {
   selector: 'app-inline-dashboard',
   templateUrl: './inline-dashboard.component.html',
   styleUrls: ['./inline-dashboard.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class InlineDashboardComponent {

package/lib/template/inline-dashboard-page/inline-dashboard-page.component.ts

@@ -15,7 +15,6 @@ interface InlineDashboardPageProps {
   selector: 'app-inline-dashboard-page',
   templateUrl: './inline-dashboard-page.component.html',
   styleUrls: ['./inline-dashboard-page.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class InlineDashboardPageComponent implements OnInit, OnChanges {
@@ -46,7 +45,7 @@ export class InlineDashboardPageComponent implements OnInit, OnChanges {
   updateSelf() {
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as InlineDashboardPageProps;
     const arChildren$ = this.pConn$.getChildren();
-    const allFilters = this.pConn$.getRawMetadata()?.children[1];
+    const allFilters = this.pConn$.getRawMetadata()?.children?.[1];
     const filterComponents = buildFilterComponents(this.pConn$, allFilters);
     this.inlineProps = this.configProps$;
     this.children[0] = arChildren$[0];

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

@@ -5,7 +5,6 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   selector: 'app-list-page',
   templateUrl: './list-page.component.html',
   styleUrls: ['./list-page.component.scss'],
-  standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
 export class ListPageComponent {