@pega/angular-sdk-overrides 0.23.14 → 0.23.16

package/lib/field/currency/currency.component.ts

@@ -170,15 +170,25 @@ export class CurrencyComponent implements OnInit, OnDestroy {
   }
 
   fieldOnChange(event: any) {
-    this.angularPConnectData.actions?.onChange(this, event);
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = Number(event.target.value).toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      this.angularPConnectData.actions?.onChange(this, event);
+    }
   }
 
   fieldOnBlur(event: any) {
     // PConnect wants to use eventHandler for onBlur
 
-    const actionsApi = this.pConn$?.getActionsApi();
-    const propName = (this.pConn$?.getStateProps() as any).value;
-    handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = Number(event.target.value).toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      const actionsApi = this.pConn$?.getActionsApi();
+      const propName = (this.pConn$?.getStateProps() as any).value;
+      handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
+    }
   }
 
   getErrorMessage() {

package/lib/field/decimal/decimal.component.ts

@@ -160,12 +160,18 @@ export class DecimalComponent implements OnInit, OnDestroy {
   }
 
   fieldOnBlur(event: any) {
-    const actionsApi = this.pConn$?.getActionsApi();
-    const propName = (this.pConn$?.getStateProps() as any).value;
     let value = event?.target?.value;
     value = value.replace(/,/g, '');
     value = value !== '' ? Number(value) : value;
-    handleEvent(actionsApi, 'changeNblur', propName, value);
+
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = value.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      const actionsApi = this.pConn$?.getActionsApi();
+      const propName = (this.pConn$?.getStateProps() as any).value;
+      handleEvent(actionsApi, 'changeNblur', propName, value);
+    }
   }
 
   getErrorMessage() {

package/lib/field/email/email.component.ts

@@ -154,13 +154,23 @@ export class EmailComponent implements OnInit, OnDestroy {
   }
 
   fieldOnChange(event: any) {
-    this.angularPConnectData.actions?.onChange(this, event);
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = event.target.value.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      this.angularPConnectData.actions?.onChange(this, event);
+    }
   }
 
   fieldOnBlur(event: any) {
-    const actionsApi = this.pConn$?.getActionsApi();
-    const propName = (this.pConn$?.getStateProps() as any).value;
-    handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = event.target.value.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      const actionsApi = this.pConn$?.getActionsApi();
+      const propName = (this.pConn$?.getStateProps() as any).value;
+      handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
+    }
   }
 
   getErrorMessage() {

package/lib/field/integer/integer.component.ts

@@ -157,13 +157,23 @@ export class IntegerComponent implements OnInit, OnDestroy {
   }
 
   fieldOnChange(event: any) {
-    this.angularPConnectData.actions?.onChange(this, event);
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = event.target.value.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      this.angularPConnectData.actions?.onChange(this, event);
+    }
   }
 
   fieldOnBlur(event: any) {
-    const actionsApi = this.pConn$?.getActionsApi();
-    const propName = (this.pConn$?.getStateProps() as any).value;
-    handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = event.target.value.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      const actionsApi = this.pConn$?.getActionsApi();
+      const propName = (this.pConn$?.getStateProps() as any).value;
+      handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
+    }
   }
 
   getErrorMessage() {

package/lib/field/percentage/percentage.component.ts

@@ -155,13 +155,23 @@ export class PercentageComponent implements OnInit, OnDestroy {
   }
 
   fieldOnChange(event: any) {
-    this.angularPConnectData.actions?.onChange(this, event);
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = event.target.value.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      this.angularPConnectData.actions?.onChange(this, event);
+    }
   }
 
   fieldOnBlur(event: any) {
-    const actionsApi = this.pConn$?.getActionsApi();
-    const propName = (this.pConn$?.getStateProps() as any).value;
-    handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = event.target.value.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      const actionsApi = this.pConn$?.getActionsApi();
+      const propName = (this.pConn$?.getStateProps() as any).value;
+      handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
+    }
   }
 
   getErrorMessage() {

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

@@ -159,26 +159,18 @@ export class PhoneComponent implements OnInit, OnDestroy {
     }
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  fieldOnBlur(event: Event) {}
+
   fieldOnChange() {
     if (this.formGroup$.controls[this.controlName$].value) {
-      const actionsApi = this.pConn$?.getActionsApi();
-      const propName = (this.pConn$?.getStateProps() as any).value;
       const value = this.formGroup$.controls[this.controlName$].value;
-      const eventObj = {
-        target: {
-          value
-        }
-      };
       this.afterBlur = true;
-      this.angularPConnectData.actions?.onChange(this, eventObj);
-      handleEvent(actionsApi, 'blur', propName, value);
-    }
-  }
 
-  fieldOnBlur(event: any) {
-    const actionsApi = this.pConn$?.getActionsApi();
-    const propName = (this.pConn$?.getStateProps() as any).value;
-    handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
+      const actionsApi = this.pConn$.getActionsApi();
+      const propName = (this.pConn$.getStateProps() as any).value;
+      handleEvent(actionsApi, 'changeNblur', propName, value);
+    }
   }
 
   getErrorMessage() {

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

@@ -157,9 +157,14 @@ export class TextAreaComponent implements OnInit, OnDestroy {
   }
 
   fieldOnChange(event: any) {
-    const actionsApi = this.pConn$?.getActionsApi();
-    const propName = (this.pConn$?.getStateProps() as any).value;
-    handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = event.target.value.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      const actionsApi = this.pConn$?.getActionsApi();
+      const propName = (this.pConn$?.getStateProps() as any).value;
+      handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
+    }
   }
 
   getErrorMessage() {

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

@@ -157,13 +157,23 @@ export class TextInputComponent implements OnInit, OnDestroy {
   }
 
   fieldOnChange(event: any) {
-    this.angularPConnectData.actions?.onChange(this, event);
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = event.target.value.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      this.angularPConnectData.actions?.onChange(this, event);
+    }
   }
 
   fieldOnBlur(event: any) {
-    const actionsApi = this.pConn$?.getActionsApi();
-    const propName = (this.pConn$?.getStateProps() as any).value;
-    handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = event.target.value.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      const actionsApi = this.pConn$?.getActionsApi();
+      const propName = (this.pConn$?.getStateProps() as any).value;
+      handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
+    }
   }
 
   getErrorMessage() {

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

@@ -155,13 +155,23 @@ export class UrlComponent implements OnInit, OnDestroy {
   }
 
   fieldOnChange(event: any) {
-    this.angularPConnectData.actions?.onChange(this, event);
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = event.target.value.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      this.angularPConnectData.actions?.onChange(this, event);
+    }
   }
 
   fieldOnBlur(event: any) {
-    const actionsApi = this.pConn$?.getActionsApi();
-    const propName = (this.pConn$?.getStateProps() as any).value;
-    handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = event.target.value.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      const actionsApi = this.pConn$?.getActionsApi();
+      const propName = (this.pConn$?.getStateProps() as any).value;
+      handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
+    }
   }
 
   getErrorMessage() {

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

@@ -119,6 +119,14 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
       },
       'cancelPressed'
     );
