@pega/angular-sdk-overrides 0.25.5 → 0.25.7

package/lib/designSystemExtension/banner/banner.component.html

@@ -9,7 +9,7 @@
   </div>
   <div
     [ngClass]="{
-      'psdk-grid-filter-1': this.layout$ === 'two-column',
+      'psdk-grid-filter-2': this.layout$ === 'two-column',
       'psdk-grid-filter-wide-narrow': this.layout$ === 'wide-narrow',
       'psdk-grid-filter-narrow-wide': this.layout$ === 'narrow-wide'
     }"

package/lib/designSystemExtension/banner/banner.component.scss

@@ -1,6 +1,6 @@
 .psdk-grid-filter-1 {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(1, minmax(0, 1fr));
   column-gap: calc(2 * 0.5rem);
   row-gap: calc(2 * 0.5rem);
   align-items: start;
@@ -8,7 +8,7 @@
 
 .psdk-grid-filter-2 {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   column-gap: calc(2 * 0.5rem);
   row-gap: calc(2 * 0.5rem);
   align-items: start;
@@ -20,6 +20,10 @@
   column-gap: calc(2 * 0.5rem);
   row-gap: calc(2 * 0.5rem);
   align-items: start;
+
+  & > *:nth-child(1) {
+    min-width: 0;
+  }
 }
 
 .psdk-grid-filter-narrow-wide {

package/lib/designSystemExtension/rich-text-editor/rich-text-editor.component.html

@@ -1,32 +1,19 @@
 <div [attr.data-test-id]="testId">
   <label [ngClass]="{ 'label-required': required === true }" class="rich-text-label">{{ label }}</label>
+
   <div class="rich-text-editor" *ngIf="!readonly">
     <editor
       [formControl]="richText"
       [attr.disabled]="disabled"
       [initialValue]="value"
-      [init]="{
-        base_url: '/tinymce',
-        suffix: '.min',
-        menubar: false,
-        placeholder,
-        statusbar: false,
-        min_height: 130,
-        plugins: ['lists', 'advlist', 'autolink', 'image', 'link', 'autoresize'],
-        autoresize_bottom_margin: 0,
-        toolbar: disabled ? false : 'blocks | bold italic strikethrough | bullist numlist outdent indent | link image',
-        toolbar_location: 'bottom',
-        content_style: 'body { font-family:Helvetica, Arial,sans-serif; font-size:14px }',
-        branding: false,
-        paste_data_images: true,
-        file_picker_types: 'image',
-        file_picker_callback: filePickerCallback
-      }"
+      [init]="editorConfig"
       (onBlur)="blur()"
       (onChange)="change($event)"
     ></editor>
+
     <p *ngIf="richText.invalid" [ngClass]="'text-editor-error'">{{ info }}</p>
   </div>
+
   <div *ngIf="readonly">
     <div class="readonly-richtext-editor" style="margin: 10px 5px" [innerHTML]="value || '--'"></div>
   </div>

package/lib/designSystemExtension/rich-text-editor/rich-text-editor.component.ts

@@ -27,6 +27,7 @@ export class RichTextEditorComponent implements OnChanges {
   @Output() onChange: EventEmitter<any> = new EventEmitter();
 
   richText = new FormControl();
+  editorConfig: any = {};
 
   ngOnChanges() {
     if (this.required) {
@@ -42,6 +43,35 @@ export class RichTextEditorComponent implements OnChanges {
     if (this.value) {
       this.richText.setValue(this.value);
     }
+
+    const themeElement = document.querySelector('.dark') || document.body;
+    let textColor = getComputedStyle(themeElement).getPropertyValue('--mat-sys-on-surface').trim();
+    if (!textColor) textColor = '#000000';
+
+    this.editorConfig = {
+      base_url: '/tinymce',
+      suffix: '.min',
+      menubar: false,
+      placeholder: this.placeholder,
+      statusbar: false,
+      min_height: 130,
+      plugins: ['lists', 'advlist', 'autolink', 'image', 'link', 'autoresize'],
+      autoresize_bottom_margin: 0,
+      toolbar: this.disabled ? false : 'blocks | bold italic strikethrough | bullist numlist outdent indent | link image',
+      toolbar_location: 'bottom',
+      content_style: `
+        body {
+          font-family: Helvetica, Arial, sans-serif;
+          font-size: 14px;
+          color: ${textColor} !important;
+          background: transparent !important;
+        }
+      `,
+      branding: false,
+      paste_data_images: true,
+      file_picker_types: 'image',
+      file_picker_callback: this.filePickerCallback
+    };
   }
 
   filePickerCallback = cb => {

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

@@ -1,6 +1,7 @@
 <div *ngIf="displayMode$; else noDisplayMode">
   <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$, isHtml$: true }"></component-mapper>
 </div>
+
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$; else noEdit">
     <div *ngIf="bVisible$">
@@ -13,6 +14,7 @@
     </div>
   </div>
 </ng-template>
+
 <ng-template #noEdit>
   <div *ngIf="bVisible$ !== false">
     <component-mapper name="RichTextEditor" [props]="{ label: label$, value: value$, readonly: true, testId }" [parent]="this"></component-mapper>

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

@@ -0,0 +1,172 @@
+@use '@angular/material' as mat;
+
+:host {
+  display: block;
+  background-color: var(--mat-sys-surface, #fff);
+  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

@@ -47,6 +47,7 @@ export class RichTextComponent extends FieldBase {
   fieldOnChange(editorValue: any) {
     const oldVal = this.value$ ?? '';
     const newVal = editorValue?.editor?.getBody()?.innerHTML ?? '';
+
     const isValueChanged = newVal.toString() !== oldVal.toString();
 
     if (isValueChanged || this.status === 'error') {
@@ -61,6 +62,7 @@ export class RichTextComponent extends FieldBase {
 
   fieldOnBlur(editorValue: any) {
     const oldVal = this.value$ ?? '';
+
     const isValueChanged = editorValue.toString() !== oldVal.toString();
 
     if (isValueChanged) {

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>{{ containerName$ }}</h2>
+      <h2 *ngIf="!isMultiStep">{{ 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

@@ -70,6 +70,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
   // itemKey: string = "";   // JA - this is what Nebula/Constellation uses to pass to finishAssignment, navigateToStep
 
   pConnectOfActiveContainerItem;
+  isMultiStep: any;
 
   constructor(
     injector: Injector,
@@ -281,6 +282,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
     // this.containerName$ = oWorkMeta["name"];
     if (bLoadChildren && oWorkData) {
       this.containerName$ = this.localizedVal(this.getActiveViewLabel() || oWorkData.caseInfo.assignments?.[0].name, undefined, this.localeReference);
+      this.isMultiStep = this.utils.getBooleanValue(oWorkData.caseInfo.assignments?.[0].isMultiStep);
     }
 
     // turn off spinner

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

@@ -18,6 +18,11 @@ function getRefreshProps(refreshConditions) {
   return refreshConditions.filter(item => item.event && item.event === 'Changes').map(item => [item.field, item.field?.substring(1)]) || [];
 }
 
+function scrollToTop() {
+  const scrollElement = document.querySelector('.psdk-view-container-top');
+  scrollElement?.scrollIntoView();
+}
+
 interface AssignmentProps {
   // If any, enter additional props that only exist on this component
   template: string;
@@ -140,6 +145,8 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   updateChanges() {
+    scrollToTop();
+
     this.registerForRefresh();
 
     // pConn$ may be a 'reference' component, so normalize it

package/lib/template/confirmation/confirmation.component.html

@@ -1,7 +1,7 @@
 <div>
   <div *ngIf="showConfirmView">
     <h2 id="confirm-label" class="confirm-label">{{ label }}</h2>
-    <div *ngIf="showDetails">
+    <div *ngIf="showDetails" class="confirmation-details">
       <component-mapper name="Details" [props]="{ pConn$ }"></component-mapper>
     </div>
     <div *ngIf="showTasks && toDoList?.length > 0">

package/lib/template/self-service-case-view/self-service-case-view.component.html

@@ -1,75 +1,77 @@
-<div *ngIf="showCaseActions" class="psdk-self-service-case-view-header">
-  <div>{{ this.heading$ }}</div>
-  <div class="psdk-case-view-buttons">
-    <button mat-raised-button color="secondary" [matMenuTriggerFor]="actionMenu">{{ localizedVal('Actions...', localeCategory) }}</button>
-    <mat-menu #actionMenu="matMenu" overlapTrigger="false">
-      <ng-container *ngFor="let action of arAvailableActions$">
-        <button mat-menu-item (click)="_menuActionClick(action)">
-          {{ localizedVal(action.name, '', localeKey) }}
-        </button>
-      </ng-container>
-      <ng-container *ngFor="let process of arAvailabeProcesses$">
-        <button mat-menu-item (click)="_menuProcessClick(process)">
-          {{ process.name }}
-        </button>
-      </ng-container>
-    </mat-menu>
+<div class="psdk-self-service-case-view">
+  <div class="psdk-self-service-case-view-header">
+    <div class="heading">{{ this.heading$ }}</div>
+    <div *ngIf="showCaseActions" class="psdk-case-view-buttons">
+      <button mat-raised-button color="secondary" [matMenuTriggerFor]="actionMenu">{{ localizedVal('Actions...', localeCategory) }}</button>
+      <mat-menu #actionMenu="matMenu" overlapTrigger="false">
+        <ng-container *ngFor="let action of arAvailableActions$">
+          <button mat-menu-item (click)="_menuActionClick(action)">
+            {{ localizedVal(action.name, '', localeKey) }}
+          </button>
+        </ng-container>
+        <ng-container *ngFor="let process of arAvailabeProcesses$">
+          <button mat-menu-item (click)="_menuProcessClick(process)">
+            {{ process.name }}
+          </button>
+        </ng-container>
+      </mat-menu>
+    </div>
   </div>
-</div>
-<div class="psdk-case-view" id="case-view">
-  <div class="psdk-case-view-info" *ngIf="showSummaryRegion && (primarySummaryFields.length > 0 || secondarySummaryFields.length > 0)">
-    <mat-toolbar class="psdk-case-view-toolbar">
-      <mat-toolbar-row class="psdk-case-view-toolbar-row">
-        <div class="psdk-case-view-heading">
-          <div>
-            <h1 id="case-name">{{ heading$ }}</h1>
+  <div class="psdk-case-view" id="case-view">
+    <div class="psdk-case-view-info" *ngIf="showSummaryRegion && (primarySummaryFields.length > 0 || secondarySummaryFields.length > 0)">
+      <mat-toolbar class="psdk-case-view-toolbar">
+        <mat-toolbar-row class="psdk-case-view-toolbar-row">
+          <div class="psdk-case-view-heading">
+            <div>
+              <h1 id="case-name">{{ heading$ }}</h1>
+            </div>
+            <div id="current-caseID" [hidden]="true">{{ currentCaseID }}</div>
+            <div class="psdk-case-view-heading-id" id="caseId">{{ id$ }}</div>
           </div>
-          <div id="current-caseID" [hidden]="true">{{ currentCaseID }}</div>
-          <div class="psdk-case-view-heading-id" id="caseId">{{ id$ }}</div>
-        </div>
-      </mat-toolbar-row>
-    </mat-toolbar>
-    <div class="psdk-case-view-divider"></div>
-    <div class="psdk-case-view-summary">
-      <component-mapper
-        name="CaseSummaryFields"
-        [props]="{ primaryFields$: primarySummaryFields, secondaryFields$: secondarySummaryFields }"
-      ></component-mapper>
+        </mat-toolbar-row>
+      </mat-toolbar>
+      <div class="psdk-case-view-divider"></div>
+      <div class="psdk-case-view-summary">
+        <component-mapper
+          name="CaseSummaryFields"
+          [props]="{ primaryFields$: primarySummaryFields, secondaryFields$: secondarySummaryFields }"
+        ></component-mapper>
+      </div>
     </div>
-  </div>
-  <div class="psdk-case-view-main">
-    <div>
+    <div class="psdk-case-view-main">
+      <div>
+        <div *ngFor="let kid of arChildren$">
+          <div
+            *ngIf="
+              kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' &&
+              kid.getPConnect().getRawMetadata().name.toLowerCase() == 'stages' &&
+              showCaseLifecycle
+            "
+          >
+            <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
+          </div>
+        </div>
+      </div>
+
       <div *ngFor="let kid of arChildren$">
         <div
-          *ngIf="
-            kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' &&
-            kid.getPConnect().getRawMetadata().name.toLowerCase() == 'stages' &&
-            showCaseLifecycle
-          "
+          *ngIf="kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'todo'"
         >
-          <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
+          <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
         </div>
       </div>
-    </div>
 
-    <div *ngFor="let kid of arChildren$">
-      <div
-        *ngIf="kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'todo'"
-      >
-        <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
-      </div>
-    </div>
-
-    <div *ngFor="let kid of arChildren$">
-      <div *ngIf="kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name == 'Main'">
-        <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
+      <div *ngFor="let kid of arChildren$">
+        <div *ngIf="kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name == 'Main'">
+          <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
+        </div>
       </div>
     </div>
-  </div>
-  <div class="psdk-case-view-utilities" *ngIf="arChildren$ && showUtilitiesRegion && isUtilitiesRegionNotEmpty()">
-    <div *ngFor="let kid of arChildren$">
-      <div *ngIf="kid.getPConnect().getRawMetadata()?.type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata()?.name == 'Utilities'">
-        <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
+    <div class="psdk-case-view-utilities" *ngIf="arChildren$ && showUtilitiesRegion && isUtilitiesRegionNotEmpty()">
+      <div *ngFor="let kid of arChildren$">
+        <div *ngIf="kid.getPConnect().getRawMetadata()?.type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata()?.name == 'Utilities'">
+          <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
+        </div>
       </div>
     </div>
   </div>

package/lib/template/self-service-case-view/self-service-case-view.component.scss

@@ -117,9 +117,16 @@ button {
 }
 
 .psdk-self-service-case-view-header {
+  height: 50px;
   display: flex;
-  justify-content: space-around;
+  justify-content: space-between;
   align-items: center;
-  margin: 10px;
   background-color: var(--mat-sys-primary);
+  padding: 0px 8px;
+}
+
+.heading {
+  font-size: 20px;
+  color: var(--mat-sys-on-primary);
+  font-weight: 600;
 }

package/lib/template/wss-nav-bar/wss-nav-bar.component.html

@@ -1,4 +1,4 @@
-<mat-toolbar style="margin-bottom: 5px; background-color: #262626">
+<mat-toolbar>
   <mat-toolbar-row mat-icon-button>
     <div class="psdk-nav-header" (click)="navPanelButtonClick(homePage)">
       <div>

package/lib/template/wss-nav-bar/wss-nav-bar.component.scss

@@ -15,8 +15,6 @@
   padding-top: 0.625rem;
   cursor: pointer;
   padding-right: 1rem;
-  &:hover {
-  }
   align-items: center;
 }
 
@@ -106,13 +104,11 @@
 
 .psdk-nav-button-span {
   padding: 0 1rem;
-  color: var(--app-nav-color);
-
-  &:hover {
-  }
 }
 
 .psdk-nav-oper-avatar {
+  border-radius: 100%;
+  background-color: var(--mat-sys-primary);
   margin: 0rem;
   padding: 0rem;
   min-width: 2.5rem;
@@ -128,6 +124,10 @@
   font-size: 1rem;
 }
 
+mat-toolbar {
+  background-color: var(--mat-sys-surface-variant);
+}
+
 mat-list {
   padding: 0;
 }
@@ -142,9 +142,6 @@ mat-list-item {
   cursor: pointer !important;
   height: auto !important;
 
-  &:hover {
-  }
-
   .flex-box {
     display: flex;
     align-items: center;

package/lib/widget/file-utility/file-utility.component.ts

@@ -4,13 +4,17 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import download from 'downloadjs';
+import debounce from 'lodash.debounce';
+
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { getResolvedConstantValue } from '@pega/angular-sdk-components';
 
 interface FileUtilityProps {
   // If any, enter additional props that only exist on this component
   label?: string;
+  caseId?: string;
 }
 
 @Component({
@@ -62,6 +66,8 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
   closeSvgIcon$ = '';
 
   currentCaseID = '';
+  debouncedGetAttachments: any;
+  attachSubId;
 
   addAttachmentsActions: any;
 
@@ -77,7 +83,9 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
 
     const configProps: FileUtilityProps = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
 
-    this.lu_name$ = configProps.label ?? '';
+    const { caseId, label } = configProps;
+
+    this.lu_name$ = label ?? '';
     this.lu_icon$ = 'paper-clip';
 
     this.closeSvgIcon$ = this.utils.getImageSrc('times', this.utils.getSDKStaticContentUrl());
@@ -100,15 +108,23 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
     this.removeFileFromList$ = { onClick: this.removeFileFromList.bind(this) };
     this.removeLinksFromList$ = { onClick: this.removeLinksFromList.bind(this) };
 
+    this.debouncedGetAttachments = debounce(this.refreshAttachments.bind(this), 1000);
+
     this.updateSelf();
 
     this.createModalButtons();
 
-    PCore.getPubSubUtils().subscribe(
-      PCore.getEvents().getCaseEvent().CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW,
-      this.updateSelf.bind(this),
-      'caseAttachmentsUpdateFromCaseview'
-    );
+    const caseID = caseId ?? getResolvedConstantValue(this.pConn$, PCore.getConstants().CASE_INFO.CASE_INFO_ID);
+
+    const attachSubObject = {
+      matcher: 'ATTACHMENTS',
+      criteria: {
+        ID: caseID
+      }
+    };
+    this.attachSubId = PCore.getMessagingServiceManager().subscribe(attachSubObject, this.debouncedGetAttachments, this.pConn$.getContextName());
+
+    this.debouncedGetAttachments();
   }
 
   ngOnDestroy(): void {
@@ -116,7 +132,7 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
       this.angularPConnectData.unsubscribeFn();
     }
 
-    PCore.getPubSubUtils().unsubscribe(PCore.getEvents().getCaseEvent().CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW, 'caseAttachmentsUpdateFromCaseview');
+    PCore.getMessagingServiceManager().unsubscribe(this.attachSubId);
   }
 
   // Callback passed when subscribing to store change
@@ -136,7 +152,7 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
     }
   }
 
-  onAttachFiles(files) {
+  onAttachFiles(files: any[] = []) {
     const attachmentUtils = PCore.getAttachmentUtils();
     const caseID = this.pConn$.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID);
 

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

@@ -129,7 +129,7 @@ export class TodoComponent implements OnInit, OnDestroy {
         DATA_PAGES: { D__PY_MY_WORK_LIST }
       }
     } = PCore.getConstants();
-    updateWorkList(getPConnect, getMappedValue(D__PY_MY_WORK_LIST));
+    updateWorkList(this.pConn$, getMappedValue(D__PY_MY_WORK_LIST));
   }
 
   updateToDo() {

package/package.json

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