@pega/angular-sdk-overrides 25.1.12 → 26.1.10

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

@@ -1,5 +1,5 @@
 <div>
-  <div><component-mapper name="AlertBanner" [props]="{ banners: bannerService.banners }" [parent]="this"></component-mapper></div>
+  <div><component-mapper name="AlertBanner" [props]="{ banners: bannerService.getBanners(itemKey$) }" [parent]="this"></component-mapper></div>
   <div *ngIf="bHasNavigation$" class="psdk-stepper">
     <component-mapper
       name="MultiStep"
@@ -10,6 +10,7 @@
         arMainButtons$,
         arSecondaryButtons$,
         bIsVertical$,
+        stepIndicator$,
         arCurrentStepIndicies$,
         arNavigationSteps$
       }"

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

@@ -7,7 +7,6 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { ErrorMessagesService } from '@pega/angular-sdk-components';
 import { ProgressSpinnerService } from '@pega/angular-sdk-components';
 import { BannerService } from '@pega/angular-sdk-components';
-import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 
 function getRefreshProps(refreshConditions) {
@@ -28,6 +27,8 @@ interface AssignmentProps {
   template: string;
 }
 
+type StepIndicator = 'horizontal' | 'vertical' | 'vertical-start';
+
 @Component({
   selector: 'app-assignment',
   templateUrl: './assignment.component.html',
@@ -61,6 +62,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
 
   bHasNavigation$ = false;
   bIsVertical$ = false;
+  stepIndicator$: StepIndicator = 'horizontal';
   prevNavigationSteps: any[] = [];
   arCurrentStepIndicies$: number[] = [];
   arNavigationSteps$: any[] = [];
@@ -98,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;
@@ -109,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
@@ -126,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();
@@ -149,8 +159,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
 
     this.registerForRefresh();
 
-    // pConn$ may be a 'reference' component, so normalize it
-    this.newPConn$ = ReferenceComponent.normalizePConn(this.pConn$);
+    this.newPConn$ = this.pConn$;
 
     if (this.arChildren$) {
       this.createButtons();
@@ -158,9 +167,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   initComponent() {
-    // pConn$ may be a 'reference' component, so normalize it
-    // this.pConn$ = ReferenceComponent.normalizePConn(this.pConn$);
-    this.newPConn$ = ReferenceComponent.normalizePConn(this.pConn$);
+    this.newPConn$ = this.pConn$;
 
     // prevent re-intializing with flowContainer update unless an action is taken
     this.bReInit = false;
@@ -203,7 +210,6 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
     this.cancelCreateStageAssignment = actionsAPI.cancelCreateStageAssignment.bind(actionsAPI);
     this.approveCase = actionsAPI.approveCase?.bind(actionsAPI);
     this.rejectCase = actionsAPI.rejectCase?.bind(actionsAPI);
-
     if (this.arChildren$) {
       this.createButtons();
     }
@@ -245,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)
@@ -309,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
@@ -483,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();
 
@@ -492,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
@@ -501,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/assignment-card/assignment-card.component.html

@@ -2,6 +2,7 @@
   <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 *ngSwitchCase="'reference'" name="reference" [props]="{ formGroup$, pConn$: kid.getPConnect() }"></component-mapper>
       <component-mapper
         *ngSwitchCase="'CaseCreateStage'"
         name="CaseCreateStage"

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

@@ -1,7 +1,6 @@
 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) {
@@ -34,18 +33,13 @@ export class AssignmentCardComponent implements OnInit, OnChanges {
   @Output() actionButtonClick: EventEmitter<any> = new EventEmitter();
 
   ngOnInit(): void {
-    // Children may contain 'reference' component, so we need to
-    //  normalize them
-    this.childrenArray = ReferenceComponent.normalizePConnArray(this.arChildren$);
+    this.childrenArray = this.arChildren$;
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    // Children may contain 'reference' component, so we need to
-    //  normalize them
-
     const { arChildren$ } = changes;
     if (isChildrenUpdated(arChildren$)) {
-      this.childrenArray = ReferenceComponent.normalizePConnArray(this.arChildren$);
+      this.childrenArray = this.arChildren$;
     }
   }
 

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

@@ -1,7 +1,6 @@
-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 { ReferenceComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 
@@ -36,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();
   }
 
@@ -127,13 +129,13 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
       const configObject = PCore.createPConnect(config);
       configObject.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
 
-      this.childComponentPConnect = ReferenceComponent.normalizePConn(configObject.getPConnect());
+      this.childComponentPConnect = configObject.getPConnect();
 
       if (this.deferLoadId) {
         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';