@pega/angular-sdk-overrides 0.23.8 → 0.23.10

package/lib/field/auto-complete/auto-complete.component.ts

@@ -301,7 +301,9 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
     // this.angularPConnect.changeHandler( this, event);
     this.filterValue = (event.target as HTMLInputElement).value;
 
-    this.angularPConnectData.actions?.onChange(this, event);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'change', propName, this.filterValue);
   }
 
   optionChanged(event: MatAutocompleteSelectedEvent) {

package/lib/field/check-box/check-box.component.ts

@@ -9,8 +9,8 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
-import { deleteInstruction, insertInstruction, updateNewInstructions } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
+import { deleteInstruction, insertInstruction, updateNewInstructions } from '@pega/angular-sdk-components';
 
 interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
   // If any, enter additional props that only exist on Checkbox here
@@ -234,8 +234,9 @@ export class CheckBoxComponent implements OnInit, OnDestroy {
     if (this.selectionMode === 'multi') {
       this.pConn$.getValidationApi().validate(this.selectedvalues, this.selectionList);
     } else {
-      event.value = event.checked;
-      this.angularPConnectData.actions?.onBlur(this, event);
+      const actionsApi = this.pConn$?.getActionsApi();
+      const propName = (this.pConn$?.getStateProps() as any).value;
+      handleEvent(actionsApi, 'changeNblur', propName, event.checked);
     }
   }
 

package/lib/field/currency/currency.component.ts

@@ -8,6 +8,7 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { getCurrencyCharacters } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
 interface CurrrencyProps extends PConnFieldProps {
@@ -175,7 +176,9 @@ export class CurrencyComponent implements OnInit, OnDestroy {
   fieldOnBlur(event: any) {
     // PConnect wants to use eventHandler for onBlur
 
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
   }
 
   getErrorMessage() {

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

@@ -13,8 +13,9 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { dateFormatInfoDefault, getDateFormatInfo } from '@pega/angular-sdk-components';
-import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 import { format } from '@pega/angular-sdk-components';
+import { PConnFieldProps } from '@pega/angular-sdk-components';
 
 interface DateProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Date here
@@ -222,7 +223,9 @@ export class DateComponent implements OnInit, OnDestroy {
       // convert date to pega "date" format
       event.value = event.value?.toISOString();
     }
-    this.angularPConnectData.actions?.onBlur(this, { value: event.value });
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'changeNblur', propName, event?.value);
   }
 
   hasErrors() {

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

@@ -202,10 +202,9 @@ export class DateTimeComponent implements OnInit, OnDestroy {
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    if (event.target.value) event.value = event.target.value;
-
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
   }
 
   getErrorMessage() {

package/lib/field/dropdown/dropdown.component.ts

@@ -214,11 +214,6 @@ export class DropdownComponent implements OnInit, OnDestroy {
     }
   }
 
-  fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
-  }
-
   getLocalizedOptionValue(opt: IOption) {
     return this.pConn$.getLocalizedValue(
       opt.value,

package/lib/field/email/email.component.ts

@@ -7,6 +7,7 @@ import { interval } from 'rxjs';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
 interface EmailProps extends PConnFieldProps {
@@ -157,8 +158,9 @@ export class EmailComponent implements OnInit, OnDestroy {
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
   }
 
   getErrorMessage() {

package/lib/field/integer/integer.component.ts

@@ -7,6 +7,7 @@ import { interval } from 'rxjs';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
 interface IntegerProps extends PConnFieldProps {
@@ -160,8 +161,9 @@ export class IntegerComponent implements OnInit, OnDestroy {
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
   }
 
   getErrorMessage() {

package/lib/field/percentage/percentage.component.ts

@@ -7,6 +7,7 @@ import { interval } from 'rxjs';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
 interface PercentageProps extends PConnFieldProps {
@@ -158,9 +159,9 @@ export class PercentageComponent implements OnInit, OnDestroy {
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
   }
 
   getErrorMessage() {

package/lib/field/phone/phone.component.ts

@@ -176,8 +176,9 @@ export class PhoneComponent implements OnInit, OnDestroy {
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
   }
 
   getErrorMessage() {

package/lib/field/radio-buttons/radio-buttons.component.ts

@@ -8,6 +8,7 @@ import { interval } from 'rxjs';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
 interface IOption {
@@ -205,12 +206,9 @@ export class RadioButtonsComponent implements OnInit, OnDestroy {
   }
 
   fieldOnChange(event: any) {
-    this.angularPConnectData.actions?.onChange(this, event);
-  }
-
-  fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'changeNblur', propName, event?.value);
   }
 
   getLocalizedOptionValue(opt: IOption) {

package/lib/field/text-area/text-area.component.ts

@@ -7,6 +7,7 @@ import { interval } from 'rxjs';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
 interface TextAreaProps extends PConnFieldProps {
@@ -156,13 +157,9 @@ export class TextAreaComponent implements OnInit, OnDestroy {
   }
 
   fieldOnChange(event: any) {
-    // PConnect wants to use changeHandler for onChange
-    this.angularPConnectData.actions?.onChange(this, event);
-  }
-
-  fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
   }
 
   getErrorMessage() {

package/lib/field/text-input/text-input.component.ts

@@ -7,6 +7,7 @@ import { interval } from 'rxjs';
 import { AngularPConnectService, AngularPConnectData } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
 interface TextInputProps extends PConnFieldProps {
@@ -160,8 +161,9 @@ export class TextInputComponent implements OnInit, OnDestroy {
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
   }
 
   getErrorMessage() {

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

@@ -7,6 +7,7 @@ import { interval } from 'rxjs';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
 interface TimeProps extends PConnFieldProps {
@@ -157,9 +158,9 @@ export class TimeComponent implements OnInit, OnDestroy {
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    event.value = event.target.value;
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
   }
 
   getErrorMessage() {

package/lib/field/url/url.component.ts

@@ -7,6 +7,7 @@ import { interval } from 'rxjs';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
 interface URLProps extends PConnFieldProps {
@@ -158,8 +159,9 @@ export class UrlComponent implements OnInit, OnDestroy {
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
   }
 
   getErrorMessage() {

package/lib/field/user-reference/user-reference.component.ts

@@ -9,6 +9,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
 const OPERATORS_DP = 'D_pyGetOperatorsForCurrentApplication';
@@ -189,11 +190,9 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
       key = index > -1 ? (key = this.options$[index].key) : event.target.value;
     }
 
-    const eve = {
-      value: key
-    };
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onChange(this, eve);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'changeNblur', propName, key);
   }
 
   getErrorMessage() {

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

@@ -0,0 +1,22 @@
+import { Injector } from '@angular/core';
+import { getPConnectOfActiveContainerItem } from './helper';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+
+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$,
@@ -23,7 +24,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, hasAssignments, 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;
@@ -340,8 +345,10 @@ 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') {

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
@@ -22,7 +23,6 @@ import { getBanners } from '@pega/angular-sdk-components';
 })
 export class ModalViewContainerComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
-  @Input() displayOnlyFA$: boolean;
 
   // for when non modal
   @Output() modalVisibleChange = new EventEmitter<boolean>();
@@ -72,11 +72,6 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    if (this.displayOnlyFA$) {
-      // for when non modal
-      this.bShowAsModal$ = false;
-    }
-
     // First thing in initialization is registering and subscribing to the AngularPConnect service
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
 
@@ -200,7 +195,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();
     // @ts-ignore - parameter “contextName” for getDataObject method should be optional
@@ -248,8 +243,16 @@ 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() as any;
+        }
+
         this.bShowModal$ = true;
 
         // for when non modal
@@ -280,16 +283,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 +314,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

@@ -9,6 +9,14 @@ import { ProgressSpinnerService } from '@pega/angular-sdk-components';
 import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 
+function getRefreshProps(refreshConditions) {
+  // refreshConditions cuurently supports only "Changes" event
+  if (!refreshConditions) {
+    return [];
+  }
+  return refreshConditions.filter(item => item.event && item.event === 'Changes').map(item => [item.field, item.field?.substring(1)]) || [];
+}
+
 interface AssignmentProps {
   // If any, enter additional props that only exist on this component
   template: string;
@@ -38,7 +46,6 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
   newPConn$: any;
   containerName$: string;
 
-  bIsRefComponent = false;
   bInitialized = false;
 
   templateName$: string;
@@ -127,21 +134,14 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   updateChanges() {
-    this.bIsRefComponent = this.checkIfRefComponent(this.pConn$);
+    this.registerForRefresh();
 
-    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());
-      }
-    });
+    // pConn$ may be a 'reference' component, so normalize it
+    this.newPConn$ = ReferenceComponent.normalizePConn(this.pConn$);
 
-    this.createButtons();
+    if (this.arChildren$) {
+      this.createButtons();
+    }
   }
 
   checkIfRefComponent(thePConn: any): boolean {
@@ -154,18 +154,10 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   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;
@@ -206,7 +198,9 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
 
     this.cancelCreateStageAssignment = actionsAPI.cancelCreateStageAssignment.bind(actionsAPI);
 
-    this.createButtons();
+    if (this.arChildren$) {
+      this.createButtons();
+    }
   }
 
   createButtons() {
@@ -460,4 +454,36 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
       control.markAsTouched();
     });
   }
+
+  registerForRefresh() {
+    // @ts-ignore - Property 'getActionRefreshConditions' is private and only accessible within class 'CaseInfo'
+    const refreshConditions = this.pConn$.getCaseInfo()?.getActionRefreshConditions();
+    const pageReference = this.pConn$.getPageReference();
+    const context = this.pConn$.getContextName();
+
+    // refresh api de-registration
+    PCore.getRefreshManager().deRegisterForRefresh(context);
+
+    // refresh api registration
+    const refreshProps = getRefreshProps(refreshConditions);
+    const caseKey = this.pConn$.getCaseInfo().getKey();
+    const refreshOptions = {
+      autoDetectRefresh: true,
+      preserveClientChanges: false
+    };
+    if (refreshProps.length > 0) {
+      refreshProps.forEach(prop => {
+        PCore.getRefreshManager().registerForRefresh(
+          'PROP_CHANGE',
+          this.pConn$.getActionsApi().refreshCaseView.bind(this.pConn$.getActionsApi(), caseKey, null, pageReference, {
+            ...refreshOptions,
+            refreshFor: prop[0]
+          }),
+          `${pageReference}.${prop[1]}`,
+          `${context}/${pageReference}`,
+          context
+        );
+      });
+    }
+  }
 }

package/lib/infra/reference/reference.component.ts

@@ -33,13 +33,9 @@ export class ReferenceComponent {
   static createFullReferencedViewFromRef(inPConn: any) {
     // BAIL and ERROR if inPConn is NOT a reference!
     if (inPConn.getComponentName() !== 'reference') {
-      // debugger;
-
       console.error(`Reference component: createFullReferencedViewFromRef inPConn is NOT a reference! ${inPConn.getComponentName()}`);
     }
 
-    const theResolvedConfigProps = inPConn.resolveConfigProps(inPConn.getConfigProps());
-
     const referenceConfig = { ...inPConn.getComponentConfig() } || {};
 
     // Since SDK-A implements Reference as static methods and we don't rely on
@@ -47,8 +43,8 @@ export class ReferenceComponent {
     //  (and also leaving the others in for now) so the referenced View can act on
     //  the visibility prop. (The following 3 lines were carried over from React SDK)
     delete referenceConfig?.name;
-    // delete referenceConfig?.type;
-    // delete referenceConfig?.visibility;
+    delete referenceConfig?.type;
+    delete referenceConfig?.visibility;
 
     const viewMetadata = inPConn.getReferencedView();
 
@@ -67,13 +63,15 @@ export class ReferenceComponent {
         ...referenceConfig
       }
     };
+    const theResolvedConfigProps = inPConn.resolveConfigProps(inPConn.getConfigProps());
+    const { visibility = true, context, readOnly = false, displayMode = '' } = theResolvedConfigProps;
 
     if (ReferenceComponent.bLogging) {
-      console.log(`Reference: about to call createComponent with pageReference: context: ${theResolvedConfigProps.context}`);
+      console.log(`Reference: about to call createComponent with pageReference: context: ${inPConn.getContextName()}`);
     }
 
     const viewComponent = inPConn.createComponent(viewObject, null, null, {
-      pageReference: theResolvedConfigProps.context
+      pageReference: context && context.startsWith('@CLASS') ? '' : context
     });
 
     // updating the referencedComponent should trigger a render
@@ -81,8 +79,8 @@ export class ReferenceComponent {
 
     newCompPConnect.setInheritedConfig({
       ...referenceConfig,
-      readOnly: theResolvedConfigProps.readOnly ? theResolvedConfigProps.readOnly : false,
-      displayMode: theResolvedConfigProps.displayMode ? theResolvedConfigProps.displayMode : null
+      readOnly,
+      displayMode
     });
 
     if (ReferenceComponent.bLogging) {
@@ -93,7 +91,11 @@ export class ReferenceComponent {
       );
     }
 
-    return newCompPConnect;
+    if (visibility !== false) {
+      return newCompPConnect;
+    }
+
+    return null;
   }
 
   // STATIC method that other components can call to normalize
@@ -130,7 +132,7 @@ export class ReferenceComponent {
         // debugger;
         let theRefViewPConn = this.createFullReferencedViewFromRef(inPConn.getPConnect());
         // now return its PConnect
-        theRefViewPConn = theRefViewPConn.getComponent();
+        theRefViewPConn = theRefViewPConn?.getComponent();
 
         // const theFullReference = theRefViewPConn.getPConnect().getFullReference();
         // console.log(`theFullReference: ${theFullReference}`);

package/lib/infra/root-container/root-container.component.html

@@ -5,20 +5,11 @@
 <div *ngIf="bShowRoot$">
   <div [ngSwitch]="componentName$">
     <component-mapper *ngSwitchCase="'View'" name="View" [props]="{ pConn$, displayOnlyFA$ }"></component-mapper>
-    <!-- <app-reference *ngSwitchCase="'reference'" [pConn$]="pConn$" [displayOnlyFA$]="displayOnlyFA$"></app-reference> -->
     <component-mapper
       *ngSwitchCase="'ViewContainer'"
       name="ViewContainer"
-      [props]="{ pConn$: displayOnlyFA$ ? viewContainerPConn$ : pConn$, displayOnlyFA$ }"
+      [props]="{ pConn$: viewContainerPConn$, displayOnlyFA$ }"
     ></component-mapper>
-    <app-hybrid-view-container *ngSwitchCase="'HybridViewContainer'" [pConn$]="pConn$" [displayOnlyFA$]="displayOnlyFA$"></app-hybrid-view-container>
-    <app-modal-view-container
-      *ngSwitchCase="'ModalViewContainer'"
-      [pConn$]="pConn$"
-      [displayOnlyFA$]="displayOnlyFA$"
-      (modalVisibleChange)="modalVisibleChanged($event)"
-    ></app-modal-view-container>
-    <div *ngSwitchCase="''"></div>
     <div *ngSwitchDefault>{{ localizedVal('RootContainer Missing: ' + componentName$, localeCategory) }}.</div>
   </div>
 </div>
@@ -28,9 +19,5 @@
 </div>
 
 <div *ngIf="mConn$ != null">
-  <app-modal-view-container
-    [pConn$]="mConn$"
-    [displayOnlyFA$]="displayOnlyFA$"
-    (modalVisibleChange)="modalVisibleChanged($event)"
-  ></app-modal-view-container>
+  <app-modal-view-container [pConn$]="mConn$"></app-modal-view-container>
 </div>

package/lib/infra/root-container/root-container.component.ts

@@ -128,16 +128,6 @@ export class RootContainerComponent implements OnInit, OnDestroy {
     }
   }
 
-  modalVisibleChanged(isVisible) {
-    if (this.displayOnlyFA$) {
-      if (isVisible) {
-        this.bShowRoot$ = false;
-      } else {
-        this.bShowRoot$ = true;
-      }
-    }
-  }
-
   updateSelf() {
     // need to call this.getCurrentCompleteProps (not this.thePConn.getConfigProps)
     //  to get full set of props that affect this component in Redux

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/default-form/default-form.component.ts

@@ -1,10 +1,22 @@
-import { Component, OnInit, Input, forwardRef } from '@angular/core';
+import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { ReferenceComponent } from '@pega/angular-sdk-components';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { TemplateUtils } from '@pega/angular-sdk-components';
 
+function areViewsChanged(oldViews: any[], newViews: any[]): boolean {
+  if (oldViews.length !== newViews.length) {
+    return true;
+  }
+
+  return !oldViews.every((oldView, index) => {
+    const newView = newViews[index];
+    return oldView.getPConnect().viewName === newView.getPConnect().viewName;
+  });
+}
+
 interface DefaultFormProps {
   // If any, enter additional props that only exist on this component
   NumCols: string;
@@ -19,11 +31,14 @@ interface DefaultFormProps {
   standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class DefaultFormComponent implements OnInit {
+export class DefaultFormComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
-  arChildren$: any[];
+  // Used with AngularPConnect
+  angularPConnectData: AngularPConnectData = {};
+
+  arChildren$: any[] = [];
   divClass$: string;
   template: any;
   showLabel: any;
@@ -41,9 +56,29 @@ export class DefaultFormComponent implements OnInit {
     'Confirmation'
   ];
 
-  constructor(private templateUtils: TemplateUtils) {}
+  constructor(
+    private angularPConnect: AngularPConnectService,
+    private templateUtils: TemplateUtils
+  ) {}
 
   ngOnInit(): void {
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+
+    this.updateSelf();
+  }
+
+  ngOnDestroy() {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  onStateChange() {
+    this.updateSelf();
+  }
+
+  updateSelf() {
     const configProps = this.pConn$.getConfigProps() as DefaultFormProps;
     this.template = configProps?.template;
     const propToUse: any = { ...this.pConn$.getInheritedProps() };
@@ -71,6 +106,12 @@ export class DefaultFormComponent implements OnInit {
     // repoint children before getting templateArray
     // Children may contain 'reference' component, so we need to
     //  normalize them
-    this.arChildren$ = ReferenceComponent.normalizePConnArray(kids[0].getPConnect().getChildren());
+    const children = ReferenceComponent.normalizePConnArray(kids[0].getPConnect().getChildren());
+
+    const visibleChildren = children.filter(child => child !== undefined);
+
+    if (areViewsChanged(this.arChildren$, visibleChildren)) {
+      this.arChildren$ = visibleChildren;
+    }
   }
 }

package/lib/template/field-group-template/field-group-template.component.ts

@@ -117,7 +117,7 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
       this.pConn$.setInheritedProp('displayMode', 'LABELS_LEFT');
     }
     this.referenceList = this.configProps$.referenceList;
-    if (this.prevRefLength != this.referenceList.length) {
+    if (this.prevRefLength != this.referenceList?.length) {
       // eslint-disable-next-line sonarjs/no-collapsible-if
       if (!this.readonlyMode) {
         if (this.referenceList?.length === 0 && this.allowAddEdit !== false) {

package/lib/template/simple-table-manual/simple-table-manual.component.ts

@@ -965,9 +965,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
       this.rawFields?.forEach(item => {
         const referenceListData = getReferenceList(this.pConn$);
         const isDatapage = referenceListData.startsWith('D_');
-        const pageReferenceValue = isDatapage
-          ? `${referenceListData}[${index}]`
-          : `${this.pConn$.getPageReference()}${referenceListData.substring(referenceListData.lastIndexOf('.'))}[${index}]`;
+        const pageReferenceValue = isDatapage ? `${referenceListData}[${index}]` : `${this.pConn$.getPageReference()}${referenceListData}[${index}]`;
         const config = {
           meta: item,
           options: {

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

@@ -234,7 +234,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.23.8",
+  "version": "0.23.10",
   "description": "Angular SDK - Code for overriding components",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"