@pega/angular-sdk-overrides 23.1.10 → 24.1.10

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

@@ -1,14 +1,14 @@
-import { Component, OnInit, Input, ChangeDetectorRef, NgZone, forwardRef, OnDestroy } from '@angular/core';
+import { Component, OnInit, Input, ChangeDetectorRef, NgZone, forwardRef, OnDestroy, Injector } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { MatCardModule } from '@angular/material/card';
 import { publicConstants } from '@pega/pcore-pconnect-typedefs/constants';
-import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { ProgressSpinnerService } from '@pega/angular-sdk-components';
 import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { getToDoAssignments, showBanner } from './helpers';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { FlowContainerBaseComponent } from '@pega/angular-sdk-components';
 
 /**
  * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
@@ -32,11 +32,9 @@ interface FlowContainerProps {
   standalone: true,
   imports: [CommonModule, MatCardModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class FlowContainerComponent implements OnInit, OnDestroy {
+export class FlowContainerComponent extends FlowContainerBaseComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
 
-  // For interaction with AngularPConnect
-  angularPConnectData: AngularPConnectData = {};
   pCoreConstants: typeof publicConstants;
   configProps$: FlowContainerProps;
 
@@ -72,14 +70,17 @@ export class FlowContainerComponent implements OnInit, OnDestroy {
   banners: any[];
   // itemKey: string = "";   // JA - this is what Nebula/Constellation uses to pass to finishAssignment, navigateToStep
 
+  pConnectOfActiveContainerItem;
+
   constructor(
-    private angularPConnect: AngularPConnectService,
+    injector: Injector,
     private cdRef: ChangeDetectorRef,
     private psService: ProgressSpinnerService,
     private fb: FormBuilder,
     private ngZone: NgZone,
     private utils: Utils
   ) {
+    super(injector);
     // create the formGroup
     this.formGroup$ = this.fb.group({ hideRequired: false });
   }
@@ -148,10 +149,14 @@ export class FlowContainerComponent implements OnInit, OnDestroy {
     // Should always check the bridge to see if the component should update itself (re-render)
     const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
 
+    const pConn = this.pConnectOfActiveContainerItem || this.pConn$;
+    const caseViewModeFromProps = this.angularPConnect.getComponentProp(this, 'caseViewMode');
+    const caseViewModeFromRedux = pConn.getValue('context_data.caseViewMode', '');
+
     // ONLY call updateSelf when the component should update
     //    AND removing the "gate" that was put there since shouldComponentUpdate
     //      should be the real "gate"
-    if (bUpdateSelf) {
+    if (bUpdateSelf || caseViewModeFromProps !== caseViewModeFromRedux) {
       // don't want to redraw the flow container when there are page messages, because
       // the redraw causes us to loose the errors on the elements
       const completeProps = this.angularPConnect.getCurrentCompleteProps(this) as FlowContainerProps;
@@ -179,7 +184,6 @@ export class FlowContainerComponent implements OnInit, OnDestroy {
   }
 
   getTodoVisibilty() {
-    // @ts-ignore - second parameter pageReference for getValue method should be optional
     const caseViewMode = this.pConn$.getValue('context_data.caseViewMode');
     if (caseViewMode && caseViewMode === 'review') {
       const kid = this.pConn$.getChildren()[0];
@@ -273,25 +277,30 @@ export class FlowContainerComponent implements OnInit, OnDestroy {
 
   hasAssignments() {
     let hasAssignments = false;
-    // @ts-ignore - second parameter pageReference for getValue method should be optional
-    const assignmentsList = this.pConn$.getValue(this.pCoreConstants.CASE_INFO.D_CASE_ASSIGNMENTS_RESULTS);
-    const thisOperator = PCore.getEnvironmentInfo().getOperatorIdentifier();
+    const assignmentsList: any[] = this.pConn$.getValue(this.pCoreConstants.CASE_INFO.D_CASE_ASSIGNMENTS_RESULTS);
+    // const thisOperator = PCore.getEnvironmentInfo().getOperatorIdentifier();
     // 8.7 includes assignments in Assignments List that may be assigned to
     //  a different operator. So, see if there are any assignments for
     //  the current operator
+    const isEmbedded = window.location.href.includes('embedded');
     let bAssignmentsForThisOperator = false;
 
+    if (isEmbedded) {
+      const thisOperator = PCore.getEnvironmentInfo().getOperatorIdentifier();
+      for (const assignment of assignmentsList) {
+        if (assignment.assigneeInfo.ID === thisOperator) {
+          bAssignmentsForThisOperator = true;
+        }
+      }
+    } else {
+      bAssignmentsForThisOperator = true;
+    }
+
     // Bail if there is no assignmentsList
     if (!assignmentsList) {
       return hasAssignments;
     }
 
-    for (const assignment of assignmentsList) {
-      if ((assignment as any).assigneeInfo.ID === thisOperator) {
-        bAssignmentsForThisOperator = true;
-      }
-    }
-
     const hasChildCaseAssignments = this.hasChildCaseAssignments();
 
     if (bAssignmentsForThisOperator || hasChildCaseAssignments || this.isCaseWideLocalAction()) {
@@ -302,9 +311,7 @@ export class FlowContainerComponent implements OnInit, OnDestroy {
   }
 
   isCaseWideLocalAction() {
-    // @ts-ignore - second parameter pageReference for getValue method should be optional
     const actionID = this.pConn$.getValue(this.pCoreConstants.CASE_INFO.ACTIVE_ACTION_ID);
-    // @ts-ignore - second parameter pageReference for getValue method should be optional
     const caseActions = this.pConn$.getValue(this.pCoreConstants.CASE_INFO.AVAILABLEACTIONS) as any[];
     let bCaseWideAction = false;
     if (caseActions && actionID) {
@@ -317,7 +324,6 @@ export class FlowContainerComponent implements OnInit, OnDestroy {
   }
 
   hasChildCaseAssignments() {
-    // @ts-ignore - second parameter pageReference for getValue method should be optional
     const childCases = this.pConn$.getValue(this.pCoreConstants.CASE_INFO.CHILD_ASSIGNMENTS);
 
     return childCases && childCases.length > 0;
@@ -328,9 +334,7 @@ export class FlowContainerComponent implements OnInit, OnDestroy {
 
     const { CASE_INFO: CASE_CONSTS } = PCore.getConstants();
 
-    // @ts-ignore - second parameter pageReference for getValue method should be optional
     const caseActions = this.pConn$.getValue(CASE_CONSTS.CASE_INFO_ACTIONS) as any[];
-    // @ts-ignore - second parameter pageReference for getValue method should be optional
     const activeActionID = this.pConn$.getValue(CASE_CONSTS.ACTIVE_ACTION_ID);
     const activeAction = caseActions?.find(action => action.ID === activeActionID);
     if (activeAction) {
@@ -370,8 +374,9 @@ export class FlowContainerComponent implements OnInit, OnDestroy {
     // const { getPConnect } = this.arChildren$[0].getPConnect();
     const localPConn = this.arChildren$[0].getPConnect();
 
-    // @ts-ignore - second parameter pageReference for getValue method should be optional
-    const caseViewMode = this.pConn$.getValue('context_data.caseViewMode');
+    this.pConnectOfActiveContainerItem = this.getPConnectOfActiveContainerItem(this.pConn$) || this.pConn$;
+
+    const caseViewMode = this.pConnectOfActiveContainerItem.getValue('context_data.caseViewMode');
     this.bShowBanner = showBanner(this.pConn$);
 
     if (caseViewMode && caseViewMode == 'review') {
@@ -424,7 +429,6 @@ export class FlowContainerComponent implements OnInit, OnDestroy {
         const todoAssignments = getToDoAssignments(this.pConn$);
 
         if (todoAssignments && todoAssignments.length > 0) {
-          // @ts-ignore - second parameter pageReference for getValue method should be optional
           this.todo_caseInfoID$ = this.pConn$.getValue(CASE_CONSTS.CASE_INFO_ID);
           this.todo_datasource$ = { source: todoAssignments };
         }
@@ -452,7 +456,6 @@ export class FlowContainerComponent implements OnInit, OnDestroy {
   }
 
   showCaseMessages() {
-    // @ts-ignore - second parameter pageReference for getValue method should be optional
     this.caseMessages$ = this.localizedVal(this.pConn$.getValue('caseMessages'), this.localeCategory);
     if (this.caseMessages$ || !this.hasAssignments()) {
       this.bHasCaseMessages$ = true;
@@ -465,11 +468,10 @@ export class FlowContainerComponent implements OnInit, OnDestroy {
       }
 
       // publish this "assignmentFinished" for mashup, need to get approved as a standard
-      // @ts-ignore - second parameter “payload” for publish method should be optional
       PCore.getPubSubUtils().publish('assignmentFinished');
 
       this.psService.sendMessage(false);
-    } else if (this.bHasCaseMessages$) {
+    } else {
       this.bHasCaseMessages$ = false;
       this.bShowConfirm = false;
     }
@@ -565,7 +567,6 @@ export class FlowContainerComponent implements OnInit, OnDestroy {
       this.psService.sendMessage(false);
 
       const oWorkItem = configObject.getPConnect();
-      // @ts-ignore - parameter “contextName” for getDataObject method should be optional
       const oWorkData: any = oWorkItem.getDataObject();
 
       this.containerName$ = this.localizedVal(this.getActiveViewLabel() || oWorkData.caseInfo.assignments?.[0].name, undefined, this.localeReference);

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

@@ -6,6 +6,7 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { ProgressSpinnerService } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { getBanners } from '@pega/angular-sdk-components';
+import { ReferenceComponent } from '@pega/angular-sdk-components';
 
 /**
  * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
@@ -200,10 +201,9 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
   }
 
   createView(routingInfo, currentItem, latestItem, key) {
-    const configObject = this.getConfigObject(currentItem, this.pConn$);
+    const configObject = this.getConfigObject(currentItem, null, false);
     const newComp = configObject?.getPConnect();
     // const newCompName = newComp.getComponentName();
-    // @ts-ignore - parameter “contextName” for getDataObject method should be optional
     const caseInfo = newComp && newComp.getDataObject() && newComp.getDataObject().caseInfo ? newComp.getDataObject().caseInfo : null;
     // The metadata for pyDetails changed such that the "template": "CaseView"
     //  is no longer a child of the created View but is in the created View's
@@ -248,8 +248,17 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
                 ID,
                 `${theNewCaseInfo?.getClassName()}!CASE!${theNewCaseInfo.getName()}`.toUpperCase()
               );
-        // // update children with new view's children
-        this.arChildren$ = newComp.getChildren() as any[];
+
+        const bIsRefComponent = this.checkIfRefComponent(newComp);
+
+        if (bIsRefComponent) {
+          const newPConn = ReferenceComponent.normalizePConn(newComp);
+          this.arChildren$ = ReferenceComponent.normalizePConnArray(newPConn.getChildren());
+        } else {
+          // update children with new view's children
+          this.arChildren$ = newComp.getChildren();
+        }
+
         this.bShowModal$ = true;
 
         // for when non modal
@@ -280,16 +289,30 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
     });
   }
 
-  getConfigObject(item, pConnect) {
+  getConfigObject(item, pConnect, isReverseCoexistence = false) {
+    let config;
+    if (isReverseCoexistence) {
+      config = {
+        options: {
+          pageReference: pConnect?.getPageReference(),
+          hasForm: true,
+          containerName: pConnect?.getContainerName() || PCore.getConstants().MODAL
+        }
+      };
+      return PCore.createPConnect(config);
+    }
     if (item) {
-      const { context, view } = item;
-      const config = {
+      const { context, view, isBulkAction } = item;
+      const target = PCore.getContainerUtils().getTargetFromContainerItemID(context);
+      config = {
         meta: view,
         options: {
           context,
           pageReference: view.config.context || pConnect.getPageReference(),
           hasForm: true,
-          containerName: pConnect?.getContainerName() || PCore.getConstants().MODAL
+          ...(isBulkAction && { isBulkAction }),
+          containerName: pConnect?.getContainerName() || PCore.getConstants().MODAL,
+          target
         }
       };
       return PCore.createPConnect(config);
@@ -297,6 +320,15 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
     return null;
   }
 
+  checkIfRefComponent(thePConn: any): boolean {
+    let bReturn = false;
+    if (thePConn && thePConn.getComponentName() == 'reference') {
+      bReturn = true;
+    }
+
+    return bReturn;
+  }
+
   onAlertState(bData: boolean) {
     this.bAlertState = bData;
     this.bShowCancelAlert$ = false;

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

@@ -121,7 +121,6 @@ export class ViewContainerComponent implements OnInit, OnDestroy {
     }
 
     if (sessionStorage.getItem('hasViewContainer') == 'false') {
-      // @ts-ignore - Property 'getMetadata' is private and only accessible within class
       if (this.pConn$.getMetadata().children) {
         containerMgr.addContainerItem(this.dispatchObject);
       }

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

@@ -38,7 +38,6 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
   newPConn$: any;
   containerName$: string;
 
-  bIsRefComponent = false;
   bInitialized = false;
 
   templateName$: string;
@@ -60,6 +59,8 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
   cancelAssignment: any;
   cancelCreateStageAssignment: any;
   showPage: any;
+  approveCase: any;
+  rejectCase: any;
 
   // itemKey: string = "";   // JA - this is what Nebula/Constellation uses to pass to finishAssignment, navigateToStep
 
@@ -127,45 +128,19 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   updateChanges() {
-    this.bIsRefComponent = this.checkIfRefComponent(this.pConn$);
-
-    this.ngZone.run(() => {
-      // pConn$ may be a 'reference' component, so normalize it
-      // this.pConn$ = ReferenceComponent.normalizePConn(this.pConn$);
-      this.newPConn$ = ReferenceComponent.normalizePConn(this.pConn$);
-
-      //  If 'reference' so we need to get the children of the normalized pConn
-      if (this.bIsRefComponent) {
-        // this.arChildren$ = ReferenceComponent.normalizePConnArray(this.pConn$.getChildren());
-        this.arChildren$ = ReferenceComponent.normalizePConnArray(this.newPConn$.getChildren());
-      }
-    });
-
-    this.createButtons();
-  }
+    // pConn$ may be a 'reference' component, so normalize it
+    this.newPConn$ = ReferenceComponent.normalizePConn(this.pConn$);
 
-  checkIfRefComponent(thePConn: any): boolean {
-    let bReturn = false;
-    if (thePConn && thePConn.getComponentName() == 'reference') {
-      bReturn = true;
+    if (this.arChildren$) {
+      this.createButtons();
     }
-
-    return bReturn;
   }
 
   initComponent() {
-    this.bIsRefComponent = this.checkIfRefComponent(this.pConn$);
-
     // pConn$ may be a 'reference' component, so normalize it
     // this.pConn$ = ReferenceComponent.normalizePConn(this.pConn$);
     this.newPConn$ = ReferenceComponent.normalizePConn(this.pConn$);
 
-    // If 'reference' so we need to get the children of the normalized pConn
-    if (this.bIsRefComponent) {
-      // this.arChildren$ = ReferenceComponent.normalizePConnArray(this.pConn$.getChildren());
-      this.arChildren$ = ReferenceComponent.normalizePConnArray(this.newPConn$.getChildren());
-    }
-
     // prevent re-intializing with flowContainer update unless an action is taken
     this.bReInit = false;
     this.bHasNavigation$ = false;
@@ -205,8 +180,12 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
     this.showPage = actionsAPI.showPage.bind(actionsAPI);
 
     this.cancelCreateStageAssignment = actionsAPI.cancelCreateStageAssignment.bind(actionsAPI);
+    this.approveCase = actionsAPI.approveCase?.bind(actionsAPI);
+    this.rejectCase = actionsAPI.rejectCase?.bind(actionsAPI);
 
-    this.createButtons();
+    if (this.arChildren$) {
+      this.createButtons();
+    }
   }
 
   createButtons() {
@@ -353,8 +332,8 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
 
           savePromise
             .then(() => {
+              // @ts-ignore - Property 'c11nEnv' is private and only accessible within class 'CaseInfo'.
               const caseType = this.pConn$.getCaseInfo().c11nEnv.getValue(PCore.getConstants().CASE_INFO.CASE_TYPE_ID);
-              // @ts-ignore - second parameter “payload” for publish method should be optional
               PCore.getPubSubUtils().publish('cancelPressed');
               this.onSaveActionSuccess({ caseType, caseID, assignmentID });
             })
@@ -369,12 +348,9 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
         case 'cancelAssignment':
           this.bReInit = true;
           this.erService.sendMessage('dismiss', '');
-          // @ts-ignore - Property 'isAssignmentInCreateStage' is private and only accessible within class 'CaseInfo'
           const isAssignmentInCreateStage = this.pConn$.getCaseInfo().isAssignmentInCreateStage();
           const isLocalAction =
-            // @ts-ignore - Property 'isLocalAction' is private and only accessible within class 'CaseInfo'.
             this.pConn$.getCaseInfo().isLocalAction() ||
-            // @ts-ignore - second parameter pageReference for getValue method should be optional
             (PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION && this.pConn$.getValue(PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION));
           // check if create stage (modal)
           if (isAssignmentInCreateStage && this.isInModal$ && !isLocalAction) {
@@ -394,14 +370,12 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
 
             // publish before cancel pressed, because
             // cancel assignment happens "after" cancel assignment happens
-            // @ts-ignore - second parameter “payload” for publish method should be optional
             PCore.getPubSubUtils().publish('cancelPressed');
 
             const cancelPromise = this.cancelAssignment(this.itemKey$);
             cancelPromise
               .then(() => {
                 this.psService.sendMessage(false);
-                // @ts-ignore - second parameter “payload” for publish method should be optional
                 PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL);
               })
               .catch(() => {
@@ -411,11 +385,23 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
           }
           break;
 
+        case 'rejectCase': {
+          const rejectPromise = this.rejectCase(this.itemKey$);
+
+          rejectPromise
+            .then(() => {})
+            .catch(() => {
+              this.psService.sendMessage(false);
+              this.snackBar.open(`${this.localizedVal('Rejection failed!', this.localeCategory)}`, 'Ok');
+            });
+
+          break;
+        }
+
         default:
           break;
       }
     } else if (sButtonType == 'primary') {
-      // eslint-disable-next-line sonarjs/no-small-switch
       switch (sAction) {
         case 'finishAssignment':
           this.erService.sendMessage('publish', '');
@@ -437,6 +423,19 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
             this.erService.sendMessage('show', this.localizedVal('Please fix errors on form.', this.localeCategory));
           }
           break;
+
+        case 'approveCase': {
+          const approvePromise = this.approveCase(this.itemKey$);
+
+          approvePromise
+            .then(() => {})
+            .catch(() => {
+              this.psService.sendMessage(false);
+              this.snackBar.open(`${this.localizedVal('Approve failed!', this.localeCategory)}`, 'Ok');
+            });
+
+          break;
+        }
         default:
           break;
       }

package/lib/infra/dashboard-filter/dashboard-filter.component.ts

@@ -47,7 +47,6 @@ export class DashboardFilterComponent implements OnInit {
 
   clearFilters() {
     this.filtersFormGroup$.reset();
-    // @ts-ignore - second parameter “payload” for publish method should be optional
     PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL);
   }
 

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

@@ -44,7 +44,8 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
 
   ngOnInit(): void {
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
-    this.loadActiveTab();
+    // The below call is causing an error while creating/opening a case, hence commenting it out
+    // this.loadActiveTab();
   }
 
   ngOnDestroy(): void {
@@ -56,7 +57,6 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
   onStateChange() {
     // Should always check the bridge to see if the component should
     // update itself (re-render)
-    // @ts-ignore - second parameter pageReference for getValue method should be optional
     const theRequestedAssignment = this.pConn$.getValue(PCore.getConstants().CASE_INFO.ASSIGNMENT_LABEL);
     if (theRequestedAssignment !== this.currentLoadedAssignment) {
       this.currentLoadedAssignment = theRequestedAssignment;
@@ -65,7 +65,6 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   ngOnChanges() {
-    // @ts-ignore - second parameter pageReference for getValue method should be optional
     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();
@@ -91,7 +90,6 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
 
   getViewOptions = () => ({
     viewContext: this.resourceType,
-    // @ts-ignore - parameter “contextName” for getDataObject method should be optional
     pageClass: this.loadViewCaseID ? '' : this.pConn$.getDataObject().pyPortal.classID,
     container: this.isContainerPreview ? 'preview' : null,
     containerName: this.isContainerPreview ? 'preview' : null,
@@ -138,9 +136,8 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
         this.pConn$
           .getActionsApi()
           .showData(this.name, dataContext, dataContextParameters, {
-            // @ts-ignore - skipSemanticUrl should be boolean type
             skipSemanticUrl: true,
-            // @ts-ignore
+            // @ts-ignore - Object literal may only specify known properties, and 'isDeferLoaded' does not exist in type '{ containerName: string; skipSemanticUrl: boolean; }'
             isDeferLoaded: true
           })
           .then(data => {
@@ -160,8 +157,8 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
     } else {
       this.pConn$
         .getActionsApi()
-        .refreshCaseView(encodeURI(this.loadViewCaseID), this.name, null)
-        .then(data => {
+        .refreshCaseView(encodeURI(this.loadViewCaseID), this.name, '')
+        .then((data: any) => {
           this.onResponse(data.root);
         });
     }

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

@@ -54,7 +54,7 @@
               <span>{{ i + 1 }}</span>
             </div>
           </div>
-          <div class="{{ _getHLabelClass(mainStep.visited_status) }}">
+          <div id="multi-step-label" class="{{ _getHLabelClass(mainStep.visited_status) }}">
             <div class="psdk-horizontal-step-text-label">
               {{ mainStep.name }}
             </div>

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

@@ -163,6 +163,7 @@ mat-horizontal-stepper {
 .psdk-horizontal-stepper-header-container {
   white-space: nowrap;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   text-align: left;
 }

package/lib/infra/navbar/navbar.component.html

@@ -22,7 +22,7 @@
           *ngFor="let caseType of caseTypes$"
           (click)="navPanelCreateCaseType(caseType.pyClassName, caseType.pyFlowType)"
         >
-          <span class="psdk-nav-button-span">{{ caseType.pyLabel }}</span>
+          <span class="psdk-nav-button-span">{{ localeUtils.getLocaleValue(caseType.pyLabel, '', localeReference) }}</span>
         </mat-list-item>
       </mat-list>
     </mat-list>
@@ -32,14 +32,14 @@
       <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">{{ localizedVal(page.pyLabel, localeCategory) }}</span>
+          <span class="psdk-nav-button-span">{{ localeUtils.getLocaleValue(page.pyLabel, '', localeReference) }}</span>
         </div>
       </mat-list-item>
     </mat-list>
   </div>
   <div class="psdk-nav-divider"></div>
   <div>
-    <mat-list>
+    <mat-list id="profile">
       <mat-list-item [matMenuTriggerFor]="menu" class="psdk-profile-list-item">
         <div class="flex-box">
           <div class="psdk-nav-oper-avatar">{{ portalOperatorInitials$ }}</div>
@@ -48,7 +48,7 @@
       </mat-list-item>
       <mat-menu #menu="matMenu">
         <button mat-menu-item>Profile</button>
-        <button mat-menu-item (click)="navPanelLogoutClick()">{{ localizedVal('Logoff', localeCategory) }}</button>
+        <button mat-menu-item (click)="navPanelLogoutClick()">{{ localizedVal('Log off', localeCategory) }}</button>
       </mat-menu>
     </mat-list>
   </div>

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

@@ -51,7 +51,8 @@ export class NavbarComponent implements OnInit, OnDestroy {
   navIcon$: string;
   localizedVal: any;
   localeCategory = 'AppShell';
-
+  localeUtils = PCore.getLocaleUtils();
+  localeReference: any;
   constructor(
     private angularPConnect: AngularPConnectService,
     private chRef: ChangeDetectorRef,
@@ -119,7 +120,7 @@ export class NavbarComponent implements OnInit, OnDestroy {
       this.navPages$.forEach(page => {
         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);
@@ -163,7 +164,9 @@ export class NavbarComponent implements OnInit, OnDestroy {
       containerName: 'primary',
       flowType: sFlowType || 'pyStartCase'
     };
-    this.createWork(sCaseType, actionInfo);
+    this.createWork(sCaseType, actionInfo).then(() => {
+      console.log('createWork completed');
+    });
   }
 
   navPanelLogoutClick() {

package/lib/infra/view/view.component.ts

@@ -159,7 +159,7 @@ export class ViewComponent implements OnInit, OnDestroy, OnChanges {
      * The resolution lies in transferring this responsibility to the Reference component, eliminating the need for this code when Reference
      * component is able to handle it.
      */
