@pega/dx-component-builder-sdk 25.1.16 → 25.1.17

package/tests/assets/sdk-a/components/create/override-sdk/field/text-content/config-ext.json

@@ -1,9 +1,7 @@
 {
-    "label": "TextContent",
-    "componentKey": "TextContent",
-    "name": "TextContent",
-    "description": "Text",
-    "type": "Field",
-    "subtype": "DATA_CAPTURE",
-    "properties": []
-}
+  "name": "TextContent",
+  "description": "Text",
+  "type": "Field",
+  "subtype": "DATA_CAPTURE",
+  "properties": []
+}

package/tests/assets/sdk-a/components/create/override-sdk/field/text-input/config-ext.json

@@ -1,9 +1,8 @@
 {
-    "componentKey": "TextInput",
-    "name": "TextInput",
-    "label": "Text input",
-    "description": "Text (single line)",
-    "type": "Field",
-    "subtype": "Text",
-    "properties": []
-}
+  "name": "TextInput",
+  "label": "Text input",
+  "description": "Text (single line)",
+  "type": "Field",
+  "subtype": "Text",
+  "properties": []
+}

package/tests/assets/sdk-a/components/create/override-sdk/field/time/config-ext.json

@@ -1,9 +1,8 @@
 {
-    "componentKey": "Time",
-    "name": "Time",
-    "label": "Time only",
-    "description": "Time only",
-    "type": "Field",
-    "subtype": "TimeOfDay",
-    "properties": []
-}
+  "name": "Time",
+  "label": "Time only",
+  "description": "Time only",
+  "type": "Field",
+  "subtype": "TimeOfDay",
+  "properties": []
+}

package/tests/assets/sdk-a/components/create/override-sdk/field/url/config-ext.json

@@ -1,9 +1,8 @@
 {
-    "componentKey": "URL",
-    "name": "URL",
-    "label": "URL",
-    "description": "URL",
-    "type": "Field",
-    "subtype": "Text-URL",
-    "properties": []
-}
+  "name": "URL",
+  "label": "URL",
+  "description": "URL",
+  "type": "Field",
+  "subtype": "Text-URL",
+  "properties": []
+}

package/tests/assets/sdk-a/components/create/override-sdk/field/user-reference/config-ext.json

@@ -1,9 +1,7 @@
 {
-    "label": "UserReference",
-    "componentKey": "UserReference",
-    "name": "UserReference",
-    "description": "User reference",
-    "type": "Field",
-    "subtype": "DATA_CAPTURE",
-    "properties": []
-}
+  "name": "UserReference",
+  "description": "User reference",
+  "type": "Field",
+  "subtype": "DATA_CAPTURE",
+  "properties": []
+}

package/tests/assets/sdk-a/components/create/override-sdk/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/tests/assets/sdk-a/components/create/override-sdk/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/tests/assets/sdk-a/components/create/override-sdk/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/tests/assets/sdk-a/components/create/override-sdk/infra/defer-load/defer-load.component.ts

@@ -1,7 +1,6 @@
-import { Component, OnInit, Input, forwardRef, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, OnInit, Input, forwardRef, OnDestroy, OnChanges, SimpleChanges, ChangeDetectorRef } 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';
 
@@ -36,7 +35,10 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
   PAGE: any;
   DATA: any;
   lastUpdateCaseTime;
-  constructor(private angularPConnect: AngularPConnectService) {
+  constructor(
+    private angularPConnect: AngularPConnectService,
+    private cdRef: ChangeDetectorRef
+  ) {
     this.constants = PCore.getConstants();
   }
 
@@ -127,13 +129,13 @@ 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());
       }
     }
