@pega/angular-sdk-overrides 0.24.9 → 0.25.1

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

@@ -6,9 +6,18 @@ import { FormGroup } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { ErrorMessagesService } from '@pega/angular-sdk-components';
 import { ProgressSpinnerService } from '@pega/angular-sdk-components';
+import { BannerService } from '@pega/angular-sdk-components';
 import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 
+function getRefreshProps(refreshConditions) {
+  // refreshConditions cuurently supports only "Changes" event
+  if (!refreshConditions) {
+    return [];
+  }
+  return refreshConditions.filter(item => item.event && item.event === 'Changes').map(item => [item.field, item.field?.substring(1)]) || [];
+}
+
 interface AssignmentProps {
   // If any, enter additional props that only exist on this component
   template: string;
@@ -18,7 +27,6 @@ interface AssignmentProps {
   selector: 'app-assignment',
   templateUrl: './assignment.component.html',
   styleUrls: ['./assignment.component.scss'],
-  standalone: true,
   imports: [CommonModule, MatSnackBarModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
@@ -29,7 +37,6 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
   @Input() isCreateStage$: boolean;
   @Input() updateToken$: number;
   @Input() isInModal$ = false;
-  @Input() banners;
 
   // For interaction with AngularPConnect
   angularPConnectData: AngularPConnectData = {};
@@ -69,12 +76,15 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
   localeCategory = 'Assignment';
   localeReference;
 
+  snackBarRef;
+
   constructor(
     private angularPConnect: AngularPConnectService,
     private psService: ProgressSpinnerService,
     private erService: ErrorMessagesService,
     private ngZone: NgZone,
-    private snackBar: MatSnackBar
+    private snackBar: MatSnackBar,
+    public bannerService: BannerService
   ) {}
 
   ngOnInit(): void {
@@ -105,6 +115,8 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
     // Should always check the bridge to see if the component should update itself (re-render)
     const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
 
+    this.bannerService.updateBanners(this.itemKey$);
+
     // ONLY call updateSelf when the component should update
     //    AND removing the "gate" that was put there since shouldComponentUpdate
     //      should be the real "gate"
@@ -128,6 +140,8 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   updateChanges() {
+    this.registerForRefresh();
+
     // pConn$ may be a 'reference' component, so normalize it
     this.newPConn$ = ReferenceComponent.normalizePConn(this.pConn$);
 
@@ -285,6 +299,9 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   buttonClick(sAction, sButtonType) {
+    this.snackBarRef?.dismiss();
+    this.bannerService.clearBanners();
+    PCore.getPubSubUtils().publish('clearBannerMessages');
     // right now, done on an individual basis, setting bReInit to true
     // upon the next flow container state change, will cause the flow container
     // to re-initialize
@@ -308,21 +325,21 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
       switch (sAction) {
         case 'navigateToStep':
           this.erService.sendMessage('publish', '');
-          if (this.formValid()) {
-            this.bReInit = true;
-            this.psService.sendMessage(true);
 
-            const navigatePromise = this.navigateToStep('previous', this.itemKey$);
-            navigatePromise
-              .then(() => {
-                this.updateChanges();
-                this.psService.sendMessage(false);
-              })
-              .catch(() => {
-                this.psService.sendMessage(false);
-                this.snackBar.open(`${this.localizedVal('Navigation failed!', this.localeCategory)}`, 'Ok');
-              });
-          }
+          this.bReInit = true;
+          this.psService.sendMessage(true);
+
+          const navigatePromise = this.navigateToStep('previous', this.itemKey$);
+          navigatePromise
+            .then(() => {
+              this.updateChanges();
+              this.psService.sendMessage(false);
+            })
+            .catch(() => {
+              this.psService.sendMessage(false);
+              this.snackBarRef = this.snackBar.open(`${this.localizedVal('Navigation failed!', this.localeCategory)}`, 'Ok');
+            });
+
           break;
 
         case 'saveAssignment': {
@@ -332,14 +349,13 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
 
           savePromise
             .then(() => {
-              // @ts-ignore - Property 'c11nEnv' is private and only accessible within class 'CaseInfo'.
               const caseType = this.pConn$.getCaseInfo().c11nEnv.getValue(PCore.getConstants().CASE_INFO.CASE_TYPE_ID);
               PCore.getPubSubUtils().publish('cancelPressed');
               this.onSaveActionSuccess({ caseType, caseID, assignmentID });
             })
             .catch(() => {
               this.psService.sendMessage(false);
-              this.snackBar.open(`${this.localizedVal('Save failed', this.localeCategory)}`, 'Ok');
+              this.snackBarRef = this.snackBar.open(`${this.localizedVal('Save failed', this.localeCategory)}`, 'Ok');
             });
 
           break;
@@ -363,7 +379,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
               })
               .catch(() => {
                 this.psService.sendMessage(false);
-                this.snackBar.open(`${this.localizedVal('Cancel failed!', this.localeCategory)}`, 'Ok');
+                this.snackBarRef = this.snackBar.open(`${this.localizedVal('Cancel failed!', this.localeCategory)}`, 'Ok');
               });
           } else {
             this.psService.sendMessage(true);
@@ -380,7 +396,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
               })
               .catch(() => {
                 this.psService.sendMessage(false);
-                this.snackBar.open(`${this.localizedVal('Cancel failed!', this.localeCategory)}`, 'Ok');
+                this.snackBarRef = this.snackBar.open(`${this.localizedVal('Cancel failed!', this.localeCategory)}`, 'Ok');
               });
           }
           break;
@@ -392,7 +408,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
             .then(() => {})
             .catch(() => {
               this.psService.sendMessage(false);
-              this.snackBar.open(`${this.localizedVal('Rejection failed!', this.localeCategory)}`, 'Ok');
+              this.snackBarRef = this.snackBar.open(`${this.localizedVal('Rejection failed!', this.localeCategory)}`, 'Ok');
             });
 
           break;
@@ -405,23 +421,18 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
       switch (sAction) {
         case 'finishAssignment':
           this.erService.sendMessage('publish', '');
-          if (this.formValid()) {
-            this.bReInit = true;
-            this.psService.sendMessage(true);
-            const finishPromise = this.finishAssignment(this.itemKey$); // JA - was itemID but Nebula/Constellation uses itemKey
-            finishPromise
-              .then(() => {
-                this.psService.sendMessage(false);
-                this.updateChanges();
-              })
-              .catch(() => {
-                this.psService.sendMessage(false);
-                this.snackBar.open(`${this.localizedVal('Submit failed!', this.localeCategory)}`, 'Ok');
-              });
-          } else {
-            // let snackBarRef = this.snackBar.open("Please fix errors on form.",  "Ok");
-            this.erService.sendMessage('show', this.localizedVal('Please fix errors on form.', this.localeCategory));
-          }
+          this.bReInit = true;
+          this.psService.sendMessage(true);
+          const finishPromise = this.finishAssignment(this.itemKey$); // JA - was itemID but Nebula/Constellation uses itemKey
+          finishPromise
+            .then(() => {
+              this.psService.sendMessage(false);
+              this.updateChanges();
+            })
+            .catch(() => {
+              this.psService.sendMessage(false);
+              this.snackBarRef = this.snackBar.open(`${this.localizedVal('Submit failed!', this.localeCategory)}`, 'Ok');
+            });
           break;
 
         case 'approveCase': {
@@ -431,7 +442,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
             .then(() => {})
             .catch(() => {
               this.psService.sendMessage(false);
-              this.snackBar.open(`${this.localizedVal('Approve failed!', this.localeCategory)}`, 'Ok');
+              this.snackBarRef = this.snackBar.open(`${this.localizedVal('Approve failed!', this.localeCategory)}`, 'Ok');
             });
 
           break;
@@ -453,10 +464,40 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
     });
   }
 
-  // eslint-disable-next-line sonarjs/no-identical-functions
   topViewRefresh(): void {
     Object.values(this.formGroup$.controls).forEach((control: any) => {
       control.markAsTouched();
     });
   }
+
+  registerForRefresh() {
+    const refreshConditions = this.pConn$.getCaseInfo()?.getActionRefreshConditions();
+    const pageReference = this.pConn$.getPageReference();
+    const context = this.pConn$.getContextName();
+
+    // refresh api de-registration
+    PCore.getRefreshManager().deRegisterForRefresh(context);
+
+    // refresh api registration
+    const refreshProps = getRefreshProps(refreshConditions);
+    const caseKey = this.pConn$.getCaseInfo().getKey();
+    const refreshOptions = {
+      autoDetectRefresh: true,
+      preserveClientChanges: false
+    };
+    if (refreshProps.length > 0) {
+      refreshProps.forEach(prop => {
+        PCore.getRefreshManager().registerForRefresh(
+          'PROP_CHANGE',
+          this.pConn$.getActionsApi().refreshCaseView.bind(this.pConn$.getActionsApi(), caseKey, '', pageReference, {
+            ...refreshOptions,
+            refreshFor: prop[0]
+          }),
+          `${pageReference}.${prop[1]}`,
+          `${context}/${pageReference}`,
+          context
+        );
+      });
+    }
+  }
 }

package/lib/infra/assignment-card/assignment-card.component.html

@@ -18,6 +18,7 @@
   <div class="psdk-case-view-divider"></div>
 
   <component-mapper
+    *ngIf="arMainButtons$ && arSecondaryButtons$"
     name="ActionButtons"
     [props]="{ arMainButtons$, arSecondaryButtons$ }"
     [parent]="this"

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

@@ -8,7 +8,6 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   selector: 'app-assignment-card',
   templateUrl: './assignment-card.component.html',
   styleUrls: ['./assignment-card.component.scss'],
-  standalone: true,
   imports: [CommonModule, ReactiveFormsModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class AssignmentCardComponent implements OnInit, OnChanges {

package/lib/infra/dashboard-filter/dashboard-filter.component.ts

@@ -14,7 +14,6 @@ import { getFilterExpression, getFormattedDate, createFilter, combineFilters } f
   selector: 'app-dashboard-filter',
   templateUrl: './dashboard-filter.component.html',
   styleUrls: ['./dashboard-filter.component.scss'],
-  standalone: true,
   imports: [
     CommonModule,
     MatFormFieldModule,

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

@@ -15,7 +15,6 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
   selector: 'app-defer-load',
   templateUrl: './defer-load.component.html',
   styleUrls: ['./defer-load.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
@@ -38,6 +37,7 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
   CASE: any;
   PAGE: any;
   DATA: any;
+  lastUpdateCaseTime;
   constructor(private angularPConnect: AngularPConnectService) {
     this.constants = PCore.getConstants();
   }
@@ -58,8 +58,10 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
     // Should always check the bridge to see if the component should
     // update itself (re-render)
     const theRequestedAssignment = this.pConn$.getValue(PCore.getConstants().CASE_INFO.ASSIGNMENT_LABEL);
-    if (theRequestedAssignment !== this.currentLoadedAssignment) {
+    const lastUpdateCaseTime = this.pConn$.getValue('caseInfo.lastUpdateTime');
+    if (theRequestedAssignment !== this.currentLoadedAssignment || (lastUpdateCaseTime && lastUpdateCaseTime !== this.lastUpdateCaseTime)) {
       this.currentLoadedAssignment = theRequestedAssignment;
+      this.lastUpdateCaseTime = lastUpdateCaseTime;
       this.loadActiveTab();
     }
   }
@@ -81,7 +83,7 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
     this.resourceType = resourceType;
     this.isContainerPreview = /preview_[0-9]*/g.test(this.pConn$.getContextName());
 
-    const theConfigProps: any = this.pConn$.getConfigProps();
+    const theConfigProps = this.pConn$.getConfigProps();
     this.deferLoadId = theConfigProps.deferLoadId;
     this.name = this.name || theConfigProps.name;
 
@@ -91,8 +93,8 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
   getViewOptions = () => ({
     viewContext: this.resourceType,
     pageClass: this.loadViewCaseID ? '' : this.pConn$.getDataObject().pyPortal.classID,
-    container: this.isContainerPreview ? 'preview' : null,
-    containerName: this.isContainerPreview ? 'preview' : null,
+    container: this.isContainerPreview ? 'preview' : undefined,
+    containerName: this.isContainerPreview ? 'preview' : undefined,
     updateData: this.isContainerPreview
   });
 
@@ -116,7 +118,7 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
         }
       };
       const configObject = PCore.createPConnect(config);
-      configObject.getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+      configObject.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
       this.loadedPConn$ = ReferenceComponent.normalizePConn(configObject.getPConnect());
       this.componentName$ = this.loadedPConn$.getComponentName();
       if (this.deferLoadId) {

package/lib/infra/error-boundary/error-boundary.component.ts

@@ -5,7 +5,6 @@ import { CommonModule } from '@angular/common';
   selector: 'app-error-boundary',
   templateUrl: './error-boundary.component.html',
   styleUrls: ['./error-boundary.component.scss'],
-  standalone: true,
   imports: [CommonModule]
 })
 export class ErrorBoundaryComponent {

package/lib/infra/multi-step/multi-step.component.ts

@@ -9,7 +9,6 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   templateUrl: './multi-step.component.html',
   styleUrls: ['./multi-step.component.scss'],
   providers: [Utils],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class MultiStepComponent implements OnInit {

package/lib/infra/navbar/navbar.component.ts

@@ -7,8 +7,6 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { ProgressSpinnerService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 
-declare const window: any;
-
 interface NavBarProps {
   // If any, enter additional props that only exist on this component
   showAppName?: boolean;
@@ -19,7 +17,6 @@ interface NavBarProps {
   templateUrl: './navbar.component.html',
   styleUrls: ['./navbar.component.scss'],
   providers: [Utils],
-  standalone: true,
   imports: [CommonModule, MatListModule, MatMenuModule]
 })
 export class NavbarComponent implements OnInit, OnDestroy {
@@ -36,11 +33,11 @@ export class NavbarComponent implements OnInit, OnDestroy {
   navExpandCollapse$: string;
   bShowCaseTypes$ = false;
 
-  portalApp$ = '';
+  portalApp$: string | undefined = '';
   portalLogoImage$: string;
   showAppName$?: boolean = false;
 
-  portalOperator$: string;
+  portalOperator$: string | undefined;
   portalOperatorInitials$: string;
 
   actionsAPI: any;
@@ -131,7 +128,7 @@ export class NavbarComponent implements OnInit, OnDestroy {
 
       this.portalLogoImage$ = this.utils.getSDKStaticContentUrl().concat('assets/pzpega-logo-mark.svg');
       this.portalOperator$ = PCore.getEnvironmentInfo().getOperatorName();
-      this.portalOperatorInitials$ = this.utils.getInitials(this.portalOperator$);
+      this.portalOperatorInitials$ = this.utils.getInitials(this.portalOperator$ ?? '');
       this.showAppName$ = this.configProps$.showAppName;
 
       this.portalApp$ = PCore.getEnvironmentInfo().getApplicationLabel();

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/region/region.component.ts

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

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

@@ -5,20 +5,11 @@
 <div *ngIf="bShowRoot$">
   <div [ngSwitch]="componentName$">
     <component-mapper *ngSwitchCase="'View'" name="View" [props]="{ pConn$, displayOnlyFA$ }"></component-mapper>
-    <!-- <app-reference *ngSwitchCase="'reference'" [pConn$]="pConn$" [displayOnlyFA$]="displayOnlyFA$"></app-reference> -->
     <component-mapper
       *ngSwitchCase="'ViewContainer'"
       name="ViewContainer"
-      [props]="{ pConn$: displayOnlyFA$ ? viewContainerPConn$ : pConn$, displayOnlyFA$ }"
+      [props]="{ pConn$: viewContainerPConn$, displayOnlyFA$ }"
     ></component-mapper>
-    <app-hybrid-view-container *ngSwitchCase="'HybridViewContainer'" [pConn$]="pConn$" [displayOnlyFA$]="displayOnlyFA$"></app-hybrid-view-container>
-    <app-modal-view-container
-      *ngSwitchCase="'ModalViewContainer'"
-      [pConn$]="pConn$"
-      [displayOnlyFA$]="displayOnlyFA$"
-      (modalVisibleChange)="modalVisibleChanged($event)"
-    ></app-modal-view-container>
-    <div *ngSwitchCase="''"></div>
     <div *ngSwitchDefault>{{ localizedVal('RootContainer Missing: ' + componentName$, localeCategory) }}.</div>
   </div>
 </div>
@@ -28,9 +19,5 @@
 </div>
 
 <div *ngIf="mConn$ != null">
-  <app-modal-view-container
-    [pConn$]="mConn$"
-    [displayOnlyFA$]="displayOnlyFA$"
-    (modalVisibleChange)="modalVisibleChanged($event)"
-  ></app-modal-view-container>
+  <app-modal-view-container [pConn$]="mConn$"></app-modal-view-container>
 </div>