@pega/angular-sdk-overrides 0.24.5 → 0.24.6

package/lib/designSystemExtension/operator/operator.component.ts

@@ -45,8 +45,11 @@ export class OperatorComponent implements OnInit, OnChanges, OnDestroy {
     }
   }
 
+  // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
   ngOnDestroy(): void {
-    this.renderer.destroy();
+    // Ref: https://medium.com/@kamil.galek/mythical-angular-component-styles-cleanup-in-angular-17-f799a08b2abc
+    // Commenting the below line as it is causing the Operator component's styles not getting applied.
+    // this.renderer.destroy();
   }
 
   updateSelf(): void {

package/lib/field/date-time/date-time.component.html

@@ -13,11 +13,11 @@
           [placeholder]="placeholder"
           [formControl]="fieldControl"
           (blur)="fieldOnBlur($event)"
-          (dateTimeChange)="fieldOnBlur($event)"
+          (dateTimeChange)="fieldOnDateChange($event)"
           [value]="value$"
           [required]="bRequired$"
         />
-        <mat-datepicker-toggle matSuffix [for]="$any(dtPicker)" [owlDateTimeTrigger]="dtPicker"></mat-datepicker-toggle>
+        <mat-datepicker-toggle matSuffix [owlDateTimeTrigger]="dtPicker"></mat-datepicker-toggle>
         <owl-date-time #dtPicker></owl-date-time>
         <mat-error *ngIf="fieldControl?.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>

package/lib/field/date-time/date-time.component.ts

@@ -168,6 +168,15 @@ export class DateTimeComponent implements OnInit, OnDestroy {
     }
   }
 
