@pega/angular-sdk-overrides 0.26.1 → 0.26.2

package/lib/field/text-area/text-area.component.ts

@@ -5,6 +5,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 
 import { FieldBase } from '@pega/angular-sdk-components';
+import { FieldWarningDirective } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
@@ -18,7 +19,7 @@ interface TextAreaProps extends PConnFieldProps {
   selector: 'app-text-area',
   templateUrl: './text-area.component.html',
   styleUrls: ['./text-area.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, FieldWarningDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class TextAreaComponent extends FieldBase {
   configProps$: TextAreaProps;

package/lib/field/text-input/text-input.component.html

@@ -4,7 +4,7 @@
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
     <div [formGroup]="formGroup$" *ngIf="bVisible$">
-      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic">
         <mat-label>{{ label$ }}</mat-label>
         <input
           matInput
@@ -17,6 +17,7 @@
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
         />
+        <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>

package/lib/field/text-input/text-input.component.ts

@@ -5,6 +5,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 
 import { FieldBase } from '@pega/angular-sdk-components';
+import { FieldWarningDirective } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
@@ -18,7 +19,7 @@ interface TextInputProps extends PConnFieldProps {
   selector: 'app-text-input',
   templateUrl: './text-input.component.html',
   styleUrls: ['./text-input.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, FieldWarningDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class TextInputComponent extends FieldBase {
   configProps$: TextInputProps;

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

@@ -4,7 +4,7 @@
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
     <div [formGroup]="formGroup$" *ngIf="bVisible$">
-      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic">
         <mat-label>{{ label$ }}</mat-label>
         <input
           matInput
@@ -17,6 +17,7 @@
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
         />
+        <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>

package/lib/field/time/time.component.ts

@@ -5,6 +5,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 
 import { FieldBase } from '@pega/angular-sdk-components';
+import { FieldWarningDirective } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
 import { format } from '@pega/angular-sdk-components';
@@ -18,7 +19,7 @@ interface TimeProps extends PConnFieldProps {
   selector: 'app-time',
   templateUrl: './time.component.html',
   styleUrls: ['./time.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, FieldWarningDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class TimeComponent extends FieldBase {
   configProps$: TimeProps;

package/lib/field/url/url.component.html

@@ -4,7 +4,7 @@
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
     <div [formGroup]="formGroup$" *ngIf="bVisible$">
-      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic">
         <mat-label>{{ label$ }}</mat-label>
         <input
           matInput
@@ -17,6 +17,7 @@
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
         />
+        <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>

package/lib/field/url/url.component.ts

@@ -5,6 +5,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 
 import { FieldBase } from '@pega/angular-sdk-components';
+import { FieldWarningDirective } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
@@ -17,7 +18,7 @@ interface URLProps extends PConnFieldProps {
   selector: 'app-url',
   templateUrl: './url.component.html',
   styleUrls: ['./url.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, FieldWarningDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class UrlComponent extends FieldBase {
   configProps$: URLProps;

package/lib/field/user-reference/user-reference.component.html

@@ -8,7 +8,7 @@
         <component-mapper name="Operator" [props]="{ pConn$, name$: userName$ }"></component-mapper>
       </div>
       <div [formGroup]="formGroup$" *ngIf="type === 'dropdown'">
-        <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+        <mat-form-field class="psdk-full-width" subscriptSizing="dynamic">
           <mat-select [required]="bRequired$" [formControl]="fieldControl" [attr.data-test-id]="testId" (selectionChange)="fieldOnChange($event)">
             <mat-option *ngFor="let opt of options$" [value]="opt.key">
               {{ opt.value }}
@@ -18,10 +18,11 @@
           <mat-error *ngIf="fieldControl.invalid">
             {{ getErrorMessage() }}
           </mat-error>
+          <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
         </mat-form-field>
       </div>
       <div [formGroup]="formGroup$" *ngIf="type === 'searchbox'">
-        <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+        <mat-form-field class="psdk-full-width" subscriptSizing="dynamic">
           <mat-label>{{ label$ }}</mat-label>
           <input
             matInput
@@ -40,6 +41,7 @@
           <mat-error *ngIf="fieldControl.invalid">
             {{ getErrorMessage() }}
           </mat-error>
+          <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
         </mat-form-field>
       </div>
     </div>

package/lib/field/user-reference/user-reference.component.ts

@@ -9,6 +9,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { FieldWarningDirective } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 import { map, Observable, startWith } from 'rxjs';
 import { handleEvent } from '@pega/angular-sdk-components';
@@ -38,6 +39,7 @@ interface UserReferenceProps extends Omit<PConnFieldProps, 'value'> {
     MatOptionModule,
     MatInputModule,
     MatAutocompleteModule,
+    FieldWarningDirective,
     forwardRef(() => ComponentMapperComponent)
   ]
 })
@@ -54,6 +56,7 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
   options$: any;
   bReadonly$: boolean;
   bRequired$: boolean;
+  bFieldMessageVisible$ = false;
   showAsFormattedText$?: boolean;
   displayAs$?: string;
   testId: string;
@@ -158,12 +161,17 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     this.testId = props.testId;
     this.onRecordChange = props?.onRecordChange;
 
-    const { label, displayAs, value, showAsFormattedText, helperText, placeholder, displayMode } = props;
+    const { label, displayAs, value, showAsFormattedText, helperText, placeholder, displayMode, messageConfig = {}, showFieldMessage } = props;
+    const { readOnly, required } = props;
+    [this.bReadonly$, this.bRequired$] = [readOnly, required].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));
+
+    const isMessageVisible = this.utils.getBooleanValue(messageConfig.visibility);
+    this.bFieldMessageVisible$ = this.utils.getBooleanValue(showFieldMessage) && isMessageVisible && !this.bReadonly$;
 
     this.label$ = label;
     this.showAsFormattedText$ = showAsFormattedText;
     this.displayAs$ = displayAs;
-    this.helperText = helperText;
+    this.helperText = this.bFieldMessageVisible$ ? (messageConfig.content ?? '') : helperText;
     this.placeholder = placeholder || '';
     this.displayMode$ = displayMode;
 
@@ -173,9 +181,6 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
       this.value$ = value || '';
     }
 
-    const { readOnly, required } = props;
-    [this.bReadonly$, this.bRequired$] = [readOnly, required].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));
-
     this.actionsApi = this.pConn$.getActionsApi();
     this.propName = this.pConn$.getStateProps().value;
 

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

@@ -1,4 +1,4 @@
-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';
@@ -75,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);
@@ -123,6 +122,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
       'clearBannerMessages',
       () => {
         this.banners = [];
+        this.cdRef.markForCheck();
       },
       'clearBannerMessages'
     );
