@pega/dx-component-builder-sdk 24.2.10 → 24.2.12

package/tests/assets/sdk-a/components/create/override-sdk/field/scalar-list/scalar-list.component.ts

@@ -101,20 +101,19 @@ export class ScalarListComponent implements OnInit, OnDestroy {
         {
           type: componentType,
           config: {
-            // @ts-ignore - Object literal may only specify known properties, and 'value' does not exist in type 'ComponentMetadataConfig'.
             value: scalarValue,
-            displayMode: 'LABELS_LEFT',
+            displayMode: 'DISPLAY_ONLY',
             label: this.label$,
             ...restProps,
             readOnly: true
           }
         },
         '',
-        '',
+        0,
         {}
       ); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional;
     });
-    this.isDisplayModeEnabled = ['LABELS_LEFT', 'STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(this.displayMode$ as string);
+    this.isDisplayModeEnabled = ['STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(this.displayMode$ as string);
     this.value$ = this.items;
   }
 }

package/tests/assets/sdk-a/components/create/override-sdk/field/text/text.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
@@ -18,6 +19,7 @@ interface TextProps extends PConnFieldProps {
 })
 export class TextComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
   @Input() formatAs$: string;
 
   // Used with AngularPConnect

package/tests/assets/sdk-a/components/create/override-sdk/field/text-area/text-area.component.html

@@ -16,7 +16,8 @@
             [required]="bRequired$"
             [disabled]="bDisabled$"
             [formControl]="fieldControl"
-            (change)="fieldOnChange($event)"
+            (change)="fieldOnChange()"
+            (blur)="fieldOnBlur($event)"
           ></textarea>
           <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
         </mat-form-field>

package/tests/assets/sdk-a/components/create/override-sdk/field/text-area/text-area.component.ts

@@ -8,6 +8,7 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 
 interface TextAreaProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextArea here
