@pega/angular-sdk-overrides 0.25.13 → 0.26.1

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

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

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

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

package/lib/infra/Containers/flow-container/flow-container.component.html

@@ -39,6 +39,6 @@
     </mat-card>
   </div>
   <div *ngIf="bShowBanner && bShowConfirm && confirm_pconn">
-    <component-mapper name="View" [props]="{ formGroup$, pConn$: confirm_pconn }"></component-mapper>
+    <component-mapper name="reference" [props]="{ formGroup$, pConn$: confirm_pconn }"></component-mapper>
   </div>
 </div>

package/lib/infra/Containers/flow-container/flow-container.component.ts

@@ -4,7 +4,6 @@ import { FormBuilder, FormGroup } from '@angular/forms';
 import { MatCardModule } from '@angular/material/card';
 import { publicConstants } from '@pega/pcore-pconnect-typedefs/constants';
 import { ProgressSpinnerService } from '@pega/angular-sdk-components';
-import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { getToDoAssignments, hasAssignments, showBanner } from './helpers';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
@@ -415,7 +414,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
         // let kid = this.pConn$.getChildren()[0];
 
         // kid.getPConnect() can be a Reference component. So normalize it just in case
-        //        let todoKid = ReferenceComponent.normalizePConn(kid.getPConnect()).getChildren()[0];
+        //        let todoKid = kid.getPConnect().getChildren()[0];
 
         //        this.todo_pConn$ = todoKid.getPConnect();
 
@@ -528,7 +527,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
     //  the View if it is a Reference component. And need to pass in the getPConnect
     //  to have normalize do a c11Env createComponent (that makes sure options.hasForm
     //  is passed along to all the component's children)
-    const normalizedConfigObject = ReferenceComponent.normalizePConn(configObject.getPConnect());
+    const normalizedConfigObject = configObject.getPConnect();
     // We want the children to be the PConnect itself, not the result of calling getPConnect(),
     //  So need to get the PConnect of the normalized component we just created...
     const normalizedConfigObjectAsPConnect = normalizedConfigObject.getComponent();

package/lib/infra/Containers/modal-view-container/modal-view-container.component.ts

