@pega/dx-component-builder-sdk 26.1.10 → 26.1.11

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

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

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

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

package/tests/assets/sdk-a/components/createAll/override-sdk/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/tests/assets/sdk-a/components/createAll/override-sdk/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/tests/assets/sdk-a/components/createAll/override-sdk/field/time/config-ext.json

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

package/tests/assets/sdk-a/components/createAll/override-sdk/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/tests/assets/sdk-a/components/createAll/override-sdk/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/tests/assets/sdk-a/components/createAll/override-sdk/field/url/config-ext.json

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

package/tests/assets/sdk-a/components/createAll/override-sdk/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/tests/assets/sdk-a/components/createAll/override-sdk/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/tests/assets/sdk-a/components/createAll/override-sdk/field/user-reference/config-ext.json

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

package/tests/assets/sdk-a/components/createAll/override-sdk/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/tests/assets/sdk-a/components/createAll/override-sdk/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;
 
@@ -229,7 +234,7 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     let key = '';
     if (event?.target?.value) {
       const index = this.options$?.findIndex(element => element.value === event.target.value);
-      key = index > -1 ? (key = this.options$[index].key) : event.target.value;
+      key = index > -1 ? this.options$[index].key : event.target.value;
     }
     const value = key;
     handleEvent(this.actionsApi, 'changeNblur', this.propName, value);

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/assignment/assignment.component.html

@@ -1,5 +1,5 @@
 <div>
-  <div><component-mapper name="AlertBanner" [props]="{ banners: bannerService.banners }" [parent]="this"></component-mapper></div>
+  <div><component-mapper name="AlertBanner" [props]="{ banners: bannerService.getBanners(itemKey$) }" [parent]="this"></component-mapper></div>
   <div *ngIf="bHasNavigation$" class="psdk-stepper">
     <component-mapper
       name="MultiStep"
@@ -10,6 +10,7 @@
         arMainButtons$,
         arSecondaryButtons$,
         bIsVertical$,
+        stepIndicator$,
         arCurrentStepIndicies$,
         arNavigationSteps$
       }"