+  fieldOnDateChange(event: any) {
+    // this comes from the date pop up
+    if (typeof event.value === 'object') {
+      // convert date to pega "date" format
+      event.value = event.value?.toISOString();
+    }
+    this.angularPConnectData.actions?.onChange(this, { value: event.value });
+  }
+
   fieldOnBlur(event: any) {
     if (typeof event.value === 'object') {
       // convert date to pega "date" format

package/lib/field/rich-text/config-ext.json

@@ -0,0 +1,10 @@
+{
+  "name": "RichText",
+  "label": "Rich text editor",
+  "description": "Text (paragraph)",
+  "type": "Field",
+  "subtype": "Text-Paragraph",
+  "icon": "images/pz-text-area-active.svg",
+  "properties": [],
+  "defaultConfig": {}
+}

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

@@ -0,0 +1,22 @@
+import { Injector } from '@angular/core';
+import { AngularPConnectData, AngularPConnectService } from 'packages/angular-sdk-components/src/public-api';
+import { getPConnectOfActiveContainerItem } from './helper';
+
+export class FlowContainerBaseComponent {
+  // For interaction with AngularPConnect
+  protected angularPConnectData: AngularPConnectData = {};
+  protected angularPConnect;
+
+  constructor(injector: Injector) {
+    this.angularPConnect = injector.get(AngularPConnectService);
+  }
+
+  getPConnectOfActiveContainerItem(parentPConnect) {
+    const routingInfo = this.angularPConnect.getComponentProp(this, 'routingInfo');
+    const isAssignmentView = this.angularPConnect.getComponentProp(this, 'isAssignmentView');
+    return getPConnectOfActiveContainerItem(routingInfo, {
+      isAssignmentView,
+      parentPConnect
+    });
+  }
+}

package/lib/infra/Containers/base-components/helper.ts

@@ -0,0 +1,89 @@
+const processRootViewDetails = (rootView, containerItem, options) => {
+  const {
+    config: { context: viewContext, name: viewName }
+  } = rootView;
+  const { context: containerContext } = containerItem;
+  const { parentPConnect } = options;
+  let resolvedViewName = viewName;
+  let resolvedViewContext = viewContext;
+
+  const isAnnotedViewName = PCore.getAnnotationUtils().isProperty(viewName);
+  const isAnnotedViewContext = PCore.getAnnotationUtils().isProperty(viewContext);
+
+  // resolving annoted view context
+  if (isAnnotedViewContext) {
+    const viewContextProperty = PCore.getAnnotationUtils().getPropertyName(viewContext);
+    resolvedViewContext = PCore.getStoreValue(
+      `.${viewContextProperty}`,
+      viewContextProperty.startsWith('.') ? parentPConnect.getPageReference() : '',
+      containerContext
+    );
+  }
+
+  if (!resolvedViewContext) {
+    resolvedViewContext = parentPConnect.getPageReference();
+  }
+
+  // resolving annoted view name
+  if (isAnnotedViewName) {
+    const viewNameProperty = PCore.getAnnotationUtils().getPropertyName(viewName);
+    resolvedViewName = PCore.getStoreValue(`.${viewNameProperty}`, resolvedViewContext, containerContext);
+  }
+
+  /* Special case where context and viewname are dynamic values
+    Use case - split for each shape
+    Ex - (caseInfo.content.SCRequestWorkQueues[1]):context --> .pyViewName:viewName
+  */
+  if (isAnnotedViewName && isAnnotedViewContext && resolvedViewName !== '') {
+    /* Allow context processor to resolve view and context when both are dynamic */
+    resolvedViewName = viewName;
+    resolvedViewContext = viewContext;
+  }
+
+  return {
+    viewName: resolvedViewName,
+    viewContext: resolvedViewContext
+  };
+};
+
+export const getPConnectOfActiveContainerItem = (containerInfo, options) => {
+  const { accessedOrder, items } = containerInfo;
+  const { isAssignmentView = false, parentPConnect } = options;
+  const containerName = parentPConnect.getContainerName();
+  const { CONTAINER_NAMES } = PCore.getContainerUtils();
+  const { CREATE_DETAILS_VIEW_NAME } = PCore.getConstants();
+
+  if (accessedOrder && items) {
+    const activeContainerItemKey = accessedOrder[accessedOrder.length - 1];
+
+    if (items[activeContainerItemKey] && items[activeContainerItemKey].view && Object.keys(items[activeContainerItemKey].view).length > 0) {
+      const activeContainerItem = items[activeContainerItemKey];
+      const target = activeContainerItemKey.substring(0, activeContainerItemKey.lastIndexOf('_'));
+
+      const { view: rootView, context } = activeContainerItem;
+      const { viewName, viewContext } = processRootViewDetails(rootView, activeContainerItem, { parentPConnect });
+
+      if (!viewName) return null;
+
+      const config = {
+        meta: rootView,
+        options: {
+          context,
+          pageReference: viewContext || parentPConnect.getPageReference(),
+          containerName,
+          containerItemID: activeContainerItemKey,
+          parentPageReference: parentPConnect.getPageReference(),
+          hasForm:
+            isAssignmentView ||
+            containerName === CONTAINER_NAMES.WORKAREA ||
+            containerName === CONTAINER_NAMES.MODAL ||
+            viewName === CREATE_DETAILS_VIEW_NAME,
+          target
+        }
+      };
+
+      return PCore.createPConnect(config).getPConnect();
+    }
+  }
+  return null;
+};

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

@@ -8,9 +8,10 @@
     </div>
     <div *ngIf="todo_showTodo$">
       <component-mapper
+        *ngIf="pConnectOfActiveContainerItem"
         name="Todo"
         [props]="{
-          pConn$: todo_pConn$,
+          pConn$: pConnectOfActiveContainerItem,
           caseInfoID$: todo_caseInfoID$,
           datasource$: todo_datasource$,
           showTodoList$: todo_showTodoList$,
@@ -22,7 +23,11 @@
       ></component-mapper>
     </div>
     <div *ngIf="!todo_showTodo$">
-      <component-mapper name="Assignment" [props]="{ pConn$, formGroup$, arChildren$, itemKey$ }"></component-mapper>
+      <component-mapper
+        *ngIf="pConnectOfActiveContainerItem"
+        name="Assignment"
+        [props]="{ pConn$: pConnectOfActiveContainerItem, formGroup$, arChildren$, itemKey$ }"
+      ></component-mapper>
     </div>
   </div>
   <div *ngIf="bHasCaseMessages$">

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;
@@ -369,7 +374,9 @@ export class FlowContainerComponent implements OnInit, OnDestroy {
     // const { getPConnect } = this.arChildren$[0].getPConnect();
     const localPConn = this.arChildren$[0].getPConnect();
 
-    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') {

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,7 +201,7 @@ 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();
     const caseInfo = newComp && newComp.getDataObject() && newComp.getDataObject().caseInfo ? newComp.getDataObject().caseInfo : null;
@@ -247,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
@@ -279,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);
@@ -296,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/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;
@@ -129,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;
@@ -210,7 +183,9 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
     this.approveCase = actionsAPI.approveCase?.bind(actionsAPI);
     this.rejectCase = actionsAPI.rejectCase?.bind(actionsAPI);
 
-    this.createButtons();
+    if (this.arChildren$) {
+      this.createButtons();
+    }
   }
 
   createButtons() {

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/inline-dashboard-page/config-ext.json

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

package/lib/widget/quick-create/config-ext.json

@@ -0,0 +1,9 @@
+{
+  "name": "QuickCreate",
+  "label": "Quick create",
+  "description": "Quick create widget",
+  "type": "Widget",
+  "subtype": "PAGE",
+  "properties": [],
+  "defaultConfig": {}
+}

package/lib/widget/todo/todo.component.html

@@ -16,9 +16,10 @@
           <div class="psdk-todo-assignment-data">
             <div class="psdk-todo-assignment-task">
               {{ localizedVal('Task in', localeCategory) }}
-              <button class="psdk-todo-id" style="cursor: pointer" (click)="clickGo(assignment)">
+              <button class="psdk-todo-id" style="cursor: pointer" (click)="clickGo(assignment)" *ngIf="!isConfirm || canPerform; else readOnlyText">
                 {{ assignment.name }} {{ getID(assignment) }}
               </button>
+              <ng-template #readOnlyText> {{ assignment.name }} {{ getID(assignment) }} </ng-template>
               <span *ngIf="assignment.status != undefined">
                 &bull; <span class="psdk-todo-assignment-status">{{ assignment?.status }}</span>
               </span>

package/lib/widget/todo/todo.component.ts

@@ -231,7 +231,7 @@ export class TodoComponent implements OnInit, OnDestroy, OnChanges {
     const sTarget = this.pConn$.getContainerName();
     const sTargetContainerName = sTarget;
 
-    const options: any = { containerName: sTargetContainerName };
+    const options: any = { containerName: sTargetContainerName, channelName: '' };
 
     if (classname === null || classname === '') {
       classname = this.pConn$.getCaseInfo().getClassName();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/angular-sdk-overrides",
-  "version": "0.24.5",
+  "version": "0.24.6",
   "description": "Angular SDK - Code for overriding components",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"