@@ -188,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() {
@@ -384,8 +383,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
 
@@ -403,32 +401,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 = 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();
     });
   }
 
@@ -533,24 +531,19 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
     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/lib/infra/Containers/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';
@@ -59,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
   ) {
@@ -214,46 +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) {
-          this.arChildren$ = [newComp.getComponent()];
-        } 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();
     }
   }
 
@@ -263,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) {
@@ -331,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();
     }
   }
 
@@ -398,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/lib/infra/Containers/view-container/view-container.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, NgZone, forwardRef, OnDestroy } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
@@ -56,7 +56,7 @@ export class ViewContainerComponent implements OnInit, OnDestroy {
   constructor(
     private angularPConnect: AngularPConnectService,
     private psService: ProgressSpinnerService,
-    private ngZone: NgZone
+    private cdRef: ChangeDetectorRef
   ) {}
 
   ngOnInit() {
@@ -174,13 +174,15 @@ export class ViewContainerComponent implements OnInit, OnDestroy {
           const latestItem = items[key];
           const rootView = latestItem.view;
           const { context, name: viewName } = rootView.config;
+          const target = key.substring(0, key.lastIndexOf('_'));
           const config: any = { meta: rootView };
           config.options = {
             context: latestItem.context,
             pageReference: context || this.pConn$.getPageReference(),
             containerName: this.pConn$.getContainerName(),
             containerItemName: key,
-            hasForm: viewName === CREATE_DETAILS_VIEW_NAME
+            hasForm: viewName === CREATE_DETAILS_VIEW_NAME,
+            target
           };
           const configObject = PCore.createPConnect(config);
 
@@ -201,23 +203,22 @@ export class ViewContainerComponent implements OnInit, OnDestroy {
           //  ViewContainer HTML template to guide what's rendered similar to what
           //  the Nebula/Constellation return of React.Fragment does
 
-          this.ngZone.run(() => {
-            if (newComp.getComponentName() === 'reference') {
-              // if a refernece, it will de reference to a "view"
-              // so hand this off to the "View" component to do that
-              this.isViewContainer$ = false;
-              this.viewPConn$ = newComp;
+          if (newComp.getComponentName() === 'reference') {
+            // if a refernece, it will de reference to a "view"
+            // so hand this off to the "View" component to do that
+            this.isViewContainer$ = false;
+            this.viewPConn$ = newComp;
 
-              /*
-               ***  this commmented out code should be removed, once we test out that
-               ***  handing off refernce to View component always works
-               */
+            /*
+             ***  this commmented out code should be removed, once we test out that
+             ***  handing off refernce to View component always works
+             */
 
-              // When newComp is a reference, we want to de-reference
-              //  it (to get the View) and then use that View to get the
-              //  template, title, children, etc.
+            // When newComp is a reference, we want to de-reference
+            //  it (to get the View) and then use that View to get the
+            //  template, title, children, etc.
 
-              /*
+            /*
 
               const theDereferencedView = newComp;
               const newConfigProps = theDereferencedView.getConfigProps();
@@ -230,20 +231,20 @@ export class ViewContainerComponent implements OnInit, OnDestroy {
               this.arChildren$ = theDereferencedViewChildren;
               this.createdViewPConn$ = theDereferencedView;
               */
-            } else {
-              // old style when newComp is NOT a 'reference'
-              this.isViewContainer$ = true;
-
-              console.error(`ViewContainer has a newComp that is NOT a reference!`);
-
-              this.createdViewPConn$ = newComp;
-              const newConfigProps = newComp.getConfigProps();
-              this.templateName$ = newConfigProps.template || '';
-              this.title$ = newConfigProps.title || '';
-              // update children with new view's children
-              this.arChildren$ = newComp.getChildren();
-            }
-          });
+          } else {
+            // old style when newComp is NOT a 'reference'
+            this.isViewContainer$ = true;
+
+            console.error(`ViewContainer has a newComp that is NOT a reference!`);
+
+            this.createdViewPConn$ = newComp;
+            const newConfigProps = newComp.getConfigProps();
+            this.templateName$ = newConfigProps.template || '';
+            this.title$ = newConfigProps.title || '';
+            // update children with new view's children
+            this.arChildren$ = newComp.getChildren();
+          }
+          this.cdRef.markForCheck();
         }
       }
     }