@pega/angular-sdk-overrides 0.25.1 → 0.25.3

package/lib/infra/Containers/modal-view-container/modal-view-container.component.ts

@@ -30,7 +30,7 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
   angularPConnectData: AngularPConnectData = {};
 
   arChildren$: any[];
-  stateProps$: Object;
+  stateProps$: object;
   banners: any;
   templateName$: string;
   buildName$: string;
@@ -39,7 +39,7 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
   bShowModal$ = false;
   itemKey$: string;
   formGroup$: FormGroup;
-  oCaseInfo: Object = {};
+  oCaseInfo: object = {};
 
   // for causing a change on assignment
   updateToken$ = 0;
@@ -134,7 +134,7 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
       // @ts-ignore - Property 'getLoadingStatus' is private and only accessible within class 'C11nEnv'
       loadingInfo = this.pConn$.getLoadingStatus();
     } catch (ex) {
-      /* empty */
+      console.log(ex);
     }
     // const configProps = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
     this.stateProps$ = this.pConn$.getStateProps();
@@ -234,12 +234,7 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
         this.title$ =
           isDataObject || this.isMultiRecord
             ? this.getModalHeading(dataObjectAction)
-            : this.determineModalHeaderByAction(
-                actionName,
-                caseTypeName,
-                ID,
-                `${theNewCaseInfo?.getClassName()}!CASE!${theNewCaseInfo.getName()}`.toUpperCase()
-              );
+            : this.determineModalHeaderByAction(actionName, caseTypeName, ID, this.createdViewPConn$?.getCaseLocaleReference());
 
         const bIsRefComponent = this.checkIfRefComponent(newComp);
 
@@ -364,7 +359,7 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
     return {};
   }
 