-    // this.cdRef.detectChanges();
+    this.cdRef.detectChanges();
   }
 
   loadActiveTab() {

package/tests/assets/sdk-a/components/create/override-sdk/infra/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/tests/assets/sdk-a/components/create/override-sdk/infra/flow-container/flow-container.component.ts

@@ -1,10 +1,9 @@
-import { Component, OnInit, Input, ChangeDetectorRef, NgZone, forwardRef, OnDestroy, Injector } from '@angular/core';
+import { Component, OnInit, Input, ChangeDetectorRef, forwardRef, OnDestroy, Injector } from '@angular/core';
 import { CommonModule } from '@angular/common';
 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';
@@ -76,7 +75,6 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
     private cdRef: ChangeDetectorRef,
     private psService: ProgressSpinnerService,
     private fb: FormBuilder,
-    private ngZone: NgZone,
     private utils: Utils
   ) {
     super(injector);
@@ -124,6 +122,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
       'clearBannerMessages',
       () => {
         this.banners = [];
+        this.cdRef.markForCheck();
       },
       'clearBannerMessages'
     );
@@ -189,10 +188,9 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
   }
 
   showPageMessages(completeProps: FlowContainerProps) {
-    this.ngZone.run(() => {
-      const pageMessages = completeProps.pageMessages;
-      this.banners = [{ messages: pageMessages?.map(msg => this.localizedVal(msg.message, 'Messages')), variant: 'urgent' }];
-    });
+    const pageMessages = completeProps.pageMessages;
+    this.banners = [{ messages: pageMessages?.map(msg => this.localizedVal(msg.message, 'Messages')), variant: 'urgent' }];
+    this.cdRef.markForCheck();
   }
 
   getTodoVisibilty() {
@@ -280,8 +278,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
@@ -385,8 +387,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
     const { CASE_INFO: CASE_CONSTS } = PCore.getConstants();
 
     setTimeout(() => {
-      this.ngZone.run(() => {
-        /*
+      /*
           *** renove this commmented out code when React/WC is updated
           *** this code is replace with the call to "getToDoAssigments" function below
 
@@ -404,32 +405,32 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
           const caseActions = localPConn.getValue(CASE_CONSTS.CASE_INFO_ACTIONS);
           */
 
-        const todoAssignments = getToDoAssignments(this.pConn$);
+      const todoAssignments = getToDoAssignments(this.pConn$);
 
-        if (todoAssignments && todoAssignments.length > 0) {
-          this.todo_caseInfoID$ = this.pConn$.getValue(CASE_CONSTS.CASE_INFO_ID);
-          this.todo_datasource$ = { source: todoAssignments };
-        }
+      if (todoAssignments && todoAssignments.length > 0) {
+        this.todo_caseInfoID$ = this.pConn$.getValue(CASE_CONSTS.CASE_INFO_ID);
+        this.todo_datasource$ = { source: todoAssignments };
+      }
 
-        /* remove this commented out code when update React/WC */
-        // let kid = this.pConn$.getChildren()[0];
+      /* remove this commented out code when update React/WC */
+      // 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];
+      // kid.getPConnect() can be a Reference component. So normalize it just in case
+      //        let todoKid = kid.getPConnect().getChildren()[0];
 
-        //        this.todo_pConn$ = todoKid.getPConnect();
+      //        this.todo_pConn$ = todoKid.getPConnect();
 
-        /* code change here to note for React/WC  */
-        // todo now needs pConn to open the work item on click "go"
-        this.todo_pConn$ = this.pConn$;
+      /* code change here to note for React/WC  */
+      // todo now needs pConn to open the work item on click "go"
+      this.todo_pConn$ = this.pConn$;
 
-        // still needs the context of the original work item
-        this.todo_context$ = localPConn.getContextName();
+      // still needs the context of the original work item
+      this.todo_context$ = localPConn.getContextName();
 
-        this.todo_showTodo$ = true;
+      this.todo_showTodo$ = true;
 
-        this.psService.sendMessage(false);
-      });
+      this.psService.sendMessage(false);
+      this.cdRef.markForCheck();
     });
   }
 
@@ -528,30 +529,25 @@ 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();
 
     // makes sure Angular tracks these changes