@@ -44,6 +45,8 @@ export class TextAreaComponent implements OnInit, OnDestroy {
   helperText: string;
 
   fieldControl = new FormControl('', null);
+  actionsApi: Object;
+  propName: string;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -113,6 +116,9 @@ export class TextAreaComponent implements OnInit, OnDestroy {
     this.label$ = this.configProps$.label;
     this.helperText = this.configProps$.helperText;
 
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = this.pConn$.getStateProps().value;
+
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {
       if (this.configProps$.required != null) {
@@ -140,7 +146,7 @@ export class TextAreaComponent implements OnInit, OnDestroy {
       this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
     }
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
 
     // trigger display of error message with field control
     if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
@@ -153,14 +159,15 @@ export class TextAreaComponent implements OnInit, OnDestroy {
     }
   }
 
-  fieldOnChange(event: any) {
-    // PConnect wants to use changeHandler for onChange
-    this.angularPConnectData.actions?.onChange(this, event);
+  fieldOnChange() {
+    this.pConn$.clearErrorMessages({
+      property: this.propName
+    });
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const value = event?.target?.value;
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
   }
 
   getErrorMessage() {

package/tests/assets/sdk-a/components/create/override-sdk/field/text-input/text-input.component.html

@@ -14,7 +14,7 @@
           [required]="bRequired$"
           [attr.data-test-id]="testId"
           [formControl]="fieldControl"
-          (change)="fieldOnChange($event)"
+          (change)="fieldOnChange()"
           (blur)="fieldOnBlur($event)"
         />
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>

package/tests/assets/sdk-a/components/create/override-sdk/field/text-input/text-input.component.ts

@@ -8,6 +8,7 @@ import { AngularPConnectService, AngularPConnectData } from '@pega/angular-sdk-c
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 
 interface TextInputProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextInput here
@@ -44,6 +45,8 @@ export class TextInputComponent implements OnInit, OnDestroy {
   placeholder: string;
 
   fieldControl = new FormControl('', null);
+  actionsApi: Object;
+  propName: string;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -113,7 +116,10 @@ export class TextInputComponent implements OnInit, OnDestroy {
     this.label$ = this.configProps$.label;
     this.displayMode$ = this.configProps$.displayMode;
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
+
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = this.pConn$.getStateProps().value;
 
     if (this.configProps$.visibility != null) {
       this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
@@ -155,13 +161,15 @@ export class TextInputComponent implements OnInit, OnDestroy {
     }
   }
 
-  fieldOnChange(event: any) {
-    this.angularPConnectData.actions?.onChange(this, event);
+  fieldOnChange() {
+    this.pConn$.clearErrorMessages({
+      property: this.propName
+    });
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const value = event?.target?.value;
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
   }
 
   getErrorMessage() {

package/tests/assets/sdk-a/components/create/override-sdk/field/time/time.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$: formattedValue$, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
@@ -14,7 +14,7 @@
           [required]="bRequired$"
           [attr.data-test-id]="testId"
           [formControl]="fieldControl"
-          (change)="fieldOnChange($event)"
+          (change)="fieldOnChange()"
           (blur)="fieldOnBlur($event)"
         />
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>

package/tests/assets/sdk-a/components/create/override-sdk/field/time/time.component.ts

@@ -8,6 +8,8 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
+import { format } from '@pega/angular-sdk-components';
 
 interface TimeProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Time here
@@ -43,6 +45,9 @@ export class TimeComponent implements OnInit, OnDestroy {
   placeholder: string;
 
   fieldControl = new FormControl('', null);
+  actionsApi: Object;
+  propName: string;
+  formattedValue$: any;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -111,6 +116,9 @@ export class TimeComponent implements OnInit, OnDestroy {
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
 
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = this.pConn$.getStateProps().value;
+
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {
       if (this.configProps$.required != null) {
@@ -119,6 +127,12 @@ export class TimeComponent implements OnInit, OnDestroy {
       this.cdRef.detectChanges();
     });
 
+    if (this.displayMode$ === 'DISPLAY_ONLY' || this.displayMode$ === 'STACKED_LARGE_VAL') {
+      this.formattedValue$ = format(this.value$, 'timeonly', {
+        format: 'hh:mm A'
+      });
+    }
+
     if (this.configProps$.visibility != null) {
       this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
     }
@@ -138,7 +152,7 @@ export class TimeComponent implements OnInit, OnDestroy {
       this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
     }
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
 
     // trigger display of error message with field control
     if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
@@ -151,15 +165,15 @@ export class TimeComponent implements OnInit, OnDestroy {
     }
   }
 
-  fieldOnChange(event: any) {
-    event.value = event.target.value;
-    this.angularPConnectData.actions?.onChange(this, event);
+  fieldOnChange() {
+    this.pConn$.clearErrorMessages({
+      property: this.propName
+    });
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    event.value = event.target.value;
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const value = event?.target?.value;
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
   }
 
   getErrorMessage() {

package/tests/assets/sdk-a/components/create/override-sdk/field/url/url.component.html

@@ -14,7 +14,7 @@
           [required]="bRequired$"
           [attr.data-test-id]="testId"
           [formControl]="fieldControl"
-          (change)="fieldOnChange($event)"
+          (change)="fieldOnChange()"
           (blur)="fieldOnBlur($event)"
         />
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>

package/tests/assets/sdk-a/components/create/override-sdk/field/url/url.component.ts

@@ -8,6 +8,7 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 
 interface URLProps extends PConnFieldProps {
   // If any, enter additional props that only exist on URL here
@@ -43,6 +44,8 @@ export class UrlComponent implements OnInit, OnDestroy {
   placeholder: string;
 
   fieldControl = new FormControl('', null);
+  actionsApi: Object;
+  propName: string;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -113,6 +116,9 @@ export class UrlComponent implements OnInit, OnDestroy {
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
 
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = this.pConn$.getStateProps().value;
+
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {
       if (this.configProps$.required != null) {
@@ -140,7 +146,7 @@ export class UrlComponent implements OnInit, OnDestroy {
       this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
     }
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
 
     // trigger display of error message with field control
     if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
@@ -153,13 +159,15 @@ export class UrlComponent implements OnInit, OnDestroy {
     }
   }
 
-  fieldOnChange(event: any) {
-    this.angularPConnectData.actions?.onChange(this, event);
+  fieldOnChange() {
+    this.pConn$.clearErrorMessages({
+      property: this.propName
+    });
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const value = event?.target?.value;
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
   }
 
   getErrorMessage() {

package/tests/assets/sdk-a/components/create/override-sdk/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/tests/assets/sdk-a/components/create/override-sdk/field/user-reference/user-reference.component.ts

@@ -11,6 +11,7 @@ import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 import { map, Observable, startWith } from 'rxjs';
+import { handleEvent } from '@pega/angular-sdk-components';
 
 const OPERATORS_DP = 'D_pyGetOperatorsForCurrentApplication';
 const DROPDOWN_LIST = 'Drop-down list';
@@ -22,6 +23,7 @@ interface UserReferenceProps extends Omit<PConnFieldProps, 'value'> {
   value?: any;
   showAsFormattedText?: boolean;
   additionalProps?: object;
+  onRecordChange?: any;
 }
 
 @Component({
@@ -63,6 +65,9 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
   filterValue = '';
 
   fieldControl = new FormControl('', null);
+  actionsApi: Object;
+  propName: string;
+  onRecordChange: any;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -80,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 || ''))
     );
   }
@@ -123,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)
@@ -137,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;
 
@@ -147,17 +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'));
 
-    const isUserNameAvailable = user => {
-      return typeof user === 'object' && user !== null && user.userName;
-    };
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = this.pConn$.getStateProps().value;
 
     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
@@ -174,7 +196,7 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
         dataViewName: OPERATORS_DP
       };
       try {
-        const resp: any = await PCore.getRestClient().invokeRestApi('getListData', { queryPayload } as any, ''); // 3rd arg empty string until typedef marked correctly
+        const resp = await PCore.getRestClient().invokeRestApi('getListData', { queryPayload }, ''); // 3rd arg empty string until typedef marked correctly
         if (resp?.data) {
           const ddDataSource = resp.data.data.map(listItem => ({
             key: listItem.pyUserIdentifier,
@@ -195,7 +217,13 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     if (event?.target) {
       this.filterValue = (event.target as HTMLInputElement).value;
     }
-    this.angularPConnectData.actions?.onChange(this, event);
+    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);
   }
 
   fieldOnBlur(event: any) {
@@ -204,12 +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 eve = {
-      value: key
-    };
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onChange(this, eve);
+    const value = key;
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+    if (this.onRecordChange) {
+      event.target.value = value;
+      this.onRecordChange(event);
+    }
   }
 
   getErrorMessage() {

package/tests/assets/sdk-a/components/create/override-sdk/infra/assignment/assignment.component.ts

@@ -332,7 +332,6 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
 
           savePromise
             .then(() => {
-              // @ts-ignore - Property 'c11nEnv' is private and only accessible within class 'CaseInfo'.
               const caseType = this.pConn$.getCaseInfo().c11nEnv.getValue(PCore.getConstants().CASE_INFO.CASE_TYPE_ID);
               PCore.getPubSubUtils().publish('cancelPressed');
               this.onSaveActionSuccess({ caseType, caseID, assignmentID });

package/tests/assets/sdk-a/components/create/override-sdk/infra/defer-load/defer-load.component.ts

@@ -81,7 +81,7 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
     this.resourceType = resourceType;
     this.isContainerPreview = /preview_[0-9]*/g.test(this.pConn$.getContextName());
 
-    const theConfigProps: any = this.pConn$.getConfigProps();
+    const theConfigProps = this.pConn$.getConfigProps();
     this.deferLoadId = theConfigProps.deferLoadId;
     this.name = this.name || theConfigProps.name;
 
@@ -91,8 +91,8 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
   getViewOptions = () => ({
     viewContext: this.resourceType,
     pageClass: this.loadViewCaseID ? '' : this.pConn$.getDataObject().pyPortal.classID,
-    container: this.isContainerPreview ? 'preview' : null,
-    containerName: this.isContainerPreview ? 'preview' : null,
+    container: this.isContainerPreview ? 'preview' : undefined,
+    containerName: this.isContainerPreview ? 'preview' : undefined,
     updateData: this.isContainerPreview
   });
 
@@ -116,7 +116,7 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
         }
       };
       const configObject = PCore.createPConnect(config);
-      configObject.getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+      configObject.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
       this.loadedPConn$ = ReferenceComponent.normalizePConn(configObject.getPConnect());
       this.componentName$ = this.loadedPConn$.getComponentName();
       if (this.deferLoadId) {

package/tests/assets/sdk-a/components/create/override-sdk/infra/flow-container/flow-container.component.html

@@ -38,7 +38,7 @@
       </div>
     </mat-card>
   </div>
-  <div *ngIf="bShowBanner && bShowConfirm">
+  <div *ngIf="bShowBanner && bShowConfirm && confirm_pconn">
     <component-mapper name="View" [props]="{ formGroup$, pConn$: confirm_pconn }"></component-mapper>
   </div>
 </div>

package/tests/assets/sdk-a/components/create/override-sdk/infra/flow-container/flow-container.component.ts

@@ -104,6 +104,8 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
 
     this.initContainer();
 
+    this.checkAndUpdate();
+
     PCore.getPubSubUtils().subscribe(
       PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL,
       () => {
@@ -198,7 +200,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
   }
 
   initContainer() {
-    const containerMgr: any = this.pConn$.getContainerManager();
+    const containerMgr = this.pConn$.getContainerManager();
     const baseContext = this.pConn$.getContextName();
     const containerName = this.pConn$.getContainerName();
     const containerType = 'single';
@@ -237,7 +239,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
 
     // when true, update arChildren from pConn, otherwise, arChilren will be updated in updateSelf()
     if (bLoadChildren) {
-      this.arChildren$ = this.pConn$.getChildren() as any[];
+      this.arChildren$ = this.pConn$.getChildren();
     }
 
     // const oData = this.pConn$.getDataObject();
@@ -277,7 +279,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
 
   hasAssignments() {
     let hasAssignments = false;
-    const assignmentsList: any[] = this.pConn$.getValue(this.pCoreConstants.CASE_INFO.D_CASE_ASSIGNMENTS_RESULTS);
+    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
@@ -312,7 +314,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
 
   isCaseWideLocalAction() {
     const actionID = this.pConn$.getValue(this.pCoreConstants.CASE_INFO.ACTIVE_ACTION_ID);
-    const caseActions = this.pConn$.getValue(this.pCoreConstants.CASE_INFO.AVAILABLEACTIONS) as any[];
+    const caseActions = this.pConn$.getValue(this.pCoreConstants.CASE_INFO.AVAILABLEACTIONS);
     let bCaseWideAction = false;
     if (caseActions && actionID) {
       const actionObj = caseActions.find(caseAction => caseAction.ID === actionID);
@@ -457,7 +459,9 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
 
   showCaseMessages() {
     this.caseMessages$ = this.localizedVal(this.pConn$.getValue('caseMessages'), this.localeCategory);
-    if (this.caseMessages$ || !this.hasAssignments()) {
+    // 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()) {
       this.bHasCaseMessages$ = true;
       this.bShowConfirm = true;
       this.checkSvg$ = this.utils.getImageSrc('check', this.utils.getSDKStaticContentUrl());
@@ -480,6 +484,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
   updateFlowContainerChildren() {
     // routingInfo was added as component prop in populateAdditionalProps
     const routingInfo = this.angularPConnect.getComponentProp(this, 'routingInfo');
+    this.confirm_pconn = null;
 
     let loadingInfo: any;
     try {
@@ -593,7 +598,6 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
     });
   }
 
-  // eslint-disable-next-line sonarjs/no-identical-functions
   topViewRefresh(): void {
     Object.values(this.formGroup$.controls).forEach(control => {
       control.markAsTouched();

package/tests/assets/sdk-a/components/create/override-sdk/infra/modal-view-container/modal-view-container.component.ts

@@ -89,7 +89,7 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
       this.itemKey$ = baseContext.concat('/').concat(acName);
     }
 
-    const containerMgr: any = this.pConn$.getContainerManager();
+    const containerMgr = this.pConn$.getContainerManager();
 
     containerMgr.initializeContainers({
       type: 'multiple'

package/tests/assets/sdk-a/components/create/override-sdk/infra/navbar/navbar.component.ts

@@ -36,11 +36,11 @@ export class NavbarComponent implements OnInit, OnDestroy {
   navExpandCollapse$: string;
   bShowCaseTypes$ = false;
 
-  portalApp$ = '';
+  portalApp$: string | undefined = '';
   portalLogoImage$: string;
   showAppName$?: boolean = false;
 
-  portalOperator$: string;
+  portalOperator$: string | undefined;
   portalOperatorInitials$: string;
 
   actionsAPI: any;
@@ -131,7 +131,7 @@ export class NavbarComponent implements OnInit, OnDestroy {
 
       this.portalLogoImage$ = this.utils.getSDKStaticContentUrl().concat('assets/pzpega-logo-mark.svg');
       this.portalOperator$ = PCore.getEnvironmentInfo().getOperatorName();
-      this.portalOperatorInitials$ = this.utils.getInitials(this.portalOperator$);
+      this.portalOperatorInitials$ = this.utils.getInitials(this.portalOperator$ ?? '');
       this.showAppName$ = this.configProps$.showAppName;
 
       this.portalApp$ = PCore.getEnvironmentInfo().getApplicationLabel();

package/tests/assets/sdk-a/components/create/override-sdk/infra/preview-view-container/preview-view-container.component.ts

@@ -18,7 +18,7 @@ export class PreviewViewContainerComponent implements OnInit {
   @Input() pConn$: typeof PConnect;
 
   ngOnInit(): void {
-    const containerMgr: any = this.pConn$.getContainerManager();
+    const containerMgr = this.pConn$.getContainerManager();
 
     containerMgr.initializeContainers({
       type: 'multiple'