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

package/tests/assets/sdk-a/components/createAll/override-sdk/field/percentage/percentage.component.ts

@@ -7,16 +7,24 @@ import { NgxCurrencyDirective, NgxCurrencyInputMode } from 'ngx-currency';
 
 import { FieldBase } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
-import { handleEvent } from '@pega/angular-sdk-components';
-import { getCurrencyCharacters } from '@pega/angular-sdk-components';
-import { format } from '@pega/angular-sdk-components';
+import {
+  decimalsToPercentage,
+  formatNumberFieldForDisplay,
+  getNumberInputFormat,
+  NumberInputFormat,
+  parseDecimalPrecision,
+  parseFormattedNumber,
+  percentageToDecimals,
+  saveNumberOnBlur
+} from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
 interface PercentageProps extends Omit<PConnFieldProps, 'value'> {
-  value?: number;
-  showGroupSeparators?: string;
-  decimalPrecision?: number;
+  value?: number | string;
+  showGroupSeparators?: boolean | string;
+  decimalPrecision?: number | string;
   currencyISOCode?: string;
+  storePercentageAsDecimal?: boolean | string;
   // If any, enter additional props that only exist on Percentage here
 }
 
@@ -30,11 +38,16 @@ export class PercentageComponent extends FieldBase {
   configProps$: PercentageProps;
   override fieldControl = new FormControl<number | null>(null, null);
 
+  prefix: string;
+  suffix: string;
   decimalSeparator: string;
   thousandSeparator: string;
   inputMode: any = NgxCurrencyInputMode.Natural;
   decimalPrecision: number | undefined;
   formattedValue: string;
+  private inputFormat: NumberInputFormat;
+  private numberOfDecimals: number | undefined;
+  private storeAsDecimal = false;
 
   /**
    * Updates the component when there are changes in the state.
@@ -46,34 +59,39 @@ export class PercentageComponent extends FieldBase {
     // Update component common properties
     this.updateComponentCommonProperties(this.configProps$);
 
-    // Set component specific properties
-    const { value } = this.configProps$;
-    if (value) {
-      this.value$ = value;
-      this.fieldControl.setValue(value);
+    const { value, decimalPrecision, storePercentageAsDecimal } = this.configProps$;
+    this.numberOfDecimals = parseDecimalPrecision(decimalPrecision, 2);
+    this.storeAsDecimal = this.utils.getBooleanValue(storePercentageAsDecimal);
+
+    // The stored value may be a fraction (0.25); the field always shows/edits the percentage (25)
+    if (value === undefined || value === null || value === '') {
+      this.value$ = '';
+    } else {
+      this.value$ = this.storeAsDecimal && Number(value) ? decimalsToPercentage(Number(value), this.numberOfDecimals) : Number(value);
     }
+    this.fieldControl.setValue(this.value$ === '' ? null : this.value$);
 
     // update percentage properties
     this.updatePercentageProperties(this.configProps$);
   }
 
   /**
-   * Updates the percentage properties
-   *
-   * @param {Object} configProps - Configuration properties.
-   * @param {boolean} configProps.showGroupSeparators - Whether to show group separators.
-   * @param {number} configProps.decimalPrecision - The number of decimal places to display.
+   * Updates the input mask and read-only value, matching the Constellation DX Percentage component.
    */
-  updatePercentageProperties(configProps): void {
-    const { showGroupSeparators, decimalPrecision } = configProps;
+  updatePercentageProperties(configProps: PercentageProps): void {
+    const { showGroupSeparators = false } = configProps;
+    const groupSeparators = this.utils.getBooleanValue(showGroupSeparators);
 
-    const theSymbols = getCurrencyCharacters('');
-    this.decimalSeparator = theSymbols.theDecimalIndicator;
-    this.thousandSeparator = showGroupSeparators ? theSymbols.theDigitGroupSeparator : '';
-    this.decimalPrecision = decimalPrecision ?? 2;
+    this.inputFormat = getNumberInputFormat('percent');
+    this.prefix = this.inputFormat.prefix;
+    this.suffix = this.inputFormat.suffix;
+    this.decimalSeparator = this.inputFormat.decimalSeparator;
+    this.thousandSeparator = groupSeparators ? this.inputFormat.thousandSeparator : '';
+    // ngx-currency needs a fixed precision; Constellation allows any number of decimals when none is configured
+    this.decimalPrecision = this.numberOfDecimals ?? 2;
 
     if (['DISPLAY_ONLY', 'STACKED_LARGE_VAL'].includes(this.displayMode$)) {
-      this.formattedValue = this.value$ ? format(this.value$, 'percentage') : '';
+      this.formattedValue = formatNumberFieldForDisplay('Percentage', this.value$, configProps);
     }
   }
 
@@ -89,24 +107,11 @@ export class PercentageComponent extends FieldBase {
   }
 
   fieldOnBlur(event: any) {
-    const oldVal = this.value$ ?? '';
-    const isValueChanged = event.target.value.toString() !== oldVal.toString();
-
-    if (isValueChanged) {
-      let value = event?.target?.value;
-      value = value ? value.replace(/%/g, '') : '';
-      // replacing thousand separator with empty string as not required in api call
-      if (this.configProps$.showGroupSeparators) {
-        const thousandSep = this.thousandSeparator === '.' ? '\\.' : this.thousandSeparator;
-        const regExp = new RegExp(String.raw`${thousandSep}`, 'g');
-        value = value?.replace(regExp, '');
-      }
-      // replacing decimal separator with '.'
-      if (this.decimalSeparator !== '.') {
-        const regExp = new RegExp(String.raw`${this.decimalSeparator}`, 'g');
-        value = value.replace(regExp, '.');
-      }
-      handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+    const parsed = parseFormattedNumber(event?.target?.value, this.inputFormat);
+    let newValue: number | '' = parsed !== '' ? Number(parsed) : '';
+    if (this.storeAsDecimal && newValue !== '') {
+      newValue = percentageToDecimals(newValue, this.numberOfDecimals);
     }
+    saveNumberOnBlur(this.pConn$, newValue, this.configProps$?.value);
   }
 }

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

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

package/tests/assets/sdk-a/components/createAll/override-sdk/field/radio-buttons/config-ext.json

@@ -1,9 +1,8 @@
 {
-    "componentKey": "RadioButtons",
-    "name": "RadioButtons",
-    "label": "Radio buttons",
-    "description": "Picklist",
-    "type": "Field",
-    "subtype": "Picklist",
-    "properties": []
-}
+  "name": "RadioButtons",
+  "label": "Radio buttons",
+  "description": "Picklist",
+  "type": "Field",
+  "subtype": "Picklist",
+  "properties": []
+}

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

@@ -1,11 +1,10 @@
 {
-    "componentKey": "RichText",
-    "name": "RichText",
-    "label": "Rich text editor",
-    "description": "Text (paragraph)",
-    "type": "Field",
-    "subtype": "Text-Paragraph",
-    "icon": "images/pz-text-area-active.svg",
-    "properties": [],
-    "defaultConfig": {}
-}
+  "name": "RichText",
+  "label": "Rich text editor",
+  "description": "Text (paragraph)",
+  "type": "Field",
+  "subtype": "Text-Paragraph",
+  "icon": "images/pz-text-area-active.svg",
+  "properties": [],
+  "defaultConfig": {}
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/field/scalar-list/config-ext.json

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

package/tests/assets/sdk-a/components/createAll/override-sdk/field/semantic-link/config-ext.json

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

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

@@ -1,9 +1,8 @@
 {
-    "componentKey": "TextArea",
-    "name": "TextArea",
-    "label": "Text area",
-    "description": "Text (paragraph)",
-    "type": "Field",
-    "subtype": "Text-Paragraph",
-    "properties": []
-}
+  "name": "TextArea",
+  "label": "Text area",
+  "description": "Text (paragraph)",
+  "type": "Field",
+  "subtype": "Text-Paragraph",
+  "properties": []
+}

package/tests/assets/sdk-a/components/createAll/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/createAll/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/createAll/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/createAll/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/createAll/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/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) {
@@ -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/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

@@ -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/createAll/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 {