+
+    PCore.getPubSubUtils().subscribe(
+      'clearBannerMessages',
+      () => {
+        this.banners = [];
+      },
+      'CLEAR_BANNER_MESSAGES'
+    );
   }
 
   ngOnDestroy() {
@@ -129,6 +137,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
     PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL, 'cancelAssignment');
 
     PCore.getPubSubUtils().unsubscribe('cancelPressed', 'cancelPressed');
+    PCore.getPubSubUtils().unsubscribe('clearBannerMessages', 'CLEAR_BANNER_MESSAGES');
   }
 
   handleCancel() {
@@ -152,14 +161,15 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
     const pConn = this.pConnectOfActiveContainerItem || this.pConn$;
     const caseViewModeFromProps = this.angularPConnect.getComponentProp(this, 'caseViewMode');
     const caseViewModeFromRedux = pConn.getValue('context_data.caseViewMode', '');
+    const completeProps = this.angularPConnect.getCurrentCompleteProps(this) as FlowContainerProps;
 
     // ONLY call updateSelf when the component should update
     //    AND removing the "gate" that was put there since shouldComponentUpdate
     //      should be the real "gate"
+    // eslint-disable-next-line sonarjs/no-collapsible-if
     if (bUpdateSelf || caseViewModeFromProps !== caseViewModeFromRedux) {
       // don't want to redraw the flow container when there are page messages, because
       // the redraw causes us to loose the errors on the elements
-      const completeProps = this.angularPConnect.getCurrentCompleteProps(this) as FlowContainerProps;
       if (!completeProps.pageMessages || completeProps.pageMessages.length == 0) {
         // with a cancel, need to timeout so todo will update correctly
         if (this.bHasCancel) {
@@ -170,10 +180,10 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
         } else {
           this.updateSelf();
         }
-      } else {
-        this.showPageMessages(completeProps);
       }
     }
+
+    this.showPageMessages(completeProps);
   }
 
   showPageMessages(completeProps: FlowContainerProps) {

package/lib/infra/assignment/assignment.component.html

@@ -1,5 +1,5 @@
 <div>
-  <div><component-mapper name="AlertBanner" [props]="{ banners }" [parent]="this"></component-mapper></div>
+  <div><component-mapper name="AlertBanner" [props]="{ banners: bannerService.banners }" [parent]="this"></component-mapper></div>
   <div *ngIf="bHasNavigation$" class="psdk-stepper">
     <component-mapper
       name="MultiStep"

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

@@ -8,6 +8,7 @@ import { ErrorMessagesService } from '@pega/angular-sdk-components';
 import { ProgressSpinnerService } from '@pega/angular-sdk-components';
 import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { BannerService } from '@pega/angular-sdk-components';
 
 function getRefreshProps(refreshConditions) {
   // refreshConditions cuurently supports only "Changes" event
@@ -37,7 +38,6 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
   @Input() isCreateStage$: boolean;
   @Input() updateToken$: number;
   @Input() isInModal$ = false;
-  @Input() banners;
 
   // For interaction with AngularPConnect
   angularPConnectData: AngularPConnectData = {};
@@ -75,12 +75,15 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
   localeCategory = 'Assignment';
   localeReference;
 
+  snackBarRef;
+
   constructor(
     private angularPConnect: AngularPConnectService,
     private psService: ProgressSpinnerService,
     private erService: ErrorMessagesService,
     private ngZone: NgZone,
-    private snackBar: MatSnackBar
+    private snackBar: MatSnackBar,
+    public bannerService: BannerService
   ) {}
 
   ngOnInit(): void {
@@ -111,6 +114,8 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
     // Should always check the bridge to see if the component should update itself (re-render)
     const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
 
+    this.bannerService.updateBanners(this.itemKey$);
+
     // ONLY call updateSelf when the component should update
     //    AND removing the "gate" that was put there since shouldComponentUpdate
     //      should be the real "gate"
@@ -300,6 +305,10 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   buttonClick(sAction, sButtonType) {
+    this.snackBarRef?.dismiss();
+    this.bannerService.clearBanners();
+    // @ts-ignore
+    PCore.getPubSubUtils().publish('clearBannerMessages');
     // right now, done on an individual basis, setting bReInit to true
     // upon the next flow container state change, will cause the flow container
     // to re-initialize
@@ -335,7 +344,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
               })
               .catch(() => {
                 this.psService.sendMessage(false);
-                this.snackBar.open(`${this.localizedVal('Navigation failed!', this.localeCategory)}`, 'Ok');
+                this.snackBarRef = this.snackBar.open(`${this.localizedVal('Navigation failed!', this.localeCategory)}`, 'Ok');
               });
           }
           break;
@@ -354,7 +363,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
             })
             .catch(() => {
               this.psService.sendMessage(false);
-              this.snackBar.open(`${this.localizedVal('Save failed', this.localeCategory)}`, 'Ok');
+              this.snackBarRef = this.snackBar.open(`${this.localizedVal('Save failed', this.localeCategory)}`, 'Ok');
             });
 
           break;