@@ -6,7 +6,6 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { ProgressSpinnerService } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { getBanners } from '@pega/angular-sdk-components';
-import { ReferenceComponent } from '@pega/angular-sdk-components';
 
 /**
  * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
@@ -238,8 +237,7 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
         const bIsRefComponent = this.checkIfRefComponent(newComp);
 
         if (bIsRefComponent) {
-          const newPConn = ReferenceComponent.normalizePConn(newComp);
-          this.arChildren$ = ReferenceComponent.normalizePConnArray(newPConn.getChildren());
+          this.arChildren$ = [newComp.getComponent()];
         } else {
           // update children with new view's children
           this.arChildren$ = newComp.getChildren();

package/lib/infra/Containers/view-container/view-container.component.html

@@ -26,6 +26,6 @@
     </ng-template>
   </div>
   <ng-template #isReference>
-    <component-mapper name="View" [props]="{ pConn$: viewPConn$, displayOnlyFA$ }"></component-mapper>
+    <component-mapper name="reference" [props]="{ pConn$: viewPConn$, formGroup$, displayOnlyFA$ }"></component-mapper>
   </ng-template>
 </div>

package/lib/infra/Containers/view-container/view-container.component.ts

@@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { ProgressSpinnerService } from '@pega/angular-sdk-components';
-import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { configureBrowserBookmark } from './helper';
 
@@ -73,8 +72,7 @@ export class ViewContainerComponent implements OnInit, OnDestroy {
     // Then, continue on with other initialization
 
     //    this.configProps$ = this.pConn$.getConfigProps();
-    // children may have a 'reference' so normalize the children array
-    this.arChildren$ = ReferenceComponent.normalizePConnArray(this.pConn$.getChildren());
+    this.arChildren$ = this.pConn$.getChildren();
 
     this.buildName$ = this.buildName();
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as ViewContainerProps;
@@ -146,8 +144,7 @@ export class ViewContainerComponent implements OnInit, OnDestroy {
     //   *** DON'T call updateSelf in ngInit!!  ***
 
     if (this.arChildren$ == null) {
-      // children may have a 'reference' so normalize the children array
-      this.arChildren$ = ReferenceComponent.normalizePConnArray(this.pConn$.getChildren());
+      this.arChildren$ = this.pConn$.getChildren();
     }
 
     // routingInfo was added as component prop in populateAdditionalProps
@@ -222,12 +219,12 @@ export class ViewContainerComponent implements OnInit, OnDestroy {
 
               /*
 
-              const theDereferencedView = ReferenceComponent.normalizePConn(newComp);
+              const theDereferencedView = newComp;
               const newConfigProps = theDereferencedView.getConfigProps();
 
               // children may have a 'reference' so normalize the children arra
 
-              const theDereferencedViewChildren = ReferenceComponent.normalizePConnArray(theDereferencedView.getChildren());
+              const theDereferencedViewChildren = theDereferencedView.getChildren();
               this.templateName$ = ('template' in newConfigProps) ? newConfigProps["template"] : "";
               this.title$ = ('title' in newConfigProps) ? newConfigProps["title"] : "";
               this.arChildren$ = theDereferencedViewChildren;
@@ -244,8 +241,7 @@ export class ViewContainerComponent implements OnInit, OnDestroy {
               this.templateName$ = newConfigProps.template || '';
               this.title$ = newConfigProps.title || '';
               // update children with new view's children
-              // children may have a 'reference' so normalize the children array
-              this.arChildren$ = ReferenceComponent.normalizePConnArray(newComp.getChildren());
+              this.arChildren$ = newComp.getChildren();
             }
           });
         }

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

@@ -7,7 +7,6 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 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) {
@@ -149,8 +148,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
 
     this.registerForRefresh();
 
-    // pConn$ may be a 'reference' component, so normalize it
-    this.newPConn$ = ReferenceComponent.normalizePConn(this.pConn$);
+    this.newPConn$ = this.pConn$;
 
     if (this.arChildren$) {
       this.createButtons();
@@ -158,9 +156,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   initComponent() {
-    // pConn$ may be a 'reference' component, so normalize it
-    // this.pConn$ = ReferenceComponent.normalizePConn(this.pConn$);
-    this.newPConn$ = ReferenceComponent.normalizePConn(this.pConn$);
+    this.newPConn$ = this.pConn$;
 
     // prevent re-intializing with flowContainer update unless an action is taken
     this.bReInit = false;
@@ -203,7 +199,6 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
     this.cancelCreateStageAssignment = actionsAPI.cancelCreateStageAssignment.bind(actionsAPI);
     this.approveCase = actionsAPI.approveCase?.bind(actionsAPI);
     this.rejectCase = actionsAPI.rejectCase?.bind(actionsAPI);
-
     if (this.arChildren$) {
       this.createButtons();
     }

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

@@ -2,6 +2,7 @@
   <div *ngFor="let kid of childrenArray" class="psdk-assignment-card-child">
     <div [ngSwitch]="kid.getPConnect().getComponentName()">
       <component-mapper *ngSwitchCase="'View'" name="View" [props]="{ formGroup$, pConn$: kid.getPConnect() }"></component-mapper>
+      <component-mapper *ngSwitchCase="'reference'" name="reference" [props]="{ formGroup$, pConn$: kid.getPConnect() }"></component-mapper>
       <component-mapper
         *ngSwitchCase="'CaseCreateStage'"
         name="CaseCreateStage"

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

@@ -1,7 +1,6 @@
 import { Component, OnInit, Input, Output, EventEmitter, forwardRef, OnChanges, SimpleChanges } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 
 function isChildrenUpdated(children) {
@@ -34,18 +33,13 @@ export class AssignmentCardComponent implements OnInit, OnChanges {
   @Output() actionButtonClick: EventEmitter<any> = new EventEmitter();
 
   ngOnInit(): void {
-    // Children may contain 'reference' component, so we need to
-    //  normalize them
-    this.childrenArray = ReferenceComponent.normalizePConnArray(this.arChildren$);
+    this.childrenArray = this.arChildren$;
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    // Children may contain 'reference' component, so we need to
-    //  normalize them
-
     const { arChildren$ } = changes;
     if (isChildrenUpdated(arChildren$)) {
-      this.childrenArray = ReferenceComponent.normalizePConnArray(this.arChildren$);
+      this.childrenArray = this.arChildren$;
     }
   }
 

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

@@ -1,7 +1,6 @@
 import { Component, OnInit, Input, forwardRef, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { publicConstants } from '@pega/pcore-pconnect-typedefs/constants';
-import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 
@@ -127,7 +126,7 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
       const configObject = PCore.createPConnect(config);
       configObject.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
 
-      this.childComponentPConnect = ReferenceComponent.normalizePConn(configObject.getPConnect());
+      this.childComponentPConnect = configObject.getPConnect();
 
       if (this.deferLoadId) {
         PCore.getDeferLoadManager().stop(this.deferLoadId, this.pConn$.getContextName());

package/lib/infra/reference/reference.component.html

@@ -1 +1,7 @@
-<!-- Reference component is all static methods so .html not used -->
+<div *ngIf="viewComponentPConnect">
+  <component-mapper
+    [name]="viewComponentPConnect.getComponentName()"
+    [props]="{ pConn$: viewComponentPConnect, formGroup$ }"
+    errorMsg="Reference Missing: {{ viewComponentPConnect.getComponentName() }}"
+  ></component-mapper>
+</div>

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

@@ -1,4 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, Input, forwardRef, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 
 /**
  * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
@@ -9,45 +12,74 @@ import { Component } from '@angular/core';
   selector: 'app-reference',
   templateUrl: './reference.component.html',
   styleUrls: ['./reference.component.scss'],
-  standalone: true
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class ReferenceComponent {
-  /* Used to toggle some class-wide logging */
-  private static bLogging = false;
-
-  /**
-   * 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') {
-      console.error(`Reference component: createFullReferencedViewFromRef inPConn is NOT a reference! ${inPConn.getComponentName()}`);
-      return null;
+export class ReferenceComponent implements OnInit, OnDestroy, OnChanges {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: any;
+
+  angularPConnectData: AngularPConnectData = {};
+  viewComponentPConnect: typeof PConnect | null = null;
+
+  constructor(private angularPConnect: AngularPConnectService) {}
+
+  ngOnInit(): void {
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+    this.updateSelf();
+  }
+
+  ngOnDestroy(): void {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    const { pConn$ } = changes;
+    if (!pConn$.firstChange && pConn$.previousValue !== pConn$.currentValue) {
+      this.checkAndUpdate();
+    }
+  }
+
+  onStateChange() {
+    this.checkAndUpdate();
+  }
+
+  // Should always check the bridge to see if the component should update itself (re-render)
+  checkAndUpdate() {
+    const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
+
+    // ONLY call updateSelf when the component should update
+    if (bUpdateSelf) {
+      this.updateSelf();
     }
+  }
 
-    // Get reference configuration and make a copy
-    const referenceConfig = { ...inPConn.getComponentConfig() };
+  updateSelf() {
+    const pConnect = this.pConn$;
+
+    const resolvedConfigProps = pConnect.resolveConfigProps(pConnect.getConfigProps()) as {
+      visibility?: boolean;
+      context?: string;
+      readOnly?: boolean;
+      displayMode?: string;
+    };
+
+    const { visibility = true, context = '', readOnly = false, displayMode = '' } = resolvedConfigProps;
+
+    const referenceConfig = { ...pConnect.getComponentConfig() };
 
-    // 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;
 
-    // Get the metadata for the referenced view
-    const viewMetadata = inPConn.getReferencedView();
+    const viewMetadata: any = pConnect.getReferencedView();
 
-    // Return null if view metadata is not found
     if (!viewMetadata) {
-      console.log('View not found ', inPConn.getComponentConfig());
-      return null;
+      this.viewComponentPConnect = null;
+      return;
     }
 
-    // Create the view object by merging metadata with reference config
     const viewObject = {
       ...viewMetadata,
       config: {
@@ -56,101 +88,24 @@ 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: ${inPConn.getContextName()}`);
-    }
-
-    // Create the component with the right context
-    const viewComponent = inPConn.createComponent(viewObject, null, null, {
+    // @ts-expect-error - createComponent expects string but null is passed for unused parameters (matches React SDK pattern)
+    const viewComponent: any = pConnect.createComponent(viewObject, null, null, {
       pageReference: context && context.startsWith('@CLASS') ? '' : context
     });
 
     if (referenceConfig.inheritedProps && referenceConfig.inheritedProps.length > 0) {
-      const inheritedProps = inPConn.getInheritedProps();
+      const inheritedProps = pConnect.getInheritedProps();
       referenceConfig.inheritedProps = Object.keys(inheritedProps).map(prop => ({ prop, value: inheritedProps[prop] }));
     }
 
-    // Get the PConnect object from the created component
     const newCompPConnect = viewComponent.getPConnect();
 
-    // Set inherited configuration on the new component
     newCompPConnect.setInheritedConfig({
       ...referenceConfig,
       readOnly,
       displayMode
     });
 
-    // Log debug information if logging is enabled
-    if (ReferenceComponent.bLogging) {
-      console.log(
-        `Angular Reference component: createFullReferencedViewFromRef -> newCompPConnect configProps: ${JSON.stringify(
-          newCompPConnect.getConfigProps()
-        )}`
-      );
-    }
-
-    // Return the component if it should be visible, otherwise null
-    return visibility !== false ? newCompPConnect : null;
-  }
-
-  /**
-   * 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;
-    }
-
-    // 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();
-      }
-
-      // For direct PConnect objects, just create the referenced view
-      return this.createFullReferencedViewFromRef(inPConn);
-    }
-
-    // Not a reference component, return unchanged
-    return inPConn;
-  }
-
-  /**
-   * 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 || [];
-    }
-
-    // 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 || [];
+    this.viewComponentPConnect = visibility !== false ? newCompPConnect : null;
   }
 }

package/lib/infra/region/region.component.ts

@@ -1,7 +1,6 @@
 import { Component, OnInit, Input, forwardRef, OnChanges, SimpleChanges } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
-import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 
 @Component({
@@ -30,7 +29,6 @@ export class RegionComponent implements OnInit, OnChanges {
   }
 
   updateSelf() {
-    // The children may contain 'reference' components, so normalize the children...
-    this.arChildren$ = ReferenceComponent.normalizePConnArray(this.pConn$.getChildren());
+    this.arChildren$ = this.pConn$.getChildren();
   }
 }

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

@@ -10,6 +10,7 @@
       name="ViewContainer"
       [props]="{ pConn$: viewContainerPConn$, displayOnlyFA$ }"
     ></component-mapper>
+    <component-mapper *ngSwitchCase="'reference'" name="reference" [props]="{ pConn$ }"></component-mapper>
     <div *ngSwitchDefault>{{ localizedVal('RootContainer Missing: ' + componentName$, localeCategory) }}.</div>
   </div>
 </div>

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

@@ -5,7 +5,6 @@ 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';
 import { ModalViewContainerComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
@@ -39,7 +38,7 @@ export class RootContainerComponent implements OnInit, OnDestroy {
   // For interaction with AngularPConnect
   angularPConnectData: AngularPConnectData = {};
 
-  componentName$ = '';
+  componentName$: any;
   bIsProgress$ = false;
 
   // preview and modalview pConn
@@ -140,9 +139,7 @@ export class RootContainerComponent implements OnInit, OnDestroy {
           setTimeout(() => {
             // makes sure Angular tracks these changes
             this.ngZone.run(() => {
-              // the new rootObject may be a 'reference'. So,
-              //  normalize it to get the referencedView if that's the case
-              const theNewPConn = ReferenceComponent.normalizePConn(rootObject.getPConnect());
+              const theNewPConn = rootObject.getPConnect();
               // update ComponentName$ before we update pConn$ to make sure they're in sync
               //  when rendering...
               this.componentName$ = theNewPConn.getComponentName();

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

@@ -4,7 +4,6 @@ import { FormGroup } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { getAllFields } from '@pega/angular-sdk-components';
-import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 
 const NO_HEADER_TEMPLATES = ['SubTabs', 'SimpleTable', 'Confirmation', 'DynamicTabs', 'DetailsSubTabs', 'ListView'];
@@ -145,12 +144,8 @@ export class ViewComponent implements OnInit, OnDestroy, OnChanges {
 
     // debugger;
 
-    // normalize this.pConn$ in case it contains a 'reference'
-    this.pConn$ = ReferenceComponent.normalizePConn(this.pConn$);
-
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as ViewProps;
     this.inheritedProps$ = this.pConn$.getInheritedProps();
-
     // NOTE: this.configProps$.visibility'] is used in view.component.ts such that
     //  the View will only be rendered when this.configProps$.visibility'] is false.
     //  It WILL render if true or undefined.
@@ -159,9 +154,11 @@ export class ViewComponent implements OnInit, OnDestroy, OnChanges {
     this.title$ = this.configProps$.title || '';
     // label & showLabel within inheritedProps takes precedence over configProps
     this.label$ = this.inheritedProps$.label || this.configProps$.label || '';
-    this.showLabel$ = this.inheritedProps$.showLabel || this.configProps$.showLabel || isDetailsTemplate(this.templateName$);
-    // children may have a 'reference' so normalize the children array
-    this.arChildren$ = ReferenceComponent.normalizePConnArray(this.pConn$.getChildren());
+    this.showLabel$ =
+      this.inheritedProps$.showLabel !== undefined
+        ? this.inheritedProps$.showLabel
+        : this.configProps$.showLabel || isDetailsTemplate(this.templateName$);
+    this.arChildren$ = this.pConn$.getChildren();
     this.visibility$ = this.configProps$.visibility ?? this.visibility$;
 
     /**

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

@@ -1,6 +1,5 @@
 import { Component, Input, OnChanges, OnInit, SimpleChanges, forwardRef } from '@angular/core';
 
-import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { CommonModule } from '@angular/common';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 
@@ -59,6 +58,6 @@ export class BannerPageComponent implements OnInit, OnChanges {
     this.backgroundImage = this.configProps$.backgroundImage;
 
     // The children may contain 'reference' components, so normalize the children...
-    this.arChildren$ = ReferenceComponent.normalizePConnArray(this.pConn$.getChildren());
+    this.arChildren$ = this.pConn$.getChildren();
   }
 }