-    if (this.pConn$.getPageReference().length > 'caseInfo.content'.length) {
+    if (!this.configProps$.visibility && this.pConn$.getPageReference().length > 'caseInfo.content'.length) {
       this.visibility$ = evaluateVisibility(this.pConn$);
     }
 

package/lib/template/banner-page/config-ext.json

@@ -0,0 +1,9 @@
+{
+  "name": "BannerPage",
+  "label": "Banner",
+  "description": "Banner Page Template",
+  "type": "Template",
+  "subtype": "PAGE",
+  "icon": "BannerPage.svg",
+  "properties": []
+}

package/lib/template/case-summary/case-summary.component.ts

@@ -92,9 +92,43 @@ export class CaseSummaryComponent implements OnInit, OnDestroy, OnChanges {
       this.primaryFields$.push(kid.resolveConfigProps(kid.getRawMetadata()));
     }
 
-    for (const oField of this.arChildren$[1].getPConnect().getChildren()) {
+    const secondarySummaryFields = this.prepareCaseSummaryData(this.arChildren$[1].getPConnect());
+    const secondaryChildren = this.arChildren$[1].getPConnect().getChildren();
+    secondaryChildren.forEach((oField, index) => {
       const kid = oField.getPConnect();
-      this.secondaryFields$.push({ ...kid.resolveConfigProps(kid.getRawMetadata()), kid });
-    }
+      const displayLabel = secondarySummaryFields[index].value.getPConnect().getConfigProps().label;
+      this.secondaryFields$.push({ ...kid.resolveConfigProps(kid.getRawMetadata()), kid, displayLabel });
+    });
+  }
+
+  prepareComponentInCaseSummary(pConnectMeta, getPConnect) {
+    const { config, children } = pConnectMeta;
+    const pConnect = getPConnect();
+
+    const caseSummaryComponentObject: any = {};
+
+    const { type } = pConnectMeta;
+    const createdComponent = pConnect.createComponent({
+      type,
+      children: children ? [...children] : [],
+      config: {
+        ...config
+      }
+    });
+
+    caseSummaryComponentObject.value = createdComponent;
+    return caseSummaryComponentObject;
+  }
+
+  prepareCaseSummaryData(summaryFieldChildren) {
+    const convertChildrenToSummaryData = kid => {
+      return kid?.map((childItem, index) => {
+        const childMeta = childItem.getPConnect().meta;
+        const caseSummaryComponentObject = this.prepareComponentInCaseSummary(childMeta, childItem.getPConnect);
+        caseSummaryComponentObject.id = index + 1;
+        return caseSummaryComponentObject;
+      });
+    };
+    return summaryFieldChildren ? convertChildrenToSummaryData(summaryFieldChildren?.getChildren()) : undefined;
   }
 }