@pega/angular-sdk-overrides 0.26.1 → 0.26.3

package/lib/field/rich-text/rich-text.component.scss

@@ -2,171 +2,6 @@
 
 :host {
   display: block;
-  background-color: var(--mat-sys-surface, #fff);
+  background-color: transparent;
   color: var(--mat-sys-on-surface, #000);
 }
-
-::ng-deep {
-  .tox-tinymce {
-    border: 1px solid var(--mat-sys-outline, #ccc) !important;
-    border-radius: 4px !important;
-  }
-
-  .tox-edit-area__iframe {
-    background-color: transparent !important;
-  }
-
-  .tox .tox-toolbar,
-  .tox .tox-toolbar__primary,
-  .tox .tox-editor-header {
-    background-color: var(--mat-sys-surface-container-high, #f0f0f0) !important;
-    border-bottom: 1px solid var(--mat-sys-outline-variant, #ccc) !important;
-  }
-
-  .tox .tox-tbtn {
-    color: var(--mat-sys-on-surface-variant, #555) !important;
-    background: transparent !important;
-  }
-
-  .tox .tox-tbtn svg {
-    fill: var(--mat-sys-on-surface-variant, #555) !important;
-  }
-
-  .tox .tox-tbtn:hover {
-    background: var(--mat-sys-hover-state-layer-opacity, rgba(0, 0, 0, 0.05)) !important;
-  }
-
-  .tox .tox-tbtn--enabled,
-  .tox .tox-tbtn--enabled:hover {
-    background: var(--mat-sys-secondary-container, #e8def8) !important;
-    color: var(--mat-sys-on-secondary-container, #1d192b) !important;
-  }
-
-  .tox .tox-tbtn--enabled svg {
-    fill: var(--mat-sys-on-secondary-container, #1d192b) !important;
-  }
-
-  .tox .tox-tbtn--select {
-    background-color: transparent !important;
-    margin: 2px 0;
-  }
-
-  .tox .tox-tbtn__select-label {
-    color: var(--mat-sys-on-surface, #000) !important;
-  }
-
-  .tox .tox-tbtn__select-chevron svg {
-    fill: var(--mat-sys-on-surface-variant, #555) !important;
-  }
-
-  .tox .tox-tbtn--select:hover {
-    background-color: var(--mat-sys-hover-state-layer-opacity, rgba(0, 0, 0, 0.05)) !important;
-  }
-
-  .tox .tox-statusbar {
-    background-color: var(--mat-sys-surface-container-high, #f0f0f0) !important;
-    border-top: 1px solid var(--mat-sys-outline-variant, #ccc) !important;
-    color: var(--mat-sys-on-surface-variant, #555) !important;
-  }
-
-  .tox .tox-dialog {
-    background-color: var(--mat-sys-surface-container, #fff) !important;
-    color: var(--mat-sys-on-surface, #000) !important;
-    border: 1px solid var(--mat-sys-outline-variant, #ccc) !important;
-    box-shadow: 0 4px 12px var(--mat-sys-shadow, rgba(0, 0, 0, 0.2)) !important;
-  }
-
-  .tox .tox-dialog__header {
-    background-color: var(--mat-sys-surface-container, #fff) !important;
-    color: var(--mat-sys-on-surface, #000) !important;
-    border-bottom: 1px solid var(--mat-sys-outline-variant, #ccc) !important;
-  }
-
-  .tox .tox-dialog__footer {
-    background-color: var(--mat-sys-surface-container, #fff) !important;
-    border-top: 1px solid var(--mat-sys-outline-variant, #ccc) !important;
-  }
-
-  .tox .tox-dialog-wrap__backdrop {
-    background-color: var(--mat-sys-scrim, rgba(0, 0, 0, 0.5)) !important;
-    opacity: 0.6;
-  }
-
-  .tox .tox-dialog__body input,
-  .tox .tox-dialog__body textarea,
-  .tox .tox-dialog__body select {
-    background-color: transparent !important;
-    color: var(--mat-sys-on-surface, #000) !important;
-    border: 1px solid var(--mat-sys-outline, #ccc) !important;
-    border-radius: 4px !important;
-  }
-
-  .tox .tox-label {
-    color: var(--mat-sys-on-surface-variant, #555) !important;
-  }
-
-  .tox .tox-button--icon--hover:hover {
-    background-color: var(--mat-sys-hover-state-layer-opacity) !important;
-    color: var(--mat-sys-on-surface) !important;
-  }
-
-  .tox .tox-dialog__footer .tox-button {
-    background-color: var(--mat-sys-primary, #6200ee) !important;
-    color: var(--mat-sys-on-primary, #fff) !important;
-    border: none !important;
-  }
-
-  .tox .tox-dialog__footer .tox-button--secondary {
-    background-color: transparent !important;
-    color: var(--mat-sys-primary, #6200ee) !important;
-    border: 1px solid var(--mat-sys-outline, #ccc) !important;
-  }
-}
-
-::ng-deep {
-  .tox .tox-menu {
-    background-color: var(--mat-sys-surface-container, #2e334f) !important;
-    border: 1px solid var(--mat-sys-outline-variant, #404562) !important;
-    box-shadow: 0 4px 10px var(--mat-sys-shadow, rgba(0, 0, 0, 0.3)) !important;
-  }
-
-  .tox .tox-collection__item {
-    color: var(--mat-sys-on-surface, #dde1ff) !important;
-  }
-
-  .tox .tox-collection__item--active {
-    background-color: var(--mat-sys-secondary-container, #810081) !important;
-    color: var(--mat-sys-on-secondary-container, #ffd7f5) !important;
-  }
-
-  .tox .tox-collection__item-icon svg {
-    fill: var(--mat-sys-on-surface, #dde1ff) !important;
-  }
-
-  .tox .tox-collection__item-accessory {
-    color: var(--mat-sys-on-surface-variant, #c0c5e7) !important;
-  }
-
-  .tox .tox-swatches__picker-btn {
-    border-color: var(--mat-sys-outline-variant) !important;
-  }
-
-  .tox .tox-listbox {
-    background-color: transparent !important;
-    border: 1px solid var(--mat-sys-outline, #8a8faf) !important;
-    color: var(--mat-sys-on-surface, #dde1ff) !important;
-  }
-
-  .tox .tox-listbox__select-chevron svg {
-    fill: var(--mat-sys-on-surface-variant, #c0c5e7) !important;
-  }
-
-  .tox .tox-listbox__select-label {
-    color: var(--mat-sys-on-surface, #dde1ff) !important;
-  }
-
-  .tox .tox-listboxfield .tox-listbox--select {
-    background-color: transparent !important;
-    color: var(--mat-sys-on-surface, #dde1ff) !important;
-  }
-}

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

@@ -46,7 +46,7 @@ export class RichTextComponent extends FieldBase {
 
   fieldOnChange(editorValue: any) {
     const oldVal = this.value$ ?? '';
-    const newVal = editorValue?.editor?.getBody()?.innerHTML ?? '';
+    const newVal = typeof editorValue === 'string' ? editorValue : (editorValue ?? '');
 
     const isValueChanged = newVal.toString() !== oldVal.toString();
 

package/lib/field/semantic-link/semantic-link.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="bVisible$ !== false">
-  <a *ngIf="!isLinkTextEmpty; else noLink" class="psdk-value" href="#" (click)="openLinkClick($event)">{{ value$ || '---' }}</a>
+  <a *ngIf="!isLinkTextEmpty; else noLink" class="psdk-value psdk-semantic-link" href="#" (click)="openLinkClick($event)">{{ value$ || '---' }}</a>
 </div>
 <ng-template #noLink>
   <div class="psdk-value">{{ value$ || '---' }}</div>

package/lib/field/semantic-link/semantic-link.component.scss

@@ -1,3 +1,7 @@
 .psdk-value {
   margin: 8px 0px;
 }
+
+.psdk-semantic-link {
+  color: var(--mat-sys-primary);
+}

package/lib/field/semantic-link/semantic-link.component.ts

@@ -98,11 +98,14 @@ export class SemanticLinkComponent implements OnInit, OnDestroy {
           };
         }, {});
       }
-      this.pConn$.getActionsApi().showData('pyDetails', lookUpDataPage, {
-        ...this.payload
-      });
+      if (lookUpDataPage) {
+        this.pConn$.getActionsApi().showData('pyDetails', lookUpDataPage, {
+          ...this.payload
+        });
+      }
+      return;
     }
-    if ((this.referenceType && this.referenceType.toUpperCase() === 'DATA') || this.shouldTreatAsDataReference) {
+    if (this.dataViewName && ((this.referenceType && this.referenceType.toUpperCase() === 'DATA') || this.shouldTreatAsDataReference)) {
       this.pConn$.getActionsApi().showData('pyDetails', this.dataViewName, {
         ...this.payload
       });
@@ -153,7 +156,8 @@ export class SemanticLinkComponent implements OnInit, OnDestroy {
   }
 
   private buildDataPayload() {
-    const { dataRelationshipContext = null, contextPage } = this.configProps$;
+    const { dataRelationshipContext: configuredDataRelationshipContext, contextPage } = this.configProps$;
+    const dataRelationshipContext = configuredDataRelationshipContext ?? null;
     const {
       RESOURCE_TYPES: { DATA }
     } = PCore.getConstants();

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

@@ -5,7 +5,7 @@
   <div *ngIf="bHasForm$; else noEdit">
     <div [formGroup]="formGroup$">
       <div *ngIf="bVisible$">
-        <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+        <mat-form-field class="psdk-full-width" subscriptSizing="dynamic">
           <mat-label>{{ label$ }}</mat-label>
           <textarea
             matInput
@@ -21,6 +21,7 @@
             (change)="fieldOnChange($event)"
             (blur)="fieldOnBlur($event)"
           ></textarea>
+          <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
           <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
         </mat-form-field>
       </div>

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

@@ -5,6 +5,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 
 import { FieldBase } from '@pega/angular-sdk-components';
+import { FieldWarningDirective } 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';
@@ -18,7 +19,7 @@ interface TextAreaProps extends PConnFieldProps {
   selector: 'app-text-area',
   templateUrl: './text-area.component.html',
   styleUrls: ['./text-area.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, FieldWarningDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class TextAreaComponent extends FieldBase {
   configProps$: TextAreaProps;

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

@@ -4,7 +4,7 @@
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
     <div [formGroup]="formGroup$" *ngIf="bVisible$">
-      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic">
         <mat-label>{{ label$ }}</mat-label>
         <input
           matInput
@@ -17,6 +17,7 @@
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
         />
+        <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>

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

@@ -5,6 +5,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 
 import { FieldBase } from '@pega/angular-sdk-components';
+import { FieldWarningDirective } 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';
@@ -18,7 +19,7 @@ interface TextInputProps extends PConnFieldProps {
   selector: 'app-text-input',
   templateUrl: './text-input.component.html',
   styleUrls: ['./text-input.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, FieldWarningDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class TextInputComponent extends FieldBase {
   configProps$: TextInputProps;

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

@@ -4,7 +4,7 @@
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
     <div [formGroup]="formGroup$" *ngIf="bVisible$">
-      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic">
         <mat-label>{{ label$ }}</mat-label>
         <input
           matInput
@@ -17,6 +17,7 @@
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
         />
+        <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>

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

@@ -5,6 +5,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 
 import { FieldBase } from '@pega/angular-sdk-components';
+import { FieldWarningDirective } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
 import { format } from '@pega/angular-sdk-components';
@@ -18,7 +19,7 @@ interface TimeProps extends PConnFieldProps {
   selector: 'app-time',
   templateUrl: './time.component.html',
   styleUrls: ['./time.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, FieldWarningDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class TimeComponent extends FieldBase {
   configProps$: TimeProps;

package/lib/field/url/url.component.html

@@ -4,7 +4,7 @@
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
     <div [formGroup]="formGroup$" *ngIf="bVisible$">
-      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic">
         <mat-label>{{ label$ }}</mat-label>
         <input
           matInput
@@ -17,6 +17,7 @@
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
         />
+        <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>

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

@@ -5,6 +5,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 
 import { FieldBase } from '@pega/angular-sdk-components';
+import { FieldWarningDirective } 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';
@@ -17,7 +18,7 @@ interface URLProps extends PConnFieldProps {
   selector: 'app-url',
   templateUrl: './url.component.html',
   styleUrls: ['./url.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, FieldWarningDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class UrlComponent extends FieldBase {
   configProps$: URLProps;

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

@@ -8,7 +8,7 @@
         <component-mapper name="Operator" [props]="{ pConn$, name$: userName$ }"></component-mapper>
       </div>
       <div [formGroup]="formGroup$" *ngIf="type === 'dropdown'">
-        <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+        <mat-form-field class="psdk-full-width" subscriptSizing="dynamic">
           <mat-select [required]="bRequired$" [formControl]="fieldControl" [attr.data-test-id]="testId" (selectionChange)="fieldOnChange($event)">
             <mat-option *ngFor="let opt of options$" [value]="opt.key">
               {{ opt.value }}
@@ -18,10 +18,11 @@
           <mat-error *ngIf="fieldControl.invalid">
             {{ getErrorMessage() }}
           </mat-error>
+          <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
         </mat-form-field>
       </div>
       <div [formGroup]="formGroup$" *ngIf="type === 'searchbox'">
-        <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+        <mat-form-field class="psdk-full-width" subscriptSizing="dynamic">
           <mat-label>{{ label$ }}</mat-label>
           <input
             matInput
@@ -40,6 +41,7 @@
           <mat-error *ngIf="fieldControl.invalid">
             {{ getErrorMessage() }}
           </mat-error>
+          <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
         </mat-form-field>
       </div>
     </div>

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 { FieldWarningDirective } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 import { map, Observable, startWith } from 'rxjs';
 import { handleEvent } from '@pega/angular-sdk-components';
@@ -38,6 +39,7 @@ interface UserReferenceProps extends Omit<PConnFieldProps, 'value'> {
     MatOptionModule,
     MatInputModule,
     MatAutocompleteModule,
+    FieldWarningDirective,
     forwardRef(() => ComponentMapperComponent)
   ]
 })
@@ -54,6 +56,7 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
   options$: any;
   bReadonly$: boolean;
   bRequired$: boolean;
+  bFieldMessageVisible$ = false;
   showAsFormattedText$?: boolean;
   displayAs$?: string;
   testId: string;
@@ -158,12 +161,17 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     this.testId = props.testId;
     this.onRecordChange = props?.onRecordChange;
 
-    const { label, displayAs, value, showAsFormattedText, helperText, placeholder, displayMode } = props;
+    const { label, displayAs, value, showAsFormattedText, helperText, placeholder, displayMode, messageConfig = {}, showFieldMessage } = props;
+    const { readOnly, required } = props;
+    [this.bReadonly$, this.bRequired$] = [readOnly, required].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));
+
+    const isMessageVisible = this.utils.getBooleanValue(messageConfig.visibility);
+    this.bFieldMessageVisible$ = this.utils.getBooleanValue(showFieldMessage) && isMessageVisible && !this.bReadonly$;
 
     this.label$ = label;
     this.showAsFormattedText$ = showAsFormattedText;
     this.displayAs$ = displayAs;
-    this.helperText = helperText;
+    this.helperText = this.bFieldMessageVisible$ ? (messageConfig.content ?? '') : helperText;
     this.placeholder = placeholder || '';
     this.displayMode$ = displayMode;
 
@@ -173,9 +181,6 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
       this.value$ = value || '';
     }
 
-    const { readOnly, required } = props;
-    [this.bReadonly$, this.bRequired$] = [readOnly, required].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));
-
     this.actionsApi = this.pConn$.getActionsApi();
     this.propName = this.pConn$.getStateProps().value;
 

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

@@ -1,7 +1,7 @@
 <div style="text-align: left" class="psdk-flow-container-top">
   <div *ngIf="!bShowConfirm">
     <div *ngIf="!todo_showTodo$">
-      <h2 *ngIf="!isMultiStep">{{ containerName$ }}</h2>
+      <h2 *ngIf="containerName$">{{ containerName$ }}</h2>
       <div *ngIf="banners.length">
         <component-mapper name="AlertBanner" [props]="{ banners }"></component-mapper>
       </div>

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ChangeDetectorRef, NgZone, forwardRef, OnDestroy, Injector } from '@angular/core';
+import { Component, OnInit, Input, ChangeDetectorRef, forwardRef, OnDestroy, Injector } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { MatCardModule } from '@angular/material/card';
@@ -75,7 +75,6 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
     private cdRef: ChangeDetectorRef,
     private psService: ProgressSpinnerService,
     private fb: FormBuilder,
-    private ngZone: NgZone,
     private utils: Utils
   ) {
     super(injector);
@@ -123,6 +122,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
       'clearBannerMessages',
       () => {
         this.banners = [];
+        this.cdRef.markForCheck();
       },
       'clearBannerMessages'
     );
@@ -188,10 +188,9 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
   }
 
   showPageMessages(completeProps: FlowContainerProps) {
-    this.ngZone.run(() => {
-      const pageMessages = completeProps.pageMessages;
-      this.banners = [{ messages: pageMessages?.map(msg => this.localizedVal(msg.message, 'Messages')), variant: 'urgent' }];
-    });
+    const pageMessages = completeProps.pageMessages;
+    this.banners = [{ messages: pageMessages?.map(msg => this.localizedVal(msg.message, 'Messages')), variant: 'urgent' }];
+    this.cdRef.markForCheck();
   }
 
   getTodoVisibilty() {
@@ -384,8 +383,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
     const { CASE_INFO: CASE_CONSTS } = PCore.getConstants();
 
     setTimeout(() => {
-      this.ngZone.run(() => {
-        /*
+      /*
           *** renove this commmented out code when React/WC is updated
           *** this code is replace with the call to "getToDoAssigments" function below
 
@@ -403,32 +401,32 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
           const caseActions = localPConn.getValue(CASE_CONSTS.CASE_INFO_ACTIONS);
           */
 
-        const todoAssignments = getToDoAssignments(this.pConn$);
+      const todoAssignments = getToDoAssignments(this.pConn$);
 
-        if (todoAssignments && todoAssignments.length > 0) {
-          this.todo_caseInfoID$ = this.pConn$.getValue(CASE_CONSTS.CASE_INFO_ID);
-          this.todo_datasource$ = { source: todoAssignments };
-        }
+      if (todoAssignments && todoAssignments.length > 0) {
+        this.todo_caseInfoID$ = this.pConn$.getValue(CASE_CONSTS.CASE_INFO_ID);
+        this.todo_datasource$ = { source: todoAssignments };
+      }
 
-        /* remove this commented out code when update React/WC */
-        // let kid = this.pConn$.getChildren()[0];
+      /* remove this commented out code when update React/WC */
+      // let kid = this.pConn$.getChildren()[0];
 
-        // kid.getPConnect() can be a Reference component. So normalize it just in case
-        //        let todoKid = kid.getPConnect().getChildren()[0];
+      // kid.getPConnect() can be a Reference component. So normalize it just in case
+      //        let todoKid = kid.getPConnect().getChildren()[0];
 
-        //        this.todo_pConn$ = todoKid.getPConnect();
+      //        this.todo_pConn$ = todoKid.getPConnect();
 
-        /* code change here to note for React/WC  */
-        // todo now needs pConn to open the work item on click "go"
-        this.todo_pConn$ = this.pConn$;
+      /* code change here to note for React/WC  */
+      // todo now needs pConn to open the work item on click "go"
+      this.todo_pConn$ = this.pConn$;
 
-        // still needs the context of the original work item
-        this.todo_context$ = localPConn.getContextName();
+      // still needs the context of the original work item
+      this.todo_context$ = localPConn.getContextName();
 
-        this.todo_showTodo$ = true;
+      this.todo_showTodo$ = true;
 
-        this.psService.sendMessage(false);
-      });
+      this.psService.sendMessage(false);
+      this.cdRef.markForCheck();
     });
   }
 
@@ -533,24 +531,19 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
     const normalizedConfigObjectAsPConnect = normalizedConfigObject.getComponent();
 
     // makes sure Angular tracks these changes
-    this.ngZone.run(() => {
-      this.buildName$ = this.getBuildName();
-      // what comes back now in configObject is the children of the flowContainer
+    this.buildName$ = this.getBuildName();
+    // what comes back now in configObject is the children of the flowContainer
 
-      this.arChildren$ = [];
-      this.arChildren$.push(normalizedConfigObjectAsPConnect);
+    this.arChildren$ = [];
+    this.arChildren$.push(normalizedConfigObjectAsPConnect);
 
-      this.psService.sendMessage(false);
+    this.psService.sendMessage(false);
 
-      const oWorkItem = configObject.getPConnect();
-      const oWorkData: any = oWorkItem.getDataObject();
+    const oWorkItem = configObject.getPConnect();
+    const oWorkData: any = oWorkItem.getDataObject();
 
-      this.containerName$ = this.localizedVal(
-        this.getActiveViewLabel() || oWorkData.caseInfo.assignments?.[0]?.name,
-        undefined,
-        this.localeReference
-      );
-    });
+    this.containerName$ = this.localizedVal(this.getActiveViewLabel() || oWorkData.caseInfo.assignments?.[0]?.name, undefined, this.localeReference);
+    this.cdRef.markForCheck();
   }
 
   getBuildName(): string {

package/lib/infra/Containers/modal-view-container/data-view-action-buttons/data-view-action-buttons.component.html

@@ -0,0 +1,12 @@
+<mat-grid-list cols="2" rowHeight="4.25rem">
+  <mat-grid-tile>
+    <button mat-raised-button variant="contained" color="secondary" [disabled]="bDisabled$" (click)="onCancel()">
+      {{ localizedVal('Cancel', localeCategory) }}
+    </button>
+  </mat-grid-tile>
+  <mat-grid-tile>
+    <button mat-raised-button variant="contained" color="primary" [disabled]="bDisabled$" (click)="onSubmit()">
+      {{ localizedVal(primaryLabel$, localeCategory) }}
+    </button>
+  </mat-grid-tile>
+</mat-grid-list>