@pega/angular-sdk-overrides 25.1.13 → 26.1.10

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[] = [];
@@ -97,6 +100,9 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
 
     this.initComponent();
 
+    // ngOnChanges runs before ngOnInit, so updateChanges() never registers on first render.
+    this.registerForRefresh();
+
     this.angularPConnect.shouldComponentUpdate(this);
 
     this.bInitialized = true;
@@ -108,6 +114,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
@@ -125,6 +133,9 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
     //    AND removing the "gate" that was put there since shouldComponentUpdate
     //      should be the real "gate"
     if (bUpdateSelf) {
+      // The engine drops registrations when it cleans the context cache, so re-register on each update (as React does per render).
+      this.registerForRefresh();
+
       let loadingInfo;
       try {
         // loadingInfo = this.pConn$.getLoadingStatus();
@@ -240,14 +251,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 +323,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
@@ -478,7 +497,11 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   registerForRefresh() {
-    const refreshConditions = this.pConn$.getCaseInfo()?.getActionRefreshConditions();
+    const caseInfo = this.pConn$.getCaseInfo();
+    if (!caseInfo) {
+      return;
+    }
+    const refreshConditions = caseInfo.getActionRefreshConditions();
     const pageReference = this.pConn$.getPageReference();
     const context = this.pConn$.getContextName();
 
@@ -487,7 +510,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
 
     // refresh api registration
     const refreshProps = getRefreshProps(refreshConditions);
-    const caseKey = this.pConn$.getCaseInfo().getKey();
+    const caseKey = caseInfo.getKey();
     const refreshOptions = {
       autoDetectRefresh: true,
       preserveClientChanges: false
@@ -496,10 +519,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

@@ -1,59 +1,3 @@
-.psdk-case-view-divider {
-  border-bottom: 0.0625rem solid var(--mat-sys-outline-variant);
-}
-
-.psdk-icon {
-  padding: 0rem 0.125rem;
-  min-width: unset;
-}
-
-.psdk-current-svg-icon {
-  width: 1rem;
-  filter: var(--app-primary-color-filter);
-}
-
-.psdk-not-current-svg-icon {
-  width: 1rem;
-  filter: var(--app-neutral-color-filter);
-}
-
-mat-vertical-stepper {
-  background-color: transparent;
-}
-mat-horizontal-stepper {
-  background-color: transparent;
-}
-
-.psdk-sub-step-current {
-  padding-left: 0.625rem;
-  font-weight: bold;
-  color: var(--mat-sys-on-secondary-container);
-}
-
-.psdk-sub-step-not-current {
-  color: var(--mat-sys-on-surface-variant);
-  padding-left: 0.625rem;
-}
-
-.psdk-flow-container-top {
-  padding: 0rem 0.625rem;
-  border-radius: 0.3125rem;
-}
-.psdk-flow-container {
-  padding-left: 2.1875rem;
-}
-
-.psdk-sub-step-list {
-  list-style: none;
-  padding-bottom: 0.625rem;
-}
-
-.psdk-vertical-stepper {
-  background-color: transparent;
-  display: block;
-  text-align: left;
-}
-
 .psdk-vertical-step {
   display: block;
 }
@@ -71,8 +15,12 @@ mat-horizontal-stepper {
 }
 
 .psdk-vertical-step-icon {
-  margin-right: 12px;
   background-color: var(--mat-sys-secondary);
+}
+
+.psdk-vertical-step-icon,
+.psdk-vertical-step-icon-selected {
+  margin-right: 12px;
   border-radius: 50%;
   height: 24px;
   width: 24px;
@@ -80,67 +28,95 @@ mat-horizontal-stepper {
   position: relative;
 }
 
-.psdk-vertical-step-icon-content {
+.psdk-vertical-step-icon-content,
+.psdk-horizontal-step-icon-content {
+  display: block;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }
 
-.psdk-vertical-step-icon-selected {
-  margin-right: 12px;
+.psdk-vertical-step-icon-selected,
+.psdk-horizontal-step-icon-selected {
   background-color: var(--mat-sys-primary);
   color: var(--mat-sys-surface);
-  border-radius: 50%;
-  height: 24px;
-  width: 24px;
-  flex-shrink: 0;
-  position: relative;
 }
 
-.psdk-vertical-step-label {
-  color: var(--mat-sys-on-surface-variant);
+.psdk-vertical-step-label,
+.psdk-vertical-step-label-selected,
+.psdk-horizontal-step-label,
+.psdk-horizontal-step-label-selected {
   display: inline-block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
   min-width: 50px;
   vertical-align: middle;
   font-size: 14px;
   font-weight: 500;
 }
 
-.psdk-vertical-step-label-selected {
+.psdk-vertical-step-label,
+.psdk-horizontal-step-label {
+  color: var(--mat-sys-on-surface-variant);
+}
+
+.psdk-vertical-step-label-selected,
+.psdk-horizontal-step-label-selected {
   color: var(--mat-sys-on-secondary-container);
-  display: inline-block;
+}
+
+.psdk-vertical-step-label,
+.psdk-vertical-step-label-selected {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  min-width: 50px;
-  vertical-align: middle;
-  font-size: 14px;
-  font-weight: 500;
 }
 
-.psdk-vertical-step-body {
-  margin-left: 36px;
-  border: 0;
+.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;
-  display: block;
-  text-align: left;
 }
-.psdk-vertical-step-line {
-  display: block;
+
+.psdk-stepper-rail .psdk-vertical-step-header {
+  height: auto;
+  overflow: visible;
+  padding: 0.75rem 0;
 }
 
-.psdk-vertical-step-line::before {
+.psdk-stepper-rail .psdk-vertical-step:not(:last-child)::after {
   content: '';
   position: absolute;
-  left: 0;
-  border-left-width: 1px;
-  border-left-style: solid;
-  top: -16px;
-  bottom: -16px;
+  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 {
@@ -164,7 +140,6 @@ mat-horizontal-stepper {
   box-sizing: content-box;
   display: flex;
   height: 72px;
-  overflow: hidden;
   align-items: center;
   padding: 0 24px;
 }
@@ -172,54 +147,21 @@ mat-horizontal-stepper {
 .psdk-horizontal-step-icon {
   background-color: var(--mat-sys-secondary);
   color: var(--mat-sys-surface);
-  border-radius: 50%;
-  height: 24px;
-  width: 24px;
-  flex-shrink: 0;
-  position: relative;
-  display: block;
-  margin-right: 8px;
-  flex: none;
-}
-
-.psdk-horizontal-step-icon-content {
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
 }
 
+.psdk-horizontal-step-icon,
 .psdk-horizontal-step-icon-selected {
-  background-color: var(--mat-sys-primary);
-  color: var(--mat-sys-surface);
   border-radius: 50%;
   height: 24px;
   width: 24px;
   flex-shrink: 0;
   position: relative;
-  display: block;
   margin-right: 8px;
   flex: none;
 }
 
-.psdk-horizontal-step-label {
-  color: var(--mat-sys-on-surface-variant);
-  display: inline-block;
-  min-width: 50px;
-  vertical-align: middle;
-  font-size: 14px;
-  font-weight: 500;
-  white-space: initial;
-}
-
+.psdk-horizontal-step-label,
 .psdk-horizontal-step-label-selected {
-  color: var(--mat-sys-on-secondary-container);
-  display: inline-block;
-  min-width: 50px;
-  vertical-align: middle;
-  font-size: 14px;
-  font-weight: 500;
   white-space: initial;
 }
 

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';
@@ -34,7 +34,7 @@ export class NavbarComponent implements OnInit, OnDestroy {
   bShowCaseTypes$ = false;
 
   portalApp$: string | undefined = '';
-  portalLogoImage$: string;
+  portalLogoImage$: string | Blob | null;
   showAppName$?: boolean = false;
 
   portalOperator$: string | undefined;
@@ -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,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$));
-      // @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$));
+    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/reference/reference.component.ts

@@ -88,8 +88,7 @@ export class ReferenceComponent implements OnInit, OnDestroy, OnChanges {
       }
     };
 
-    // @ts-expect-error - createComponent expects string but null is passed for unused parameters (matches React SDK pattern)
-    const viewComponent: any = pConnect.createComponent(viewObject, null, null, {
+    const viewComponent: any = pConnect.createComponent(viewObject, '', 0, {
       pageReference: context && context.startsWith('@CLASS') ? '' : context
     });