@pega/angular-sdk-overrides 0.25.6 → 0.25.8

package/lib/designSystemExtension/material-summary-item/material-summary-item.component.scss

@@ -62,6 +62,7 @@
 .psdk-utility-card-icon {
   flex-grow: 1;
   max-width: 2.813rem;
+  filter: var(--app-primary-color-filter);
 }
 
 .psdk-utility-card-svg-icon {
@@ -107,4 +108,5 @@
   width: 1.4rem;
   display: inline-block;
   vertical-align: bottom;
+  filter: var(--app-primary-color-filter);
 }

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/phone/phone.component.html

@@ -2,26 +2,24 @@
   <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
-  <div *ngIf="bHasForm$; else noEdit">
-    <div #f="ngForm" [formGroup]="formGroup$" *ngIf="bVisible$">
-      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText" floatLabel="always">
-        <mat-tel-input
-          [attr.data-test-id]="testId"
-          [formControl]="fieldControl"
-          [preferredCountries]="preferredCountries"
-          [enablePlaceholder]="true"
-          [enableSearch]="true"
-          [placeholder]="placeholder"
-          [required]="bRequired$"
-          [disabled]="bDisabled$ || bReadonly$"
-          (change)="fieldOnChange()"
-          (blur)="fieldOnBlur()"
-        >
-        </mat-tel-input>
-        <mat-label>{{ label$ }}</mat-label>
-        <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
-      </mat-form-field>
-    </div>
+  <div *ngIf="bHasForm$ && bVisible$; else noEdit">
+    <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText" floatLabel="always">
+      <mat-tel-input
+        [attr.data-test-id]="testId"
+        [formControl]="fieldControl"
+        [preferredCountries]="preferredCountries"
+        [enablePlaceholder]="true"
+        [enableSearch]="true"
+        [placeholder]="placeholder"
+        [required]="bRequired$"
+        [disabled]="bDisabled$ || bReadonly$"
+        (change)="fieldOnChange()"
+        (blur)="fieldOnBlur()"
+      >
+      </mat-tel-input>
+      <mat-label>{{ label$ }}</mat-label>
+      <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
+    </mat-form-field>
   </div>
 </ng-template>
 <ng-template #noEdit>

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

@@ -54,8 +54,7 @@ export class PhoneComponent extends FieldBase {
     const isValueChanged = newVal?.toString() !== oldVal.toString();
 
     if (isValueChanged) {
-      const value = this.formGroup$.controls[this.controlName$].value;
-      handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+      handleEvent(this.actionsApi, 'changeNblur', this.propName, newVal);
     }
   }
 

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

@@ -435,12 +435,13 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
           const finishPromise = this.finishAssignment(this.itemKey$); // JA - was itemID but Nebula/Constellation uses itemKey
           finishPromise
             .then(() => {
-              this.psService.sendMessage(false);
               this.updateChanges();
             })
             .catch(() => {
-              this.psService.sendMessage(false);
               this.snackBarRef = this.snackBar.open(`${this.localizedVal('Submit failed!', this.localeCategory)}`, 'Ok');
+            })
+            .finally(() => {
+              this.psService.sendMessage(false);
             });
           break;
 
@@ -450,8 +451,10 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
           approvePromise
             .then(() => {})
             .catch(() => {
-              this.psService.sendMessage(false);
               this.snackBarRef = this.snackBar.open(`${this.localizedVal('Approve failed!', this.localeCategory)}`, 'Ok');
+            })
+            .finally(() => {
+              this.psService.sendMessage(false);
             });
 
           break;

package/lib/infra/stages/stages.component.html

@@ -1,7 +1,8 @@
 <div class="psdk-stages-bar">
   <div class="psdk-stages-chevron" *ngFor="let stage of arStageResults$">
     <div *ngIf="stage.visited_status == 'completed'" class="psdk-stages-inner-past">