package/tests/assets/sdk-a/components/createAll/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) {
@@ -28,6 +27,8 @@ interface AssignmentProps {
   template: string;
 }
 
+type StepIndicator = 'horizontal' | 'vertical' | 'vertical-start';
+
 @Component({
   selector: 'app-assignment',
   templateUrl: './assignment.component.html',
@@ -61,6 +62,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
 
   bHasNavigation$ = false;
   bIsVertical$ = false;
+  stepIndicator$: StepIndicator = 'horizontal';
   prevNavigationSteps: any[] = [];
   arCurrentStepIndicies$: number[] = [];
   arNavigationSteps$: any[] = [];
@@ -98,6 +100,9 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
 
     this.initComponent();
 
+    // ngOnChanges runs before ngOnInit, so updateChanges() never registers on first render.
+    this.registerForRefresh();
+
     this.angularPConnect.shouldComponentUpdate(this);
 
     this.bInitialized = true;
@@ -109,6 +114,8 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
     if (this.angularPConnectData.unsubscribeFn) {
       this.angularPConnectData.unsubscribeFn();
     }
+
+    this.bannerService.clearBanners(this.itemKey$);
   }
 
   // Callback passed when subscribing to store change
@@ -126,6 +133,9 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
     //    AND removing the "gate" that was put there since shouldComponentUpdate
     //      should be the real "gate"
     if (bUpdateSelf) {
+      // The engine drops registrations when it cleans the context cache, so re-register on each update (as React does per render).
+      this.registerForRefresh();
+
       let loadingInfo;
       try {
         // loadingInfo = this.pConn$.getLoadingStatus();
@@ -149,8 +159,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 +167,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 +210,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();
     }
@@ -245,14 +251,22 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   createButtonsForMultiStepForm(oCaseInfo) {
-    this.bHasNavigation$ = true;
-
-    if ((oCaseInfo.navigation.template && oCaseInfo.navigation.template.toLowerCase() === 'standard') || oCaseInfo?.navigation?.steps?.length === 1) {
-      this.bHasNavigation$ = false;
-    } else if (oCaseInfo.navigation.template && oCaseInfo.navigation.template.toLowerCase() === 'vertical') {
-      this.bIsVertical$ = true;
-    } else {
-      this.bIsVertical$ = false;
+    const navigationTemplate = oCaseInfo.navigation.template?.toLowerCase();
+    const stepCount = oCaseInfo.navigation.steps?.length ?? 0;
+    const shouldHideNavigation = navigationTemplate === 'standard' || stepCount <= 1;
+
+    this.bHasNavigation$ = !shouldHideNavigation;
+    this.bIsVertical$ = false;
+    this.stepIndicator$ = 'horizontal';
+
+    if (!shouldHideNavigation) {
+      if (navigationTemplate === 'vertical') {
+        this.bIsVertical$ = true;
+        this.stepIndicator$ = 'vertical';
+      } else if (navigationTemplate === 'vertical-left') {
+        this.bIsVertical$ = true;
+        this.stepIndicator$ = 'vertical-start';
+      }
     }
 
     // iterate through steps to find current one(s)
@@ -309,7 +323,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
 
   buttonClick(sAction, sButtonType) {
     this.snackBarRef?.dismiss();
-    this.bannerService.clearBanners();
+    this.bannerService.clearBanners(this.itemKey$);
     PCore.getPubSubUtils().publish('clearBannerMessages');
     // right now, done on an individual basis, setting bReInit to true
     // upon the next flow container state change, will cause the flow container
@@ -483,7 +497,11 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   registerForRefresh() {
-    const refreshConditions = this.pConn$.getCaseInfo()?.getActionRefreshConditions();
+    const caseInfo = this.pConn$.getCaseInfo();
+    if (!caseInfo) {
+      return;
+    }
+    const refreshConditions = caseInfo.getActionRefreshConditions();
     const pageReference = this.pConn$.getPageReference();
     const context = this.pConn$.getContextName();
 
@@ -492,7 +510,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
 
     // refresh api registration
     const refreshProps = getRefreshProps(refreshConditions);
-    const caseKey = this.pConn$.getCaseInfo().getKey();
+    const caseKey = caseInfo.getKey();
     const refreshOptions = {
       autoDetectRefresh: true,
       preserveClientChanges: false
@@ -501,10 +519,14 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
       refreshProps.forEach(prop => {
         PCore.getRefreshManager().registerForRefresh(
           'PROP_CHANGE',
-          this.pConn$.getActionsApi().refreshCaseView.bind(this.pConn$.getActionsApi(), caseKey, '', pageReference, {
-            ...refreshOptions,
-            refreshFor: prop[0]
-          }),
+          // The registered prop is an authored pattern with an empty list index (ex: ".Addons().Type"),
+          // which the server rejects. The refresh manager hands back the concrete path that changed.
+          (matchedPath?: string) => {
+            this.pConn$.getActionsApi().refreshCaseView(caseKey, '', pageReference, {
+              ...refreshOptions,
+              refreshFor: matchedPath || prop[0]
+            });
+          },
           `${pageReference}.${prop[1]}`,
           `${context}/${pageReference}`,
           context

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

@@ -1,7 +1,7 @@
 <div style="text-align: left" class="psdk-flow-container-top">
   <div *ngIf="!bShowConfirm">
     <div *ngIf="!todo_showTodo$">
-      <h2 *ngIf="!isMultiStep">{{ containerName$ }}</h2>
+      <h2 *ngIf="containerName$">{{ containerName$ }}</h2>
       <div *ngIf="banners.length">
         <component-mapper name="AlertBanner" [props]="{ banners }"></component-mapper>
       </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>