@pega/dx-component-builder-sdk 0.25.5 → 0.242.1

package/src/tasks/create/templates/SDK-React/field/Picklist-RadioButtons/index.tsx.mustache

@@ -1,10 +1,11 @@
 import { useState, useEffect } from 'react';
-import { Radio, RadioGroup, FormControl, FormControlLabel, FormLabel, FormHelperText } from '@material-ui/core';
+import { Radio, RadioGroup, FormControl, FormControlLabel, FormLabel, FormHelperText } from '@mui/material';
 
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 // Can't use RadioButtonProps until getLocaleRuleNameFromKeys is NOT private

package/src/tasks/create/templates/SDK-React/field/Text/index.tsx.mustache

@@ -1,9 +1,10 @@
 import { useState, useEffect } from 'react';
-import { TextField } from '@material-ui/core';
+import { TextField } from '@mui/material';
 
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {

package/src/tasks/create/templates/SDK-React/field/Text-Email/index.tsx.mustache

@@ -1,8 +1,9 @@
-import { InputAdornment, TextField } from '@material-ui/core';
-import MailOutlineIcon from '@material-ui/icons/MailOutline';
+import { InputAdornment, TextField } from '@mui/material';
+import MailOutlineIcon from '@mui/icons-material/MailOutline';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {

package/src/tasks/create/templates/SDK-React/field/Text-Input/index.tsx.mustache

@@ -1,9 +1,10 @@
 import { useState, useEffect } from 'react';
-import { TextField } from '@material-ui/core';
+import { TextField } from '@mui/material';
 
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {

package/src/tasks/create/templates/SDK-React/field/Text-Paragraph/index.tsx.mustache

@@ -1,7 +1,8 @@
-import { TextField } from '@material-ui/core';
+import { TextField } from '@mui/material';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {

package/src/tasks/create/templates/SDK-React/field/Text-URL/index.tsx.mustache

@@ -1,7 +1,8 @@
-import { TextField } from '@material-ui/core';
+import { TextField } from '@mui/material';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {

package/src/tasks/create/templates/SDK-React/field/TimeOfDay/index.tsx.mustache

@@ -1,10 +1,10 @@
-import { KeyboardTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
-import DayjsUtils from '@date-io/dayjs';
-import AccessTimeIcon from '@material-ui/icons/AccessTime';
+import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+// import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import dayjs from 'dayjs';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
@@ -58,31 +58,33 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <MuiPickersUtilsProvider utils={DayjsUtils}>
-        <KeyboardTimePicker
-          variant='inline'
-          inputVariant='outlined'
-          placeholder='hh:mm am'
-          keyboardIcon={<AccessTimeIcon />}
-          fullWidth
-          required={required}
+        <TimePicker
+          // keyboardIcon={<AccessTimeIcon />}
+          // fullWidth
+
           disabled={disabled}
-          error={status === 'error'}
-          helperText={helperTextToDisplay}
           minutesStep={5}
-          size='small'
           label={label}
-          autoOk
-          mask='__:__ _m'
+          // autoOk
+          // mask='__:__ _m'
           format='hh:mm a'
           value={timeValue}
           onChange={handleChange}
-          {{! pick new delimiters for mustache }}
-          {{=<% %>=}}
-          InputProps={{ inputProps: { ...testProp } }}
-          <%={{ }}=%>     {{! revert delimiters for mustache }}
+    {{! pick new delimiters for mustache }}
+    {{=<% %>=}}
+          slotProps={{
+            textField: {
+              variant: 'outlined',
+              placeholder: 'hh:mm am',
+              required,
+              error: status === 'error',
+              helperText: helperTextToDisplay,
+              size: 'small',
+              InputProps: { inputProps: { ...testProp } }
+            }
+          }}
+    <%={{ }}=%>     {{! revert delimiters for mustache }}
         />
-      </MuiPickersUtilsProvider>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

package/src/tasks/create/templates/SDK-React/template/DETAILS/index.tsx.mustache

@@ -1,5 +1,5 @@
 import { createElement } from 'react';
-import Grid from '@material-ui/core/Grid';
+import Grid from '@mui/material/Grid';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';

package/src/tasks/create/templates/SDK-React/template/DETAILS-region/index.tsx.mustache

@@ -1,5 +1,5 @@
 import { createElement } from 'react';
-import Grid from '@material-ui/core/Grid';
+import Grid from '@mui/material/Grid';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';

package/src/tasks/create/templates/SDK-React/template/FORM-region/index.tsx.mustache

@@ -1,6 +1,6 @@
 import { PropsWithChildren, ReactElement } from 'react';
-import { Grid, GridSize } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Grid } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
@@ -35,8 +35,8 @@ export default function {{COMPONENT_CLASS_NAME}}(props: PropsWithChildren<{{COMP
   // Calculate the size
   //  Default to assume the 2 columns are evenly split. However, override if templateCol
   //  (example value: "1fr 1fr")
-  let aSize: GridSize = 6;
-  let bSize: GridSize = 6;
+  let aSize = 6;
+  let bSize = 6;
 
   const colAArray = templateCol
     .replaceAll(/[a-z]+/g, '')
@@ -44,8 +44,8 @@ export default function {{COMPONENT_CLASS_NAME}}(props: PropsWithChildren<{{COMP
     .map(itm => Number(itm));
   const totalCols = colAArray.reduce((v, itm) => itm + v, 0);
   const ratio = 12 / totalCols;
-  aSize = (ratio * colAArray[0]) as GridSize;
-  bSize = (ratio * colAArray[1]) as GridSize;
+  aSize = (ratio * colAArray[0]) as number;
+  bSize = (ratio * colAArray[1]) as number;
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>

package/src/tasks/create/templates/SDK-React/template/PAGE/OneColumn.tsx.mustache

@@ -1,5 +1,5 @@
-import { Grid } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@mui/material/Grid';
+import makeStyles from '@mui/styles/makeStyles';
 
 interface OneColumnProps {
   // If any, enter additional props that only exist on this component

package/src/tasks/create/templates/SDK-React/widget/CASE/index.tsx.mustache

@@ -1,29 +1,30 @@
 import { useEffect, useRef, useState } from 'react';
-import { withStyles, Theme, createStyles } from '@material-ui/core/styles';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableContainer from '@material-ui/core/TableContainer';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
+import { withStyles, createStyles } from '@mui/styles';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
 import isDeepEqual from 'fast-deep-equal/react';
 
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
   // If any, enter additional props that only exist on this component
 }
 
-const StyledTableCell = withStyles((theme: Theme) =>
+const StyledTableCell = withStyles((myTheme) =>
   createStyles({
     head: {
       borderWidth: '1px',
       borderStyle: 'solid',
       borderColor: 'silver',
-      backgroundColor: theme.palette.text.disabled,
-      color: theme.palette.getContrastText(theme.palette.text.disabled)
+      backgroundColor: myTheme.palette.text.disabled,
+      color: myTheme.palette.getContrastText(myTheme.palette.text.disabled)
     },
     body: {
       borderWidth: '1px',

package/src/tasks/create/templates/SDK-React/widget/PAGE/index.tsx.mustache

@@ -1,26 +1,32 @@
-import { 
-  Card, 
-  CardContent, 
-  CardHeader, 
+import {
+  Card,
+  CardContent,
+  CardHeader,
   Typography,
-  CardActions, 
+  CardActions,
   Button,
   TableContainer,
   Table,
   TableBody,
   TableHead,
-  withStyles,
-  createStyles,
-  Theme,
   TableCell,
-  TableRow 
-} from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+  TableRow
+} from '@mui/material';
+import { withStyles, createStyles } from '@mui/styles';
+import makeStyles from '@mui/styles/makeStyles';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 import isDeepEqual from 'fast-deep-equal/react';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { useRef, useEffect, useState } from 'react';
+import { Theme as MuiTheme } from "@mui/material/styles";
+
+declare module "@mui/private-theming" {
+  interface DefaultTheme extends MuiTheme {
+    spacing: (spacing: number) => string;
+  }
+}
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -30,23 +36,23 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
   whatsnewlink?: string;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(myTheme => ({
   root: {
-    marginTop: theme.spacing(1),
-    marginBottom: theme.spacing(1),
+    marginTop: myTheme.spacing(1),
+    marginBottom: myTheme.spacing(1),
     borderLeft: '6px solid',
-    borderLeftColor: theme.palette.primary.light
+    borderLeftColor: myTheme.palette.primary.light
   }
 }));
 
-const StyledTableCell = withStyles((theme: Theme) =>
+const StyledTableCell = withStyles((myTheme) =>
   createStyles({
     head: {
       borderWidth: '1px',
       borderStyle: 'solid',
       borderColor: 'silver',
-      backgroundColor: theme.palette.text.disabled,
-      color: theme.palette.getContrastText(theme.palette.text.disabled)
+      backgroundColor: myTheme.palette.text.disabled,
+      color: myTheme.palette.getContrastText(myTheme.palette.text.disabled)
     },
     body: {
       borderWidth: '1px',
@@ -73,7 +79,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const [waitingForData, setWaitingForData] = useState<boolean>(true);
   const thePConn = getPConnect();
   const caseID = thePConn.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID, ''); // 2nd arg empty string until typedef marked correctly
-  const dataViewName = 'D_pyWorkHistory';
+  const dataViewName = 'D_pyMyWorkList';
   const context = thePConn.getContextName();
 
   const rowData: any = useRef([]);

package/src/tasks/create/templates/SDK-React/widget/PAGE/mock.ts.mustache

@@ -1,4 +1,4 @@
-// eslint-disable-next-line import/prefer-default-export
+
 export const configProps = {
   label: 'App announcement',
   header: 'Announcements',

package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/index.tsx.mustache

@@ -1,15 +1,23 @@
 import React, { useState } from 'react';
-import TextField from '@material-ui/core/TextField';
-import Popover from '@material-ui/core/Popover';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@mui/material/TextField';
+import Popover from '@mui/material/Popover';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import makeStyles from '@mui/styles/makeStyles';
+import { Theme as MuiTheme } from "@mui/material/styles";
 
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
+
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
+declare module "@mui/private-theming" {
+  interface DefaultTheme extends MuiTheme {
+    spacing: (spacing: number) => string;
+  }
+}
+
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
   // If any, enter additional props that only exist on this component
   label: string;
@@ -22,14 +30,14 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
   displayLabel?: any;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(myTheme => ({
   root: {
-    padding: theme.spacing(1),
-    margin: theme.spacing(1)
+    padding: myTheme.spacing(1),
+    margin: myTheme.spacing(1)
   },
   popover: {
-    padding: theme.spacing(1),
-    margin: theme.spacing(1)
+    padding: myTheme.spacing(1),
+    margin: myTheme.spacing(1)
   }
 }));
 

package/tests/assets/sdk-a/components/create/override-sdk/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/tests/assets/sdk-a/components/create/override-sdk/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/tests/assets/sdk-a/components/create/override-sdk/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/tests/assets/sdk-a/components/create/override-sdk/field/percentage/percentage.component.ts

@@ -177,7 +177,7 @@ export class PercentageComponent implements OnInit, OnDestroy {
     const actionsApi = this.pConn$?.getActionsApi();
     const propName = (this.pConn$?.getStateProps() as any).value;
     let value = event?.target?.value;
-    value = value?.replace('%', '');
+    value = value ? value.replace(/%/g, '') : '';
     if (this.currSep === ',') {
       value = value.replace(/,/g, '');
     } else {

package/tests/assets/sdk-a/components/create/override-sdk/field/rich-text/config-ext.json

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

package/tests/assets/sdk-a/components/create/override-sdk/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/tests/assets/sdk-a/components/create/override-sdk/infra/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/tests/assets/sdk-a/components/create/override-sdk/infra/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') {