@pega/angular-sdk-overrides 0.242.4 → 0.242.6

package/lib/field/dropdown/dropdown.component.ts

@@ -279,25 +279,39 @@ export class DropdownComponent implements OnInit, OnDestroy {
 
     columns = preProcessColumns(columns) || [];
     if (!this.displayMode$ && listType !== 'associated' && typeof datasource === 'string') {
-      this.getData(datasource, parameters, columns, context);
+      this.getData(datasource, parameters, columns, context, listType);
     }
   }
 
-  getData(datasource, parameters, columns, context) {
-    this.dataPageService.getDataPageData(datasource, parameters, context).then((results: any) => {
-      const optionsData: any[] = [];
-      const displayColumn = getDisplayFieldsMetaData(columns);
-      results?.forEach(element => {
-        const val = element[displayColumn.primary]?.toString();
-        const obj = {
-          key: element[displayColumn.key] || element.pyGUID,
-          value: val
-        };
-        optionsData.push(obj);
+  getData(dataSource, parameters, columns, context, listType) {
+    const dataConfig: any = {
+      columns,
+      dataSource,
+      deferDatasource: true,
+      listType,
+      parameters,
+      matchPosition: 'contains',
+      maxResultsDisplay: '5000',
+      cacheLifeSpan: 'form'
+    };
+    PCore.getDataApi()
+      .init(dataConfig, context)
+      .then((dataApiObj: any) => {
+        const optionsData: any[] = [];
+        const displayColumn = getDisplayFieldsMetaData(columns);
+        dataApiObj?.fetchData('').then(response => {
+          response.data?.forEach(element => {
+            const val = element[displayColumn.primary]?.toString();
+            const obj = {
+              key: element[displayColumn.key] || element.pyGUID,
+              value: val
+            };
+            optionsData.push(obj);
+          });
+          optionsData?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
+          this.options$ = optionsData;
+        });
       });
-      optionsData?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
-      this.options$ = optionsData;
-    });
   }
 
   isSelected(buttonValue: string): boolean {

package/lib/field/user-reference/user-reference.component.html

@@ -8,13 +8,7 @@
     </div>
     <div [formGroup]="formGroup$" *ngIf="type === 'dropdown'">
       <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
-        <mat-select
-          [value]="value$"
-          [required]="bRequired$"
-          [formControl]="fieldControl"
-          [attr.data-test-id]="testId"
-          (selectionChange)="fieldOnChange($event)"
-        >
+        <mat-select [required]="bRequired$" [formControl]="fieldControl" [attr.data-test-id]="testId" (selectionChange)="fieldOnChange($event)">
           <mat-option *ngFor="let opt of options$" [value]="opt.key">
             {{ opt.value }}
           </mat-option>
@@ -32,14 +26,12 @@
           matInput
           [placeholder]="placeholder"
           [formControl]="fieldControl"
-          [value]="value$"
           [required]="bRequired$"
           [matAutocomplete]="auto"
           [attr.data-test-id]="testId"
-          (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
         />
-        <mat-autocomplete #auto="matAutocomplete">
+        <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption (optionSelected)="optionChanged($event)">
           <mat-option *ngFor="let opt of filteredOptions | async" [value]="opt.value">
             <span>{{ opt.value }}</span>
           </mat-option>

package/lib/field/user-reference/user-reference.component.ts

@@ -23,6 +23,7 @@ interface UserReferenceProps extends Omit<PConnFieldProps, 'value'> {
   value?: any;
   showAsFormattedText?: boolean;
   additionalProps?: object;
+  onRecordChange?: any;
 }
 
 @Component({
@@ -66,6 +67,7 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
   fieldControl = new FormControl('', null);
   actionsApi: Object;
   propName: string;
+  onRecordChange: any;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -83,11 +85,11 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     if (this.formGroup$) {
       // add control to formGroup
       this.formGroup$.addControl(this.controlName$, this.fieldControl);
-      this.fieldControl.setValue(this.value$);
+      this.fieldControl.setValue(this.getValue(this.value$));
     }
 
     this.filteredOptions = this.fieldControl.valueChanges.pipe(
-      startWith(''),
+      startWith(this.getValue(this.value$) || ''),
       map(value => this._filter(value || ''))
     );
   }
@@ -126,6 +128,21 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     return this.options$?.filter(option => option.value?.toLowerCase().includes(filterVal));
   }
 
+  isUserNameAvailable = user => {
+    return typeof user === 'object' && user !== null && user.userName;
+  };
+
+  getUserName = user => {
+    return user.userName;
+  };
+
+  getValue = user => {
+    if (this.displayAs$ === DROPDOWN_LIST) {
+      return this.utils.getUserId(user) || this.getUserName(user);
+    }
+    return this.isUserNameAvailable(user) ? this.getUserName(user) : this.utils.getUserId(user);
+  };
+
   async checkAndUpdate() {
     // Should always check the bridge to see if the component should
     // update itself (re-render)
@@ -140,6 +157,7 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
   async updateSelf() {
     const props = this.pConn$.getConfigProps() as UserReferenceProps;
     this.testId = props.testId;
+    this.onRecordChange = props?.onRecordChange;
 
     const { label, displayAs, value, showAsFormattedText, helperText, placeholder, displayMode } = props;
 
@@ -150,20 +168,18 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     this.placeholder = placeholder || '';
     this.displayMode$ = displayMode;
 
+    this.value$ = this.pConn$.getConfigProps()?.value;
+
     const { readOnly, required } = props;
     [this.bReadonly$, this.bRequired$] = [readOnly, required].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));
 
     this.actionsApi = this.pConn$.getActionsApi();
     this.propName = this.pConn$.getStateProps().value;
 
-    const isUserNameAvailable = user => {
-      return typeof user === 'object' && user !== null && user.userName;
-    };
-
     this.userID$ = this.utils.getUserId(value);
 
     if (this.userID$ && this.bReadonly$ && this.showAsFormattedText$) {
-      if (isUserNameAvailable(value)) {
+      if (this.isUserNameAvailable(value)) {
         this.userName$ = value.userName;
       } else {
         // if same user ref field is referred in view as editable & readonly formatted text
@@ -201,7 +217,12 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     if (event?.target) {
       this.filterValue = (event.target as HTMLInputElement).value;
     }
-    const value = event?.target?.value;
+    const value = event?.value;
+    handleEvent(this.actionsApi, 'change', this.propName, value);
+  }
+
+  optionChanged(event: any) {
+    const value = event?.option?.value;
     handleEvent(this.actionsApi, 'change', this.propName, value);
   }
 
@@ -211,11 +232,12 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
       const index = this.options$?.findIndex(element => element.value === event.target.value);
       key = index > -1 ? (key = this.options$[index].key) : event.target.value;
     }
-
-    const value = {
-      value: key
-    };
+    const value = key;
     handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+    if (this.onRecordChange) {
+      event.target.value = value;
+      this.onRecordChange(event);
+    }
   }
 
   getErrorMessage() {

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

@@ -6,7 +6,7 @@ import { publicConstants } from '@pega/pcore-pconnect-typedefs/constants';
 import { ProgressSpinnerService } from '@pega/angular-sdk-components';
 import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
-import { getToDoAssignments, showBanner } from './helpers';
+import { getToDoAssignments, hasAssignments, showBanner } from './helpers';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { FlowContainerBaseComponent } from '@pega/angular-sdk-components';
 
@@ -121,6 +121,14 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
       },
       'cancelPressed'
     );
+
+    PCore.getPubSubUtils().subscribe(
+      'clearBannerMessages',
+      () => {
+        this.banners = [];
+      },
+      'CLEAR_BANNER_MESSAGES'
+    );
   }
 
   ngOnDestroy() {
@@ -131,6 +139,8 @@ 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() {
@@ -155,13 +165,15 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
     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) {
@@ -172,10 +184,10 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
         } else {
           this.updateSelf();
         }
-      } else {
-        this.showPageMessages(completeProps);
       }
     }
+
+    this.showPageMessages(completeProps);
   }
 
   showPageMessages(completeProps: FlowContainerProps) {
@@ -277,41 +289,6 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
     this.psService.sendMessage(false);
   }
 
-  hasAssignments() {
-    let hasAssignments = false;
-    const assignmentsList = this.pConn$.getValue(this.pCoreConstants.CASE_INFO.D_CASE_ASSIGNMENTS_RESULTS);
-    // const thisOperator = PCore.getEnvironmentInfo().getOperatorIdentifier();
-    // 8.7 includes assignments in Assignments List that may be assigned to
-    //  a different operator. So, see if there are any assignments for
-    //  the current operator
-    const isEmbedded = window.location.href.includes('embedded');
-    let bAssignmentsForThisOperator = false;
-
-    if (isEmbedded) {
-      const thisOperator = PCore.getEnvironmentInfo().getOperatorIdentifier();
-      for (const assignment of assignmentsList) {
-        if (assignment.assigneeInfo.ID === thisOperator) {
-          bAssignmentsForThisOperator = true;
-        }
-      }
-    } else {
-      bAssignmentsForThisOperator = true;
-    }
-
-    // Bail if there is no assignmentsList
-    if (!assignmentsList) {
-      return hasAssignments;
-    }
-
-    const hasChildCaseAssignments = this.hasChildCaseAssignments();
-
-    if (bAssignmentsForThisOperator || hasChildCaseAssignments || this.isCaseWideLocalAction()) {
-      hasAssignments = true;
-    }
-
-    return hasAssignments;
-  }
-
   isCaseWideLocalAction() {
     const actionID = this.pConn$.getValue(this.pCoreConstants.CASE_INFO.ACTIVE_ACTION_ID);
     const caseActions = this.pConn$.getValue(this.pCoreConstants.CASE_INFO.AVAILABLEACTIONS);
@@ -461,7 +438,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
     this.caseMessages$ = this.localizedVal(this.pConn$.getValue('caseMessages'), this.localeCategory);
     // caseMessages's behavior has changed in 24.2, and hence it doesn't let Optional Action work.
     // Changing the below condition for now. Was: (theCaseMessages || !hasAssignments())
-    if (!this.hasAssignments()) {
+    if (!hasAssignments(this.pConn$)) {
       this.bHasCaseMessages$ = true;
       this.bShowConfirm = true;
       this.checkSvg$ = this.utils.getImageSrc('check', this.utils.getSDKStaticContentUrl());

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

@@ -28,7 +28,7 @@ function getChildCaseAssignments(pConnect) {
   return allAssignments;
 }
 
-function hasAssignments(pConnect) {
+export function hasAssignments(pConnect) {
   const { CASE_INFO } = PCore.getConstants();
   const assignments = pConnect.getValue(CASE_INFO.D_CASE_ASSIGNMENTS_RESULTS);
   const childCasesAssignments = getChildCaseAssignments(pConnect);

package/lib/infra/Containers/modal-view-container/modal-view-container.component.ts

@@ -23,7 +23,6 @@ import { ReferenceComponent } from '@pega/angular-sdk-components';
 })
 export class ModalViewContainerComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
-  @Input() displayOnlyFA$: boolean;
 
   // for when non modal
   @Output() modalVisibleChange = new EventEmitter<boolean>();
@@ -73,11 +72,6 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    if (this.displayOnlyFA$) {
-      // for when non modal
-      this.bShowAsModal$ = false;
-    }
-
     // First thing in initialization is registering and subscribing to the AngularPConnect service
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
 

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,15 @@ 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 'packages/angular-sdk-components/src/public-api';
+
+function getRefreshProps(refreshConditions) {
+  // refreshConditions cuurently supports only "Changes" event
+  if (!refreshConditions) {
+    return [];
+  }
+  return refreshConditions.filter(item => item.event && item.event === 'Changes').map(item => [item.field, item.field?.substring(1)]) || [];
+}
 
 interface AssignmentProps {
   // If any, enter additional props that only exist on this component
@@ -29,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 = {};
@@ -69,12 +77,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 {
@@ -105,6 +116,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"
@@ -128,6 +141,8 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   updateChanges() {
+    this.registerForRefresh();
+
     // pConn$ may be a 'reference' component, so normalize it
     this.newPConn$ = ReferenceComponent.normalizePConn(this.pConn$);
 
@@ -285,6 +300,9 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   buttonClick(sAction, sButtonType) {
+    this.snackBarRef?.dismiss();
+    this.bannerService.clearBanners();
+    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
@@ -308,21 +326,21 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
       switch (sAction) {
         case 'navigateToStep':
           this.erService.sendMessage('publish', '');
-          if (this.formValid()) {
-            this.bReInit = true;
-            this.psService.sendMessage(true);
+          // if (this.formValid()) {
+          this.bReInit = true;
+          this.psService.sendMessage(true);
 
-            const navigatePromise = this.navigateToStep('previous', this.itemKey$);
-            navigatePromise
-              .then(() => {
-                this.updateChanges();
-                this.psService.sendMessage(false);
-              })
-              .catch(() => {
-                this.psService.sendMessage(false);
-                this.snackBar.open(`${this.localizedVal('Navigation failed!', this.localeCategory)}`, 'Ok');
-              });
-          }
+          const navigatePromise = this.navigateToStep('previous', this.itemKey$);
+          navigatePromise
+            .then(() => {
+              this.updateChanges();
+              this.psService.sendMessage(false);
+            })
+            .catch(() => {
+              this.psService.sendMessage(false);
+              this.snackBarRef = this.snackBar.open(`${this.localizedVal('Navigation failed!', this.localeCategory)}`, 'Ok');
+            });
+          // }
           break;
 
         case 'saveAssignment': {
@@ -338,7 +356,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;
@@ -362,7 +380,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);
@@ -379,7 +397,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;
@@ -391,7 +409,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
             .then(() => {})
             .catch(() => {
               this.psService.sendMessage(false);
-              this.snackBar.open(`${this.localizedVal('Rejection failed!', this.localeCategory)}`, 'Ok');
+              this.snackBarRef = this.snackBar.open(`${this.localizedVal('Rejection failed!', this.localeCategory)}`, 'Ok');
             });
 
           break;
@@ -404,23 +422,19 @@ 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;
 
         case 'approveCase': {
@@ -430,7 +444,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
             .then(() => {})
             .catch(() => {
               this.psService.sendMessage(false);
-              this.snackBar.open(`${this.localizedVal('Approve failed!', this.localeCategory)}`, 'Ok');
+              this.snackBarRef = this.snackBar.open(`${this.localizedVal('Approve failed!', this.localeCategory)}`, 'Ok');
             });
 
           break;
@@ -452,10 +466,41 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
     });
   }
 
-  // eslint-disable-next-line sonarjs/no-identical-functions
   topViewRefresh(): void {
     Object.values(this.formGroup$.controls).forEach((control: any) => {
       control.markAsTouched();
     });
   }
+
+  registerForRefresh() {
+    // @ts-ignore - Property 'getActionRefreshConditions' is private and only accessible within class 'CaseInfo'
+    const refreshConditions = this.pConn$.getCaseInfo()?.getActionRefreshConditions();
+    const pageReference = this.pConn$.getPageReference();
+    const context = this.pConn$.getContextName();
+
+    // refresh api de-registration
+    PCore.getRefreshManager().deRegisterForRefresh(context);
+
+    // refresh api registration
+    const refreshProps = getRefreshProps(refreshConditions);
+    const caseKey = this.pConn$.getCaseInfo().getKey();
+    const refreshOptions = {
+      autoDetectRefresh: true,
+      preserveClientChanges: false
+    };
+    if (refreshProps.length > 0) {
+      refreshProps.forEach(prop => {
+        PCore.getRefreshManager().registerForRefresh(
+          'PROP_CHANGE',
+          this.pConn$.getActionsApi().refreshCaseView.bind(this.pConn$.getActionsApi(), caseKey, '', pageReference, {
+            ...refreshOptions,
+            refreshFor: prop[0]
+          }),
+          `${pageReference}.${prop[1]}`,
+          `${context}/${pageReference}`,
+          context
+        );
+      });
+    }
+  }
 }

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

@@ -18,6 +18,7 @@
   <div class="psdk-case-view-divider"></div>
 
   <component-mapper
+    *ngIf="arMainButtons$ && arSecondaryButtons$"
     name="ActionButtons"
     [props]="{ arMainButtons$, arSecondaryButtons$ }"
     [parent]="this"

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

@@ -1,8 +1,10 @@
-import { Component, OnInit, Input, Output, EventEmitter, forwardRef, OnChanges } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, forwardRef, OnChanges, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { IdleDetectionService } from '@pega/angular-sdk-components';
+import { ServerConfigService } from '@pega/angular-sdk-components';
 
 @Component({
   selector: 'app-assignment-card',
@@ -11,7 +13,7 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   standalone: true,
   imports: [CommonModule, ReactiveFormsModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class AssignmentCardComponent implements OnInit, OnChanges {
+export class AssignmentCardComponent implements OnInit, OnChanges, OnDestroy {
   @Input() pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
   @Input() arMainButtons$: any[];
@@ -21,10 +23,16 @@ export class AssignmentCardComponent implements OnInit, OnChanges {
 
   @Output() actionButtonClick: EventEmitter<any> = new EventEmitter();
 
+  constructor(
+    private idleService: IdleDetectionService,
+    private scservice: ServerConfigService
+  ) {}
+
   ngOnInit(): void {
-    // Children may contain 'reference' component, so we need to
-    //  normalize them
+    // Children may contain 'reference' component, so we need to normalize them
     this.arChildren$ = ReferenceComponent.normalizePConnArray(this.arChildren$);
+
+    this.checkAndEnableAutoSave();
   }
 
   ngOnChanges() {
@@ -33,7 +41,27 @@ export class AssignmentCardComponent implements OnInit, OnChanges {
     this.arChildren$ = ReferenceComponent.normalizePConnArray(this.arChildren$);
   }
 
+  ngOnDestroy() {
+    this.idleService.stopWatching();
+  }
+
+  async checkAndEnableAutoSave() {
+    const sdkConfig = await this.scservice.getSdkConfig();
+    const autoSave = sdkConfig.serverConfig.autoSave;
+
+    if (autoSave) {
+      this.idleService.startWatching(() => this.autoSave(), autoSave);
+    }
+  }
+
   onActionButtonClick(oData: any) {
     this.actionButtonClick.emit(oData);
   }
+
+  autoSave() {
+    const context = this.pConn$.getContextName();
+    if (PCore.getFormUtils().isStateModified(context)) {
+      this.pConn$.getActionsApi().saveAssignment(context);
+    }
+  }
 }