-    this.ngZone.run(() => {
-      this.buildName$ = this.getBuildName();
-      // what comes back now in configObject is the children of the flowContainer
+    this.buildName$ = this.getBuildName();
+    // what comes back now in configObject is the children of the flowContainer
 
-      this.arChildren$ = [];
-      this.arChildren$.push(normalizedConfigObjectAsPConnect);
+    this.arChildren$ = [];
+    this.arChildren$.push(normalizedConfigObjectAsPConnect);
 
-      this.psService.sendMessage(false);
+    this.psService.sendMessage(false);
 
-      const oWorkItem = configObject.getPConnect();
-      const oWorkData: any = oWorkItem.getDataObject();
+    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);
+    this.cdRef.markForCheck();
   }
 
   getBuildName(): string {

package/tests/assets/sdk-a/components/create/override-sdk/infra/modal-view-container/modal-view-container.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Output, EventEmitter, NgZone, forwardRef, OnDestroy } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, Input, Output, EventEmitter, forwardRef, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import isEqual from 'fast-deep-equal';
@@ -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.
@@ -60,7 +59,7 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
 
   constructor(
     private angularPConnect: AngularPConnectService,
-    private ngZone: NgZone,
+    private cdRef: ChangeDetectorRef,
     private psService: ProgressSpinnerService,
     private fb: FormBuilder
   ) {
@@ -215,47 +214,45 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
     if (newComp && caseInfo && this.compareCaseInfoIsDifferent(caseInfo)) {
       this.psService.sendMessage(false);
 
-      this.ngZone.run(() => {
-        this.createdViewPConn$ = newComp;
-        const newConfigProps = newComp.getConfigProps();
-        this.templateName$ = 'template' in newConfigProps ? (newConfigProps.template as string) : '';
-
-        const { actionName } = latestItem;
-        const theNewCaseInfo = newComp.getCaseInfo();
-        // const caseName = theNewCaseInfo.getName();
-        const ID = theNewCaseInfo.getBusinessID() || theNewCaseInfo.getID();
-
-        const caseTypeName = theNewCaseInfo.getCaseTypeName();
-        const isDataObject = routingInfo.items[latestItem.context].resourceType === PCore.getConstants().RESOURCE_TYPES.DATA;
-        const dataObjectAction = routingInfo.items[latestItem.context].resourceStatus;
-        this.isMultiRecord = routingInfo.items[latestItem.context].isMultiRecordData;
-        this.context$ = latestItem.context;
-        this.title$ =
-          isDataObject || this.isMultiRecord
-            ? this.getModalHeading(dataObjectAction)
-            : this.determineModalHeaderByAction(actionName, caseTypeName, ID, this.createdViewPConn$?.getCaseLocaleReference());
-
-        const bIsRefComponent = this.checkIfRefComponent(newComp);
-
-        if (bIsRefComponent) {
-          const newPConn = ReferenceComponent.normalizePConn(newComp);
-          this.arChildren$ = ReferenceComponent.normalizePConnArray(newPConn.getChildren());
-        } else {
-          // update children with new view's children
-          this.arChildren$ = newComp.getChildren();
-        }
+      this.createdViewPConn$ = newComp;
+      const newConfigProps = newComp.getConfigProps();
+      this.templateName$ = 'template' in newConfigProps ? (newConfigProps.template as string) : '';
+
+      const { actionName } = latestItem;
+      const theNewCaseInfo = newComp.getCaseInfo();
+      // const caseName = theNewCaseInfo.getName();
+      const ID = theNewCaseInfo.getBusinessID() || theNewCaseInfo.getID();
+
+      const caseTypeName = theNewCaseInfo.getCaseTypeName();
+      const isDataObject = routingInfo.items[latestItem.context].resourceType === PCore.getConstants().RESOURCE_TYPES.DATA;
+      const dataObjectAction = routingInfo.items[latestItem.context].resourceStatus;
+      this.isMultiRecord = routingInfo.items[latestItem.context].isMultiRecordData;
+      this.context$ = latestItem.context;
+      this.title$ =
+        isDataObject || this.isMultiRecord
+          ? this.getModalHeading(dataObjectAction)
+          : this.determineModalHeaderByAction(actionName, caseTypeName, ID, this.createdViewPConn$?.getCaseLocaleReference());
+
+      const bIsRefComponent = this.checkIfRefComponent(newComp);
+
+      if (bIsRefComponent) {
+        this.arChildren$ = [newComp.getComponent()];
+      } else {
+        // update children with new view's children
+        this.arChildren$ = newComp.getChildren();
+      }
 
-        this.bShowModal$ = true;
+      this.bShowModal$ = true;
 
-        // for when non modal
-        this.modalVisibleChange.emit(this.bShowModal$);
+      // for when non modal
+      this.modalVisibleChange.emit(this.bShowModal$);
 
-        // save off itemKey to be used for finishAssignment, etc.
-        this.itemKey$ = key;
+      // save off itemKey to be used for finishAssignment, etc.
+      this.itemKey$ = key;
 
-        // cause a change for assignment
-        this.updateToken$ = new Date().getTime();
-      });
+      // cause a change for assignment
+      this.updateToken$ = new Date().getTime();
+      this.cdRef.markForCheck();
     }
   }
 
