@pega/angular-sdk-overrides 25.1.11 → 25.1.13

package/lib/designSystemExtension/material-details-fields/material-details-fields.component.html

@@ -5,7 +5,7 @@
     </div>
     <ng-template #noGroup>
       <div *ngIf="field.type === 'reference'; else showDetails">
-        <component-mapper name="View" [props]="{ pConn$: field.pConn }"></component-mapper>
+        <component-mapper name="reference" [props]="{ pConn$: field.pConn }"></component-mapper>
       </div>
     </ng-template>
 

package/lib/field/date-time/date-time.component.html

@@ -18,7 +18,7 @@
         />
         <mat-datepicker-toggle matSuffix [owlDateTimeTrigger]="dtPicker"></mat-datepicker-toggle>
         <owl-date-time #dtPicker [disabled]="bDisabled$" [scrollStrategy]="scrollStrategy"></owl-date-time>
-        <mat-error *ngIf="fieldControl?.invalid">{{ getErrorMessage() }}</mat-error>
+        <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>
   </div>

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

@@ -1,7 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { Component, forwardRef, Input, OnInit } from '@angular/core';
 import { FormGroup } from '@angular/forms';
-import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
@@ -64,7 +63,7 @@ export class GroupComponent implements OnInit {
    */
   updateSelf(): void {
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as GroupProps;
-    this.arChildren$ = ReferenceComponent.normalizePConnArray(this.pConn$.getChildren());
+    this.arChildren$ = this.pConn$.getChildren();
     this.visibility$ = this.configProps$.visibility;
     this.showHeading$ = this.configProps$.showHeading;
     this.heading$ = this.configProps$.heading;

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

@@ -2,7 +2,7 @@
   <div *ngIf="!bShowConfirm">
     <div *ngIf="!todo_showTodo$">
       <h2 *ngIf="!isMultiStep">{{ containerName$ }}</h2>
-      <div *ngIf="banners?.length">
+      <div *ngIf="banners.length">
         <component-mapper name="AlertBanner" [props]="{ banners }"></component-mapper>
       </div>
     </div>
@@ -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,16 +4,14 @@ 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';
 import { FlowContainerBaseComponent } from '@pega/angular-sdk-components';
 
 /**
- * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
- * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
- * is totally at your own risk.
+ * 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.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
  */
 
 interface FlowContainerProps {
@@ -66,7 +64,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
   localizedVal: any;
   localeCategory = 'Messages';
   localeReference: any;
-  banners: any[];
+  banners: any[] = [];
   // itemKey: string = "";   // JA - this is what Nebula/Constellation uses to pass to finishAssignment, navigateToStep
 
   pConnectOfActiveContainerItem;
@@ -281,8 +279,12 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
 
     // this.containerName$ = oWorkMeta["name"];
     if (bLoadChildren && oWorkData) {
-      this.containerName$ = this.localizedVal(this.getActiveViewLabel() || oWorkData.caseInfo.assignments?.[0].name, undefined, this.localeReference);
-      this.isMultiStep = this.utils.getBooleanValue(oWorkData.caseInfo.assignments?.[0].isMultiStep);
+      this.containerName$ = this.localizedVal(
+        this.getActiveViewLabel() || oWorkData.caseInfo.assignments?.[0]?.name,
+        undefined,
+        this.localeReference
+      );
+      this.isMultiStep = this.utils.getBooleanValue(oWorkData.caseInfo.assignments?.[0]?.isMultiStep);
     }
 
     // turn off spinner
@@ -416,7 +418,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();
 
@@ -529,7 +531,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();
@@ -547,7 +549,11 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
       const oWorkItem = configObject.getPConnect();
       const oWorkData: any = oWorkItem.getDataObject();
 
-      this.containerName$ = this.localizedVal(this.getActiveViewLabel() || oWorkData.caseInfo.assignments?.[0].name, undefined, this.localeReference);
+      this.containerName$ = this.localizedVal(
+        this.getActiveViewLabel() || oWorkData.caseInfo.assignments?.[0]?.name,
+        undefined,
+        this.localeReference
+      );
     });
   }
 

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

@@ -33,7 +33,7 @@ export function hasAssignments(pConnect) {
   const assignments = pConnect.getValue(CASE_INFO.D_CASE_ASSIGNMENTS_RESULTS);
   const childCasesAssignments = getChildCaseAssignments(pConnect);
 
-  return assignments || childCasesAssignments?.length || isCaseWideLocalAction(pConnect);
+  return assignments?.length || childCasesAssignments?.length || isCaseWideLocalAction(pConnect);
 }
 
 export const showBanner = getPConnect => {

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

@@ -3,9 +3,8 @@ import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 
 /**
- * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
- * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
- * is totally at your own risk.
+ * 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.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
  */
 
 // Right this is a skeleton, as Hybrid ViewContainer hasn't been implemented

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

@@ -6,12 +6,10 @@ 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:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
- * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
- * is totally at your own risk.
+ * 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.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
  */
 
 @Component({
@@ -239,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/preview-view-container/preview-view-container.component.ts

@@ -1,9 +1,8 @@
 import { Component, OnInit, Input } from '@angular/core';
 
 /**
- * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
- * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
- * is totally at your own risk.
+ * 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.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
  */
 
 // Right this is a skeleton, as Preview hasn't been implemented

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,14 +3,12 @@ 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';
 
 /**
- * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
- * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
- * is totally at your own risk.
+ * 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.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
  */
 
 interface ViewContainerProps {
@@ -74,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;
@@ -147,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
@@ -223,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;
@@ -245,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();
     }
@@ -225,7 +220,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
       // this.containerName$ = oWorkMeta["name"];
 
       if (oWorkData.caseInfo && oWorkData.caseInfo.assignments !== null) {
-        this.containerName$ = oWorkData.caseInfo.assignments?.[0].name;
+        this.containerName$ = oWorkData.caseInfo.assignments?.[0]?.name;
 
         // get caseInfo
         const oCaseInfo = oData.caseInfo;

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,14 +1,12 @@
 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';
 
 /**
- * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
- * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
- * is totally at your own risk.
+ * 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.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
  */
 
 @Component({
@@ -128,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,54 +1,85 @@
-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: It is not expected that this file should be modified.  It is part of infrastructure code that works with
- * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
- * is totally at your own risk.
+ * 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.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
  */
 
 @Component({
   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: {
@@ -57,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>