-      <img class="psdk-stages-icon" src="{{ checkSvgIcon$ }}" />{{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}
+      <img class="psdk-stages-icon" src="{{ checkSvgIcon$ }}" />
+      <div>{{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}</div>
     </div>
     <div *ngIf="stage.visited_status == 'active'" class="psdk-stages-inner-present">
       {{ localizationService.getLocalizedText(stage.name) }}

package/lib/infra/stages/stages.component.scss

@@ -21,9 +21,11 @@
 }
 
 .psdk-stages-icon {
-  width: 1.4rem;
+  width: 18px;
   display: inline-block;
   vertical-align: top;
+  filter: var(--app-primary-color-filter);
+  margin-right: 2px;
 }
 
 .psdk-stages-bar {
@@ -66,6 +68,8 @@
 .psdk-stages-inner-past {
   color: var(--mat-sys-outline-variant);
   font-size: 1rem;
+  display: flex;
+  align-items: center;
 }
 
 .psdk-stages-inner-present {

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

@@ -73,7 +73,7 @@
       </div>
     </div>
 
-    <div>
+    <div *ngIf="tabData$">
       <component-mapper name="DeferLoad" [props]="{ pConn$, name: tabData$?.config?.name }"></component-mapper>
     </div>
   </div>

package/lib/template/case-view/case-view.component.ts

@@ -49,7 +49,6 @@ export class CaseViewComponent implements OnInit, OnDestroy {
   caseSummaryPConn$: any;
   currentCaseID = '';
   editAction: boolean;
-  bHasNewAttachments = false;
   localizedVal: any;
   localeCategory = 'CaseView';
   localeKey: string;
@@ -113,14 +112,6 @@ export class CaseViewComponent implements OnInit, OnDestroy {
 
   updateHeaderAndSummary() {
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as CaseViewProps;
-    const hasNewAttachments = this.pConn$.getDataObject().caseInfo?.hasNewAttachments;
-
-    if (hasNewAttachments !== this.bHasNewAttachments) {
-      this.bHasNewAttachments = hasNewAttachments;
-      if (this.bHasNewAttachments) {
-        PCore.getPubSubUtils().publish(PCore.getEvents().getCaseEvent().CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW, true);
-      }
-    }
 
     const kids = this.pConn$.getChildren() as any[];
     for (const kid of kids) {

package/lib/template/data-reference/data-reference.component.ts

@@ -6,7 +6,7 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { getMappedKey } from '@pega/angular-sdk-components';
 import { componentCachePersistUtils } from '@pega/angular-sdk-components';
 import { getFirstChildConfig } from '@pega/angular-sdk-components';
-import { DataReferenceAdvancedSearchService } from './data-reference-advanced-search.service';
+import { DataReferenceAdvancedSearchService } from '@pega/angular-sdk-components';
 
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
 

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/self-service-case-view/self-service-case-view.component.ts

@@ -49,7 +49,6 @@ export class SelfServiceCaseViewComponent implements OnInit, OnDestroy {
   caseSummaryPConn$: any;
   currentCaseID = '';
   editAction: boolean;
-  bHasNewAttachments = false;
   localizedVal: any;
   localeCategory = 'CaseView';
   localeKey: any;
@@ -117,14 +116,6 @@ export class SelfServiceCaseViewComponent implements OnInit, OnDestroy {
 
   updateHeaderAndSummary() {
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as SelfServiceCaseViewProps;
-    const hasNewAttachments = this.pConn$.getDataObject().caseInfo?.hasNewAttachments;
-
-    if (hasNewAttachments !== this.bHasNewAttachments) {
-      this.bHasNewAttachments = hasNewAttachments;
-      if (this.bHasNewAttachments) {
-        PCore.getPubSubUtils().publish(PCore.getEvents().getCaseEvent().CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW, true);
-      }
-    }
 
     const kids = this.pConn$.getChildren() as any[];
     for (const kid of kids) {

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

@@ -125,7 +125,6 @@
 }
 
 mat-toolbar {
-  margin-bottom: 5px;
   background-color: var(--mat-sys-surface-variant);
 }
 

package/lib/widget/attachment/attachment.component.scss

@@ -126,6 +126,7 @@
 
 .psdk-attachment-card-svg-icon {
   width: 2.5rem;
+  filter: var(--app-primary-color-filter);
 }
 
 .psdk-utility-button {
@@ -138,6 +139,7 @@
 .psdk-utility-card-action-svg-icon {
   width: 1.4rem;
   display: inline-block;
+  filter: var(--app-primary-color-filter);
 }
 
 .file-div {

package/lib/widget/attachment/attachment.component.ts

@@ -156,8 +156,16 @@ export class AttachmentComponent implements OnInit, OnDestroy {
     this.displayMode = displayMode;
     this.isMultiAttachmentInInlineEditTable = isTableFormatter && allowMultiple && editMode === 'tableRows';
 
+    const rawValue = this.pConn$.getComponentConfig().value;
+    const isAttachmentAnnotationPresent = typeof rawValue === 'object' ? false : rawValue?.includes('@ATTACHMENT');
+    const { attachments, isOldAttachment } = isAttachmentAnnotationPresent ? value : PCore.getAttachmentUtils().prepareAttachmentData(value);
+    this.isOldAttachment = isOldAttachment;
+    this.attachments = attachments;
+
     // update the attachments shown in the UI
-    this.updateAttachments();
+    if (this.attachments.length) {
+      this.updateAttachments();
+    }
   }
 
   updateAttachments() {
@@ -245,7 +253,9 @@ export class AttachmentComponent implements OnInit, OnDestroy {
       }
     }
 
-    this.fileInput.nativeElement.value = '';
+    if (this.fileInput?.nativeElement) {
+      this.fileInput.nativeElement.value = '';
+    }
   }
 
   onFileAdded(event) {
@@ -437,12 +447,13 @@ export class AttachmentComponent implements OnInit, OnDestroy {
           if (this.filesWithError?.length === 0) {
             clearFieldErrorMessages(this.pConn$);
           }
-
-          this.actionSequencer.deRegisterBlockingAction(this.contextName).catch(() => {});
         }
+
+        this.actionSequencer.deRegisterBlockingAction(this.contextName).catch(() => {});
       })
       .catch(error => {
         console.log(error);
+        this.actionSequencer.cancelDeferredActionsOnError(this.contextName);
       });
   }
 

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/list-utility/list-utility.component.scss

@@ -63,6 +63,7 @@
 .psdk-utility-svg-icon {
   width: 1.4rem;
   display: inline-block;
+  filter: var(--app-primary-color-filter);
 }
 
 .psdk-settings-svg-icon {

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

package/lib/template/data-reference/data-reference-advanced-search.service.ts

@@ -1,16 +0,0 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
-
-@Injectable({ providedIn: 'root' })
-export class DataReferenceAdvancedSearchService {
-  private configSubject = new BehaviorSubject(null);
-  config$ = this.configSubject.asObservable();
-
-  setConfig(config) {
-    this.configSubject.next(config);
-  }
-
-  getConfig() {
-    return this.configSubject.getValue();
-  }
-}