@@ -265,14 +262,13 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
       // should put here
     }
 
-    this.ngZone.run(() => {
-      this.bShowModal$ = false;
+    this.bShowModal$ = false;
 
-      // for when non modal
-      this.modalVisibleChange.emit(this.bShowModal$);
+    // for when non modal
+    this.modalVisibleChange.emit(this.bShowModal$);
 
-      this.oCaseInfo = {};
-    });
+    this.oCaseInfo = {};
+    this.cdRef.markForCheck();
   }
 
   getConfigObject(item, pConnect, isReverseCoexistence = false) {
@@ -333,10 +329,9 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
     */
     if (latestItem && isModalAction && !this.actionsDialog) {
       const configObject = this.getConfigObject(latestItem, this.pConn$);
-      this.ngZone.run(() => {
-        this.cancelPConn$ = configObject?.getPConnect();
-        this.bShowCancelAlert$ = true;
-      });
+      this.cancelPConn$ = configObject?.getPConnect();
+      this.bShowCancelAlert$ = true;
+      this.cdRef.markForCheck();
     }
   }
 
@@ -400,13 +395,12 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
 
   closeActionsDialog = () => {
     this.actionsDialog = true;
-    // this.ngZone.run(() => {
     this.bShowModal$ = false;
 
     // for when non modal
     this.modalVisibleChange.emit(this.bShowModal$);
 
     this.oCaseInfo = {};
-    // });
+    this.cdRef.markForCheck();
   };
 }

package/tests/assets/sdk-a/components/create/override-sdk/infra/navbar/navbar.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ChangeDetectorRef, NgZone, OnDestroy } from '@angular/core';
+import { Component, OnInit, Input, ChangeDetectorRef, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatListModule } from '@angular/material/list';
@@ -53,7 +53,6 @@ export class NavbarComponent implements OnInit, OnDestroy {
     private angularPConnect: AngularPConnectService,
     private chRef: ChangeDetectorRef,
     private psService: ProgressSpinnerService,
-    private ngZone: NgZone,
     private utils: Utils
   ) {}
 
