@pega/angular-sdk-overrides 0.24.9 → 0.25.2

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

@@ -1,14 +1,24 @@
-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',
   styleUrls: ['./assignment-card.component.scss'],
-  standalone: true,
   imports: [CommonModule, ReactiveFormsModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class AssignmentCardComponent implements OnInit, OnChanges {
@@ -19,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/dashboard-filter/dashboard-filter.component.ts

@@ -14,7 +14,6 @@ import { getFilterExpression, getFormattedDate, createFilter, combineFilters } f
   selector: 'app-dashboard-filter',
   templateUrl: './dashboard-filter.component.html',
   styleUrls: ['./dashboard-filter.component.scss'],
-  standalone: true,
   imports: [
     CommonModule,
     MatFormFieldModule,

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';
@@ -15,16 +15,14 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
   selector: 'app-defer-load',
   templateUrl: './defer-load.component.html',
   styleUrls: ['./defer-load.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 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 = {};
@@ -38,6 +36,7 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
   CASE: any;
   PAGE: any;
   DATA: any;
+  lastUpdateCaseTime;
   constructor(private angularPConnect: AngularPConnectService) {
     this.constants = PCore.getConstants();
   }
@@ -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 {
@@ -58,13 +57,21 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
     // Should always check the bridge to see if the component should
     // update itself (re-render)
     const theRequestedAssignment = this.pConn$.getValue(PCore.getConstants().CASE_INFO.ASSIGNMENT_LABEL);
-    if (theRequestedAssignment !== this.currentLoadedAssignment) {
+    const lastUpdateCaseTime = this.pConn$.getValue('caseInfo.lastUpdateTime');
+    if (theRequestedAssignment !== this.currentLoadedAssignment || (lastUpdateCaseTime && lastUpdateCaseTime !== this.lastUpdateCaseTime)) {
       this.currentLoadedAssignment = theRequestedAssignment;
-      this.loadActiveTab();
+      this.lastUpdateCaseTime = lastUpdateCaseTime;
+      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();
@@ -81,7 +88,7 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
     this.resourceType = resourceType;
     this.isContainerPreview = /preview_[0-9]*/g.test(this.pConn$.getContextName());
 
-    const theConfigProps: any = this.pConn$.getConfigProps();
+    const theConfigProps = this.pConn$.getConfigProps();
     this.deferLoadId = theConfigProps.deferLoadId;
     this.name = this.name || theConfigProps.name;
 
@@ -90,9 +97,9 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
 
   getViewOptions = () => ({
     viewContext: this.resourceType,
-    pageClass: this.loadViewCaseID ? '' : this.pConn$.getDataObject().pyPortal.classID,
-    container: this.isContainerPreview ? 'preview' : null,
-    containerName: this.isContainerPreview ? 'preview' : null,
+    pageClass: this.loadViewCaseID ? '' : this.pConn$.getDataObject()?.pyPortal?.classID,
+    container: this.isContainerPreview ? 'preview' : undefined,
+    containerName: this.isContainerPreview ? 'preview' : undefined,
     updateData: this.isContainerPreview
   });
 
@@ -116,9 +123,10 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
         }
       };
       const configObject = PCore.createPConnect(config);
-      configObject.getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
-      this.loadedPConn$ = ReferenceComponent.normalizePConn(configObject.getPConnect());
-      this.componentName$ = this.loadedPConn$.getComponentName();
+      configObject.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
+
+      this.childComponentPConnect = ReferenceComponent.normalizePConn(configObject.getPConnect());
+
       if (this.deferLoadId) {
         PCore.getDeferLoadManager().stop(this.deferLoadId, this.pConn$.getContextName());
       }

package/lib/infra/error-boundary/error-boundary.component.ts

@@ -5,7 +5,6 @@ import { CommonModule } from '@angular/common';
   selector: 'app-error-boundary',
   templateUrl: './error-boundary.component.html',
   styleUrls: ['./error-boundary.component.scss'],
-  standalone: true,
   imports: [CommonModule]
 })
 export class ErrorBoundaryComponent {

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/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/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

@@ -7,8 +7,6 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { ProgressSpinnerService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 
-declare const window: any;
-
 interface NavBarProps {
   // If any, enter additional props that only exist on this component
   showAppName?: boolean;
@@ -19,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 {
@@ -36,11 +33,11 @@ export class NavbarComponent implements OnInit, OnDestroy {
   navExpandCollapse$: string;
   bShowCaseTypes$ = false;
 
-  portalApp$ = '';
+  portalApp$: string | undefined = '';
   portalLogoImage$: string;
   showAppName$?: boolean = false;
 
-  portalOperator$: string;
+  portalOperator$: string | undefined;
   portalOperatorInitials$: string;
 
   actionsAPI: any;
@@ -52,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,
@@ -116,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);
@@ -131,7 +133,7 @@ export class NavbarComponent implements OnInit, OnDestroy {
 
       this.portalLogoImage$ = this.utils.getSDKStaticContentUrl().concat('assets/pzpega-logo-mark.svg');
       this.portalOperator$ = PCore.getEnvironmentInfo().getOperatorName();
-      this.portalOperatorInitials$ = this.utils.getInitials(this.portalOperator$);
+      this.portalOperatorInitials$ = this.utils.getInitials(this.portalOperator$ ?? '');
       this.showAppName$ = this.configProps$.showAppName;
 
       this.portalApp$ = PCore.getEnvironmentInfo().getApplicationLabel();