@@ -381,7 +390,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
               })
               .catch(() => {
                 this.psService.sendMessage(false);
-                this.snackBar.open(`${this.localizedVal('Cancel failed!', this.localeCategory)}`, 'Ok');
+                this.snackBarRef = this.snackBar.open(`${this.localizedVal('Cancel failed!', this.localeCategory)}`, 'Ok');
               });
           } else {
             this.psService.sendMessage(true);
@@ -400,7 +409,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
               })
               .catch(() => {
                 this.psService.sendMessage(false);
-                this.snackBar.open(`${this.localizedVal('Cancel failed!', this.localeCategory)}`, 'Ok');
+                this.snackBarRef = this.snackBar.open(`${this.localizedVal('Cancel failed!', this.localeCategory)}`, 'Ok');
               });
           }
           break;
@@ -413,23 +422,18 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
       switch (sAction) {
         case 'finishAssignment':
           this.erService.sendMessage('publish', '');
-          if (this.formValid()) {
-            this.bReInit = true;
-            this.psService.sendMessage(true);
-            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.snackBar.open(`${this.localizedVal('Submit failed!', this.localeCategory)}`, 'Ok');
-              });
-          } else {
-            // let snackBarRef = this.snackBar.open("Please fix errors on form.",  "Ok");
-            this.erService.sendMessage('show', this.localizedVal('Please fix errors on form.', this.localeCategory));
-          }
+          this.bReInit = true;
+          this.psService.sendMessage(true);
+          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');
+            });
           break;
         default:
           break;

package/package.json

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