@pega/angular-sdk-overrides 0.25.7 → 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/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/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.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,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/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.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();
-  }
-}