@pega/dx-component-builder-sdk 0.25.7 → 0.25.9

package/tests/assets/sdk-a/components/create/override-sdk/infra/multi-step/multi-step.component.scss

@@ -1,5 +1,5 @@
 .psdk-case-view-divider {
-  border-bottom: 0.0625rem solid var(--app-neutral-light-color);
+  border-bottom: 0.0625rem solid var(--mat-sys-outline-variant);
 }
 
 .psdk-icon {
@@ -7,14 +7,6 @@
   min-width: unset;
 }
 
-.psdk-icon-current {
-  color: var(--app-primary-color);
-}
-
-.psdk-icon-not-current {
-  color: var(--app-neutral-color);
-}
-
 .psdk-current-svg-icon {
   width: 1rem;
   filter: var(--app-primary-color-filter);
@@ -35,16 +27,15 @@ mat-horizontal-stepper {
 .psdk-sub-step-current {
   padding-left: 0.625rem;
   font-weight: bold;
-  color: var(--app-label-selected-color);
+  color: var(--mat-sys-on-secondary-container);
 }
 
 .psdk-sub-step-not-current {
+  color: var(--mat-sys-on-surface-variant);
   padding-left: 0.625rem;
-  color: var(--app-label-color);
 }
 
 .psdk-flow-container-top {
-  background-color: var(--app-form-color);
   padding: 0rem 0.625rem;
   border-radius: 0.3125rem;
 }
@@ -81,8 +72,7 @@ mat-horizontal-stepper {
 
 .psdk-vertical-step-icon {
   margin-right: 12px;
-  background-color: var(--app-neutral-color);
-  color: var(--app-form-color);
+  background-color: var(--mat-sys-secondary);
   border-radius: 50%;
   height: 24px;
   width: 24px;
@@ -95,13 +85,12 @@ mat-horizontal-stepper {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  color: var(--app-form-color);
 }
 
 .psdk-vertical-step-icon-selected {
   margin-right: 12px;
-  background-color: var(--app-primary-color);
-  color: var(--app-form-color);
+  background-color: var(--mat-sys-primary);
+  color: var(--mat-sys-surface);
   border-radius: 50%;
   height: 24px;
   width: 24px;
@@ -110,7 +99,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-vertical-step-label {
-  color: var(--app-label-color);
+  color: var(--mat-sys-on-surface-variant);
   display: inline-block;
   white-space: nowrap;
   overflow: hidden;
@@ -122,7 +111,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-vertical-step-label-selected {
-  color: var(--app-label-selected-color);
+  color: var(--mat-sys-on-secondary-container);
   display: inline-block;
   white-space: nowrap;
   overflow: hidden;
@@ -152,7 +141,6 @@ mat-horizontal-stepper {
   border-left-style: solid;
   top: -16px;
   bottom: -16px;
-  border-left-color: var(--app-multi-step-border-color);
 }
 
 .psdk-horizontal-stepper {
@@ -182,8 +170,8 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-icon {
-  background-color: var(--app-neutral-color);
-  color: var(--app-form-color);
+  background-color: var(--mat-sys-secondary);
+  color: var(--mat-sys-surface);
   border-radius: 50%;
   height: 24px;
   width: 24px;
@@ -203,8 +191,8 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-icon-selected {
-  background-color: var(--app-primary-color);
-  color: var(--app-form-color);
+  background-color: var(--mat-sys-primary);
+  color: var(--mat-sys-surface);
   border-radius: 50%;
   height: 24px;
   width: 24px;
@@ -216,7 +204,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-label {
-  color: var(--app-label-color);
+  color: var(--mat-sys-on-surface-variant);
   display: inline-block;
   min-width: 50px;
   vertical-align: middle;
@@ -226,7 +214,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-label-selected {
-  color: var(--app-label-selected-color);
+  color: var(--mat-sys-on-secondary-container);
   display: inline-block;
   min-width: 50px;
   vertical-align: middle;
@@ -236,7 +224,6 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-line {
-  border-top-color: var(--app-multi-step-border-color);
   border-top-width: 1px;
   border-top-style: solid;
   flex: auto;

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

@@ -9,7 +9,6 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   templateUrl: './multi-step.component.html',
   styleUrls: ['./multi-step.component.scss'],
   providers: [Utils],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class MultiStepComponent implements OnInit {

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

@@ -8,48 +8,43 @@
     </div>
   </div>
   <div class="psdk-nav-divider"></div>
-  <div>
-    <mat-list>
-      <mat-list-item id="create-case-button" (click)="navPanelCreateButtonClick()">
-        <div class="flex-box">
-          <img class="psdk-nav-svg-icon" src="{{ navExpandCollapse$ }}" />
-          <span class="psdk-nav-button-span">Create</span>
-        </div>
+  <mat-list>
+    <mat-list-item id="create-case-button" (click)="navPanelCreateButtonClick()">
+      <div class="flex-box">
+        <img class="psdk-nav-svg-icon" src="{{ navExpandCollapse$ }}" />
+        <span class="psdk-nav-button-span">Create</span>
+      </div>
+    </mat-list-item>
+    <mat-list *ngIf="bShowCaseTypes$" style="margin-left: 40px">
+      <mat-list-item
+        id="case-list-item"
+        *ngFor="let caseType of caseTypes$"
+        (click)="navPanelCreateCaseType(caseType.pyClassName, caseType.pyFlowType)"
+      >
+        <span class="psdk-nav-button-span">{{
+          localeUtils.getLocaleValue(caseType.pyLabel, '', localeUtils.getCaseLocaleReference(caseType.pyClassName))
+        }}</span>
       </mat-list-item>
-      <mat-list *ngIf="bShowCaseTypes$" style="margin-left: 40px">
-        <mat-list-item
-          id="case-list-item"
-          *ngFor="let caseType of caseTypes$"
-          (click)="navPanelCreateCaseType(caseType.pyClassName, caseType.pyFlowType)"
-        >
-          <span class="psdk-nav-button-span">{{ localeUtils.getLocaleValue(caseType.pyLabel, '', localeReference) }}</span>
-        </mat-list-item>
-      </mat-list>
     </mat-list>
-  </div>
-  <div style="height: 100%">
-    <mat-list *ngFor="let page of navPages$">
-      <mat-list-item (click)="navPanelButtonClick(page)">
-        <div class="flex-box">
-          <img class="psdk-nav-svg-icon" src="{{ page.iconName }}" />
-          <span class="psdk-nav-button-span">{{ localeUtils.getLocaleValue(page.pyLabel, '', localeReference) }}</span>
-        </div>
-      </mat-list-item>
-    </mat-list>
-  </div>
+  </mat-list>
+  <mat-list *ngFor="let page of navPages$">
+    <mat-list-item (click)="navPanelButtonClick(page)">
+      <div class="flex-box">
+        <img class="psdk-nav-svg-icon" src="{{ page.iconName }}" />
+        <span class="psdk-nav-button-span">{{ page.name }}</span>
+      </div>
+    </mat-list-item>
+  </mat-list>
   <div class="psdk-nav-divider"></div>
-  <div>
-    <mat-list id="profile">
-      <mat-list-item [matMenuTriggerFor]="menu" class="psdk-profile-list-item">
-        <div class="flex-box">
-          <div class="psdk-nav-oper-avatar">{{ portalOperatorInitials$ }}</div>
-          <span class="psdk-nav-button-span">{{ portalOperator$ }}</span>
-        </div>
-      </mat-list-item>
-      <mat-menu #menu="matMenu">
-        <button mat-menu-item>Profile</button>
-        <button mat-menu-item (click)="navPanelLogoutClick()">{{ localizedVal('Log off', localeCategory) }}</button>
-      </mat-menu>
-    </mat-list>
-  </div>
+  <mat-list id="profile" class="psdk-logout-button">
+    <mat-list-item [matMenuTriggerFor]="menu" class="psdk-profile-list-item">
+      <div class="flex-box">
+        <div class="psdk-nav-oper-avatar">{{ portalOperatorInitials$ }}</div>
+        <span class="psdk-nav-button-span">{{ portalOperator$ }}</span>
+      </div>
+    </mat-list-item>
+    <mat-menu #menu="matMenu">
+      <button mat-menu-item (click)="navPanelLogoutClick()">{{ localizedVal('Log off', localeCategory) }}</button>
+    </mat-menu>
+  </mat-list>
 </div>

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

@@ -5,7 +5,7 @@ $transition-fast: 0.1s !default;
 $natural-ease: cubic-bezier(0.4, 0.6, 0.1, 1) !default;
 
 .psdk-nav-divider {
-  border-bottom: 0.0625rem solid var(--app-divider-color);
+  border-bottom: 0.0625rem solid var(--mat-sys-outline-variant);
   width: 100%;
   align-items: center;
 }
@@ -39,6 +39,7 @@ $natural-ease: cubic-bezier(0.4, 0.6, 0.1, 1) !default;
 .psdk-appshell-nav {
   z-index: 199;
   position: fixed;
+  top: 0;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -119,8 +120,8 @@ $natural-ease: cubic-bezier(0.4, 0.6, 0.1, 1) !default;
   align-items: center;
   text-align: center;
   display: inline-flex;
-  background: var(--app-neutral-color);
-  color: var(--app-form-color);
+  background: var(--mat-sys-background);
+  color: var(--mat-sys-on-background);
   font-weight: normal;
   font-size: 1rem;
 }
@@ -140,7 +141,7 @@ mat-list-item {
   height: auto !important;
 
   &:hover {
-    background-color: var(--app-label-color);
+    background-color: rgba(0, 0, 0, 0.54);
   }
 
   .flex-box {
@@ -150,3 +151,20 @@ mat-list-item {
     text-align: left;
   }
 }
+
+.theme-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.color-preview {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+}
+
+.psdk-logout-button {
+  flex: 1;
+  align-content: flex-end;
+}

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';
@@ -17,7 +17,6 @@ interface NavBarProps {
   templateUrl: './navbar.component.html',
   styleUrls: ['./navbar.component.scss'],
   providers: [Utils],
-  standalone: true,
   imports: [CommonModule, MatListModule, MatMenuModule]
 })
 export class NavbarComponent implements OnInit, OnDestroy {
@@ -50,12 +49,10 @@ export class NavbarComponent implements OnInit, OnDestroy {
   localizedVal: any;
   localeCategory = 'AppShell';
   localeUtils = PCore.getLocaleUtils();
-  localeReference: any;
   constructor(
     private angularPConnect: AngularPConnectService,
     private chRef: ChangeDetectorRef,
     private psService: ProgressSpinnerService,
-    private ngZone: NgZone,
     private utils: Utils
   ) {}
 
@@ -106,34 +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$));
-
-      this.navPages$.forEach(page => {
-        page.iconName = this.utils.getImageSrc(page.pxPageViewIcon, this.utils.getSDKStaticContentUrl());
-      });
-      this.localeReference = this.pConn$.getValue('.pyLocaleReference');
-      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);
+    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();
+    // 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.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.portalApp$ = PCore.getEnvironmentInfo().getApplicationLabel();
+    this.chRef.markForCheck();
   }
 
   navPanelButtonClick(oPageData: any) {

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

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

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

@@ -1,14 +1,12 @@
 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({
   selector: 'app-region',
   templateUrl: './region.component.html',
   styleUrls: ['./region.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class RegionComponent implements OnInit, OnChanges {
@@ -31,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>

package/tests/assets/sdk-a/components/create/override-sdk/infra/root-container/root-container.component.scss

@@ -5,7 +5,6 @@
   align-items: center;
   height: 100%;
   width: 100%;
-  background-color: var(--app-background-color);
   position: fixed;
   z-index: 99999;
   top: 0rem;

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

@@ -1,20 +1,17 @@
-import { Component, OnInit, Input, NgZone, forwardRef, OnDestroy, inject } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, Input, forwardRef, OnDestroy, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { interval, Subscription } from 'rxjs';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { ServerConfigService } from '@pega/angular-sdk-components';
 import { ProgressSpinnerService } from '@pega/angular-sdk-components';
-import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { PreviewViewContainerComponent } from '@pega/angular-sdk-components';
 import { ModalViewContainerComponent } from '@pega/angular-sdk-components';
-import { HybridViewContainerComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 
 /**
- * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
- * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
- * is totally at your own risk.
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
  */
 
 const options = { context: 'app' };
@@ -23,11 +20,9 @@ const options = { context: 'app' };
   selector: 'app-root-container',
   templateUrl: './root-container.component.html',
   styleUrls: ['./root-container.component.scss'],
-  standalone: true,
   imports: [
     CommonModule,
     MatProgressSpinnerModule,
-    HybridViewContainerComponent,
     ModalViewContainerComponent,
     PreviewViewContainerComponent,
     forwardRef(() => ComponentMapperComponent)
@@ -43,7 +38,7 @@ export class RootContainerComponent implements OnInit, OnDestroy {
   // For interaction with AngularPConnect
   angularPConnectData: AngularPConnectData = {};
 
-  componentName$ = '';
+  componentName$: any;
   bIsProgress$ = false;
 
   // preview and modalview pConn
@@ -61,7 +56,7 @@ export class RootContainerComponent implements OnInit, OnDestroy {
   constructor(
     private angularPConnect: AngularPConnectService,
     private psService: ProgressSpinnerService,
-    private ngZone: NgZone
+    private cdRef: ChangeDetectorRef
   ) {}
 
   ngOnInit(): void {
@@ -142,20 +137,16 @@ export class RootContainerComponent implements OnInit, OnDestroy {
           });
 
           setTimeout(() => {
-            // makes sure Angular tracks these changes
-            this.ngZone.run(() => {
-              // the new rootObject may be a 'reference'. So,
-              //  normalize it to get the referencedView if that's the case
-              const theNewPConn = ReferenceComponent.normalizePConn(rootObject.getPConnect());
-              // update ComponentName$ before we update pConn$ to make sure they're in sync
-              //  when rendering...
-              this.componentName$ = theNewPConn.getComponentName();
-
-              this.pConn$ = theNewPConn;
-              // this.pConn$ = rootObject.getPConnect();
-
-              console.log(`RootContainer updated pConn$ to be: ${this.componentName$}`);
-            });
+            const theNewPConn = rootObject.getPConnect();
+            // update ComponentName$ before we update pConn$ to make sure they're in sync
+            //  when rendering...
+            this.componentName$ = theNewPConn.getComponentName();
+
+            this.pConn$ = theNewPConn;
+            // this.pConn$ = rootObject.getPConnect();
+
+            console.log(`RootContainer updated pConn$ to be: ${this.componentName$}`);
+            this.cdRef.markForCheck();
           });
         }
       }
@@ -194,24 +185,23 @@ export class RootContainerComponent implements OnInit, OnDestroy {
     if (arChildren && arChildren.length == 1) {
       // have to have a quick timeout or get an "expressions changed" angular error
       setTimeout(() => {
-        this.ngZone.run(() => {
-          const localPConn = arChildren[0].getPConnect();
-
-          this.componentName$ = localPConn.getComponentName();
-          if (this.componentName$ === 'ViewContainer') {
-            const configProps = this.pConn$.getConfigProps();
-            const viewContConfig = {
-              meta: {
-                type: 'ViewContainer',
-                config: configProps
-              },
-              options
-            };
-
-            this.viewContainerPConn$ = PCore.createPConnect(viewContConfig).getPConnect();
-          }
-          this.bShowRoot$ = true;
-        });
+        const localPConn = arChildren[0].getPConnect();
+
+        this.componentName$ = localPConn.getComponentName();
+        if (this.componentName$ === 'ViewContainer') {
+          const configProps = this.pConn$.getConfigProps();
+          const viewContConfig = {
+            meta: {
+              type: 'ViewContainer',
+              config: configProps
+            },
+            options
+          };
+
+          this.viewContainerPConn$ = PCore.createPConnect(viewContConfig).getPConnect();
+        }
+        this.bShowRoot$ = true;
+        this.cdRef.markForCheck();
       });
     }
   }
@@ -219,7 +209,6 @@ export class RootContainerComponent implements OnInit, OnDestroy {
   showHideProgress(bShow: boolean) {
     // only show spinner after 500ms wait, so if server fast, won't see
     if (bShow) {
-      // eslint-disable-next-line sonarjs/no-collapsible-if
       if (!this.bIsProgress$) {
         // makes sure Angular tracks these changes
         if (!this.spinnerTimer || this.spinnerTimer.isStopped) {
@@ -227,12 +216,11 @@ export class RootContainerComponent implements OnInit, OnDestroy {
             try {
               this.spinnerTimer.unsubscribe();
             } catch (ex) {
-              /* empty */
+              console.log(ex);
             }
 
-            this.ngZone.run(() => {
-              this.bIsProgress$ = true;
-            });
+            this.bIsProgress$ = true;
+            this.cdRef.markForCheck();
           });
         }
       }
@@ -244,9 +232,8 @@ export class RootContainerComponent implements OnInit, OnDestroy {
       // don't touch bIsProgress$ unless differnent
       if (bShow != this.bIsProgress$) {
         // makes sure Angular tracks these changes
-        this.ngZone.run(() => {
-          this.bIsProgress$ = bShow;
-        });
+        this.bIsProgress$ = bShow;
+        this.cdRef.markForCheck();
       }
     }
   }

package/tests/assets/sdk-a/components/create/override-sdk/infra/stages/stages.component.html

@@ -1,13 +1,14 @@
 <div class="psdk-stages-bar">
   <div class="psdk-stages-chevron" *ngFor="let stage of arStageResults$">
     <div *ngIf="stage.visited_status == 'completed'" class="psdk-stages-inner-past">
-      <img class="psdk-stages-icon" src="{{ checkSvgIcon$ }}" />{{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}
+      <img class="psdk-stages-icon" src="{{ checkSvgIcon$ }}" />
+      <div>{{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}</div>
     </div>
     <div *ngIf="stage.visited_status == 'active'" class="psdk-stages-inner-present">
-      {{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}
+      {{ localizationService.getLocalizedText(stage.name) }}
     </div>
     <div *ngIf="stage.visited_status == 'future'" class="psdk-stages-inner-future">
-      {{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}
+      {{ localizationService.getLocalizedText(stage.name) }}
     </div>
   </div>
 </div>