-  compareCaseInfoIsDifferent(oCurrentCaseInfo: Object): boolean {
+  compareCaseInfoIsDifferent(oCurrentCaseInfo: object): boolean {
     let bRet = false;
 
     // fast-deep-equal version

package/lib/infra/Containers/view-container/helper.ts

@@ -10,13 +10,46 @@ export const addContainerItem = pConnect => {
 export const configureBrowserBookmark = pConnect => {
   const context = pConnect.getContextName();
   const containerName = pConnect.getContainerName();
+  const envInfo = PCore.getEnvironmentInfo();
+  const { APP } = PCore.getConstants();
+
   const navPages = pConnect.getValue('pyPortal.pyPrimaryNavPages');
-  const defaultViewLabel = Array.isArray(navPages) && navPages[0] ? navPages[0].pyLabel : '';
+  let ruleName = '';
+  let className = '';
+  let defaultViewLabel = '';
+
+  const isNextGenLandingPageRouting = (envInfo?.environmentInfoObject as any)?.pyExecutionRuntimeName === (APP as any).INFINITY_RUNTIME;
+
+  if (Array.isArray(navPages) && navPages.length > 0) {
+    const firstNavPage = navPages[0];
+    const nestedNavPage = firstNavPage.NavigationPages?.[0];
+
+    if (isNextGenLandingPageRouting) {
+      if (nestedNavPage?.pyRuleName) {
+        ruleName = nestedNavPage.pyRuleName;
+        className = nestedNavPage.pyClassName || '';
+      } else if (firstNavPage?.pyRuleName) {
+        ruleName = firstNavPage.pyRuleName;
+        className = firstNavPage.pyClassName || '';
+      } else if (nestedNavPage?.pyLabel) {
+        defaultViewLabel = nestedNavPage.pyLabel;
+      } else if (firstNavPage?.pyLabel) {
+        defaultViewLabel = firstNavPage.pyLabel;
+      }
+    } else if (nestedNavPage?.pyLabel) {
+      defaultViewLabel = nestedNavPage.pyLabel;
+    } else if (firstNavPage?.pyLabel) {
+      defaultViewLabel = firstNavPage.pyLabel;
+    }
+  }
+
   PCore.configureForBrowserBookmark({
     context,
     containerName,
     acName: containerName,
     semanticURL: '',
-    defaultViewLabel
+    defaultViewLabel,
+    ruleName,
+    className
   });
 };

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

@@ -161,7 +161,7 @@ export class ViewContainerComponent implements OnInit, OnDestroy {
 
       this.psService.sendMessage(loadingInfo);
     } catch (ex) {
-      /* empty */
+      console.log(ex);
     }
 
     // const buildName = this.buildName();

package/lib/infra/action-buttons/action-buttons.component.html

@@ -1,12 +1,17 @@
-<mat-grid-list *ngIf="arMainButtons$ && arSecondaryButtons$" cols="2" rowHeight="6.25rem">
-  <mat-grid-tile>
-    <button *ngFor="let aButton of arSecondaryButtons$" mat-raised-button color="secondary" (click)="buttonClick(aButton.jsAction, 'secondary')">
+<div class="button-bar" *ngIf="arMainButtons$ && arSecondaryButtons$">
+  <div class="left-group">
+    <button
+      *ngFor="let aButton of arSecondaryButtons$"
+      mat-stroked-button
+      class="secondary-button"
+      (click)="buttonClick(aButton.jsAction, 'secondary')"
+    >
       {{ localizedVal(aButton.name, localeCategory) }}
     </button>
-  </mat-grid-tile>
-  <mat-grid-tile>
-    <button *ngFor="let aButton of arMainButtons$" mat-raised-button color="primary" (click)="buttonClick(aButton.jsAction, 'primary')">
+  </div>
+  <div class="right-group">
+    <button *ngFor="let aButton of arMainButtons$" mat-flat-button (click)="buttonClick(aButton.jsAction, 'primary')">
       {{ localizedVal(aButton.name, localeCategory) }}
     </button>
-  </mat-grid-tile>
-</mat-grid-list>
+  </div>
+</div>

package/lib/infra/action-buttons/action-buttons.component.scss

@@ -0,0 +1,23 @@
+.button-bar {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  padding: 1rem;
+}
+
+.left-group,
+.right-group {
+  display: flex;
+  gap: 1rem;
+}
+
+.right-group {
+  margin-left: auto;
+}
+
+.secondary-button {
+  background-color: var(--app-sys-secondary-button-background);
+  border-color: var(--app-sys-secondary-button-border);
+}

package/lib/infra/action-buttons/action-buttons.component.ts

@@ -1,13 +1,12 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
-import { MatGridListModule } from '@angular/material/grid-list';
 
 @Component({
   selector: 'app-action-buttons',
   templateUrl: './action-buttons.component.html',
   styleUrls: ['./action-buttons.component.scss'],
-  imports: [CommonModule, MatGridListModule, MatButtonModule]
+  imports: [CommonModule, MatButtonModule]
 })
 export class ActionButtonsComponent {
   @Input() arMainButtons$: any[];

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

@@ -1,5 +1,5 @@
 /* eslint-disable no-case-declarations */
-import { Component, OnInit, Input, NgZone, forwardRef, OnDestroy, OnChanges } from '@angular/core';
+import { Component, OnInit, Input, forwardRef, OnDestroy, OnChanges } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatSnackBarModule, MatSnackBar } from '@angular/material/snack-bar';
 import { FormGroup } from '@angular/forms';
@@ -56,6 +56,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
 
   bHasNavigation$ = false;
   bIsVertical$ = false;
+  prevNavigationSteps: any[] = [];
   arCurrentStepIndicies$: number[] = [];
   arNavigationSteps$: any[] = [];
 
@@ -82,7 +83,6 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
     private angularPConnect: AngularPConnectService,
     private psService: ProgressSpinnerService,
     private erService: ErrorMessagesService,
-    private ngZone: NgZone,
     private snackBar: MatSnackBar,
     public bannerService: BannerService
   ) {}
@@ -128,7 +128,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
 
         this.psService.sendMessage(loadingInfo);
       } catch (ex) {
-        /* empty */
+        console.log(ex);
       }
     }
   }
@@ -250,17 +250,19 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
 
     // iterate through steps to find current one(s)
     // immutable, so we want to change the local copy, so need to make a copy
