@pega/angular-sdk-overrides 0.25.7 → 0.25.9

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/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/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/defer-load/defer-load.component.ts

@@ -58,7 +58,10 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
     // update itself (re-render)
     const theRequestedAssignment = this.pConn$.getValue(PCore.getConstants().CASE_INFO.ASSIGNMENT_LABEL);
     const lastUpdateCaseTime = this.pConn$.getValue('caseInfo.lastUpdateTime');
-    if (theRequestedAssignment !== this.currentLoadedAssignment || (lastUpdateCaseTime && lastUpdateCaseTime !== this.lastUpdateCaseTime)) {
+    if (
+      (theRequestedAssignment && theRequestedAssignment !== this.currentLoadedAssignment) ||
+      (lastUpdateCaseTime && lastUpdateCaseTime !== this.lastUpdateCaseTime)
+    ) {
       this.currentLoadedAssignment = theRequestedAssignment;
       this.lastUpdateCaseTime = lastUpdateCaseTime;
       this.updateSelf();
@@ -155,6 +158,8 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
         console.error('Cannot load the defer loaded view without container information');
       }
     } else if (this.resourceType === this.PAGE) {
+      if (!this.loadViewCaseID) return;
+
       // Rendering defer loaded tabs in case/ page context
       this.pConn$
         .getActionsApi()

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/field-group-template/field-group-template.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, forwardRef, OnDestroy, OnChanges, AfterViewInit } from '@angular/core';
+import { Component, OnInit, Input, forwardRef, OnDestroy, OnChanges, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -31,7 +31,7 @@ interface FieldGroupTemplateProps {
   styleUrls: ['./field-group-template.component.scss'],
   imports: [CommonModule, MatButtonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {
+export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges {
   @Input() configProps$: FieldGroupTemplateProps;
   @Input() pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
@@ -45,7 +45,7 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
   heading: any;
   children: any;
   menuIconOverride$: any;
-  referenceListLength: number;
+  referenceListLength = signal<number | null>(null);
   fieldHeader: any;
 
   allowAdd = true;
@@ -58,10 +58,6 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
   ) {}
 
   ngOnInit(): void {
-    // First thing in initialization is registering and subscribing to the AngularPConnect service
-    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
-    this.updateSelf();
-
     this.menuIconOverride$ = this.utils.getImageSrc('trash', this.utils.getSDKStaticContentUrl());
 
     const { allowActions, allowTableEdit, referenceList } = this.configProps$;
@@ -86,16 +82,6 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
     }
   }
 
-  onStateChange() {
-    // Should always check the bridge to see if the component should
-    // update itself (re-render)
-    const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
-    // ONLY call updateSelf when the component should update
-    if (bUpdateSelf) {
-      this.updateSelf();
-    }
-  }
-
   ngOnChanges(changes) {
     if (changes && changes.configProps$) {
       const props = changes.configProps$;
@@ -107,16 +93,14 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
         }
 
         this.updateSelf();
+
+        setTimeout(() => {
+          this.angularPConnect.shouldComponentUpdate(this);
+        }, 100);
       }
     }
   }
 
-  ngAfterViewInit() {
-    const resolvedList = getReferenceList(this.pConn$);
-    // @ts-ignore - Expected 3 arguments, but got 1
-    this.pConn$.getListActions().initDefaultPageInstructions(resolvedList);
-  }
-
   updateSelf() {
     const inheritedProps: any = this.pConn$.getInheritedProps();
 
@@ -141,7 +125,10 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
       this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
     }
 
-    if (this.referenceListLength != referenceList?.length) {
+    if (this.referenceListLength() != referenceList?.length) {
+      // @ts-ignore - Expected 3 arguments, but got 1
+      this.pConn$.getListActions().initDefaultPageInstructions(resolvedList);
+
       this.children = referenceList?.map((item, index) => {
         return {
           id: index,
@@ -151,7 +138,7 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
         };
       });
     }
-    this.referenceListLength = referenceList?.length || 0;
+    this.referenceListLength.set(referenceList?.length || 0);
   }
 
   getStaticHeader = (heading, index) => {
@@ -159,14 +146,14 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
   };
 
   getDynamicHeader = (item, index) => {
-    if (this.fieldHeader === 'propertyRef' && this.heading && item[this.heading.substring(1)]) {
+    if (this.heading && item[this.heading.substring(1)]) {
       return item[this.heading.substring(1)];
     }
     return `Row ${index + 1}`;
   };
 
   addFieldGroupItem() {
-    this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceListLength);
+    this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceListLength() as number);
   }
 
   deleteFieldGroupItem(index) {

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/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,17 @@ 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);
+    const isAttachmentsChanged = !PCore.isDeepEqual(this.attachments, attachments);
+    this.isOldAttachment = isOldAttachment;
+    this.attachments = attachments;
+
     // update the attachments shown in the UI
-    this.updateAttachments();
+    if (isAttachmentsChanged) {
+      this.updateAttachments();
+    }
   }
 
   updateAttachments() {
@@ -245,7 +254,9 @@ export class AttachmentComponent implements OnInit, OnDestroy {
       }
     }
 
-    this.fileInput.nativeElement.value = '';
+    if (this.fileInput?.nativeElement) {
+      this.fileInput.nativeElement.value = '';
+    }
   }
 
   onFileAdded(event) {
@@ -411,6 +422,7 @@ export class AttachmentComponent implements OnInit, OnDestroy {
               fileResponses[index].value.thumbnail = localFile.props.thumbnail;
               localFile.inProgress = false;
               localFile.ID = fileResponses[index].value.ID;
+              localFile.props.id = fileResponses[index].value.ID;
               localFile.props.meta = this.localizationService.getLocalizedText('Uploaded successfully');
               localFile.props.progress = 100;
               localFile.handle = fileResponses[index].value.ID;
@@ -437,12 +449,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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/angular-sdk-overrides",
-  "version": "0.25.7",
+  "version": "0.25.9",
   "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();
-  }
-}