@@ -104,40 +103,38 @@ export class NavbarComponent implements OnInit, OnDestroy {
   }
 
   initComponent() {
-    this.ngZone.run(() => {
-      this.navIcon$ = this.utils.getSDKStaticContentUrl().concat('assets/pzpega-logo-mark.svg');
-      this.navExpandCollapse$ = this.utils.getImageSrc('plus', this.utils.getSDKStaticContentUrl());
-
-      // Then, continue on with other initialization
-
-      // making a copy, so can add info
-      this.navPages$ = JSON.parse(JSON.stringify(this.pages$));
-      // @ts-ignore
-      const localeReference = PCore.getLocaleUtils().getPortalLocaleReference() || this.pConn$.getValue('.pyLocaleReference');
-      this.navPages$.forEach(page => {
-        const destinationObject: any = {};
-        this.pConn$.resolveConfigProps(
-          { defaultHeading: page.pyDefaultHeading || page.pyLabel, localeReference: page.pyLocalizationReference },
-          destinationObject
-        );
-        page.name = this.localeUtils.getLocaleValue(destinationObject.defaultHeading, '', destinationObject.localeReference || localeReference);
-        page.iconName = this.utils.getImageSrc(page.pxPageViewIcon, this.utils.getSDKStaticContentUrl());
-      });
-      this.actionsAPI = this.pConn$.getActionsApi();
-      this.createWork = this.actionsAPI.createWork.bind(this.actionsAPI);
-      this.showPage = this.actionsAPI.showPage.bind(this.actionsAPI);
-      this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as NavBarProps;
-      this.logout = this.actionsAPI.logout.bind(this.actionsAPI);
-
-      // const oData = this.pConn$.getDataObject();
-
-      this.portalLogoImage$ = this.utils.getSDKStaticContentUrl().concat('assets/pzpega-logo-mark.svg');
-      this.portalOperator$ = PCore.getEnvironmentInfo().getOperatorName();
-      this.portalOperatorInitials$ = this.utils.getInitials(this.portalOperator$ ?? '');
-      this.showAppName$ = this.configProps$.showAppName;
-
-      this.portalApp$ = PCore.getEnvironmentInfo().getApplicationLabel();
+    this.navIcon$ = this.utils.getSDKStaticContentUrl().concat('assets/pzpega-logo-mark.svg');
+    this.navExpandCollapse$ = this.utils.getImageSrc('plus', this.utils.getSDKStaticContentUrl());
+
+    // Then, continue on with other initialization
+
+    // making a copy, so can add info
+    this.navPages$ = JSON.parse(JSON.stringify(this.pages$));
+    const localeReference = PCore.getLocaleUtils().getPortalLocaleReference() || this.pConn$.getValue('.pyLocaleReference');
+    this.navPages$.forEach(page => {
+      const destinationObject: any = {};
+      this.pConn$.resolveConfigProps(
+        { defaultHeading: page.pyDefaultHeading || page.pyLabel, localeReference: page.pyLocalizationReference },
+        destinationObject
+      );
+      page.name = this.localeUtils.getLocaleValue(destinationObject.defaultHeading, '', destinationObject.localeReference || localeReference);
+      page.iconName = this.utils.getImageSrc(page.pxPageViewIcon, this.utils.getSDKStaticContentUrl());
     });
+    this.actionsAPI = this.pConn$.getActionsApi();
+    this.createWork = this.actionsAPI.createWork.bind(this.actionsAPI);
+    this.showPage = this.actionsAPI.showPage.bind(this.actionsAPI);
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as NavBarProps;
+    this.logout = this.actionsAPI.logout.bind(this.actionsAPI);
+
+    // const oData = this.pConn$.getDataObject();
+
+    this.portalLogoImage$ = this.utils.getSDKStaticContentUrl().concat('assets/pzpega-logo-mark.svg');
+    this.portalOperator$ = PCore.getEnvironmentInfo().getOperatorName();
+    this.portalOperatorInitials$ = this.utils.getInitials(this.portalOperator$ ?? '');
+    this.showAppName$ = this.configProps$.showAppName;
+
+    this.portalApp$ = PCore.getEnvironmentInfo().getApplicationLabel();
+    this.chRef.markForCheck();
   }
 
   navPanelButtonClick(oPageData: any) {

package/tests/assets/sdk-a/components/create/override-sdk/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/tests/assets/sdk-a/components/create/override-sdk/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>