@pega/angular-sdk-overrides 0.26.1 → 0.26.3

package/lib/infra/assignment/assignment.component.ts

@@ -27,6 +27,8 @@ interface AssignmentProps {
   template: string;
 }
 
+type StepIndicator = 'horizontal' | 'vertical' | 'vertical-start';
+
 @Component({
   selector: 'app-assignment',
   templateUrl: './assignment.component.html',
@@ -60,6 +62,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
 
   bHasNavigation$ = false;
   bIsVertical$ = false;
+  stepIndicator$: StepIndicator = 'horizontal';
   prevNavigationSteps: any[] = [];
   arCurrentStepIndicies$: number[] = [];
   arNavigationSteps$: any[] = [];
@@ -108,6 +111,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
@@ -240,14 +245,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)
@@ -304,7 +317,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
@@ -496,10 +509,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/lib/infra/defer-load/defer-load.component.ts

@@ -1,4 +1,4 @@
-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 { ComponentMapperComponent } from '@pega/angular-sdk-components';
@@ -35,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();
   }
 
@@ -132,7 +135,7 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
         PCore.getDeferLoadManager().stop(this.deferLoadId, this.pConn$.getContextName());
       }
     }
-    // this.cdRef.detectChanges();
+    this.cdRef.detectChanges();
   }
 
   loadActiveTab() {

package/lib/infra/multi-step/multi-step.component.html

@@ -1,43 +1,35 @@
 <div *ngIf="bShow$">
-  <div *ngIf="bIsVertical$" class="psdk-vertical-stepper">
-    <div *ngFor="let mainStep of arNavigationSteps$; let i = index" class="psdk-vertical-step">
-      <div class="psdk-vertical-step-header">
-        <div class="{{ _getVIconClass(mainStep.visited_status) }}">
-          <div class="psdk-vertical-step-icon-content">
-            <span>{{ i + 1 }}</span>
-          </div>
-        </div>
-        <div class="{{ _getVLabelClass(mainStep.visited_status) }}">
-          {{ mainStep.name }}
-        </div>
-      </div>
-      <div class="{{ _getVBodyClass(i) }}">
-        <ng-container *ngIf="mainStep?.steps && mainStep.visited_status == 'current'">
-          <div *ngFor="let subStep of mainStep.steps">
-            <div *ngIf="subStep.visited_status == 'current'">
-              <component-mapper
-                name="AssignmentCard"
-                [props]="{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }"
-                [parent]="this"
-                [outputEvents]="{ actionButtonClick: onActionButtonClick }"
-              ></component-mapper>
+  <div
+    *ngIf="isVerticalLayout()"
+    class="psdk-vertical-stepper-container"
+    [class.stepper-start]="stepIndicator$ === 'vertical-start'"
+    [class.stepper-end]="stepIndicator$ === 'vertical'"
+  >
+    <div class="psdk-stepper-rail">
+      <div *ngFor="let mainStep of arNavigationSteps$; let i = index" class="psdk-vertical-step">
+        <div class="psdk-vertical-step-header">
+          <div class="{{ _getVIconClass(mainStep.visited_status) }}">
+            <div class="psdk-vertical-step-icon-content">
+              <span>{{ i + 1 }}</span>
             </div>
           </div>
-        </ng-container>
-
-        <ng-container *ngIf="!mainStep?.steps && mainStep.visited_status == 'current'">
-          <component-mapper
-            name="AssignmentCard"
-            [props]="{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }"
-            [parent]="this"
-            [outputEvents]="{ actionButtonClick: onActionButtonClick }"
-          ></component-mapper>
-        </ng-container>
+          <div class="{{ _getVLabelClass(mainStep.visited_status) }}">
+            {{ mainStep.name }}
+          </div>
+        </div>
       </div>
     </div>
+    <div class="psdk-stepper-content">
+      <component-mapper
+        name="AssignmentCard"
+        [props]="{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }"
+        [parent]="this"
+        [outputEvents]="{ actionButtonClick: onActionButtonClick }"
+      ></component-mapper>
+    </div>
   </div>
 
-  <div *ngIf="!bIsVertical$" class="psdk-horizontal-stepper">
+  <div *ngIf="isHorizontalLayout()" class="psdk-horizontal-stepper">
     <div class="psdk-horizontal-stepper-header-container">
       <ng-container *ngFor="let mainStep of arNavigationSteps$; let i = index">
         <div class="psdk-horizontal-step-header">

package/lib/infra/multi-step/multi-step.component.scss

@@ -143,6 +143,54 @@ mat-horizontal-stepper {
   bottom: -16px;
 }
 
+.psdk-vertical-stepper-container {
+  display: grid;
+  gap: 2rem;
+}
+
+.psdk-vertical-stepper-container.stepper-end {
+  grid-template-columns: 1fr minmax(12rem, auto);
+  grid-template-areas: 'content stepper';
+}
+
+.psdk-vertical-stepper-container.stepper-start {
+  grid-template-columns: minmax(12rem, auto) 1fr;
+  grid-template-areas: 'stepper content';
+}
+
+.psdk-stepper-rail {
+  grid-area: stepper;
+}
+
+.psdk-stepper-content {
+  grid-area: content;
+}
+
+.psdk-stepper-rail .psdk-vertical-step {
+  position: relative;
+}
+
+.psdk-stepper-rail .psdk-vertical-step-header {
+  height: auto;
+  overflow: visible;
+  padding: 0.75rem 0;
+}
+
+.psdk-stepper-rail .psdk-vertical-step:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  left: 0.75rem;
+  top: calc(0.75rem + 1.75rem);
+  bottom: -0.25rem;
+  width: 0.0625rem;
+  background-color: var(--mat-sys-outline-variant);
+}
+
+.psdk-stepper-rail .psdk-vertical-step-label,
+.psdk-stepper-rail .psdk-vertical-step-label-selected {
+  font-size: 0.875rem;
+}
+
 .psdk-horizontal-stepper {
   background-color: transparent;
   display: block;

package/lib/infra/multi-step/multi-step.component.ts

@@ -4,6 +4,8 @@ import { FormGroup } from '@angular/forms';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 
+type StepIndicator = 'horizontal' | 'vertical' | 'vertical-start';
+
 @Component({
   selector: 'app-multi-step',
   templateUrl: './multi-step.component.html',
@@ -18,6 +20,7 @@ export class MultiStepComponent implements OnInit {
   @Input() arSecondaryButtons$: any[];
   @Input() arChildren$: any[];
   @Input() bIsVertical$: boolean;
+  @Input() stepIndicator$?: StepIndicator;
   @Input() arCurrentStepIndicies$: number[];
   @Input() arNavigationSteps$: any[];
   @Output() actionButtonClick: EventEmitter<any> = new EventEmitter();
@@ -38,6 +41,14 @@ export class MultiStepComponent implements OnInit {
     this.actionButtonClick.emit(oData);
   }
 
+  isVerticalLayout(): boolean {
+    return this.stepIndicator$ === 'vertical' || this.stepIndicator$ === 'vertical-start';
+  }
+
+  isHorizontalLayout(): boolean {
+    return !this.isVerticalLayout();
+  }
+
   _getVIconClass(status): string {
     if (status == 'current') {
       return 'psdk-vertical-step-icon-selected';

package/lib/infra/navbar/navbar.component.ts

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

package/lib/infra/root-container/root-container.component.ts

@@ -1,4 +1,4 @@
-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';
@@ -56,7 +56,7 @@ export class RootContainerComponent implements OnInit, OnDestroy {
   constructor(
     private angularPConnect: AngularPConnectService,
     private psService: ProgressSpinnerService,
-    private ngZone: NgZone
+    private cdRef: ChangeDetectorRef
   ) {}
 
   ngOnInit(): void {
@@ -137,18 +137,16 @@ export class RootContainerComponent implements OnInit, OnDestroy {
           });
 
           setTimeout(() => {
-            // makes sure Angular tracks these changes
-            this.ngZone.run(() => {
-              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$}`);
-            });
+            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();
           });
         }
       }
@@ -187,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();
       });
     }
   }
@@ -222,9 +219,8 @@ export class RootContainerComponent implements OnInit, OnDestroy {
               console.log(ex);
             }
 
-            this.ngZone.run(() => {
-              this.bIsProgress$ = true;
-            });
+            this.bIsProgress$ = true;
+            this.cdRef.markForCheck();
           });
         }
       }
@@ -236,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/lib/infra/view/view.component.ts

@@ -3,17 +3,28 @@ import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
-import { getAllFields } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 
-const NO_HEADER_TEMPLATES = ['SubTabs', 'SimpleTable', 'Confirmation', 'DynamicTabs', 'DetailsSubTabs', 'ListView'];
+const NO_HEADER_TEMPLATES = [
+  'SubTabs',
+  'SimpleTable',
+  'Details',
+  'DetailsTwoColumn',
+  'DetailsThreeColumn',
+  'NarrowWideDetails',
+  'WideNarrowDetails',
+  'Confirmation',
+  'DynamicTabs',
+  'DetailsSubTabs',
+  'ListView'
+];
+
 const DETAILS_TEMPLATES = [
   'Details',
-  'DetailsFields',
   'DetailsOneColumn',
-  'DetailsSubTabs',
-  'DetailsThreeColumn',
   'DetailsTwoColumn',
+  'DetailsThreeColumn',
+  'DetailsSubTabs',
   'NarrowWideDetails',
   'WideNarrowDetails'
 ];
@@ -157,7 +168,7 @@ export class ViewComponent implements OnInit, OnDestroy, OnChanges {
     this.showLabel$ =
       this.inheritedProps$.showLabel !== undefined
         ? this.inheritedProps$.showLabel
-        : this.configProps$.showLabel || isDetailsTemplate(this.templateName$);
+        : (this.configProps$.showLabel ?? isDetailsTemplate(this.templateName$));
     this.arChildren$ = this.pConn$.getChildren();
     this.visibility$ = this.configProps$.visibility ?? this.visibility$;
 
@@ -183,39 +194,6 @@ export class ViewComponent implements OnInit, OnDestroy, OnChanges {
     // console.log("-->view update: " + this.angularPConnect.getComponentID(this) + ", template: " + this.templateName$ + ", kids: " + kidList);
   }
 
-  // JA - adapting additionalProps from Nebula/Constellation version which uses static methods
-  //    on the component classes stored in PComponents (that Angular doesn't have)...
-  additionalProps(state: any, getPConnect: any) {
-    let propObj = {};
-
-    // We already have the template name in this.templateName$
-    if (this.templateName$ !== '') {
-      let allFields = {};
-
-      // These uses are adapted from Nebula/Constellation CaseSummary.additionalProps
-      switch (this.templateName$) {
-        case 'CaseSummary':
-          allFields = getAllFields(getPConnect);
-          // eslint-disable-next-line no-case-declarations
-          const unresFields = {
-            primaryFields: allFields[0],
-            secondaryFields: allFields[1]
-          };
-          propObj = getPConnect.resolveConfigProps(unresFields);
-          break;
-
-        case 'Details':
-          allFields = getAllFields(getPConnect);
-          propObj = { fields: allFields[0] };
-          break;
-        default:
-          break;
-      }
-    }
-
-    return propObj;
-  }
-
   ngOnDestroy(): void {
     if (this.angularPConnectData.unsubscribeFn) {
       this.angularPConnectData.unsubscribeFn();

package/lib/template/app-shell/app-shell.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 { MatSnackBarModule, MatSnackBar } from '@angular/material/snack-bar';
 import { Subscription } from 'rxjs';
@@ -59,7 +59,7 @@ export class AppShellComponent implements OnInit, OnDestroy {
     private angularPConnect: AngularPConnectService,
     private erService: ErrorMessagesService,
     private snackBar: MatSnackBar,
-    private ngZone: NgZone,
+    private cdRef: ChangeDetectorRef,
     private utils: Utils
   ) {}
 
@@ -152,17 +152,15 @@ export class AppShellComponent implements OnInit, OnDestroy {
     const portalClass = this.pConn$.getValue('.classID', ''); // 2nd arg empty string until typedef marked correctly
     const envPortalName = envInfo.getPortalName();
 
-    this.ngZone.run(() => {
-      // making a copy, so can add info
-      this.pages$ = this.configProps$.pages;
+    // making a copy, so can add info
+    this.pages$ = this.configProps$.pages;
 
-      if (this.pages$) {
-        this.bShowAppShell$ = true;
-      }
+    if (this.pages$) {
+      this.bShowAppShell$ = true;
+    }
 
-      this.caseTypes$ = this.configProps$.caseTypes;
-      this.arChildren$ = this.pConn$.getChildren();
-    });
+    this.caseTypes$ = this.configProps$.caseTypes;
+    this.arChildren$ = this.pConn$.getChildren();
 
     const portalLogo = this.configProps$.portalLogo;
     // using the default icon then fetch it from the static folder (not auth involved)
@@ -181,12 +179,14 @@ export class AppShellComponent implements OnInit, OnDestroy {
         .getSvcImageUrl(portalLogo)
         .then(data => {
           this.imageURL = data;
+          this.cdRef.markForCheck();
         })
         .catch(() => {
           console.error(`${this.localizedVal('Unable to load the image for the portal logo/icon with the insName', 'AppShell')}:${portalLogo}`);
         });
     }
     this.appName$ = this.localizedVal(appNameToDisplay || '', '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase());
+    this.cdRef.markForCheck();
   }
 
   // fpr show/hiding error messages in the SnackBar component
@@ -244,5 +244,6 @@ export class AppShellComponent implements OnInit, OnDestroy {
       default:
         break;
     }
+    this.cdRef.markForCheck();
   }
 }