-    this.ngZone.run(() => {
+
+    if (!PCore.isDeepEqual(this.prevNavigationSteps, oCaseInfo.navigation.steps)) {
       // what comes back now in configObject is the children of the flowContainer
       this.arNavigationSteps$ = JSON.parse(JSON.stringify(oCaseInfo.navigation.steps));
+      this.prevNavigationSteps = JSON.parse(JSON.stringify(oCaseInfo.navigation.steps));
       this.arNavigationSteps$.forEach(step => {
         if (step.name) {
-          step.name = PCore.getLocaleUtils().getLocaleValue(step.name, undefined, this.localeReference);
+          step.name = this.pConn$.getLocalizationService().getLocalizedText(step.name);
         }
       });
       this.arCurrentStepIndicies$ = [];
       this.arCurrentStepIndicies$ = this.findCurrentIndicies(this.arNavigationSteps$, this.arCurrentStepIndicies$, 0);
-    });
+    }
   }
 
   findCurrentIndicies(arStepperSteps: any[], arIndicies: number[], depth: number): number[] {

package/lib/infra/assignment-card/assignment-card.component.html

@@ -1,5 +1,5 @@
 <form [formGroup]="formGroup$" name="flowContainer" class="psdk-flow-container">
-  <div *ngFor="let kid of arChildren$">
+  <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
@@ -14,7 +14,6 @@
 </form>
 
 <div>
-  <br />
   <div class="psdk-case-view-divider"></div>
 
   <component-mapper

package/lib/infra/assignment-card/assignment-card.component.scss

@@ -1,7 +1,3 @@
-.psdk-case-view-divider {
-  border-bottom: 0.0625rem solid var(--app-neutral-light-color);
-}
-
 .psdk-flow-container {
   padding: 0rem 1rem;
 }

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

@@ -1,9 +1,20 @@
-import { Component, OnInit, Input, Output, EventEmitter, forwardRef, OnChanges } from '@angular/core';
+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) {
+  if (!children || children.firstChange) {
+    return false;
+  }
+  for (let i = 0; i < children.previousValue.length; i++) {
+    if (!PCore.isDeepEqual(children.previousValue[i].getPConnect().getConfigProps(), children.currentValue[i].getPConnect().getConfigProps())) {
+      return true;
+    }
+  }
+  return false;
+}
 @Component({
   selector: 'app-assignment-card',
   templateUrl: './assignment-card.component.html',
@@ -18,18 +29,24 @@ export class AssignmentCardComponent implements OnInit, OnChanges {
   @Input() arChildren$: any[];
   @Input() updateToken$: number;
 
+  childrenArray: any[] = [];
+
   @Output() actionButtonClick: EventEmitter<any> = new EventEmitter();
 
   ngOnInit(): void {
     // Children may contain 'reference' component, so we need to
     //  normalize them
-    this.arChildren$ = ReferenceComponent.normalizePConnArray(this.arChildren$);
+    this.childrenArray = ReferenceComponent.normalizePConnArray(this.arChildren$);
   }
 
-  ngOnChanges() {
+  ngOnChanges(changes: SimpleChanges) {
     // Children may contain 'reference' component, so we need to
     //  normalize them
-    this.arChildren$ = ReferenceComponent.normalizePConnArray(this.arChildren$);
+
+    const { arChildren$ } = changes;
+    if (isChildrenUpdated(arChildren$)) {
+      this.childrenArray = ReferenceComponent.normalizePConnArray(this.arChildren$);
+    }
   }
 
   onActionButtonClick(oData: any) {

package/lib/infra/defer-load/defer-load.component.html

@@ -1,3 +1,7 @@
-<div *ngIf="loadedPConn$">
-  <component-mapper [name]="componentName$" [props]="{ pConn$: loadedPConn$ }" errorMsg="Defer Load Missing: {{ componentName$ }}"></component-mapper>
+<div *ngIf="childComponentPConnect">
+  <component-mapper
+    [name]="childComponentPConnect.getComponentName()"
+    [props]="{ pConn$: childComponentPConnect, formGroup$ }"
+    errorMsg="Defer Load Missing: {{ childComponentPConnect.getComponentName() }}"
+  ></component-mapper>
 </div>

package/lib/infra/defer-load/defer-load.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, forwardRef, OnDestroy, OnChanges } from '@angular/core';
+import { Component, OnInit, Input, forwardRef, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { publicConstants } from '@pega/pcore-pconnect-typedefs/constants';
 import { ReferenceComponent } from '@pega/angular-sdk-components';
@@ -19,11 +19,10 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 })
 export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
   @Input() pConn$: typeof PConnect;
-  @Input() loadData$: any;
+  @Input() formGroup$;
   @Input() name;
 
-  componentName$: string;
-  loadedPConn$: any;
+  childComponentPConnect: typeof PConnect;
   bShowDefer$ = false;
 
   angularPConnectData: AngularPConnectData = {};
@@ -45,7 +44,7 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
   ngOnInit(): void {
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
     // The below call is causing an error while creating/opening a case, hence commenting it out
-    // this.loadActiveTab();
+    this.updateSelf();
   }
 
   ngOnDestroy(): void {
@@ -62,11 +61,17 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
     if (theRequestedAssignment !== this.currentLoadedAssignment || (lastUpdateCaseTime && lastUpdateCaseTime !== this.lastUpdateCaseTime)) {
       this.currentLoadedAssignment = theRequestedAssignment;
       this.lastUpdateCaseTime = lastUpdateCaseTime;
-      this.loadActiveTab();
+      this.updateSelf();
     }
   }
 
-  ngOnChanges() {
+  ngOnChanges(changes: SimpleChanges) {
+    if (!Object.values(changes).every(val => val.firstChange === true)) {
+      this.updateSelf();
+    }
+  }
+
+  updateSelf() {
     this.loadViewCaseID = this.pConn$.getValue(this.constants.PZINSKEY) || this.pConn$.getValue(this.constants.CASE_INFO.CASE_INFO_ID);
     let containerItemData;
     const targetName = this.pConn$.getTarget();
@@ -92,7 +97,7 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
 
   getViewOptions = () => ({
     viewContext: this.resourceType,
-    pageClass: this.loadViewCaseID ? '' : this.pConn$.getDataObject().pyPortal.classID,
+    pageClass: this.loadViewCaseID ? '' : this.pConn$.getDataObject()?.pyPortal?.classID,
     container: this.isContainerPreview ? 'preview' : undefined,
     containerName: this.isContainerPreview ? 'preview' : undefined,
     updateData: this.isContainerPreview
@@ -119,8 +124,9 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
       };
       const configObject = PCore.createPConnect(config);
       configObject.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
-      this.loadedPConn$ = ReferenceComponent.normalizePConn(configObject.getPConnect());
-      this.componentName$ = this.loadedPConn$.getComponentName();
+
+      this.childComponentPConnect = ReferenceComponent.normalizePConn(configObject.getPConnect());
+
       if (this.deferLoadId) {
         PCore.getDeferLoadManager().stop(this.deferLoadId, this.pConn$.getContextName());
       }

package/lib/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 {
@@ -8,11 +8,9 @@
 }
 
 .psdk-icon-current {
-  color: var(--app-primary-color);
 }
 
 .psdk-icon-not-current {
-  color: var(--app-neutral-color);
 }
 
 .psdk-current-svg-icon {
@@ -35,16 +33,13 @@ mat-horizontal-stepper {
 .psdk-sub-step-current {
   padding-left: 0.625rem;
   font-weight: bold;
-  color: var(--app-label-selected-color);
 }
 
 .psdk-sub-step-not-current {
   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 +76,6 @@ mat-horizontal-stepper {
 
 .psdk-vertical-step-icon {
   margin-right: 12px;
-  background-color: var(--app-neutral-color);
-  color: var(--app-form-color);
   border-radius: 50%;
   height: 24px;
   width: 24px;
@@ -95,13 +88,10 @@ 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);
   border-radius: 50%;
   height: 24px;
   width: 24px;
@@ -110,7 +100,6 @@ mat-horizontal-stepper {
 }
 
 .psdk-vertical-step-label {
-  color: var(--app-label-color);
   display: inline-block;
   white-space: nowrap;
   overflow: hidden;
@@ -122,7 +111,6 @@ mat-horizontal-stepper {
 }
 
 .psdk-vertical-step-label-selected {
-  color: var(--app-label-selected-color);
   display: inline-block;
   white-space: nowrap;
   overflow: hidden;
@@ -152,7 +140,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 +169,6 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-icon {
-  background-color: var(--app-neutral-color);
-  color: var(--app-form-color);
   border-radius: 50%;
   height: 24px;
   width: 24px;
@@ -203,8 +188,6 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-icon-selected {
-  background-color: var(--app-primary-color);
-  color: var(--app-form-color);
   border-radius: 50%;
   height: 24px;
   width: 24px;
@@ -216,7 +199,6 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-label {
-  color: var(--app-label-color);
   display: inline-block;
   min-width: 50px;
   vertical-align: middle;
@@ -226,7 +208,6 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-label-selected {
-  color: var(--app-label-selected-color);
   display: inline-block;
   min-width: 50px;
   vertical-align: middle;
@@ -236,7 +217,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/lib/infra/navbar/navbar.component.html

@@ -8,35 +8,33 @@
     </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">
@@ -47,7 +45,6 @@
         </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>

package/lib/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;
 }
@@ -119,8 +119,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 +140,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 +150,15 @@ 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%;
+}

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

@@ -49,7 +49,6 @@ export class NavbarComponent implements OnInit, OnDestroy {
   localizedVal: any;
   localeCategory = 'AppShell';
   localeUtils = PCore.getLocaleUtils();
-  localeReference: any;
   constructor(
     private angularPConnect: AngularPConnectService,
     private chRef: ChangeDetectorRef,
@@ -113,11 +112,17 @@ export class NavbarComponent implements OnInit, OnDestroy {
 
       // 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.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);

package/lib/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;