@pega/angular-sdk-components 0.24.2 → 0.24.3

package/fesm2022/pega-angular-sdk-components.mjs

@@ -1425,8 +1425,8 @@ class AssignmentComponent {
                     const savePromise = this.saveAssignment(this.itemKey$);
                     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);
-                        // @ts-ignore - second parameter “payload” for publish method should be optional
                         PCore.getPubSubUtils().publish('cancelPressed');
                         this.onSaveActionSuccess({ caseType, caseID, assignmentID });
                     })
@@ -1439,12 +1439,8 @@ class AssignmentComponent {
                 case 'cancelAssignment':
                     this.bReInit = true;
                     this.erService.sendMessage('dismiss', '');
-                    // @ts-ignore - Property 'isAssignmentInCreateStage' is private and only accessible within class 'CaseInfo'
                     const isAssignmentInCreateStage = this.pConn$.getCaseInfo().isAssignmentInCreateStage();
-                    const isLocalAction = 
-                    // @ts-ignore - Property 'isLocalAction' is private and only accessible within class 'CaseInfo'.
-                    this.pConn$.getCaseInfo().isLocalAction() ||
-                        // @ts-ignore - second parameter pageReference for getValue method should be optional
+                    const isLocalAction = this.pConn$.getCaseInfo().isLocalAction() ||
                         (PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION && this.pConn$.getValue(PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION));
                     // check if create stage (modal)
                     if (isAssignmentInCreateStage && this.isInModal$ && !isLocalAction) {
@@ -1464,13 +1460,11 @@ class AssignmentComponent {
                         this.psService.sendMessage(true);
                         // publish before cancel pressed, because
                         // cancel assignment happens "after" cancel assignment happens
-                        // @ts-ignore - second parameter “payload” for publish method should be optional
                         PCore.getPubSubUtils().publish('cancelPressed');
                         const cancelPromise = this.cancelAssignment(this.itemKey$);
                         cancelPromise
                             .then(() => {
                             this.psService.sendMessage(false);
-                            // @ts-ignore - second parameter “payload” for publish method should be optional
                             PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL);
                         })
                             .catch(() => {
@@ -1688,7 +1682,6 @@ class DashboardFilterComponent {
     }
     clearFilters() {
         this.filtersFormGroup$.reset();
-        // @ts-ignore - second parameter “payload” for publish method should be optional
         PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL);
     }
     updateTmpData(filterData) {
@@ -1759,7 +1752,6 @@ class DeferLoadComponent {
         this.currentLoadedAssignment = '';
         this.getViewOptions = () => ({
             viewContext: this.resourceType,
-            // @ts-ignore - parameter “contextName” for getDataObject method should be optional
             pageClass: this.loadViewCaseID ? '' : this.pConn$.getDataObject().pyPortal.classID,
             container: this.isContainerPreview ? 'preview' : null,
             containerName: this.isContainerPreview ? 'preview' : null,
@@ -1769,7 +1761,8 @@ class DeferLoadComponent {
     }
     ngOnInit() {
         this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
-        this.loadActiveTab();
+        // The below call is causing an error while creating/opening a case, hence commenting it out
+        // this.loadActiveTab();
     }
     ngOnDestroy() {
         if (this.angularPConnectData.unsubscribeFn) {
@@ -1779,7 +1772,6 @@ class DeferLoadComponent {
     onStateChange() {
         // Should always check the bridge to see if the component should
         // update itself (re-render)
-        // @ts-ignore - second parameter pageReference for getValue method should be optional
         const theRequestedAssignment = this.pConn$.getValue(PCore.getConstants().CASE_INFO.ASSIGNMENT_LABEL);
         if (theRequestedAssignment !== this.currentLoadedAssignment) {
             this.currentLoadedAssignment = theRequestedAssignment;
@@ -1787,7 +1779,6 @@ class DeferLoadComponent {
         }
     }
     ngOnChanges() {
-        // @ts-ignore - second parameter pageReference for getValue method should be optional
         this.loadViewCaseID = this.pConn$.getValue(this.constants.PZINSKEY) || this.pConn$.getValue(this.constants.CASE_INFO.CASE_INFO_ID);
         let containerItemData;
         const targetName = this.pConn$.getTarget();
@@ -1838,9 +1829,8 @@ class DeferLoadComponent {
                 this.pConn$
                     .getActionsApi()
                     .showData(this.name, dataContext, dataContextParameters, {
-                    // @ts-ignore - skipSemanticUrl should be boolean type
                     skipSemanticUrl: true,
-                    // @ts-ignore
+                    // @ts-ignore - Object literal may only specify known properties, and 'isDeferLoaded' does not exist in type '{ containerName: string; skipSemanticUrl: boolean; }'
                     isDeferLoaded: true
                 })
                     .then(data => {
@@ -1863,8 +1853,8 @@ class DeferLoadComponent {
         else {
             this.pConn$
                 .getActionsApi()
-                .refreshCaseView(encodeURI(this.loadViewCaseID), this.name, null)
-                .then(data => {
+                .refreshCaseView(encodeURI(this.loadViewCaseID), this.name, '')
+                .then((data) => {
                 this.onResponse(data.root);
             });
         }
@@ -2062,7 +2052,6 @@ class FlowContainerComponent {
         });
     }
     getTodoVisibilty() {
-        // @ts-ignore - second parameter pageReference for getValue method should be optional
         const caseViewMode = this.pConn$.getValue('context_data.caseViewMode');
         if (caseViewMode && caseViewMode === 'review') {
             const kid = this.pConn$.getChildren()[0];
@@ -2135,7 +2124,6 @@ class FlowContainerComponent {
     }
     hasAssignments() {
         let hasAssignments = false;
-        // @ts-ignore - second parameter pageReference for getValue method should be optional
         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
@@ -2165,9 +2153,7 @@ class FlowContainerComponent {
         return hasAssignments;
     }
     isCaseWideLocalAction() {
-        // @ts-ignore - second parameter pageReference for getValue method should be optional
         const actionID = this.pConn$.getValue(this.pCoreConstants.CASE_INFO.ACTIVE_ACTION_ID);
-        // @ts-ignore - second parameter pageReference for getValue method should be optional
         const caseActions = this.pConn$.getValue(this.pCoreConstants.CASE_INFO.AVAILABLEACTIONS);
         let bCaseWideAction = false;
         if (caseActions && actionID) {
@@ -2179,16 +2165,13 @@ class FlowContainerComponent {
         return bCaseWideAction;
     }
     hasChildCaseAssignments() {
-        // @ts-ignore - second parameter pageReference for getValue method should be optional
         const childCases = this.pConn$.getValue(this.pCoreConstants.CASE_INFO.CHILD_ASSIGNMENTS);
         return childCases && childCases.length > 0;
     }
     getActiveViewLabel() {
         let activeActionLabel = '';
         const { CASE_INFO: CASE_CONSTS } = PCore.getConstants();
-        // @ts-ignore - second parameter pageReference for getValue method should be optional
         const caseActions = this.pConn$.getValue(CASE_CONSTS.CASE_INFO_ACTIONS);
-        // @ts-ignore - second parameter pageReference for getValue method should be optional
         const activeActionID = this.pConn$.getValue(CASE_CONSTS.ACTIVE_ACTION_ID);
         const activeAction = caseActions?.find(action => action.ID === activeActionID);
         if (activeAction) {
@@ -2224,7 +2207,6 @@ class FlowContainerComponent {
         // for now
         // const { getPConnect } = this.arChildren$[0].getPConnect();
         const localPConn = this.arChildren$[0].getPConnect();
-        // @ts-ignore - second parameter pageReference for getValue method should be optional
         const caseViewMode = this.pConn$.getValue('context_data.caseViewMode');
         this.bShowBanner = showBanner(this.pConn$);
         if (caseViewMode && caseViewMode == 'review') {
@@ -2270,7 +2252,6 @@ class FlowContainerComponent {
                   */
                 const todoAssignments = getToDoAssignments(this.pConn$);
                 if (todoAssignments && todoAssignments.length > 0) {
-                    // @ts-ignore - second parameter pageReference for getValue method should be optional
                     this.todo_caseInfoID$ = this.pConn$.getValue(CASE_CONSTS.CASE_INFO_ID);
                     this.todo_datasource$ = { source: todoAssignments };
                 }
@@ -2290,7 +2271,6 @@ class FlowContainerComponent {
         });
     }
     showCaseMessages() {
-        // @ts-ignore - second parameter pageReference for getValue method should be optional
         this.caseMessages$ = this.localizedVal(this.pConn$.getValue('caseMessages'), this.localeCategory);
         if (this.caseMessages$ || !this.hasAssignments()) {
             this.bHasCaseMessages$ = true;
@@ -2302,7 +2282,6 @@ class FlowContainerComponent {
                 this.caseMessages$ = this.localizedVal('Thank you! The next step in this case has been routed appropriately.', this.localeCategory);
             }
             // publish this "assignmentFinished" for mashup, need to get approved as a standard
-            // @ts-ignore - second parameter “payload” for publish method should be optional
             PCore.getPubSubUtils().publish('assignmentFinished');
             this.psService.sendMessage(false);
         }
@@ -2387,7 +2366,6 @@ class FlowContainerComponent {
             this.arChildren$.push(normalizedConfigObjectAsPConnect);
             this.psService.sendMessage(false);
             const oWorkItem = configObject.getPConnect();
-            // @ts-ignore - parameter “contextName” for getDataObject method should be optional
             const oWorkData = oWorkItem.getDataObject();
             this.containerName$ = this.localizedVal(this.getActiveViewLabel() || oWorkData.caseInfo.assignments?.[0].name, undefined, this.localeReference);
         });
@@ -2663,7 +2641,6 @@ class ModalViewContainerComponent {
         const configObject = this.getConfigObject(currentItem, this.pConn$);
         const newComp = configObject?.getPConnect();
         // const newCompName = newComp.getComponentName();
-        // @ts-ignore - parameter “contextName” for getDataObject method should be optional
         const caseInfo = newComp && newComp.getDataObject() && newComp.getDataObject().caseInfo ? newComp.getDataObject().caseInfo : null;
         // The metadata for pyDetails changed such that the "template": "CaseView"
         //  is no longer a child of the created View but is in the created View's
@@ -2958,7 +2935,6 @@ class NavbarComponent {
             this.navPages$.forEach(page => {
                 page.iconName = this.utils.getImageSrc(page.pxPageViewIcon, this.utils.getSDKStaticContentUrl());
             });
-            // @ts-ignore - second parameter pageReference for getValue method should be optional
             this.localeReference = this.pConn$.getValue('.pyLocaleReference');
             this.actionsAPI = this.pConn$.getActionsApi();
             this.createWork = this.actionsAPI.createWork.bind(this.actionsAPI);
@@ -3725,7 +3701,6 @@ class ViewContainerComponent {
             }
         }
         if (sessionStorage.getItem('hasViewContainer') == 'false') {
-            // @ts-ignore - Property 'getMetadata' is private and only accessible within class
             if (this.pConn$.getMetadata().children) {
                 containerMgr.addContainerItem(this.dispatchObject);
             }
@@ -4315,7 +4290,6 @@ class CancelAlertComponent {
                     .then(() => {
                     this.psService.sendMessage(false);
                     this.dismissAlert();
-                    // @ts-ignore - second parameter “payload” for publish method should be optional
                     PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CASE_CREATED);
                 })
                     .catch(() => {
@@ -4334,7 +4308,6 @@ class CancelAlertComponent {
                     .then(() => {
                     this.psService.sendMessage(false);
                     this.dismissAlert();
-                    // @ts-ignore - second parameter “payload” for publish method should be optional
                     PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL);
                 })
                     .catch(() => {
@@ -6766,7 +6739,6 @@ class DropdownComponent {
             this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
         }
         this.componentReference = this.pConn$.getStateProps().value;
-        // @ts-ignore - parameter “contextName” for getDataObject method should be optional
         const optionsList = [...this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject())];
         optionsList?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
         this.options$ = optionsList;
@@ -6784,9 +6756,7 @@ class DropdownComponent {
         this.localeClass = this.localeContext === 'datapage' ? '@baseclass' : className;
         this.localeName = this.localeContext === 'datapage' ? metaData?.datasource?.name : refName;
         this.localePath = this.localeContext === 'datapage' ? displayName : this.localeName;
-        this.localizedValue = this.pConn$.getLocalizedValue(this.value$, this.localePath, 
-        // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'.
-        this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName));
+        this.localizedValue = this.pConn$.getLocalizedValue(this.value$, this.localePath, this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName));
         // trigger display of error message with field control
         if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
             const timer = interval(100).subscribe(() => {
@@ -6815,9 +6785,7 @@ class DropdownComponent {
         this.angularPConnectData.actions?.onBlur(this, event);
     }
     getLocalizedOptionValue(opt) {
-        return this.pConn$.getLocalizedValue(opt.value, this.localePath, 
-        // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'.
-        this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName));
+        return this.pConn$.getLocalizedValue(opt.value, this.localePath, this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName));
     }
     getErrorMessage() {
         let errMessage = '';
@@ -7630,7 +7598,6 @@ class RadioButtonsComponent {
             this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
         }
         this.componentReference = this.pConn$.getStateProps().value;
-        // @ts-ignore - parameter “contextName” for getDataObject method should be optional
         this.options$ = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject());
         const propName = this.pConn$.getStateProps().value;
         const className = this.pConn$.getCaseInfo().getClassName();
@@ -7643,9 +7610,7 @@ class RadioButtonsComponent {
         this.localeClass = this.localeContext === 'datapage' ? '@baseclass' : className;
         this.localeName = this.localeContext === 'datapage' ? metaData?.datasource?.name : refName;
         this.localePath = this.localeContext === 'datapage' ? displayName : this.localeName;
-        this.localizedValue = this.pConn$.getLocalizedValue(this.value$, this.localePath, 
-        // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
-        this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName));
+        this.localizedValue = this.pConn$.getLocalizedValue(this.value$, this.localePath, this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName));
         // trigger display of error message with field control
         if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
             const timer = interval(100).subscribe(() => {
@@ -7666,9 +7631,7 @@ class RadioButtonsComponent {
         this.angularPConnectData.actions?.onBlur(this, event);
     }
     getLocalizedOptionValue(opt) {
-        return this.pConn$.getLocalizedValue(opt.value, this.localePath, 
-        // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
-        this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName));
+        return this.pConn$.getLocalizedValue(opt.value, this.localePath, this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName));
     }
     getErrorMessage() {
         let errMessage = '';
@@ -7812,8 +7775,6 @@ class TextAreaComponent {
         if (this.configProps$.value != undefined) {
             this.value$ = this.configProps$.value;
         }
-        // @ts-ignore -  Property 'getFieldMetadata' is private and only accessible within class 'C11nEnv'.
-        // @ts-ignore - Property 'getRawConfigProps' is private and only accessible within class 'C11nEnv'
         this.nMaxLength$ = this.pConn$.getFieldMetadata(this.pConn$.getRawConfigProps()?.value)?.maxLength || 100;
         this.testId = this.configProps$.testId;
         this.displayMode$ = this.configProps$.displayMode;
@@ -8729,11 +8690,12 @@ class ScalarListComponent {
             return this.pConn$.createComponent({
                 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',
                     label: this.label$,
                     ...restProps,
-                    readOnly: 'true'
+                    readOnly: true
                 }
             }, '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional;
         });
@@ -9166,9 +9128,7 @@ class CaseViewComponent {
         }
     }
     hasCaseIDChanged() {
-        // @ts-ignore - parameter “contextName” for getDataObject method should be optional
         if (this.currentCaseID !== this.pConn$.getDataObject().caseInfo.ID) {
-            // @ts-ignore - parameter “contextName” for getDataObject method should be optional
             this.currentCaseID = this.pConn$.getDataObject().caseInfo.ID;
             return true;
         }
@@ -9176,12 +9136,10 @@ class CaseViewComponent {
     }
     updateHeaderAndSummary() {
         this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
-        // @ts-ignore - parameter “contextName” for getDataObject method should be optional
         const hasNewAttachments = this.pConn$.getDataObject().caseInfo?.hasNewAttachments;
         if (hasNewAttachments !== this.bHasNewAttachments) {
             this.bHasNewAttachments = hasNewAttachments;
             if (this.bHasNewAttachments) {
-                // @ts-ignore - Argument of type 'boolean' is not assignable to parameter of type 'object'
                 PCore.getPubSubUtils().publish(PCore.getEvents().getCaseEvent().CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW, true);
             }
         }
@@ -9197,7 +9155,6 @@ class CaseViewComponent {
             timer.unsubscribe();
             this.heading$ = PCore.getLocaleUtils().getLocaleValue(this.configProps$.header, '', this.localeKey);
             this.id$ = this.configProps$.subheader;
-            // @ts-ignore - second parameter pageReference for getValue method should be optional
             this.status$ = this.pConn$.getValue('.pyStatusWork');
         });
     }
@@ -9210,7 +9167,6 @@ class CaseViewComponent {
         this.localeKey = `${this.pConn$.getCaseInfo().getClassName()}!CASE!${this.pConn$.getCaseInfo().getName()}`.toUpperCase();
         this.updateHeaderAndSummary();
         this.arChildren$ = this.pConn$.getChildren();
-        // @ts-ignore - parameter “contextName” for getDataObject method should be optional
         const caseInfo = this.pConn$.getDataObject().caseInfo;
         this.currentCaseID = caseInfo.ID;
         this.arAvailableActions$ = caseInfo?.availableActions ? caseInfo.availableActions : [];
@@ -9279,11 +9235,11 @@ class CaseViewComponent {
         openProcessAction(data.ID, { ...data });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CaseViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AngularPConnectService }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CaseViewComponent, isStandalone: true, selector: "app-case-view", inputs: { pConn$: "pConn$", formGroup$: "formGroup$", displayOnlyFA$: "displayOnlyFA$" }, providers: [Utils], ngImport: i0, template: "<div class=\"psdk-case-view\" id=\"case-view\">\n  <div *ngIf=\"!displayOnlyFA$\" class=\"psdk-case-view-info\">\n    <mat-toolbar color=\"primary\" class=\"psdk-case-view-toolbar\">\n      <mat-toolbar-row style=\"padding-left: 1rem\">\n        <div class=\"psdk-case-icon-div\">\n          <img class=\"psdk-case-svg-icon\" src=\"{{ svgCase$ }}\" />\n        </div>\n        <div class=\"psdk-case-view-heading\">\n          <div id=\"current-caseID\" [hidden]=\"true\">{{ currentCaseID }}</div>\n          <div class=\"psdk-case-view-heading-id\" id=\"caseId\">{{ id$ }}</div>\n          <div>\n            <h1 id=\"case-name\">{{ heading$ }}</h1>\n          </div>\n        </div>\n      </mat-toolbar-row>\n    </mat-toolbar>\n\n    <div class=\"psdk-case-view-buttons\">\n      <button *ngIf=\"editAction\" mat-raised-button color=\"secondary\" (click)=\"_editClick()\">{{ localizedVal('Edit', localeCategory) }}</button>\n      <button mat-raised-button color=\"secondary\" [matMenuTriggerFor]=\"actionMenu\">{{ localizedVal('Actions...', localeCategory) }}</button>\n      <mat-menu #actionMenu=\"matMenu\" overlapTrigger=\"false\">\n        <ng-container *ngFor=\"let action of arAvailableActions$\">\n          <button mat-menu-item (click)=\"_menuActionClick(action)\">\n            {{ localizedVal(action.name, '', localeKey) }}\n          </button>\n        </ng-container>\n        <ng-container *ngFor=\"let process of arAvailabeProcesses$\">\n          <button mat-menu-item (click)=\"_menuProcessClick(process)\">\n            {{ process.name }}\n          </button>\n        </ng-container>\n      </mat-menu>\n    </div>\n\n    <div class=\"psdk-case-view-divider\"></div>\n\n    <div class=\"psdk-case-view-summary\">\n      <component-mapper name=\"CaseSummary\" [props]=\"{ pConn$: caseSummaryPConn$ }\"></component-mapper>\n    </div>\n\n    <component-mapper\n      *ngIf=\"caseTabs$.length > 1\"\n      name=\"VerticalTabs\"\n      [props]=\"{ tabConfig$: caseTabs$ }\"\n      [parent]=\"this\"\n      [outputEvents]=\"{ tabClick: onTabClick }\"\n    ></component-mapper>\n  </div>\n  <div class=\"psdk-case-view-main\">\n    <div *ngIf=\"!displayOnlyFA$\">\n      <div *ngFor=\"let kid of arChildren$\">\n        <div\n          *ngIf=\"\n            kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'stages'\n          \"\n        >\n          <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n        </div>\n      </div>\n    </div>\n\n    <div *ngFor=\"let kid of arChildren$\">\n      <div\n        *ngIf=\"kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'todo'\"\n      >\n        <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n      </div>\n    </div>\n\n    <div *ngFor=\"let kid of arChildren$\">\n      <div *ngIf=\"kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name == 'Main'\">\n        <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n      </div>\n    </div>\n\n    <div *ngIf=\"!displayOnlyFA$\">\n      <component-mapper name=\"DeferLoad\" [props]=\"{ pConn$, loadData$: tabData$, name: tabData$?.config?.name }\"></component-mapper>\n    </div>\n  </div>\n  <div *ngIf=\"!displayOnlyFA$\">\n    <div *ngIf=\"arChildren$\" class=\"psdk-case-view-utilities\">\n      <div *ngFor=\"let kid of arChildren$\">\n        <div *ngIf=\"kid.getPConnect().getRawMetadata()?.type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata()?.name == 'Utilities'\">\n          <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["h1{font-size:1.1rem;line-height:1.3rem}::ng-deep .mat-mdc-menu-panel{overflow:unset;max-width:unset}.psdk-case-view-label{font-size:1rem;display:block;transform:translateY(.2em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(.2em) scale(.75);width:133.33333%;border-radius:.6125rem}.psdk-case-view{box-sizing:border-box;display:flex}.ng-case-view-toolbar{padding:.625rem}.psdk-case-icon-div{background-color:var(--app-primary-dark-color);border-radius:1rem;padding:.5rem .3rem .3rem}.psdk-case-svg-icon{width:2rem;padding:0rem .3125rem;filter:var(--app-white-color-filter)}.psdk-case-view-info-box{display:flex;flex-direction:row;padding:0rem .3125rem 0rem 0rem}.psdk-case-view-info{flex:0 0 auto;width:25rem;float:left;padding:0rem .3125rem 0rem 0rem;height:100%;background-color:var(--app-form-color)}.psdk-case-view-main{flex-grow:2;float:left;padding:0rem .3125rem;height:100%}.psdk-case-view-summary{padding-left:.75rem}.psdk-case-view-heading{display:block;text-align:left;padding-left:.5rem;padding-bottom:0;padding-top:5px}.psdk-case-view-heading-id{font-size:.9rem;font-weight:400}.psdk-case-view-buttons{display:flex;justify-content:flex-start;padding:.3125rem}.psdk-case-view-utilities{width:21.875rem;float:left;padding:0rem .3125rem;height:100%}.psdk-case-view-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-status{padding:.3125rem;background-color:var(--app-primary-color);color:var(--app-form-color);width:fit-content;margin:.625rem}button{margin:0rem .3125rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatToolbarModule) }, { kind: "component", type: i0.forwardRef(() => i4$4.MatToolbar), selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i0.forwardRef(() => i4$4.MatToolbarRow), selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i3$1.MatButton), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatMenuModule) }, { kind: "component", type: i0.forwardRef(() => i6$1.MatMenu), selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(() => i6$1.MatMenuItem), selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(() => i6$1.MatMenuTrigger), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CaseViewComponent, isStandalone: true, selector: "app-case-view", inputs: { pConn$: "pConn$", formGroup$: "formGroup$", displayOnlyFA$: "displayOnlyFA$" }, providers: [Utils], ngImport: i0, template: "<div class=\"psdk-case-view\" id=\"case-view\">\n  <div *ngIf=\"!displayOnlyFA$\" class=\"psdk-case-view-info\">\n    <mat-toolbar color=\"primary\" class=\"psdk-case-view-toolbar\">\n      <mat-toolbar-row style=\"padding-left: 1rem\">\n        <div class=\"psdk-case-icon-div\">\n          <img class=\"psdk-case-svg-icon\" src=\"{{ svgCase$ }}\" />\n        </div>\n        <div class=\"psdk-case-view-heading\">\n          <div>\n            <h1 id=\"case-name\">{{ heading$ }}</h1>\n          </div>\n          <div id=\"current-caseID\" [hidden]=\"true\">{{ currentCaseID }}</div>\n          <div class=\"psdk-case-view-heading-id\" id=\"caseId\">{{ id$ }}</div>\n        </div>\n      </mat-toolbar-row>\n    </mat-toolbar>\n\n    <div class=\"psdk-case-view-buttons\">\n      <button *ngIf=\"editAction\" mat-raised-button color=\"secondary\" (click)=\"_editClick()\">{{ localizedVal('Edit', localeCategory) }}</button>\n      <button mat-raised-button color=\"secondary\" [matMenuTriggerFor]=\"actionMenu\">{{ localizedVal('Actions...', localeCategory) }}</button>\n      <mat-menu #actionMenu=\"matMenu\" overlapTrigger=\"false\">\n        <ng-container *ngFor=\"let action of arAvailableActions$\">\n          <button mat-menu-item (click)=\"_menuActionClick(action)\">\n            {{ localizedVal(action.name, '', localeKey) }}\n          </button>\n        </ng-container>\n        <ng-container *ngFor=\"let process of arAvailabeProcesses$\">\n          <button mat-menu-item (click)=\"_menuProcessClick(process)\">\n            {{ process.name }}\n          </button>\n        </ng-container>\n      </mat-menu>\n    </div>\n\n    <div class=\"psdk-case-view-divider\"></div>\n\n    <div class=\"psdk-case-view-summary\">\n      <component-mapper name=\"CaseSummary\" [props]=\"{ pConn$: caseSummaryPConn$ }\"></component-mapper>\n    </div>\n\n    <component-mapper\n      *ngIf=\"caseTabs$.length > 1\"\n      name=\"VerticalTabs\"\n      [props]=\"{ tabConfig$: caseTabs$ }\"\n      [parent]=\"this\"\n      [outputEvents]=\"{ tabClick: onTabClick }\"\n    ></component-mapper>\n  </div>\n  <div class=\"psdk-case-view-main\">\n    <div *ngIf=\"!displayOnlyFA$\">\n      <div *ngFor=\"let kid of arChildren$\">\n        <div\n          *ngIf=\"\n            kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'stages'\n          \"\n        >\n          <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n        </div>\n      </div>\n    </div>\n\n    <div *ngFor=\"let kid of arChildren$\">\n      <div\n        *ngIf=\"kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'todo'\"\n      >\n        <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n      </div>\n    </div>\n\n    <div *ngFor=\"let kid of arChildren$\">\n      <div *ngIf=\"kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name == 'Main'\">\n        <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n      </div>\n    </div>\n\n    <div *ngIf=\"!displayOnlyFA$\">\n      <component-mapper name=\"DeferLoad\" [props]=\"{ pConn$, loadData$: tabData$, name: tabData$?.config?.name }\"></component-mapper>\n    </div>\n  </div>\n  <div *ngIf=\"!displayOnlyFA$\">\n    <div *ngIf=\"arChildren$\" class=\"psdk-case-view-utilities\">\n      <div *ngFor=\"let kid of arChildren$\">\n        <div *ngIf=\"kid.getPConnect().getRawMetadata()?.type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata()?.name == 'Utilities'\">\n          <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["h1{font-size:1.1rem;line-height:1.3rem}::ng-deep .mat-mdc-menu-panel{overflow:unset;max-width:unset}.psdk-case-view-label{font-size:1rem;display:block;transform:translateY(.2em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(.2em) scale(.75);width:133.33333%;border-radius:.6125rem}.psdk-case-view{box-sizing:border-box;display:flex}.ng-case-view-toolbar{padding:.625rem}.psdk-case-icon-div{background-color:var(--app-primary-dark-color);border-radius:1rem;padding:.5rem .3rem .3rem}.psdk-case-svg-icon{width:2rem;padding:0rem .3125rem;filter:var(--app-white-color-filter)}.psdk-case-view-info-box{display:flex;flex-direction:row;padding:0rem .3125rem 0rem 0rem}.psdk-case-view-info{flex:0 0 auto;width:25rem;float:left;padding:0rem .3125rem 0rem 0rem;margin-left:.5rem;margin-top:.5rem;height:100%;background-color:var(--app-form-color)}.psdk-case-view-main{flex-grow:2;float:left;padding:0rem .3125rem;height:100%}.psdk-case-view-summary{padding-left:.75rem}.psdk-case-view-heading{display:block;text-align:left;padding-left:.5rem;padding-bottom:0;padding-top:5px}.psdk-case-view-heading-id{font-size:.9rem;font-weight:400}.psdk-case-view-buttons{display:flex;justify-content:flex-start;padding:.3125rem}.psdk-case-view-utilities{width:21.875rem;float:left;padding:0rem .3125rem;height:100%}.psdk-case-view-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-status{padding:.3125rem;background-color:var(--app-primary-color);color:var(--app-form-color);width:fit-content;margin:.625rem}button{margin:0rem .3125rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatToolbarModule) }, { kind: "component", type: i0.forwardRef(() => i4$4.MatToolbar), selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i0.forwardRef(() => i4$4.MatToolbarRow), selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i3$1.MatButton), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatMenuModule) }, { kind: "component", type: i0.forwardRef(() => i6$1.MatMenu), selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(() => i6$1.MatMenuItem), selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(() => i6$1.MatMenuTrigger), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CaseViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-case-view', providers: [Utils], standalone: true, imports: [CommonModule, MatToolbarModule, MatButtonModule, MatMenuModule, forwardRef(() => ComponentMapperComponent)], template: "<div class=\"psdk-case-view\" id=\"case-view\">\n  <div *ngIf=\"!displayOnlyFA$\" class=\"psdk-case-view-info\">\n    <mat-toolbar color=\"primary\" class=\"psdk-case-view-toolbar\">\n      <mat-toolbar-row style=\"padding-left: 1rem\">\n        <div class=\"psdk-case-icon-div\">\n          <img class=\"psdk-case-svg-icon\" src=\"{{ svgCase$ }}\" />\n        </div>\n        <div class=\"psdk-case-view-heading\">\n          <div id=\"current-caseID\" [hidden]=\"true\">{{ currentCaseID }}</div>\n          <div class=\"psdk-case-view-heading-id\" id=\"caseId\">{{ id$ }}</div>\n          <div>\n            <h1 id=\"case-name\">{{ heading$ }}</h1>\n          </div>\n        </div>\n      </mat-toolbar-row>\n    </mat-toolbar>\n\n    <div class=\"psdk-case-view-buttons\">\n      <button *ngIf=\"editAction\" mat-raised-button color=\"secondary\" (click)=\"_editClick()\">{{ localizedVal('Edit', localeCategory) }}</button>\n      <button mat-raised-button color=\"secondary\" [matMenuTriggerFor]=\"actionMenu\">{{ localizedVal('Actions...', localeCategory) }}</button>\n      <mat-menu #actionMenu=\"matMenu\" overlapTrigger=\"false\">\n        <ng-container *ngFor=\"let action of arAvailableActions$\">\n          <button mat-menu-item (click)=\"_menuActionClick(action)\">\n            {{ localizedVal(action.name, '', localeKey) }}\n          </button>\n        </ng-container>\n        <ng-container *ngFor=\"let process of arAvailabeProcesses$\">\n          <button mat-menu-item (click)=\"_menuProcessClick(process)\">\n            {{ process.name }}\n          </button>\n        </ng-container>\n      </mat-menu>\n    </div>\n\n    <div class=\"psdk-case-view-divider\"></div>\n\n    <div class=\"psdk-case-view-summary\">\n      <component-mapper name=\"CaseSummary\" [props]=\"{ pConn$: caseSummaryPConn$ }\"></component-mapper>\n    </div>\n\n    <component-mapper\n      *ngIf=\"caseTabs$.length > 1\"\n      name=\"VerticalTabs\"\n      [props]=\"{ tabConfig$: caseTabs$ }\"\n      [parent]=\"this\"\n      [outputEvents]=\"{ tabClick: onTabClick }\"\n    ></component-mapper>\n  </div>\n  <div class=\"psdk-case-view-main\">\n    <div *ngIf=\"!displayOnlyFA$\">\n      <div *ngFor=\"let kid of arChildren$\">\n        <div\n          *ngIf=\"\n            kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'stages'\n          \"\n        >\n          <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n        </div>\n      </div>\n    </div>\n\n    <div *ngFor=\"let kid of arChildren$\">\n      <div\n        *ngIf=\"kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'todo'\"\n      >\n        <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n      </div>\n    </div>\n\n    <div *ngFor=\"let kid of arChildren$\">\n      <div *ngIf=\"kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name == 'Main'\">\n        <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n      </div>\n    </div>\n\n    <div *ngIf=\"!displayOnlyFA$\">\n      <component-mapper name=\"DeferLoad\" [props]=\"{ pConn$, loadData$: tabData$, name: tabData$?.config?.name }\"></component-mapper>\n    </div>\n  </div>\n  <div *ngIf=\"!displayOnlyFA$\">\n    <div *ngIf=\"arChildren$\" class=\"psdk-case-view-utilities\">\n      <div *ngFor=\"let kid of arChildren$\">\n        <div *ngIf=\"kid.getPConnect().getRawMetadata()?.type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata()?.name == 'Utilities'\">\n          <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["h1{font-size:1.1rem;line-height:1.3rem}::ng-deep .mat-mdc-menu-panel{overflow:unset;max-width:unset}.psdk-case-view-label{font-size:1rem;display:block;transform:translateY(.2em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(.2em) scale(.75);width:133.33333%;border-radius:.6125rem}.psdk-case-view{box-sizing:border-box;display:flex}.ng-case-view-toolbar{padding:.625rem}.psdk-case-icon-div{background-color:var(--app-primary-dark-color);border-radius:1rem;padding:.5rem .3rem .3rem}.psdk-case-svg-icon{width:2rem;padding:0rem .3125rem;filter:var(--app-white-color-filter)}.psdk-case-view-info-box{display:flex;flex-direction:row;padding:0rem .3125rem 0rem 0rem}.psdk-case-view-info{flex:0 0 auto;width:25rem;float:left;padding:0rem .3125rem 0rem 0rem;height:100%;background-color:var(--app-form-color)}.psdk-case-view-main{flex-grow:2;float:left;padding:0rem .3125rem;height:100%}.psdk-case-view-summary{padding-left:.75rem}.psdk-case-view-heading{display:block;text-align:left;padding-left:.5rem;padding-bottom:0;padding-top:5px}.psdk-case-view-heading-id{font-size:.9rem;font-weight:400}.psdk-case-view-buttons{display:flex;justify-content:flex-start;padding:.3125rem}.psdk-case-view-utilities{width:21.875rem;float:left;padding:0rem .3125rem;height:100%}.psdk-case-view-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-status{padding:.3125rem;background-color:var(--app-primary-color);color:var(--app-form-color);width:fit-content;margin:.625rem}button{margin:0rem .3125rem}\n"] }]
+            args: [{ selector: 'app-case-view', providers: [Utils], standalone: true, imports: [CommonModule, MatToolbarModule, MatButtonModule, MatMenuModule, forwardRef(() => ComponentMapperComponent)], template: "<div class=\"psdk-case-view\" id=\"case-view\">\n  <div *ngIf=\"!displayOnlyFA$\" class=\"psdk-case-view-info\">\n    <mat-toolbar color=\"primary\" class=\"psdk-case-view-toolbar\">\n      <mat-toolbar-row style=\"padding-left: 1rem\">\n        <div class=\"psdk-case-icon-div\">\n          <img class=\"psdk-case-svg-icon\" src=\"{{ svgCase$ }}\" />\n        </div>\n        <div class=\"psdk-case-view-heading\">\n          <div>\n            <h1 id=\"case-name\">{{ heading$ }}</h1>\n          </div>\n          <div id=\"current-caseID\" [hidden]=\"true\">{{ currentCaseID }}</div>\n          <div class=\"psdk-case-view-heading-id\" id=\"caseId\">{{ id$ }}</div>\n        </div>\n      </mat-toolbar-row>\n    </mat-toolbar>\n\n    <div class=\"psdk-case-view-buttons\">\n      <button *ngIf=\"editAction\" mat-raised-button color=\"secondary\" (click)=\"_editClick()\">{{ localizedVal('Edit', localeCategory) }}</button>\n      <button mat-raised-button color=\"secondary\" [matMenuTriggerFor]=\"actionMenu\">{{ localizedVal('Actions...', localeCategory) }}</button>\n      <mat-menu #actionMenu=\"matMenu\" overlapTrigger=\"false\">\n        <ng-container *ngFor=\"let action of arAvailableActions$\">\n          <button mat-menu-item (click)=\"_menuActionClick(action)\">\n            {{ localizedVal(action.name, '', localeKey) }}\n          </button>\n        </ng-container>\n        <ng-container *ngFor=\"let process of arAvailabeProcesses$\">\n          <button mat-menu-item (click)=\"_menuProcessClick(process)\">\n            {{ process.name }}\n          </button>\n        </ng-container>\n      </mat-menu>\n    </div>\n\n    <div class=\"psdk-case-view-divider\"></div>\n\n    <div class=\"psdk-case-view-summary\">\n      <component-mapper name=\"CaseSummary\" [props]=\"{ pConn$: caseSummaryPConn$ }\"></component-mapper>\n    </div>\n\n    <component-mapper\n      *ngIf=\"caseTabs$.length > 1\"\n      name=\"VerticalTabs\"\n      [props]=\"{ tabConfig$: caseTabs$ }\"\n      [parent]=\"this\"\n      [outputEvents]=\"{ tabClick: onTabClick }\"\n    ></component-mapper>\n  </div>\n  <div class=\"psdk-case-view-main\">\n    <div *ngIf=\"!displayOnlyFA$\">\n      <div *ngFor=\"let kid of arChildren$\">\n        <div\n          *ngIf=\"\n            kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'stages'\n          \"\n        >\n          <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n        </div>\n      </div>\n    </div>\n\n    <div *ngFor=\"let kid of arChildren$\">\n      <div\n        *ngIf=\"kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'todo'\"\n      >\n        <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n      </div>\n    </div>\n\n    <div *ngFor=\"let kid of arChildren$\">\n      <div *ngIf=\"kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name == 'Main'\">\n        <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n      </div>\n    </div>\n\n    <div *ngIf=\"!displayOnlyFA$\">\n      <component-mapper name=\"DeferLoad\" [props]=\"{ pConn$, loadData$: tabData$, name: tabData$?.config?.name }\"></component-mapper>\n    </div>\n  </div>\n  <div *ngIf=\"!displayOnlyFA$\">\n    <div *ngIf=\"arChildren$\" class=\"psdk-case-view-utilities\">\n      <div *ngFor=\"let kid of arChildren$\">\n        <div *ngIf=\"kid.getPConnect().getRawMetadata()?.type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata()?.name == 'Utilities'\">\n          <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["h1{font-size:1.1rem;line-height:1.3rem}::ng-deep .mat-mdc-menu-panel{overflow:unset;max-width:unset}.psdk-case-view-label{font-size:1rem;display:block;transform:translateY(.2em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(.2em) scale(.75);width:133.33333%;border-radius:.6125rem}.psdk-case-view{box-sizing:border-box;display:flex}.ng-case-view-toolbar{padding:.625rem}.psdk-case-icon-div{background-color:var(--app-primary-dark-color);border-radius:1rem;padding:.5rem .3rem .3rem}.psdk-case-svg-icon{width:2rem;padding:0rem .3125rem;filter:var(--app-white-color-filter)}.psdk-case-view-info-box{display:flex;flex-direction:row;padding:0rem .3125rem 0rem 0rem}.psdk-case-view-info{flex:0 0 auto;width:25rem;float:left;padding:0rem .3125rem 0rem 0rem;margin-left:.5rem;margin-top:.5rem;height:100%;background-color:var(--app-form-color)}.psdk-case-view-main{flex-grow:2;float:left;padding:0rem .3125rem;height:100%}.psdk-case-view-summary{padding-left:.75rem}.psdk-case-view-heading{display:block;text-align:left;padding-left:.5rem;padding-bottom:0;padding-top:5px}.psdk-case-view-heading-id{font-size:.9rem;font-weight:400}.psdk-case-view-buttons{display:flex;justify-content:flex-start;padding:.3125rem}.psdk-case-view-utilities{width:21.875rem;float:left;padding:0rem .3125rem;height:100%}.psdk-case-view-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-status{padding:.3125rem;background-color:var(--app-primary-color);color:var(--app-form-color);width:fit-content;margin:.625rem}button{margin:0rem .3125rem}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: AngularPConnectService }, { type: Utils }], propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
@@ -9490,10 +9446,8 @@ class DataReferenceComponent {
     handleSelection(event) {
         const caseKey = this.pConn$.getCaseInfo().getKey();
         const refreshOptions = { autoDetectRefresh: true };
-        // @ts-ignore - second parameter pageReference for getValue method should be optional
         if (this.canBeChangedInReviewMode && this.pConn$.getValue('__currentPageTabViewName')) {
-            // @ts-ignore - second parameter pageReference for getValue method should be optional
-            this.pConn$.getActionsApi().refreshCaseView(caseKey, this.pConn$.getValue('__currentPageTabViewName'), null, refreshOptions);
+            this.pConn$.getActionsApi().refreshCaseView(caseKey, this.pConn$.getValue('__currentPageTabViewName'), '', refreshOptions);
             PCore.getDeferLoadManager().refreshActiveComponents(this.pConn$.getContextName());
         }
         else {
@@ -10280,7 +10234,6 @@ class DynamicTabsComponent {
     }
     updateSelf() {
         const { referenceList } = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
-        // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'
         const { tablabel } = this.pConn$.getComponentConfig();
         const tablabelProp = PCore.getAnnotationUtils().getPropertyName(tablabel);
         this.pConn$.setInheritedProp('displayMode', 'LABELS_LEFT');
@@ -10419,22 +10372,12 @@ class FieldGroupTemplateComponent {
         this.prevRefLength = this.referenceList.length;
     }
     addFieldGroupItem() {
-        if (PCore.getPCoreVersion()?.includes('8.7')) {
-            this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceList.length, this.pageReference);
-        }
-        else {
-            // @ts-ignore - second parameter "pageRef" is optional for insert method
-            this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceList.length);
-        }
+        // @ts-ignore - second parameter "pageRef" is optional for insert method
+        this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceList.length);
     }
     deleteFieldGroupItem(index) {
-        if (PCore.getPCoreVersion()?.includes('8.7')) {
-            this.pConn$.getListActions().deleteEntry(index, this.pageReference);
-        }
-        else {
-            // @ts-ignore - second parameter "pageRef" is optional for deleteEntry method
-            this.pConn$.getListActions().deleteEntry(index);
-        }
+        // @ts-ignore - second parameter "pageRef" is optional for deleteEntry method
+        this.pConn$.getListActions().deleteEntry(index);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FieldGroupTemplateComponent, deps: [{ token: AngularPConnectService }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FieldGroupTemplateComponent, isStandalone: true, selector: "app-field-group-template", inputs: { configProps$: "configProps$", pConn$: "pConn$", formGroup$: "formGroup$" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"field-group\">\n  <h3 *ngIf=\"showLabel$\" className=\"label\" style=\"font-weight: bold\">\n    {{ label$ }}\n  </h3>\n  <div *ngIf=\"readonlyMode; else editable\">\n    <div *ngIf=\"children && children.length > 0\">\n      <div *ngFor=\"let item of children; let i = index\">\n        <component-mapper name=\"FieldGroupList\" [props]=\"{ heading: item.name, formGroup$, item }\"></component-mapper>\n      </div>\n    </div>\n  </div>\n  <ng-template #editable>\n    <div *ngIf=\"children && children.length > 0\">\n      <div *ngFor=\"let kid of children; let i = index\">\n        <div class=\"header-div\">\n          <div style=\"width: 80%\">\n            <b>{{ kid.name }}</b>\n          </div>\n          <div *ngIf=\"allowAddEdit !== false\" style=\"width: 20%; text-align: right\">\n            <button id=\"delete-button\" mat-icon-button (click)=\"deleteFieldGroupItem(i)\">\n              <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ menuIconOverride$ }}\" />\n            </button>\n          </div>\n        </div>\n\n        <div *ngIf=\"kid.children.getPConnect().getRawMetadata().type.toLowerCase() == 'region'\">\n          <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.children.getPConnect(), formGroup$ }\"></component-mapper>\n        </div>\n      </div>\n      <button *ngIf=\"allowAddEdit !== false\" mat-button color=\"primary\" style=\"font-size: 16px\" (click)=\"addFieldGroupItem()\">+ Add</button>\n    </div>\n  </ng-template>\n</div>\n", styles: [".psdk-utility-card-action-svg-icon{width:1.4rem}.header-div{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i3$1.MatButton), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(() => i3$1.MatIconButton), selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
@@ -11407,7 +11350,6 @@ function useInit(props) {
     const runtimeParams = PCore.getRuntimeParamsAPI().getRuntimeParams();
     let selectionCountThreshold;
     // promise to fetch metadata
-    // @ts-ignore - 3rd parameter "associationFilter" should be optional for getDataViewMetadata method
     const metaDataPromise = PCore.getAnalyticsUtils().getDataViewMetadata(referenceList, showDynamicFields);
     const promisesArray = [metaDataPromise];
     // promise to fetch report configured columns
@@ -11523,6 +11465,7 @@ class ListViewComponent {
         this.filterOnSvgIcon$ = this.utils.getImageSrc('filter-on', this.utils.getSDKStaticContentUrl());
         this.groupBySvgIcon$ = this.utils.getImageSrc('row', this.utils.getSDKStaticContentUrl());
         this.selectionMode = this.configProps$.selectionMode;
+        this.checkBoxValue = this.configProps$.value;
         this.arFilterMainButtons$.push({ actionID: 'submit', jsAction: 'submit', name: 'Submit' });
         this.arFilterSecondaryButtons$.push({ actionID: 'cancel', jsAction: 'cancel', name: 'Cancel' });
         this.searchIcon$ = this.utils.getImageSrc('search', this.utils.getSDKStaticContentUrl());
@@ -11664,7 +11607,6 @@ class ListViewComponent {
         return PCore.getAnalyticsUtils().getDataViewMetadata(refList, this.showDynamicFields);
     }
     getListData() {
-        // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'
         const componentConfig = this.pConn$.getComponentConfig();
         if (this.configProps$) {
             this.preparePayload();
@@ -11674,8 +11616,7 @@ class ListViewComponent {
             const payload = this.payload || this.filterPayload || {};
             const dataViewParameters = this.payload.parameters;
             const workListDataPromise = !this.bInForm$
-                ? // @ts-ignore - 3rd parameter "context" should be optional in getData method
-                    PCore.getDataApiUtils().getData(refList, payload)
+                ? PCore.getDataApiUtils().getData(refList, payload)
                 : PCore.getDataPageUtils().getDataAsync(refList, this.pConn$.getContextName(), payload.dataViewParameters ? payload.dataViewParameters : dataViewParameters, this.paging, this.query);
             this.bShowFilterPopover$ = false;
             this.psService.sendMessage(true);
@@ -11787,6 +11728,12 @@ class ListViewComponent {
             this.repeatList$.paginator.firstPage();
         }
     }
+    isChecked(rowIn) {
+        const initialVal = false;
+        return this.configProps$?.readonlyContextList?.reduce((acc, currRow) => {
+            return acc || rowIn[this.rowID] === currRow[this.rowID];
+        }, initialVal);
+    }
     fieldOnChange(row) {
         const value = row[this.rowID];
         const reqObj = {};
@@ -11800,6 +11747,7 @@ class ListViewComponent {
         else {
             reqObj[this.rowID] = value;
         }
+        this.checkBoxValue = value;
         this.pConn$?.getListActions?.()?.setSelectedRows([reqObj]);
     }
     onCheckboxClick(row, event) {
@@ -12580,7 +12528,7 @@ class ListViewComponent {
         return select;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ListViewComponent, deps: [{ token: ProgressSpinnerService }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ListViewComponent, isStandalone: true, selector: "app-list-view", inputs: { pConn$: "pConn$", bInForm$: "bInForm$", payload: "payload" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div class=\"psdk-list-header\">\n  <div>\n    <mat-form-field class=\"psdk-search\" *ngIf=\"bShowSearch$\">\n      <mat-label><img class=\"psdk-icon-search\" src=\"{{ searchIcon$ }}\" /> <span class=\"psdk-search-label\">Search</span> </mat-label>\n      <input matInput id=\"search\" (keyup)=\"applySearch($event)\" placeholder=\"\" />\n    </mat-form-field>\n\n    <div *ngIf=\"!bInForm$\" class=\"psdk-outer-div-in-form\">\n      <div class=\"psdk-inner-div-in-form\" *ngIf=\"bColumnReorder$\">\n        <div>\n          <table\n            mat-table\n            id=\"list-view\"\n            [dataSource]=\"repeatList$\"\n            matSort\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            (cdkDropListDropped)=\"drop($event)\"\n          >\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\" sticky=\"true\">\n              <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\" (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\" cdkDrag>\n                {{ dCol.config.label }}\n                <div class=\"psdk-mat-header-filter\">\n                  <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n                </div>\n                <div class=\"psdk-mat-header-arrow\">\n                  <img class=\"psdk-arrow-svg-icon\" arrow=\"none\" [attr.arrowid]=\"dCol.config.name\" />\n                </div>\n                <div class=\"psdk-mat-header-button\" (click)=\"$event.stopPropagation()\">\n                  <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n                    <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n                  </button>\n                  <mat-menu #groupMenu>\n                    <button *ngIf=\"!_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_groupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n                    </button>\n                    <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n                    </button>\n                    <button mat-menu-item (click)=\"_filter($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n                    </button>\n                  </mat-menu>\n                </div>\n              </th>\n              <td mat-cell *matCellDef=\"let element; index as i\">\n                <button\n                  *ngIf=\"_showButton(dCol.config.name, dCol); else regular\"\n                  mat-button\n                  color=\"primary\"\n                  (click)=\"_listViewClick(dCol.config, element)\"\n                >\n                  {{ element[dCol.config.name] || '---' }}\n                </button>\n                <ng-template #regular>\n                  {{ element[dCol.config.name] || '---' }}\n                </ng-template>\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n\n            <!-- Group header -->\n            <ng-container matColumnDef=\"groupHeader\">\n              <td mat-cell colspan=\"999\" *matCellDef=\"let group\">\n                <mat-icon *ngIf=\"group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_less</mat-icon>\n                <mat-icon *ngIf=\"!group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_more</mat-icon>\n                <strong\n                  >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{\n                    group.totalCounts\n                  }})</strong\n                >\n              </td>\n            </ng-container>\n\n            <tr mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroup\" (click)=\"_groupHeaderClick(row)\"></tr>\n          </table>\n        </div>\n      </div>\n      <div class=\"psdk-inner-div-in-form\" *ngIf=\"!bColumnReorder$\">\n        <div>\n          <table mat-table id=\"list-view\" [dataSource]=\"repeatList$\" matSort>\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\" sticky=\"true\">\n              <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\" (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n                {{ dCol.config.label }}\n                <div class=\"psdk-mat-header-filter\">\n                  <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n                </div>\n                <div class=\"psdk-mat-header-arrow\">\n                  <img class=\"psdk-arrow-svg-icon\" arrow=\"none\" [attr.arrowid]=\"dCol.config.name\" />\n                </div>\n                <div class=\"psdk-mat-header-button\" (click)=\"$event.stopPropagation()\">\n                  <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n                    <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n                  </button>\n                  <mat-menu #groupMenu>\n                    <button *ngIf=\"!_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_groupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n                    </button>\n                    <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n                    </button>\n                    <button mat-menu-item (click)=\"_filter($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n                    </button>\n                  </mat-menu>\n                </div>\n              </th>\n              <td mat-cell *matCellDef=\"let element; index as i\">\n                <button\n                  *ngIf=\"_showButton(dCol.config.name, dCol); else regular\"\n                  mat-button\n                  color=\"primary\"\n                  (click)=\"_listViewClick(dCol.config, element)\"\n                >\n                  {{ element[dCol.config.name] || '---' }}\n                </button>\n                <ng-template #regular>\n                  {{ element[dCol.config.name] || '---' }}\n                </ng-template>\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n\n            <!-- Group header -->\n            <ng-container matColumnDef=\"groupHeader\">\n              <td mat-cell colspan=\"999\" *matCellDef=\"let group\">\n                <mat-icon *ngIf=\"group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_less</mat-icon>\n                <mat-icon *ngIf=\"!group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_more</mat-icon>\n                <strong\n                  >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{\n                    group.totalCounts\n                  }})</strong\n                >\n              </td>\n            </ng-container>\n\n            <tr mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroup\" (click)=\"_groupHeaderClick(row)\"></tr>\n          </table>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"bInForm$\">\n      <div>\n        <div class=\"psdk-inner-div-in-form\">\n          <table id=\"list-view\" *ngIf=\"repeatListData.length > 0\" mat-table [dataSource]=\"repeatList$\" matSort>\n            <ng-container *ngIf=\"singleSelectionMode\" matColumnDef=\"select\">\n              <th mat-header-cell *matHeaderCellDef></th>\n              <td mat-cell *matCellDef=\"let row\">\n                <mat-radio-button [value]=\"row[rowID]\" (change)=\"fieldOnChange(row)\"></mat-radio-button>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"multiSelectionMode\" matColumnDef=\"select\">\n              <th mat-header-cell *matHeaderCellDef></th>\n              <td mat-cell *matCellDef=\"let row\">\n                <mat-checkbox [value]=\"row[rowID]\" (change)=\"onCheckboxClick(row, $event)\"></mat-checkbox>\n              </td>\n            </ng-container>\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\">\n              <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n                {{ dCol.config.label }}\n              </th>\n              <td mat-cell *matCellDef=\"let element\">{{ element[dCol.config.name] || '---' }}</td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n          </table>\n          <div *ngIf=\"repeatListData?.length === 0\">\n            <table id=\"list-view\" *ngIf=\"repeatListData?.length === 0\" mat-table [dataSource]=\"repeatList$\">\n              <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\">\n                <th mat-header-cell *matHeaderCellDef>{{ dCol.config.label }}</th>\n              </ng-container>\n              <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n            </table>\n          </div>\n          <div class=\"psdk-no-records\" *ngIf=\"repeatListData?.length === 0\">No Records Found.</div>\n        </div>\n      </div>\n    </div>\n\n    <mat-paginator id=\"pagination\" *ngIf=\"bInForm$\" [pageSizeOptions]=\"[10, 20, 50, 100, 500, 1000]\" showFirstLastButtons></mat-paginator>\n    <mat-paginator id=\"pagination\" *ngIf=\"!bInForm$\" [pageSizeOptions]=\"[10, 20, 50, 100, 500]\" showFirstLastButtons></mat-paginator>\n  </div>\n\n  <!-- pop overs for filters-->\n  <div *ngIf=\"bShowFilterPopover$\" class=\"psdk-dialog-background\">\n    <div class=\"psdk-modal-file-top\">\n      <h4>\n        Filter:<b> {{ filterContainsLabel$ }}</b>\n      </h4>\n      <div *ngIf=\"bContains$\">\n        <mat-form-field class=\"psdk-full-width\">\n          <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n            <mat-option value=\"contains\">Contains</mat-option>\n            <mat-option value=\"equals\">Equals</mat-option>\n            <mat-option value=\"startswith\">Starts with</mat-option>\n          </mat-select>\n        </mat-form-field>\n\n        <mat-form-field class=\"psdk-full-width\">\n          <input matInput type=\"text\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsValue($event)\" />\n        </mat-form-field>\n      </div>\n\n      <div *ngIf=\"bDateTime$\">\n        <mat-form-field class=\"psdk-full-width\">\n          <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n            <mat-option value=\"notequal\">is not equal to</mat-option>\n            <mat-option value=\"after\">after</mat-option>\n            <mat-option value=\"before\">before</mat-option>\n            <mat-option value=\"null\">is null</mat-option>\n            <mat-option value=\"notnull\">is not null</mat-option>\n          </mat-select>\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsDate$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Date</mat-label>\n          <input\n            matInput\n            #dateInput\n            [matDatepicker]=\"pegadate\"\n            type=\"text\"\n            [value]=\"filterContainsValue$\"\n            (dateChange)=\"_filterContainsDateValue($event, dateInput.value)\"\n          />\n          <mat-datepicker-toggle matSuffix [for]=\"pegadate\"></mat-datepicker-toggle>\n          <mat-datepicker #pegadate [startAt]=\"filterContainsValue$\"></mat-datepicker>\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsDateTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Date time</mat-label>\n          <input matInput type=\"datetime-local\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsDateTimeValue($event)\" />\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Time</mat-label>\n          <input matInput type=\"time\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsTimeValue($event)\" />\n        </mat-form-field>\n      </div>\n\n      <component-mapper\n        name=\"ActionButtons\"\n        [props]=\"{ arMainButtons$: arFilterMainButtons$, arSecondaryButtons$: arFilterSecondaryButtons$ }\"\n        [parent]=\"this\"\n        [outputEvents]=\"{ actionButtonClick: _onFilterActionButtonClick }\"\n      ></component-mapper>\n    </div>\n  </div>\n</div>\n", styles: [".psdk-list-header{background-color:var(--app-form-color);padding:1rem;margin:.5rem;border-radius:.6125rem}table{width:100%}::ng-deep .mat-sort-header-content{white-space:nowrap}::ng-deep td.mat-mdc-cell{white-space:nowrap}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{padding:0rem .188rem}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:nowrap;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem;padding-right:.625rem}.psdk-icon-search{vertical-align:sub;padding:.125rem;min-width:unset;width:1.1rem}.psdk-outer-div-in-form{padding:1rem;overflow:hidden}.psdk-inner-div-in-form{height:auto;position:relative;width:100%;overflow:auto;max-height:550px;min-height:auto}.psdk-list-view-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-filter-svg-icon,.psdk-arrow-svg-icon{width:1rem;display:inline-block;vertical-align:middle;filter:var(--app-neutral-color-filter)}.psdk-filter-popover{display:table;margin:auto;min-width:100px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color);position:absolute;z-index:99}.psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-dialog-background-color);position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color)}.psdk-no-records{height:56px;justify-content:center;display:flex;align-items:center;border:1px solid var(--app-neutral-light-color);border-top:none}.psdk-table-field-link{color:var(--app-primary-color);padding:0;cursor:pointer;border:0;background-color:transparent;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i5.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i5.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i5.MatSuffix), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => i6$2.MatInput), selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatTableModule) }, { kind: "component", type: i0.forwardRef(() => i6$4.MatTable), selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i0.forwardRef(() => i6$4.MatHeaderCellDef), selector: "[matHeaderCellDef]" }, { kind: "directive", type: i0.forwardRef(() => i6$4.MatHeaderRowDef), selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i0.forwardRef(() => i6$4.MatColumnDef), selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i0.forwardRef(() => i6$4.MatCellDef), selector: "[matCellDef]" }, { kind: "directive", type: i0.forwardRef(() => i6$4.MatRowDef), selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i0.forwardRef(() => i6$4.MatHeaderCell), selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i0.forwardRef(() => i6$4.MatCell), selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i0.forwardRef(() => i6$4.MatHeaderRow), selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i0.forwardRef(() => i6$4.MatRow), selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatSortModule) }, { kind: "directive", type: i0.forwardRef(() => i7$2.MatSort), selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i0.forwardRef(() => i7$2.MatSortHeader), selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: i0.forwardRef(() => DragDropModule) }, { kind: "directive", type: i0.forwardRef(() => i8$2.CdkDropList), selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i0.forwardRef(() => i8$2.CdkDrag), selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i3$1.MatButton), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(() => i3$1.MatIconButton), selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatMenuModule) }, { kind: "component", type: i0.forwardRef(() => i6$1.MatMenu), selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(() => i6$1.MatMenuItem), selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(() => i6$1.MatMenuTrigger), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i2$2.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatRadioModule) }, { kind: "component", type: i0.forwardRef(() => i7$1.MatRadioButton), selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatCheckboxModule) }, { kind: "component", type: i0.forwardRef(() => i5$2.MatCheckbox), selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatPaginatorModule) }, { kind: "component", type: i0.forwardRef(() => i14.MatPaginator), selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatSelectModule) }, { kind: "component", type: i0.forwardRef(() => i6$3.MatSelect), selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i0.forwardRef(() => i7.MatOption), selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatOptionModule) }, { kind: "ngmodule", type: i0.forwardRef(() => MatDatepickerModule) }, { kind: "component", type: i0.forwardRef(() => i4$2.MatDatepicker), selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i0.forwardRef(() => i4$2.MatDatepickerInput), selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i0.forwardRef(() => i4$2.MatDatepickerToggle), selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ListViewComponent, isStandalone: true, selector: "app-list-view", inputs: { pConn$: "pConn$", bInForm$: "bInForm$", payload: "payload" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div class=\"psdk-list-header\">\n  <div>\n    <mat-form-field class=\"psdk-search\" *ngIf=\"bShowSearch$\">\n      <mat-label><img class=\"psdk-icon-search\" src=\"{{ searchIcon$ }}\" /> <span class=\"psdk-search-label\">Search</span> </mat-label>\n      <input matInput id=\"search\" (keyup)=\"applySearch($event)\" placeholder=\"\" />\n    </mat-form-field>\n\n    <div *ngIf=\"!bInForm$\" class=\"psdk-outer-div-in-form\">\n      <div class=\"psdk-inner-div-in-form\" *ngIf=\"bColumnReorder$\">\n        <div>\n          <table\n            mat-table\n            id=\"list-view\"\n            [dataSource]=\"repeatList$\"\n            matSort\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            (cdkDropListDropped)=\"drop($event)\"\n          >\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\" sticky=\"true\">\n              <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\" (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\" cdkDrag>\n                {{ dCol.config.label }}\n                <div class=\"psdk-mat-header-filter\">\n                  <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n                </div>\n                <div class=\"psdk-mat-header-arrow\">\n                  <img class=\"psdk-arrow-svg-icon\" arrow=\"none\" [attr.arrowid]=\"dCol.config.name\" />\n                </div>\n                <div class=\"psdk-mat-header-button\" (click)=\"$event.stopPropagation()\">\n                  <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n                    <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n                  </button>\n                  <mat-menu #groupMenu>\n                    <button *ngIf=\"!_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_groupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n                    </button>\n                    <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n                    </button>\n                    <button mat-menu-item (click)=\"_filter($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n                    </button>\n                  </mat-menu>\n                </div>\n              </th>\n              <td mat-cell *matCellDef=\"let element; index as i\">\n                <button\n                  *ngIf=\"_showButton(dCol.config.name, dCol); else regular\"\n                  mat-button\n                  color=\"primary\"\n                  (click)=\"_listViewClick(dCol.config, element)\"\n                >\n                  {{ element[dCol.config.name] || '---' }}\n                </button>\n                <ng-template #regular>\n                  {{ element[dCol.config.name] || '---' }}\n                </ng-template>\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n\n            <!-- Group header -->\n            <ng-container matColumnDef=\"groupHeader\">\n              <td mat-cell colspan=\"999\" *matCellDef=\"let group\">\n                <mat-icon *ngIf=\"group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_less</mat-icon>\n                <mat-icon *ngIf=\"!group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_more</mat-icon>\n                <strong\n                  >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{\n                    group.totalCounts\n                  }})</strong\n                >\n              </td>\n            </ng-container>\n\n            <tr mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroup\" (click)=\"_groupHeaderClick(row)\"></tr>\n          </table>\n        </div>\n      </div>\n      <div class=\"psdk-inner-div-in-form\" *ngIf=\"!bColumnReorder$\">\n        <div>\n          <table mat-table id=\"list-view\" [dataSource]=\"repeatList$\" matSort>\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\" sticky=\"true\">\n              <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\" (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n                {{ dCol.config.label }}\n                <div class=\"psdk-mat-header-filter\">\n                  <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n                </div>\n                <div class=\"psdk-mat-header-arrow\">\n                  <img class=\"psdk-arrow-svg-icon\" arrow=\"none\" [attr.arrowid]=\"dCol.config.name\" />\n                </div>\n                <div class=\"psdk-mat-header-button\" (click)=\"$event.stopPropagation()\">\n                  <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n                    <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n                  </button>\n                  <mat-menu #groupMenu>\n                    <button *ngIf=\"!_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_groupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n                    </button>\n                    <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n                    </button>\n                    <button mat-menu-item (click)=\"_filter($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n                    </button>\n                  </mat-menu>\n                </div>\n              </th>\n              <td mat-cell *matCellDef=\"let element; index as i\">\n                <button\n                  *ngIf=\"_showButton(dCol.config.name, dCol); else regular\"\n                  mat-button\n                  color=\"primary\"\n                  (click)=\"_listViewClick(dCol.config, element)\"\n                >\n                  {{ element[dCol.config.name] || '---' }}\n                </button>\n                <ng-template #regular>\n                  {{ element[dCol.config.name] || '---' }}\n                </ng-template>\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n\n            <!-- Group header -->\n            <ng-container matColumnDef=\"groupHeader\">\n              <td mat-cell colspan=\"999\" *matCellDef=\"let group\">\n                <mat-icon *ngIf=\"group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_less</mat-icon>\n                <mat-icon *ngIf=\"!group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_more</mat-icon>\n                <strong\n                  >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{\n                    group.totalCounts\n                  }})</strong\n                >\n              </td>\n            </ng-container>\n\n            <tr mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroup\" (click)=\"_groupHeaderClick(row)\"></tr>\n          </table>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"bInForm$\">\n      <div>\n        <div class=\"psdk-inner-div-in-form\">\n          <table id=\"list-view\" *ngIf=\"repeatListData.length > 0\" mat-table [dataSource]=\"repeatList$\" matSort>\n            <ng-container *ngIf=\"singleSelectionMode\" matColumnDef=\"select\">\n              <th mat-header-cell *matHeaderCellDef></th>\n              <td mat-cell *matCellDef=\"let row\">\n                <mat-radio-button [value]=\"row[rowID]\" [checked]=\"row[rowID] === checkBoxValue\" (change)=\"fieldOnChange(row)\"></mat-radio-button>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"multiSelectionMode\" matColumnDef=\"select\">\n              <th mat-header-cell *matHeaderCellDef></th>\n              <td mat-cell *matCellDef=\"let row\">\n                <mat-checkbox [value]=\"row[rowID]\" [checked]=\"isChecked(row)\" (change)=\"onCheckboxClick(row, $event)\"></mat-checkbox>\n              </td>\n            </ng-container>\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\">\n              <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n                {{ dCol.config.label }}\n              </th>\n              <td mat-cell *matCellDef=\"let element\">{{ element[dCol.config.name] || '---' }}</td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n          </table>\n          <div *ngIf=\"repeatListData?.length === 0\">\n            <table id=\"list-view\" *ngIf=\"repeatListData?.length === 0\" mat-table [dataSource]=\"repeatList$\">\n              <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\">\n                <th mat-header-cell *matHeaderCellDef>{{ dCol.config.label }}</th>\n              </ng-container>\n              <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n            </table>\n          </div>\n          <div class=\"psdk-no-records\" *ngIf=\"repeatListData?.length === 0\">No Records Found.</div>\n        </div>\n      </div>\n    </div>\n\n    <mat-paginator id=\"pagination\" *ngIf=\"bInForm$\" [pageSizeOptions]=\"[10, 20, 50, 100, 500, 1000]\" showFirstLastButtons></mat-paginator>\n    <mat-paginator id=\"pagination\" *ngIf=\"!bInForm$\" [pageSizeOptions]=\"[10, 20, 50, 100, 500]\" showFirstLastButtons></mat-paginator>\n  </div>\n\n  <!-- pop overs for filters-->\n  <div *ngIf=\"bShowFilterPopover$\" class=\"psdk-dialog-background\">\n    <div class=\"psdk-modal-file-top\">\n      <h4>\n        Filter:<b> {{ filterContainsLabel$ }}</b>\n      </h4>\n      <div *ngIf=\"bContains$\">\n        <mat-form-field class=\"psdk-full-width\">\n          <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n            <mat-option value=\"contains\">Contains</mat-option>\n            <mat-option value=\"equals\">Equals</mat-option>\n            <mat-option value=\"startswith\">Starts with</mat-option>\n          </mat-select>\n        </mat-form-field>\n\n        <mat-form-field class=\"psdk-full-width\">\n          <input matInput type=\"text\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsValue($event)\" />\n        </mat-form-field>\n      </div>\n\n      <div *ngIf=\"bDateTime$\">\n        <mat-form-field class=\"psdk-full-width\">\n          <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n            <mat-option value=\"notequal\">is not equal to</mat-option>\n            <mat-option value=\"after\">after</mat-option>\n            <mat-option value=\"before\">before</mat-option>\n            <mat-option value=\"null\">is null</mat-option>\n            <mat-option value=\"notnull\">is not null</mat-option>\n          </mat-select>\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsDate$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Date</mat-label>\n          <input\n            matInput\n            #dateInput\n            [matDatepicker]=\"pegadate\"\n            type=\"text\"\n            [value]=\"filterContainsValue$\"\n            (dateChange)=\"_filterContainsDateValue($event, dateInput.value)\"\n          />\n          <mat-datepicker-toggle matSuffix [for]=\"pegadate\"></mat-datepicker-toggle>\n          <mat-datepicker #pegadate [startAt]=\"filterContainsValue$\"></mat-datepicker>\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsDateTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Date time</mat-label>\n          <input matInput type=\"datetime-local\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsDateTimeValue($event)\" />\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Time</mat-label>\n          <input matInput type=\"time\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsTimeValue($event)\" />\n        </mat-form-field>\n      </div>\n\n      <component-mapper\n        name=\"ActionButtons\"\n        [props]=\"{ arMainButtons$: arFilterMainButtons$, arSecondaryButtons$: arFilterSecondaryButtons$ }\"\n        [parent]=\"this\"\n        [outputEvents]=\"{ actionButtonClick: _onFilterActionButtonClick }\"\n      ></component-mapper>\n    </div>\n  </div>\n</div>\n", styles: [".psdk-list-header{background-color:var(--app-form-color);padding:1rem;margin:.5rem;border-radius:.6125rem}table{width:100%}::ng-deep .mat-sort-header-content{white-space:nowrap}::ng-deep td.mat-mdc-cell{white-space:nowrap}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{padding:0rem .188rem}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:nowrap;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem;padding-right:.625rem}.psdk-icon-search{vertical-align:sub;padding:.125rem;min-width:unset;width:1.1rem}.psdk-outer-div-in-form{padding:1rem;overflow:hidden}.psdk-inner-div-in-form{height:auto;position:relative;width:100%;overflow:auto;max-height:550px;min-height:auto}.psdk-list-view-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-filter-svg-icon,.psdk-arrow-svg-icon{width:1rem;display:inline-block;vertical-align:middle;filter:var(--app-neutral-color-filter)}.psdk-filter-popover{display:table;margin:auto;min-width:100px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color);position:absolute;z-index:99}.psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-dialog-background-color);position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color)}.psdk-no-records{height:56px;justify-content:center;display:flex;align-items:center;border:1px solid var(--app-neutral-light-color);border-top:none}.psdk-table-field-link{color:var(--app-primary-color);padding:0;cursor:pointer;border:0;background-color:transparent;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i5.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i5.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i5.MatSuffix), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => i6$2.MatInput), selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatTableModule) }, { kind: "component", type: i0.forwardRef(() => i6$4.MatTable), selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i0.forwardRef(() => i6$4.MatHeaderCellDef), selector: "[matHeaderCellDef]" }, { kind: "directive", type: i0.forwardRef(() => i6$4.MatHeaderRowDef), selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i0.forwardRef(() => i6$4.MatColumnDef), selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i0.forwardRef(() => i6$4.MatCellDef), selector: "[matCellDef]" }, { kind: "directive", type: i0.forwardRef(() => i6$4.MatRowDef), selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i0.forwardRef(() => i6$4.MatHeaderCell), selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i0.forwardRef(() => i6$4.MatCell), selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i0.forwardRef(() => i6$4.MatHeaderRow), selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i0.forwardRef(() => i6$4.MatRow), selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatSortModule) }, { kind: "directive", type: i0.forwardRef(() => i7$2.MatSort), selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i0.forwardRef(() => i7$2.MatSortHeader), selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: i0.forwardRef(() => DragDropModule) }, { kind: "directive", type: i0.forwardRef(() => i8$2.CdkDropList), selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i0.forwardRef(() => i8$2.CdkDrag), selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i3$1.MatButton), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(() => i3$1.MatIconButton), selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatMenuModule) }, { kind: "component", type: i0.forwardRef(() => i6$1.MatMenu), selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(() => i6$1.MatMenuItem), selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(() => i6$1.MatMenuTrigger), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i2$2.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatRadioModule) }, { kind: "component", type: i0.forwardRef(() => i7$1.MatRadioButton), selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatCheckboxModule) }, { kind: "component", type: i0.forwardRef(() => i5$2.MatCheckbox), selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatPaginatorModule) }, { kind: "component", type: i0.forwardRef(() => i14.MatPaginator), selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatSelectModule) }, { kind: "component", type: i0.forwardRef(() => i6$3.MatSelect), selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i0.forwardRef(() => i7.MatOption), selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatOptionModule) }, { kind: "ngmodule", type: i0.forwardRef(() => MatDatepickerModule) }, { kind: "component", type: i0.forwardRef(() => i4$2.MatDatepicker), selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i0.forwardRef(() => i4$2.MatDatepickerInput), selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i0.forwardRef(() => i4$2.MatDatepickerToggle), selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ListViewComponent, decorators: [{
             type: Component,
@@ -12603,7 +12551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         MatOptionModule,
                         MatDatepickerModule,
                         forwardRef(() => ComponentMapperComponent)
-                    ], template: "<div class=\"psdk-list-header\">\n  <div>\n    <mat-form-field class=\"psdk-search\" *ngIf=\"bShowSearch$\">\n      <mat-label><img class=\"psdk-icon-search\" src=\"{{ searchIcon$ }}\" /> <span class=\"psdk-search-label\">Search</span> </mat-label>\n      <input matInput id=\"search\" (keyup)=\"applySearch($event)\" placeholder=\"\" />\n    </mat-form-field>\n\n    <div *ngIf=\"!bInForm$\" class=\"psdk-outer-div-in-form\">\n      <div class=\"psdk-inner-div-in-form\" *ngIf=\"bColumnReorder$\">\n        <div>\n          <table\n            mat-table\n            id=\"list-view\"\n            [dataSource]=\"repeatList$\"\n            matSort\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            (cdkDropListDropped)=\"drop($event)\"\n          >\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\" sticky=\"true\">\n              <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\" (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\" cdkDrag>\n                {{ dCol.config.label }}\n                <div class=\"psdk-mat-header-filter\">\n                  <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n                </div>\n                <div class=\"psdk-mat-header-arrow\">\n                  <img class=\"psdk-arrow-svg-icon\" arrow=\"none\" [attr.arrowid]=\"dCol.config.name\" />\n                </div>\n                <div class=\"psdk-mat-header-button\" (click)=\"$event.stopPropagation()\">\n                  <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n                    <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n                  </button>\n                  <mat-menu #groupMenu>\n                    <button *ngIf=\"!_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_groupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n                    </button>\n                    <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n                    </button>\n                    <button mat-menu-item (click)=\"_filter($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n                    </button>\n                  </mat-menu>\n                </div>\n              </th>\n              <td mat-cell *matCellDef=\"let element; index as i\">\n                <button\n                  *ngIf=\"_showButton(dCol.config.name, dCol); else regular\"\n                  mat-button\n                  color=\"primary\"\n                  (click)=\"_listViewClick(dCol.config, element)\"\n                >\n                  {{ element[dCol.config.name] || '---' }}\n                </button>\n                <ng-template #regular>\n                  {{ element[dCol.config.name] || '---' }}\n                </ng-template>\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n\n            <!-- Group header -->\n            <ng-container matColumnDef=\"groupHeader\">\n              <td mat-cell colspan=\"999\" *matCellDef=\"let group\">\n                <mat-icon *ngIf=\"group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_less</mat-icon>\n                <mat-icon *ngIf=\"!group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_more</mat-icon>\n                <strong\n                  >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{\n                    group.totalCounts\n                  }})</strong\n                >\n              </td>\n            </ng-container>\n\n            <tr mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroup\" (click)=\"_groupHeaderClick(row)\"></tr>\n          </table>\n        </div>\n      </div>\n      <div class=\"psdk-inner-div-in-form\" *ngIf=\"!bColumnReorder$\">\n        <div>\n          <table mat-table id=\"list-view\" [dataSource]=\"repeatList$\" matSort>\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\" sticky=\"true\">\n              <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\" (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n                {{ dCol.config.label }}\n                <div class=\"psdk-mat-header-filter\">\n                  <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n                </div>\n                <div class=\"psdk-mat-header-arrow\">\n                  <img class=\"psdk-arrow-svg-icon\" arrow=\"none\" [attr.arrowid]=\"dCol.config.name\" />\n                </div>\n                <div class=\"psdk-mat-header-button\" (click)=\"$event.stopPropagation()\">\n                  <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n                    <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n                  </button>\n                  <mat-menu #groupMenu>\n                    <button *ngIf=\"!_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_groupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n                    </button>\n                    <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n                    </button>\n                    <button mat-menu-item (click)=\"_filter($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n                    </button>\n                  </mat-menu>\n                </div>\n              </th>\n              <td mat-cell *matCellDef=\"let element; index as i\">\n                <button\n                  *ngIf=\"_showButton(dCol.config.name, dCol); else regular\"\n                  mat-button\n                  color=\"primary\"\n                  (click)=\"_listViewClick(dCol.config, element)\"\n                >\n                  {{ element[dCol.config.name] || '---' }}\n                </button>\n                <ng-template #regular>\n                  {{ element[dCol.config.name] || '---' }}\n                </ng-template>\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n\n            <!-- Group header -->\n            <ng-container matColumnDef=\"groupHeader\">\n              <td mat-cell colspan=\"999\" *matCellDef=\"let group\">\n                <mat-icon *ngIf=\"group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_less</mat-icon>\n                <mat-icon *ngIf=\"!group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_more</mat-icon>\n                <strong\n                  >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{\n                    group.totalCounts\n                  }})</strong\n                >\n              </td>\n            </ng-container>\n\n            <tr mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroup\" (click)=\"_groupHeaderClick(row)\"></tr>\n          </table>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"bInForm$\">\n      <div>\n        <div class=\"psdk-inner-div-in-form\">\n          <table id=\"list-view\" *ngIf=\"repeatListData.length > 0\" mat-table [dataSource]=\"repeatList$\" matSort>\n            <ng-container *ngIf=\"singleSelectionMode\" matColumnDef=\"select\">\n              <th mat-header-cell *matHeaderCellDef></th>\n              <td mat-cell *matCellDef=\"let row\">\n                <mat-radio-button [value]=\"row[rowID]\" (change)=\"fieldOnChange(row)\"></mat-radio-button>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"multiSelectionMode\" matColumnDef=\"select\">\n              <th mat-header-cell *matHeaderCellDef></th>\n              <td mat-cell *matCellDef=\"let row\">\n                <mat-checkbox [value]=\"row[rowID]\" (change)=\"onCheckboxClick(row, $event)\"></mat-checkbox>\n              </td>\n            </ng-container>\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\">\n              <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n                {{ dCol.config.label }}\n              </th>\n              <td mat-cell *matCellDef=\"let element\">{{ element[dCol.config.name] || '---' }}</td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n          </table>\n          <div *ngIf=\"repeatListData?.length === 0\">\n            <table id=\"list-view\" *ngIf=\"repeatListData?.length === 0\" mat-table [dataSource]=\"repeatList$\">\n              <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\">\n                <th mat-header-cell *matHeaderCellDef>{{ dCol.config.label }}</th>\n              </ng-container>\n              <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n            </table>\n          </div>\n          <div class=\"psdk-no-records\" *ngIf=\"repeatListData?.length === 0\">No Records Found.</div>\n        </div>\n      </div>\n    </div>\n\n    <mat-paginator id=\"pagination\" *ngIf=\"bInForm$\" [pageSizeOptions]=\"[10, 20, 50, 100, 500, 1000]\" showFirstLastButtons></mat-paginator>\n    <mat-paginator id=\"pagination\" *ngIf=\"!bInForm$\" [pageSizeOptions]=\"[10, 20, 50, 100, 500]\" showFirstLastButtons></mat-paginator>\n  </div>\n\n  <!-- pop overs for filters-->\n  <div *ngIf=\"bShowFilterPopover$\" class=\"psdk-dialog-background\">\n    <div class=\"psdk-modal-file-top\">\n      <h4>\n        Filter:<b> {{ filterContainsLabel$ }}</b>\n      </h4>\n      <div *ngIf=\"bContains$\">\n        <mat-form-field class=\"psdk-full-width\">\n          <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n            <mat-option value=\"contains\">Contains</mat-option>\n            <mat-option value=\"equals\">Equals</mat-option>\n            <mat-option value=\"startswith\">Starts with</mat-option>\n          </mat-select>\n        </mat-form-field>\n\n        <mat-form-field class=\"psdk-full-width\">\n          <input matInput type=\"text\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsValue($event)\" />\n        </mat-form-field>\n      </div>\n\n      <div *ngIf=\"bDateTime$\">\n        <mat-form-field class=\"psdk-full-width\">\n          <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n            <mat-option value=\"notequal\">is not equal to</mat-option>\n            <mat-option value=\"after\">after</mat-option>\n            <mat-option value=\"before\">before</mat-option>\n            <mat-option value=\"null\">is null</mat-option>\n            <mat-option value=\"notnull\">is not null</mat-option>\n          </mat-select>\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsDate$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Date</mat-label>\n          <input\n            matInput\n            #dateInput\n            [matDatepicker]=\"pegadate\"\n            type=\"text\"\n            [value]=\"filterContainsValue$\"\n            (dateChange)=\"_filterContainsDateValue($event, dateInput.value)\"\n          />\n          <mat-datepicker-toggle matSuffix [for]=\"pegadate\"></mat-datepicker-toggle>\n          <mat-datepicker #pegadate [startAt]=\"filterContainsValue$\"></mat-datepicker>\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsDateTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Date time</mat-label>\n          <input matInput type=\"datetime-local\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsDateTimeValue($event)\" />\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Time</mat-label>\n          <input matInput type=\"time\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsTimeValue($event)\" />\n        </mat-form-field>\n      </div>\n\n      <component-mapper\n        name=\"ActionButtons\"\n        [props]=\"{ arMainButtons$: arFilterMainButtons$, arSecondaryButtons$: arFilterSecondaryButtons$ }\"\n        [parent]=\"this\"\n        [outputEvents]=\"{ actionButtonClick: _onFilterActionButtonClick }\"\n      ></component-mapper>\n    </div>\n  </div>\n</div>\n", styles: [".psdk-list-header{background-color:var(--app-form-color);padding:1rem;margin:.5rem;border-radius:.6125rem}table{width:100%}::ng-deep .mat-sort-header-content{white-space:nowrap}::ng-deep td.mat-mdc-cell{white-space:nowrap}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{padding:0rem .188rem}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:nowrap;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem;padding-right:.625rem}.psdk-icon-search{vertical-align:sub;padding:.125rem;min-width:unset;width:1.1rem}.psdk-outer-div-in-form{padding:1rem;overflow:hidden}.psdk-inner-div-in-form{height:auto;position:relative;width:100%;overflow:auto;max-height:550px;min-height:auto}.psdk-list-view-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-filter-svg-icon,.psdk-arrow-svg-icon{width:1rem;display:inline-block;vertical-align:middle;filter:var(--app-neutral-color-filter)}.psdk-filter-popover{display:table;margin:auto;min-width:100px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color);position:absolute;z-index:99}.psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-dialog-background-color);position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color)}.psdk-no-records{height:56px;justify-content:center;display:flex;align-items:center;border:1px solid var(--app-neutral-light-color);border-top:none}.psdk-table-field-link{color:var(--app-primary-color);padding:0;cursor:pointer;border:0;background-color:transparent;align-items:center}\n"] }]
+                    ], template: "<div class=\"psdk-list-header\">\n  <div>\n    <mat-form-field class=\"psdk-search\" *ngIf=\"bShowSearch$\">\n      <mat-label><img class=\"psdk-icon-search\" src=\"{{ searchIcon$ }}\" /> <span class=\"psdk-search-label\">Search</span> </mat-label>\n      <input matInput id=\"search\" (keyup)=\"applySearch($event)\" placeholder=\"\" />\n    </mat-form-field>\n\n    <div *ngIf=\"!bInForm$\" class=\"psdk-outer-div-in-form\">\n      <div class=\"psdk-inner-div-in-form\" *ngIf=\"bColumnReorder$\">\n        <div>\n          <table\n            mat-table\n            id=\"list-view\"\n            [dataSource]=\"repeatList$\"\n            matSort\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            (cdkDropListDropped)=\"drop($event)\"\n          >\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\" sticky=\"true\">\n              <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\" (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\" cdkDrag>\n                {{ dCol.config.label }}\n                <div class=\"psdk-mat-header-filter\">\n                  <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n                </div>\n                <div class=\"psdk-mat-header-arrow\">\n                  <img class=\"psdk-arrow-svg-icon\" arrow=\"none\" [attr.arrowid]=\"dCol.config.name\" />\n                </div>\n                <div class=\"psdk-mat-header-button\" (click)=\"$event.stopPropagation()\">\n                  <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n                    <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n                  </button>\n                  <mat-menu #groupMenu>\n                    <button *ngIf=\"!_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_groupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n                    </button>\n                    <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n                    </button>\n                    <button mat-menu-item (click)=\"_filter($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n                    </button>\n                  </mat-menu>\n                </div>\n              </th>\n              <td mat-cell *matCellDef=\"let element; index as i\">\n                <button\n                  *ngIf=\"_showButton(dCol.config.name, dCol); else regular\"\n                  mat-button\n                  color=\"primary\"\n                  (click)=\"_listViewClick(dCol.config, element)\"\n                >\n                  {{ element[dCol.config.name] || '---' }}\n                </button>\n                <ng-template #regular>\n                  {{ element[dCol.config.name] || '---' }}\n                </ng-template>\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n\n            <!-- Group header -->\n            <ng-container matColumnDef=\"groupHeader\">\n              <td mat-cell colspan=\"999\" *matCellDef=\"let group\">\n                <mat-icon *ngIf=\"group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_less</mat-icon>\n                <mat-icon *ngIf=\"!group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_more</mat-icon>\n                <strong\n                  >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{\n                    group.totalCounts\n                  }})</strong\n                >\n              </td>\n            </ng-container>\n\n            <tr mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroup\" (click)=\"_groupHeaderClick(row)\"></tr>\n          </table>\n        </div>\n      </div>\n      <div class=\"psdk-inner-div-in-form\" *ngIf=\"!bColumnReorder$\">\n        <div>\n          <table mat-table id=\"list-view\" [dataSource]=\"repeatList$\" matSort>\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\" sticky=\"true\">\n              <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\" (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n                {{ dCol.config.label }}\n                <div class=\"psdk-mat-header-filter\">\n                  <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n                </div>\n                <div class=\"psdk-mat-header-arrow\">\n                  <img class=\"psdk-arrow-svg-icon\" arrow=\"none\" [attr.arrowid]=\"dCol.config.name\" />\n                </div>\n                <div class=\"psdk-mat-header-button\" (click)=\"$event.stopPropagation()\">\n                  <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n                    <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n                  </button>\n                  <mat-menu #groupMenu>\n                    <button *ngIf=\"!_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_groupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n                    </button>\n                    <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n                    </button>\n                    <button mat-menu-item (click)=\"_filter($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n                    </button>\n                  </mat-menu>\n                </div>\n              </th>\n              <td mat-cell *matCellDef=\"let element; index as i\">\n                <button\n                  *ngIf=\"_showButton(dCol.config.name, dCol); else regular\"\n                  mat-button\n                  color=\"primary\"\n                  (click)=\"_listViewClick(dCol.config, element)\"\n                >\n                  {{ element[dCol.config.name] || '---' }}\n                </button>\n                <ng-template #regular>\n                  {{ element[dCol.config.name] || '---' }}\n                </ng-template>\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n\n            <!-- Group header -->\n            <ng-container matColumnDef=\"groupHeader\">\n              <td mat-cell colspan=\"999\" *matCellDef=\"let group\">\n                <mat-icon *ngIf=\"group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_less</mat-icon>\n                <mat-icon *ngIf=\"!group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_more</mat-icon>\n                <strong\n                  >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{\n                    group.totalCounts\n                  }})</strong\n                >\n              </td>\n            </ng-container>\n\n            <tr mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroup\" (click)=\"_groupHeaderClick(row)\"></tr>\n          </table>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"bInForm$\">\n      <div>\n        <div class=\"psdk-inner-div-in-form\">\n          <table id=\"list-view\" *ngIf=\"repeatListData.length > 0\" mat-table [dataSource]=\"repeatList$\" matSort>\n            <ng-container *ngIf=\"singleSelectionMode\" matColumnDef=\"select\">\n              <th mat-header-cell *matHeaderCellDef></th>\n              <td mat-cell *matCellDef=\"let row\">\n                <mat-radio-button [value]=\"row[rowID]\" [checked]=\"row[rowID] === checkBoxValue\" (change)=\"fieldOnChange(row)\"></mat-radio-button>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"multiSelectionMode\" matColumnDef=\"select\">\n              <th mat-header-cell *matHeaderCellDef></th>\n              <td mat-cell *matCellDef=\"let row\">\n                <mat-checkbox [value]=\"row[rowID]\" [checked]=\"isChecked(row)\" (change)=\"onCheckboxClick(row, $event)\"></mat-checkbox>\n              </td>\n            </ng-container>\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\">\n              <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n                {{ dCol.config.label }}\n              </th>\n              <td mat-cell *matCellDef=\"let element\">{{ element[dCol.config.name] || '---' }}</td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n          </table>\n          <div *ngIf=\"repeatListData?.length === 0\">\n            <table id=\"list-view\" *ngIf=\"repeatListData?.length === 0\" mat-table [dataSource]=\"repeatList$\">\n              <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\">\n                <th mat-header-cell *matHeaderCellDef>{{ dCol.config.label }}</th>\n              </ng-container>\n              <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n            </table>\n          </div>\n          <div class=\"psdk-no-records\" *ngIf=\"repeatListData?.length === 0\">No Records Found.</div>\n        </div>\n      </div>\n    </div>\n\n    <mat-paginator id=\"pagination\" *ngIf=\"bInForm$\" [pageSizeOptions]=\"[10, 20, 50, 100, 500, 1000]\" showFirstLastButtons></mat-paginator>\n    <mat-paginator id=\"pagination\" *ngIf=\"!bInForm$\" [pageSizeOptions]=\"[10, 20, 50, 100, 500]\" showFirstLastButtons></mat-paginator>\n  </div>\n\n  <!-- pop overs for filters-->\n  <div *ngIf=\"bShowFilterPopover$\" class=\"psdk-dialog-background\">\n    <div class=\"psdk-modal-file-top\">\n      <h4>\n        Filter:<b> {{ filterContainsLabel$ }}</b>\n      </h4>\n      <div *ngIf=\"bContains$\">\n        <mat-form-field class=\"psdk-full-width\">\n          <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n            <mat-option value=\"contains\">Contains</mat-option>\n            <mat-option value=\"equals\">Equals</mat-option>\n            <mat-option value=\"startswith\">Starts with</mat-option>\n          </mat-select>\n        </mat-form-field>\n\n        <mat-form-field class=\"psdk-full-width\">\n          <input matInput type=\"text\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsValue($event)\" />\n        </mat-form-field>\n      </div>\n\n      <div *ngIf=\"bDateTime$\">\n        <mat-form-field class=\"psdk-full-width\">\n          <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n            <mat-option value=\"notequal\">is not equal to</mat-option>\n            <mat-option value=\"after\">after</mat-option>\n            <mat-option value=\"before\">before</mat-option>\n            <mat-option value=\"null\">is null</mat-option>\n            <mat-option value=\"notnull\">is not null</mat-option>\n          </mat-select>\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsDate$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Date</mat-label>\n          <input\n            matInput\n            #dateInput\n            [matDatepicker]=\"pegadate\"\n            type=\"text\"\n            [value]=\"filterContainsValue$\"\n            (dateChange)=\"_filterContainsDateValue($event, dateInput.value)\"\n          />\n          <mat-datepicker-toggle matSuffix [for]=\"pegadate\"></mat-datepicker-toggle>\n          <mat-datepicker #pegadate [startAt]=\"filterContainsValue$\"></mat-datepicker>\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsDateTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Date time</mat-label>\n          <input matInput type=\"datetime-local\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsDateTimeValue($event)\" />\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Time</mat-label>\n          <input matInput type=\"time\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsTimeValue($event)\" />\n        </mat-form-field>\n      </div>\n\n      <component-mapper\n        name=\"ActionButtons\"\n        [props]=\"{ arMainButtons$: arFilterMainButtons$, arSecondaryButtons$: arFilterSecondaryButtons$ }\"\n        [parent]=\"this\"\n        [outputEvents]=\"{ actionButtonClick: _onFilterActionButtonClick }\"\n      ></component-mapper>\n    </div>\n  </div>\n</div>\n", styles: [".psdk-list-header{background-color:var(--app-form-color);padding:1rem;margin:.5rem;border-radius:.6125rem}table{width:100%}::ng-deep .mat-sort-header-content{white-space:nowrap}::ng-deep td.mat-mdc-cell{white-space:nowrap}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{padding:0rem .188rem}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:nowrap;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem;padding-right:.625rem}.psdk-icon-search{vertical-align:sub;padding:.125rem;min-width:unset;width:1.1rem}.psdk-outer-div-in-form{padding:1rem;overflow:hidden}.psdk-inner-div-in-form{height:auto;position:relative;width:100%;overflow:auto;max-height:550px;min-height:auto}.psdk-list-view-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-filter-svg-icon,.psdk-arrow-svg-icon{width:1rem;display:inline-block;vertical-align:middle;filter:var(--app-neutral-color-filter)}.psdk-filter-popover{display:table;margin:auto;min-width:100px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color);position:absolute;z-index:99}.psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-dialog-background-color);position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color)}.psdk-no-records{height:56px;justify-content:center;display:flex;align-items:center;border:1px solid var(--app-neutral-light-color);border-top:none}.psdk-table-field-link{color:var(--app-primary-color);padding:0;cursor:pointer;border:0;background-color:transparent;align-items:center}\n"] }]
         }], ctorParameters: () => [{ type: ProgressSpinnerService }, { type: Utils }], propDecorators: { paginator: [{
                 type: ViewChild,
                 args: [MatPaginator]
@@ -13712,10 +13660,8 @@ class SimpleTableComponent {
         const { multiRecordDisplayAs } = this.configProps$;
         let { contextClass } = this.configProps$;
         if (!contextClass) {
-            // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'
             let listName = this.pConn$.getComponentConfig().referenceList;
             listName = PCore.getAnnotationUtils().getPropertyName(listName);
-            // @ts-ignore - Property 'getFieldMetadata' is private and only accessible within class 'C11nEnv'
             contextClass = this.pConn$.getFieldMetadata(listName)?.pageClass;
         }
         if (multiRecordDisplayAs === 'fieldGroup') {
@@ -13876,10 +13822,8 @@ class SimpleTableManualComponent {
         let { contextClass } = this.configProps$;
         this.referenceList = referenceList;
         if (!contextClass) {
-            // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'
             let listName = this.pConn$.getComponentConfig().referenceList;
             listName = PCore.getAnnotationUtils().getPropertyName(listName);
-            // @ts-ignore - Property 'getFieldMetadata' is private and only accessible within class 'C11nEnv'
             contextClass = this.pConn$.getFieldMetadata(listName)?.pageClass;
         }
         this.contextClass = contextClass;
@@ -13967,17 +13911,18 @@ class SimpleTableManualComponent {
         if (this.isInitialized) {
             this.isInitialized = false;
             if (this.allowEditingInModal) {
+                // @ts-ignore - An argument for 'uniqueField' was not provided.
                 this.pConn$.getListActions().initDefaultPageInstructions(this.pConn$.getReferenceList(), this.fieldDefs.filter(item => item.name).map(item => item.name));
             }
             else {
-                // @ts-ignore - An argument for 'fields' was not provided
+                // @ts-ignore - An argument for 'propertyNames' was not provided.
                 this.pConn$.getListActions().initDefaultPageInstructions(this.pConn$.getReferenceList());
             }
         }
     }
     getResultsText() {
         const recordsCount = this.readOnlyMode ? this.rowData?.data.length : this.referenceList?.length;
-        return `${recordsCount} result${recordsCount > 1 ? 's' : ''}`;
+        return `${recordsCount || 0} result${recordsCount > 1 ? 's' : ''}`;
     }
     sortCompare(a, b) {
         let aValue = a[this.compareRef];
@@ -14468,13 +14413,8 @@ class SimpleTableManualComponent {
         }
     }
     deleteRecord(index) {
-        if (PCore.getPCoreVersion()?.includes('8.7')) {
-            this.pConn$.getListActions().deleteEntry(index, this.pageReference);
-        }
-        else {
-            // @ts-ignore - second parameter "pageRef" is optional for deleteEntry method
-            this.pConn$.getListActions().deleteEntry(index);
-        }
+        // @ts-ignore - second parameter "pageRef" is optional for deleteEntry method
+        this.pConn$.getListActions().deleteEntry(index);
     }
     buildElementsForTable() {
         const context = this.pConn$.getContextName();
@@ -14589,10 +14529,8 @@ class SimpleTableSelectComponent {
                 contextPageReference = pageReference.concat('.').concat(referenceProp);
             }
             const metadata = isMultiSelectMode
-                ? // @ts-ignore - Property 'getFieldMetadata' is private and only accessible within class 'C11nEnv'
-                    this.pConn$.getFieldMetadata(`@P .${referenceProp}`)
-                : // @ts-ignore - Property 'getCurrentPageFieldMetadata' is private and only accessible within class 'C11nEnv'
-                    this.pConn$.getCurrentPageFieldMetadata(contextPageReference);
+                ? this.pConn$.getFieldMetadata(`@P .${referenceProp}`)
+                : this.pConn$.getCurrentPageFieldMetadata(contextPageReference);
             const { datasource: { parameters: fieldParameters = {} } = {}, pageClass } = metadata;
             this.pageClass = pageClass;
             const compositeKeys = [];
@@ -15016,11 +14954,7 @@ class AttachmentComponent {
         this.bDisabled$ = false;
         this.bVisible$ = true;
         this.bLoading$ = false;
-        this.arFiles$ = [];
-        this.arFileList$ = [];
-        this.arMenuList$ = [];
         this.bShowSelector$ = true;
-        this.bShowJustDelete$ = false;
         this.fileTemp = {};
         this.allowMultiple$ = false;
         this.extensions$ = '';
@@ -15030,85 +14964,13 @@ class AttachmentComponent {
         this.localeCategory = 'CosmosFields';
         this.uploadMultipleFilesLabel = this.localizedVal('file_upload_text_multiple', this.localeCategory);
         this.uploadSingleFileLabel = this.localizedVal('file_upload_text_one', this.localeCategory);
+        this.filesWithError = [];
+        this.files = [];
         this.fileDownload = (data, fileName, ext) => {
             const file = ext ? `${fileName}.${ext}` : fileName;
             download(atob(data), file);
         };
         this.getAttachmentKey = (name = '') => (name ? `attachmentsList.${name}` : 'attachmentsList');
-        this.getNewListUtilityItemProps = ({ att, cancelFile, downloadFile, deleteFile, removeFile }) => {
-            let actions;
-            let isDownloadable = false;
-            if (att.progress && att.progress !== 100) {
-                actions = [
-                    {
-                        id: `Cancel-${att.ID}`,
-                        text: this.pConn$.getLocalizedValue('Cancel', '', ''),
-                        icon: 'times',
-                        onClick: cancelFile
-                    }
-                ];
-            }
-            else if (att.links) {
-                const isFile = att.type === 'FILE';
-                const ID = att.ID.replace(/\s/gi, '');
-                const actionsMap = new Map([
-                    [
-                        'download',
-                        {
-                            id: `download-${ID}`,
-                            text: isFile ? this.pConn$.getLocalizedValue('Download', '', '') : this.pConn$.getLocalizedValue('Open', '', ''),
-                            icon: isFile ? 'download' : 'open',
-                            onClick: downloadFile
-                        }
-                    ],
-                    [
-                        'delete',
-                        {
-                            id: `Delete-${ID}`,
-                            text: this.pConn$.getLocalizedValue('Delete', '', ''),
-                            icon: 'trash',
-                            onClick: deleteFile
-                        }
-                    ]
-                ]);
-                actions = [];
-                actionsMap.forEach((action, actionKey) => {
-                    if (att.links[actionKey]) {
-                        actions.push(action);
-                    }
-                });
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                isDownloadable = att.links.download;
-            }
-            else if (att.error) {
-                actions = [
-                    {
-                        id: `Remove-${att.ID}`,
-                        text: this.pConn$.getLocalizedValue('Remove', '', ''),
-                        icon: 'trash',
-                        onClick: removeFile
-                    }
-                ];
-            }
-            return {
-                id: att.ID,
-                visual: {
-                    icon: this.utils.getIconForAttachment(att),
-                    progress: att.progress == 100 ? undefined : att.progress
-                },
-                primary: {
-                    type: att.type,
-                    name: att.error ? att.fileName : att.name,
-                    icon: 'trash',
-                    click: removeFile
-                },
-                secondary: {
-                    text: att.meta,
-                    error: att.error
-                },
-                actions
-            };
-        };
         this.validateFileExtension = (fileObj, allowedExtensions) => {
             if (!allowedExtensions) {
                 return true;
@@ -15124,10 +14986,31 @@ class AttachmentComponent {
     ngOnInit() {
         // // First thing in initialization is registering and subscribing to the AngularPConnect service
         this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
-        this.removeFileFromList$ = { onClick: this._removeFileFromList.bind(this) };
         this.caseID = PCore.getStoreValue('.pyID', 'caseInfo.content', this.pConn$.getContextName());
-        // let configProps: any = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
+        this.srcImg = this.utils.getImageSrc('document-doc', this.utils.getSDKStaticContentUrl());
+        this.deleteIcon = this.utils.getImageSrc('trash', this.utils.getSDKStaticContentUrl());
         this.checkAndUpdate();
+        this.getAttachments();
+    }
+    getAttachments() {
+        let tempUploadedFiles = this.getCurrentAttachmentsList(this.getAttachmentKey(this.valueRef), this.pConn$.getContextName());
+        tempUploadedFiles = tempUploadedFiles.filter(f => f.label === this.valueRef && f.delete !== true);
+        this.files?.map(f => {
+            return f.responseProps?.pzInsKey && !f.responseProps.pzInsKey.includes('temp')
+                ? {
+                    ...f,
+                    props: {
+                        ...f.props,
+                        onDelete: () => this.deleteFile(f)
+                    }
+                }
+                : { ...f };
+        });
+        this.files = [...this.files, ...tempUploadedFiles];
+        PCore.getPubSubUtils().subscribe(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION, this.resetAttachmentStoredState.bind(this), this.caseID);
+        return () => {
+            PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION, this.caseID);
+        };
     }
     checkAndUpdate() {
         // Should always check the bridge to see if the component should
@@ -15138,64 +15021,14 @@ class AttachmentComponent {
             this.updateSelf();
         }
     }
-    ngOnDestroy() {
-        if (this.angularPConnectData.unsubscribeFn) {
-            this.angularPConnectData.unsubscribeFn();
-        }
-        PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION, this.caseID);
-    }
     // Callback passed when subscribing to store change
     onStateChange() {
         this.checkAndUpdate();
     }
-    updateAttachmentsInfo() {
-        // @ts-ignore - Property 'attachmentsInfo' does not exist on type 'C11nEnv'
-        if (!this.pConn$.attachmentsInfo) {
-            // @ts-ignore - Property 'attachmentsInfo' does not exist on type 'C11nEnv'
-            this.pConn$.attachmentsInfo = {
-                type: 'File',
-                attachmentFieldName: this.att_valueRef,
-                category: this.att_categoryName
-            };
-        }
-    }
-    processFile(file, i) {
-        file.props.type = file.responseProps.pyMimeFileExtension;
-        file.props.mimeType = file.responseProps.pyMimeFileExtension;
-        file.props.ID = file.responseProps.pzInsKey;
-        const arMenuList = [
-            {
-                icon: 'download',
-                text: this.pConn$.getLocalizedValue('Download', '', ''),
-                onClick: () => this._downloadFileFromList(this.value$.pxResults[i])
-            },
-            {
-                icon: 'trash',
-                text: this.pConn$.getLocalizedValue('Delete', '', ''),
-                onClick: () => this._removeFileFromList(this.arFileList$[i])
-            }
-        ];
-        const arFilesAttachmentIDs = [];
-        this.arFileList$.forEach(arFile => {
-            arFilesAttachmentIDs.push(arFile.id);
-        });
-        if (!arFilesAttachmentIDs.includes(file.props.ID)) {
-            this.arFileList$.push(this.getNewListUtilityItemProps({
-                att: file.props,
-                downloadFile: null,
-                cancelFile: null,
-                deleteFile: null,
-                removeFile: null
-            }));
-        }
-        this.arFileList$[i].actions = arMenuList;
-        this.arFileList$[i].noDeleteIcon = true;
-        this.bShowSelector$ = false;
-    }
     updateSelf() {
         const configProps = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
         const stateProps = this.pConn$.getStateProps();
-        const { value, label, extensions } = configProps;
+        const { value, label, extensions, displayMode } = configProps;
         if (configProps.required != null) {
             this.bRequired$ = this.utils.getBooleanValue(configProps.required);
         }
@@ -15212,7 +15045,6 @@ class AttachmentComponent {
         if (configProps.allowMultiple != null) {
             this.allowMultiple$ = this.utils.getBooleanValue(configProps.allowMultiple);
         }
-        this.bShowJustDelete$ = true;
         this.label$ = label;
         this.value$ = value;
         this.status = stateProps.status;
@@ -15220,83 +15052,47 @@ class AttachmentComponent {
         this.extensions$ = extensions;
         this.valueRef = this.pConn$.getStateProps().value;
         this.valueRef = this.valueRef.startsWith('.') ? this.valueRef.substring(1) : this.valueRef;
+        this.displayMode = displayMode;
         /* this is a temporary fix because required is supposed to be passed as a boolean and NOT as a string */
         let { required, disabled } = configProps;
         [required, disabled] = [required, disabled].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));
-        this.att_categoryName = '';
+        this.categoryName = '';
         if (value && value.pyCategoryName) {
-            this.att_categoryName = value.pyCategoryName;
+            this.categoryName = value.pyCategoryName;
+        }
+        if (value?.pxResults && +value.pyCount > 0) {
+            this.files = value.pxResults.map(f => this.buildFilePropsFromResponse(f));
         }
-        this.att_valueRef = this.pConn$.getStateProps().value;
-        this.att_valueRef = this.att_valueRef.indexOf('.') === 0 ? this.att_valueRef.substring(1) : this.att_valueRef;
         this.updateAttachments();
     }
-    updateAttachments() {
-        const attachmentsFromServer = this.value$ && this.value$.pxResults && +this.value$.pyCount > 0;
-        if (attachmentsFromServer) {
-            this.updateAttachmentsFromServer();
-        }
-        else {
-            // Get the attachments from the Redux
-            this.myFiles = this.getCurrentAttachmentsList(this.getAttachmentKey(this.att_valueRef), this.pConn$.getContextName());
-            if (this.myFiles?.length && this.arFiles$.length === 0) {
-                this.arFileList$ = this.myFiles.map(att => {
-                    return this.getNewListUtilityItemProps({
-                        att,
-                        downloadFile: null,
-                        cancelFile: null,
-                        deleteFile: null,
-                        removeFile: null
-                    });
-                });
+    buildFilePropsFromResponse(respObj) {
+        return {
+            props: {
+                meta: `${respObj.pyCategoryName}, ${respObj.pxCreateOperator}`,
+                name: respObj.pyAttachName,
+                icon: this.utils.getIconFromFileType(respObj.pyMimeFileExtension)
+            },
+            responseProps: {
+                ...respObj
             }
-            const myFilesAttachmentIDs = [];
-            this.myFiles.forEach(myFile => {
-                myFilesAttachmentIDs.push(myFile.ID);
-            });
-            this.arFiles$.forEach(arFile => {
-                if (!myFilesAttachmentIDs.includes(arFile.ID)) {
-                    this.myFiles = [...this.myFiles, arFile];
-                }
-            });
-        }
-        this.bShowJustDelete$ = true;
-        this.bShowSelector$ = !(this.arFileList$?.length > 0) || this.allowMultiple$;
-        if (this.arFileList$.length > 0) {
-            this.CheckForInvalidAttachment();
-        }
-        PCore.getPubSubUtils().subscribe(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION, this.resetAttachmentStoredState.bind(this), this.caseID);
+        };
     }
-    updateAttachmentsFromServer() {
-        this.value$.pxResults.forEach((attachment, i) => {
-            const file = this.buildFilePropsFromResponse(attachment);
-            if (file.responseProps) {
-                this.updateAttachmentsInfo();
-                if (file.responseProps.pzInsKey && !file.responseProps.pzInsKey.includes('temp')) {
-                    this.processFile(file, i);
-                }
-                if (file) {
-                    const currentAttachmentList = this.getCurrentAttachmentsList(this.getAttachmentKey(this.att_valueRef), this.pConn$.getContextName());
-                    const index = currentAttachmentList.findIndex(element => element.props.ID === file.props.ID);
-                    let tempFiles = [];
-                    if (index < 0) {
-                        tempFiles = [file];
-                    }
-                    PCore.getStateUtils().updateState(this.pConn$.getContextName(), this.getAttachmentKey(this.att_valueRef), [...currentAttachmentList, ...tempFiles], {
-                        pageReference: 'context_data',
-                        isArrayDeepMerge: false
-                    });
-                }
-            }
-        });
+    updateAttachments() {
+        if (this.files.length > 0 && this.displayMode !== 'DISPLAY_ONLY') {
+            const currentAttachmentList = this.getCurrentAttachmentsList(this.getAttachmentKey(this.valueRef), this.pConn$.getContextName());
+            // block duplicate files to redux store when added 1 after another to prevent multiple duplicates being added to the case on submit
+            const tempFiles = this.files.filter(f => currentAttachmentList.findIndex(fr => fr.ID === f.ID) === -1 && !f.inProgress && f.responseProps);
+            const updatedAttList = [...currentAttachmentList, ...tempFiles];
+            this.updateAttachmentState(this.pConn$, this.getAttachmentKey(this.valueRef), updatedAttList);
+        }
     }
     resetAttachmentStoredState() {
-        PCore.getStateUtils().updateState(this.pConn$.getContextName(), this.getAttachmentKey(this.att_valueRef), undefined, {
+        PCore.getStateUtils().updateState(this.pConn$?.getContextName(), this.getAttachmentKey(this.valueRef), undefined, {
             pageReference: 'context_data',
             isArrayDeepMerge: false
         });
     }
-    _downloadFileFromList(fileObj) {
+    downloadFile(fileObj) {
         PCore.getAttachmentUtils()
             // @ts-ignore - 3rd parameter "responseEncoding" should be optional
             .downloadAttachment(fileObj.pzInsKey, this.pConn$.getContextName())
@@ -15308,279 +15104,220 @@ class AttachmentComponent {
             console.log(e);
         });
     }
-    CheckForInvalidAttachment() {
-        let isValid = true;
-        this.arFileList$.forEach(file => {
-            if (file.secondary.error) {
-                isValid = false;
-            }
+    getCurrentAttachmentsList(key, context) {
+        return PCore.getStoreValue(`.${key}`, 'context_data', context) || [];
+    }
+    validateMaxSize(fileObj, maxSizeInMB) {
+        const fileSize = (fileObj.size / 1048576).toFixed(2);
+        return parseFloat(fileSize) < parseFloat(maxSizeInMB);
+    }
+    updateAttachmentState(pConn, key, attachments) {
+        PCore.getStateUtils().updateState(this.pConn$.getContextName(), key, attachments, {
+            pageReference: 'context_data',
+            isArrayDeepMerge: false
         });
-        if (isValid) {
-            // @ts-ignore
-            PCore.getMessageManager().clearMessages({
-                type: PCore.getConstants().MESSAGES.MESSAGES_TYPE_ERROR,
-                property: this.pConn$.getStateProps().value,
-                pageReference: this.pConn$.getPageReference(),
-                context: this.pConn$.getContextName()
-            });
-        }
     }
-    _removeFileFromList(item) {
-        const fileListIndex = this.arFileList$.findIndex(element => element?.id === item?.id);
-        const fileIndex = this.arFiles$.findIndex(element => element?.ID === item?.id);
+    deleteFile(file) {
         const attachmentsList = [];
-        let currentAttachmentList = this.getCurrentAttachmentsList(this.getAttachmentKey(this.att_valueRef), this.pConn$.getContextName());
-        if (this.value$ && this.value$.pxResults && +this.value$.pyCount > 0 && item.actions) {
-            const updatedAttachments = currentAttachmentList.map(attachment => {
-                if (attachment?.ID === this.arFileList$[fileListIndex].id || attachment?.props?.ID === this.arFileList$[fileListIndex].id) {
-                    return { ...attachment, delete: true, label: this.valueRef };
+        let currentAttachmentList = this.getCurrentAttachmentsList(this.getAttachmentKey(this.valueRef), this.pConn$.getContextName());
+        // If file to be deleted is the one added in previous stage i.e. for which a file instance is created in server
+        // no need to filter currentAttachmentList as we will get another entry of file in redux with delete & label
+        // eslint-disable-next-line no-unsafe-optional-chaining
+        if (this.value$ && this.value$?.pxResults && +this.value$?.pyCount > 0 && file.responseProps && file?.responseProps?.pzInsKey !== 'temp') {
+            const updatedAttachments = this.files.map(f => {
+                if (f.responseProps && f.responseProps.pzInsKey === file.responseProps.pzInsKey) {
+                    return { ...f, delete: true, label: this.valueRef };
                 }
-                return attachment;
+                return f;
             });
             // updating the redux store to help form-handler in passing the data to delete the file from server
-            PCore.getStateUtils().updateState(this.pConn$.getContextName(), this.getAttachmentKey(this.att_valueRef), updatedAttachments, {
-                pageReference: 'context_data',
-                isArrayDeepMerge: false
-            });
-        }
+            this.updateAttachmentState(this.pConn$, this.getAttachmentKey(this.valueRef), [...updatedAttachments]);
+            const newlyAddedFiles = this.files.filter(f => !!f.ID);
+            const filesPostDelete = this.files.filter(f => f.responseProps?.pzInsKey !== 'temp' && f.responseProps?.pzInsKey !== file.responseProps?.pzInsKey);
+            this.files = [...filesPostDelete, ...newlyAddedFiles];
+        } //  if the file being deleted is the added in this stage  i.e. whose data is not yet created in server
         else {
-            currentAttachmentList = currentAttachmentList.filter(f => f.ID !== item.id);
-            PCore.getStateUtils().updateState(this.pConn$.getContextName(), this.getAttachmentKey(this.att_valueRef), [...currentAttachmentList, ...attachmentsList], {
-                pageReference: 'context_data',
-                isArrayDeepMerge: false
-            });
+            // filter newly added files in this stage, later the updated current stage files will be added to redux once files state is updated
+            currentAttachmentList = currentAttachmentList.filter(f => f.ID !== file.ID);
+            this.files = this.files.filter(f => f.ID !== file.ID);
+            this.updateAttachmentState(this.pConn$, this.getAttachmentKey(this.valueRef), [...currentAttachmentList, ...attachmentsList]);
+            if (file.inProgress) {
+                // @ts-ignore - 3rd parameter "responseEncoding" should be optional
+                PCore.getAttachmentUtils().cancelRequest(file.ID, pConn.getContextName());
+            }
+        }
+        this.filesWithError = this.filesWithError?.filter(f => f.ID !== file.ID);
+        if (this.filesWithError.length === 0) {
+            this.clearFieldErrorMessages();
+        }
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        this.fileInput && this.fileInput.nativeElement.value ? null : '';
+    }
+    onFileAdded(event) {
+        let addedFiles = Array.from(event.target.files);
+        addedFiles = this.allowMultiple$ ? addedFiles : [addedFiles[0]];
+        const maxAttachmentSize = PCore.getEnvironmentInfo().getMaxAttachmentSize() || '5';
+        this.tempFilesToBeUploaded = [
+            ...addedFiles.map((f, index) => {
+                f.ID = `${new Date().getTime()}I${index}`;
+                f.inProgress = true;
+                f.props = {
+                    type: f.type,
+                    name: f.name,
+                    icon: this.utils.getIconFromFileType(f.type),
+                    onDelete: () => this.deleteFile(f)
+                };
+                if (!this.validateMaxSize(f, maxAttachmentSize)) {
+                    f.props.error = true;
+                    f.inProgress = false;
+                    f.props.meta = this.pConn$.getLocalizedValue(`File is too big. Max allowed size is ${maxAttachmentSize}MB.`, '', '');
+                }
+                else if (!this.validateFileExtension(f, this.extensions$)) {
+                    f.props.error = true;
+                    f.inProgress = false;
+                    f.props.meta = `${this.pConn$.getLocalizedValue('File has invalid extension. Allowed extensions are:', '', '')} ${this.extensions$.replaceAll('.', '')}`;
+                }
+                if (f.props.error) {
+                    const fieldName = this.pConn$.getStateProps().value;
+                    const context = this.pConn$.getContextName();
+                    PCore.getMessageManager().addMessages({
+                        messages: [
+                            {
+                                type: 'error',
+                                // @ts-ignore - Type '{ type: string; message: string; }' is not assignable to type 'MessagesConfigObject'.
+                                message: pConn.getLocalizedValue('Error with one or more files', '', '')
+                            }
+                        ],
+                        property: fieldName,
+                        pageReference: this.pConn$.getPageReference(),
+                        context
+                    });
+                }
+                return f;
+            })
+        ];
+        const tempFilesWithError = this.tempFilesToBeUploaded.filter(f => f.props.error);
+        if (tempFilesWithError.length > 0) {
+            this.filesWithError = tempFilesWithError;
         }
-        if (fileListIndex > -1) {
-            this.arFileList$.splice(fileListIndex, 1);
+        if (!this.allowMultiple$) {
+            this.files = [...this.tempFilesToBeUploaded];
         }
-        if (fileIndex > -1) {
-            this.arFiles$.splice(fileIndex, 1);
+        else {
+            this.files = [...this.files, ...this.tempFilesToBeUploaded];
         }
-        this.CheckForInvalidAttachment();
-        this.bShowSelector$ = !(this.arFileList$?.length > 0) || this.allowMultiple$;
+        this.uploadFiles();
     }
-    getCurrentAttachmentsList(key, context) {
-        return PCore.getStoreValue(`.${key}`, 'context_data', context) || [];
+    clearFieldErrorMessages() {
+        const fieldName = this.pConn$.getStateProps().value;
+        const context = this.pConn$.getContextName();
+        PCore.getMessageManager().clearMessages({
+            type: PCore.getConstants().MESSAGES.MESSAGES_TYPE_ERROR,
+            property: fieldName,
+            pageReference: this.pConn$.getPageReference(),
+            context
+        });
     }
-    errorHandler(isFetchCanceled, file) {
+    onUploadProgress() { }
+    errorHandler(isFetchCanceled, attachedFile) {
         return error => {
             if (!isFetchCanceled(error)) {
                 let uploadFailMsg = this.pConn$.getLocalizedValue('Something went wrong', '', '');
                 if (error.response && error.response.data && error.response.data.errorDetails) {
                     uploadFailMsg = this.pConn$.getLocalizedValue(error.response.data.errorDetails[0].localizedValue, '', '');
                 }
-                for (const myFile of this.myFiles) {
-                    if (myFile.ID === file.ID) {
-                        myFile.meta = uploadFailMsg;
-                        myFile.error = true;
-                        myFile.fileName = this.pConn$.getLocalizedValue('Unable to upload file', '', '');
-                    }
-                }
-                this.bShowSelector$ = false;
-                this.arFileList$ = this.myFiles.map(att => {
-                    if (att.id) {
-                        return att;
+                this.files.map(f => {
+                    if (f.ID === attachedFile.ID) {
+                        f.props.meta = uploadFailMsg;
+                        f.props.error = true;
+                        f.props.onDelete = () => this.deleteFile(f);
+                        f.props.icon = this.utils.getIconFromFileType(f.type);
+                        f.props.name = this.pConn$.getLocalizedValue('Unable to upload file', '', '');
+                        f.inProgress = false;
+                        const fieldName = this.pConn$.getStateProps().value;
+                        const context = this.pConn$.getContextName();
+                        // set errors to property to block submit even on errors in file upload
+                        PCore.getMessageManager().addMessages({
+                            messages: [
+                                {
+                                    type: 'error',
+                                    // @ts-ignore - Type '{ type: string; message: string; }' is not assignable to type 'MessagesConfigObject'.
+                                    message: this.pConn$.getLocalizedValue('Error with one or more files', '', '')
+                                }
+                            ],
+                            property: fieldName,
+                            pageReference: this.pConn$.getPageReference(),
+                            context
+                        });
+                        delete f.props.progress;
                     }
-                    return this.getNewListUtilityItemProps({
-                        att,
-                        downloadFile: null,
-                        cancelFile: null,
-                        deleteFile: null,
-                        removeFile: null
-                    });
-                });
-                PCore.getMessageManager().addMessages({
-                    // @ts-ignore
-                    messages: [
-                        {
-                            type: 'error',
-                            message: this.pConn$.getLocalizedValue('Error with one or more files', '', '')
-                        }
-                    ],
-                    property: this.pConn$.getStateProps().value,
-                    pageReference: this.pConn$.getPageReference(),
-                    context: this.pConn$.getContextName()
+                    return f;
                 });
-                this.bShowJustDelete$ = true;
-                this.bLoading$ = false;
             }
             throw error;
         };
     }
-    uploadMyFiles(event) {
-        let arrAttachmentFiles = [];
-        if (this.arFiles$.length) {
-            arrAttachmentFiles = this.arFiles$;
-        }
-        else {
-            arrAttachmentFiles = this.arFileList$;
-        }
-        this.arFiles$ = [...arrAttachmentFiles, ...this.getFiles(event.target.files)];
-        // convert FileList to an array
-        this.myFiles = Array.from(this.arFiles$);
-        this.bLoading$ = true;
-        const filesToBeUploaded = this.myFiles
+    uploadFiles() {
+        const filesToBeUploaded = this.files
             .filter(e => {
-            if (e.id) {
-                return false;
-            }
-            const isFileUploaded = e && e.progress === 100;
-            const fileHasError = e && e.error;
+            const isFileUploaded = e.props && e.props.progress === 100;
+            const fileHasError = e.props && e.props.error;
             const isFileUploadedinLastStep = e.responseProps && e.responseProps.pzInsKey;
             return !isFileUploaded && !fileHasError && !isFileUploadedinLastStep;
         })
-            .map(f => PCore.getAttachmentUtils().uploadAttachment(f, () => {
+            .map(f => window.PCore.getAttachmentUtils().uploadAttachment(f, () => {
             this.onUploadProgress();
         }, isFetchCanceled => {
             return this.errorHandler(isFetchCanceled, f);
         }, this.pConn$.getContextName()));
         Promise.allSettled(filesToBeUploaded)
             .then((fileResponses) => {
-            this.handleFileUploadSuccess(fileResponses);
-        })
-            .catch(error => {
-            console.log(error);
-            this.handleFileUploadFailure();
-        });
-    }
-    handleFileUploadSuccess(fileResponses) {
-        const successFileResponses = fileResponses.filter(fr => fr.status !== 'rejected'); // in case of deleting an in progress file, promise gets cancelled but still enters then block
-        let reqObj;
-        if (successFileResponses.length > 0) {
-            const tempFilesUploaded = [...this.arFiles$.filter(file => !file.id)];
-            let newAttachments = [];
-            tempFilesUploaded.forEach(fileRes => {
-                const index = successFileResponses.findIndex((fr) => fr.value.clientFileID === fileRes.ID);
-                if (index >= 0) {
-                    reqObj = {
-                        type: 'File',
-                        label: this.att_valueRef,
-                        category: this.att_categoryName,
-                        handle: successFileResponses[index].value.ID,
-                        ID: fileRes.ID,
-                        name: fileRes.name
-                    };
-                    newAttachments = [...newAttachments, reqObj];
-                }
-            });
-            const currentAttachmentList = this.getCurrentAttachmentsList(this.getAttachmentKey(this.att_valueRef), this.pConn$.getContextName()).filter(f => f.label !== this.att_valueRef);
-            PCore.getStateUtils().updateState(this.pConn$.getContextName(), this.getAttachmentKey(this.att_valueRef), [...currentAttachmentList, ...newAttachments], {
-                pageReference: 'context_data',
-                isArrayDeepMerge: false
-            });
-            this.arFiles$ = tempFilesUploaded;
-            this.ngZone.run(() => {
-                this.bShowSelector$ = this.allowMultiple$;
-                this.arFiles$.forEach(file => {
-                    if (!file.error) {
-                        file.meta = this.pConn$.getLocalizedValue('File uploaded successfully', '', '');
-                    }
-                });
-                this.arFileList$ = this.myFiles.map(att => {
-                    if (att.id) {
-                        return att;
+            fileResponses = fileResponses.filter(fr => fr.status !== 'rejected'); // in case of deleting an in progress file, promise gets cancelled but still enters then block
+            if (fileResponses.length > 0) {
+                this.files.forEach(f => {
+                    const index = fileResponses.findIndex((fr) => fr.value.clientFileID === f.ID);
+                    if (index >= 0) {
+                        f.props.meta = this.pConn$.getLocalizedValue('Uploaded successfully', '', '');
+                        f.props.progress = 100;
+                        f.inProgress = false;
+                        f.handle = fileResponses[index].value.ID;
+                        f.label = this.valueRef;
+                        f.category = this.categoryName;
+                        f.responseProps = {
+                            pzInsKey: 'temp',
+                            pyAttachName: f.props.name
+                        };
                     }
-                    return this.getNewListUtilityItemProps({
-                        att,
-                        downloadFile: null,
-                        cancelFile: null,
-                        deleteFile: null,
-                        removeFile: null
-                    });
                 });
-                this.CheckForInvalidAttachment();
-                this.bShowJustDelete$ = true;
-                this.bLoading$ = false;
-            });
-        }
-    }
-    handleFileUploadFailure() {
-        this.bShowJustDelete$ = true;
-        this.bLoading$ = false;
-        this.bShowSelector$ = this.allowMultiple$;
-        this.myFiles.forEach(file => {
-            if (file?.secondary?.error) {
-                file.meta = 'File uploaded failed';
+                this.updateAttachments();
+                if (this.filesWithError?.length === 0) {
+                    this.clearFieldErrorMessages();
+                }
             }
+        })
+            .catch(error => {
+            console.log(error);
         });
-        this.arFileList$ = this.myFiles.map(att => {
-            return this.getNewListUtilityItemProps({
-                att,
-                downloadFile: null,
-                cancelFile: null,
-                deleteFile: null,
-                removeFile: null
-            });
-        });
-        this.bShowJustDelete$ = true;
-        this.bLoading$ = false;
     }
-    onUploadProgress() { }
-    getFiles(arFiles) {
-        const files = this.allowMultiple$ ? arFiles : [arFiles[0]];
-        return this.setNewFiles(files);
-    }
-    setNewFiles(arFiles) {
-        let index = 0;
-        const maxAttachmentSize = PCore.getEnvironmentInfo().getMaxAttachmentSize() || 5;
-        for (const file of arFiles) {
-            file.mimeType = file.type;
-            file.icon = this.utils.getIconFromFileType(file.type);
-            file.ID = `${new Date().getTime()}I${index}`;
-            if (!this.validateMaxSize(file, maxAttachmentSize)) {
-                file.error = true;
-                file.meta = this.pConn$.getLocalizedValue('File is too big. Max allowed size is 5MB.', '', '');
-            }
-            else if (!this.validateFileExtension(file, this.extensions$)) {
-                file.error = true;
-                file.meta = `${this.pConn$.getLocalizedValue('File has invalid extension. Allowed extensions are:', '', '')} ${this.extensions$.replaceAll('.', '')}`;
-            }
-            if (file.error) {
-                const fieldName = this.pConn$.getStateProps().value;
-                const context = this.pConn$.getContextName();
-                PCore.getMessageManager().addMessages({
-                    // @ts-ignore
-                    messages: [
-                        {
-                            type: 'error',
-                            message: this.pConn$.getLocalizedValue('Error with one or more files', '', '')
-                        }
-                    ],
-                    property: fieldName,
-                    pageReference: this.pConn$.getPageReference(),
-                    context
-                });
-            }
-            index++;
+    ngOnDestroy() {
+        if (this.angularPConnectData.unsubscribeFn) {
+            this.angularPConnectData.unsubscribeFn();
         }
-        return [...arFiles];
-    }
-    validateMaxSize(fileObj, maxSizeInMB) {
-        const fileSize = (fileObj.size / 1048576).toFixed(2);
-        return parseFloat(fileSize) < parseFloat(maxSizeInMB);
-    }
-    buildFilePropsFromResponse(respObj) {
-        return {
-            props: {
-                meta: `${respObj.pyCategoryName}, ${respObj.pxCreateOperator}`,
-                name: respObj.pyAttachName,
-                icon: this.utils.getIconFromFileType(respObj.pyMimeFileExtension)
-            },
-            responseProps: {
-                ...respObj
-            }
-        };
+        PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION, this.caseID);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AttachmentComponent, deps: [{ token: AngularPConnectService }, { token: Utils }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AttachmentComponent, isStandalone: true, selector: "app-attachment", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div class=\"psdk-label-infix-readonly\" *ngIf=\"bVisible$\">\n  <span class=\"psdk-label-wrapper-readonly\">\n    <label [ngClass]=\"{ 'psdk-label-readonly': true, 'label-required': bRequired$ === true }\" [htmlFor]=\"att_valueRef\">{{ label$ }}</label>\n  </span>\n  <div\n    [ngClass]=\"{ 'psdk-modal-file-selector': status !== 'error', 'psdk-modal-file-selector-error': status === 'error' }\"\n    id=\"attachment-container\"\n    *ngIf=\"bShowSelector$\"\n  >\n    <mat-spinner *ngIf=\"bLoading$\" class=\"progress-spinner\" diameter=\"40\"></mat-spinner>\n    <input hidden type=\"file\" [required]=\"bRequired$\" #uploader [id]=\"att_valueRef\" [multiple]=\"allowMultiple$\" (change)=\"uploadMyFiles($event)\" />\n\n    <button mat-stroked-button color=\"primary\" [disabled]=\"bDisabled$\" (click)=\"uploader.click()\">\n      {{\n        allowMultiple$\n          ? uploadMultipleFilesLabel === 'file_upload_text_multiple'\n            ? 'Choose files'\n            : uploadMultipleFilesLabel\n          : uploadSingleFileLabel === 'file_upload_text_one'\n            ? 'Choose a file'\n            : uploadSingleFileLabel\n      }}\n    </button>\n  </div>\n  <span *ngIf=\"validateMessage\" class=\"file-error\">{{ validateMessage }}</span>\n\n  <div class=\"psdk-attachment-list\" *ngIf=\"arFileList$ != null && arFileList$.length > 0\">\n    <div *ngFor=\"let attachment of arFileList$\">\n      <component-mapper\n        *ngIf=\"attachment.noDeleteIcon !== true; else showfull\"\n        name=\"SummaryItem\"\n        [props]=\"{ item$: attachment, menuIconOverride$: 'trash', menuIconOverrideAction$: removeFileFromList$ }\"\n      ></component-mapper>\n      <ng-template #showfull>\n        <component-mapper name=\"SummaryItem\" [props]=\"{ item$: attachment, menuIconOverrideAction$: removeFileFromList$ }\"></component-mapper>\n      </ng-template>\n    </div>\n  </div>\n</div>\n", styles: [".progress-spinner{text-align:center;position:absolute;left:45%}.psdk-modal-file-selector{border:1px dashed var(--app-neutral-dark-color);width:100%;padding:.3rem;text-align:center;position:relative}.label-required:after{display:inline;content:\" *\";vertical-align:top;color:var(--app-neutral-dark-color)}.file-error{color:var(--app-error-light-color)}.psdk-modal-file-selector-error{border:1px dashed var(--app-error-light-color);width:100%;padding:.3rem;text-align:center;position:relative}.psdk-full-width{width:100%}.psdk-label-readonly{opacity:54%;font-size:.8rem;font-weight:400}.psdk-data-readonly{padding-top:.625rem;width:100%}.psdk-attachment-list{border:1px solid var(--app-neutral-color)}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatProgressSpinnerModule) }, { kind: "component", type: i0.forwardRef(() => i4$3.MatProgressSpinner), selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i3$1.MatButton), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AttachmentComponent, isStandalone: true, selector: "app-attachment", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["uploader"], descendants: true }], ngImport: i0, template: "<div class=\"file-upload-container\" *ngIf=\"bVisible$\">\n  <span class=\"attachment-label\" [ngClass]=\"{ 'file-label': bRequired$ }\">{{ label$ }}</span>\n  <div *ngIf=\"(files.length === 0 && !allowMultiple$) || allowMultiple$\">\n    <div\n      style=\"margin-bottom: 10px\"\n      id=\"attachment-container\"\n      [ngClass]=\"validateMessage ? 'psdk-modal-file-selector-error' : 'psdk-modal-file-selector'\"\n    >\n      <div [hidden]=\"true\" id=\"attachment-ID\">\n        {{ valueRef }}\n      </div>\n      <input hidden type=\"file\" [required]=\"bRequired$\" #uploader [id]=\"valueRef\" [multiple]=\"allowMultiple$\" (change)=\"onFileAdded($event)\" />\n      <button mat-stroked-button color=\"primary\" [disabled]=\"bDisabled$\" (click)=\"uploader.click()\">\n        {{\n          allowMultiple$\n            ? uploadMultipleFilesLabel === 'file_upload_text_multiple'\n              ? 'Choose files'\n              : uploadMultipleFilesLabel\n            : uploadSingleFileLabel === 'file_upload_text_one'\n              ? 'Choose a file'\n              : uploadSingleFileLabel\n        }}\n      </button>\n    </div>\n  </div>\n  <span *ngIf=\"validateMessage\" class=\"file-error\">{{ validateMessage }}</span>\n  <div *ngIf=\"files && files.length > 0\">\n    <div *ngFor=\"let file of files\">\n      <div class=\"psdk-attachment-card\">\n        <div className=\"psdk-utility-card-icon\">\n          <img *ngIf=\"!file.inProgress\" class=\"psdk-attachment-card-svg-icon\" src=\"{{ srcImg }}\" />\n          <mat-spinner *ngIf=\"file.inProgress\" class=\"progress-spinner\" diameter=\"40\"></mat-spinner>\n        </div>\n        <div class=\"psdk-attachment-card-main\">\n          <div class=\"psdk-attachment-card-main-primary-label\">{{ file.props.name }}</div>\n          <div *ngIf=\"file.props.meta\" [ngStyle]=\"{ color: file.props.error ? 'red' : null }\">{{ file.props.meta }}</div>\n        </div>\n        <div class=\"psdk-attachment-action\">\n          <button id=\"delete-attachment\" *ngIf=\"file.ID\" class=\"psdk-utility-button\" (click)=\"deleteFile(file)\">\n            <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ deleteIcon }}\" />\n          </button>\n          <div *ngIf=\"!file.ID\">\n            <button id=\"setting-button\" mat-icon-button [matMenuTriggerFor]=\"actionMenu\">\n              <mat-icon>more_vert</mat-icon>\n            </button>\n            <mat-menu #actionMenu=\"matMenu\">\n              <button mat-menu-item (click)=\"downloadFile(file.responseProps ? file.responseProps : {})\">Download</button>\n              <button mat-menu-item (click)=\"deleteFile(file)\">Delete</button>\n            </mat-menu>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".progress-spinner{text-align:center;position:absolute;left:45%}.psdk-modal-file-selector{border:1px dashed var(--app-neutral-dark-color);width:100%;padding:.3rem;text-align:center;position:relative}.psdk-modal-file-selector-error{border:1px dashed var(--app-error-light-color);width:100%;padding:.3rem;text-align:center;position:relative}.psdk-modal-file-selector{border:1px dashed var(--app-neutral-dark-color);padding:.5rem;text-align:center;position:relative}.label-required:after{display:inline;content:\" *\";vertical-align:top;color:var(--app-neutral-dark-color)}.file-error{color:var(--app-error-light-color)}.psdk-modal-file-selector-error{border:1px dashed var(--app-error-light-color);padding:.5rem;text-align:center;position:relative}.psdk-full-width{width:100%}.psdk-label-readonly{opacity:54%;font-size:.8rem;font-weight:400}.psdk-data-readonly{padding-top:.625rem;width:100%}.psdk-attachment-list{border:1px solid var(--app-neutral-color)}::ng-deep .mat-mdc-form-field-infix{width:auto}.psdk-attachment-card{display:flex;align-items:center;border:.0625rem solid rgb(207,207,207);border-radius:.25rem;padding:.25rem 0rem .25rem .25rem;min-height:3rem;margin-bottom:.5rem}.psdk-attachment-card-main-primary-label{font-weight:500;text-overflow:ellipsis;overflow:hidden;white-space:normal}.psdk-attachment-card-main{flex-grow:2;margin-left:5px}.psdk-attachment-action{flex-grow:1;text-align:right}.psdk-attachment-card-svg-icon{width:2.5rem}.psdk-utility-button{background:none;border:none;margin-right:.5rem;cursor:pointer}.psdk-utility-card-action-svg-icon{width:1.4rem;display:inline-block}.file-div{border:1px dashed var(--app-neutral-dark-color);width:100%;padding:.5rem;text-align:center;position:relative}.file-div-error{border:1px dashed var(--app-error-light-color);width:100%;padding:.5rem;text-align:center;position:relative}.attachment-label{display:block;margin-bottom:10px}.file-label:after{display:inline;content:\" *\";vertical-align:top;color:var(--app-neutral-dark-color)}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatProgressSpinnerModule) }, { kind: "component", type: i0.forwardRef(() => i4$3.MatProgressSpinner), selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatMenuModule) }, { kind: "component", type: i0.forwardRef(() => i6$1.MatMenu), selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(() => i6$1.MatMenuItem), selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(() => i6$1.MatMenuTrigger), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i2$2.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i3$1.MatButton), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(() => i3$1.MatIconButton), selector: "button[mat-icon-button]", exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AttachmentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-attachment', standalone: true, imports: [CommonModule, MatProgressSpinnerModule, MatButtonModule, forwardRef(() => ComponentMapperComponent)], template: "<div class=\"psdk-label-infix-readonly\" *ngIf=\"bVisible$\">\n  <span class=\"psdk-label-wrapper-readonly\">\n    <label [ngClass]=\"{ 'psdk-label-readonly': true, 'label-required': bRequired$ === true }\" [htmlFor]=\"att_valueRef\">{{ label$ }}</label>\n  </span>\n  <div\n    [ngClass]=\"{ 'psdk-modal-file-selector': status !== 'error', 'psdk-modal-file-selector-error': status === 'error' }\"\n    id=\"attachment-container\"\n    *ngIf=\"bShowSelector$\"\n  >\n    <mat-spinner *ngIf=\"bLoading$\" class=\"progress-spinner\" diameter=\"40\"></mat-spinner>\n    <input hidden type=\"file\" [required]=\"bRequired$\" #uploader [id]=\"att_valueRef\" [multiple]=\"allowMultiple$\" (change)=\"uploadMyFiles($event)\" />\n\n    <button mat-stroked-button color=\"primary\" [disabled]=\"bDisabled$\" (click)=\"uploader.click()\">\n      {{\n        allowMultiple$\n          ? uploadMultipleFilesLabel === 'file_upload_text_multiple'\n            ? 'Choose files'\n            : uploadMultipleFilesLabel\n          : uploadSingleFileLabel === 'file_upload_text_one'\n            ? 'Choose a file'\n            : uploadSingleFileLabel\n      }}\n    </button>\n  </div>\n  <span *ngIf=\"validateMessage\" class=\"file-error\">{{ validateMessage }}</span>\n\n  <div class=\"psdk-attachment-list\" *ngIf=\"arFileList$ != null && arFileList$.length > 0\">\n    <div *ngFor=\"let attachment of arFileList$\">\n      <component-mapper\n        *ngIf=\"attachment.noDeleteIcon !== true; else showfull\"\n        name=\"SummaryItem\"\n        [props]=\"{ item$: attachment, menuIconOverride$: 'trash', menuIconOverrideAction$: removeFileFromList$ }\"\n      ></component-mapper>\n      <ng-template #showfull>\n        <component-mapper name=\"SummaryItem\" [props]=\"{ item$: attachment, menuIconOverrideAction$: removeFileFromList$ }\"></component-mapper>\n      </ng-template>\n    </div>\n  </div>\n</div>\n", styles: [".progress-spinner{text-align:center;position:absolute;left:45%}.psdk-modal-file-selector{border:1px dashed var(--app-neutral-dark-color);width:100%;padding:.3rem;text-align:center;position:relative}.label-required:after{display:inline;content:\" *\";vertical-align:top;color:var(--app-neutral-dark-color)}.file-error{color:var(--app-error-light-color)}.psdk-modal-file-selector-error{border:1px dashed var(--app-error-light-color);width:100%;padding:.3rem;text-align:center;position:relative}.psdk-full-width{width:100%}.psdk-label-readonly{opacity:54%;font-size:.8rem;font-weight:400}.psdk-data-readonly{padding-top:.625rem;width:100%}.psdk-attachment-list{border:1px solid var(--app-neutral-color)}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"] }]
+            args: [{ selector: 'app-attachment', standalone: true, imports: [CommonModule, MatProgressSpinnerModule, MatMenuModule, MatIconModule, MatButtonModule, forwardRef(() => ComponentMapperComponent)], template: "<div class=\"file-upload-container\" *ngIf=\"bVisible$\">\n  <span class=\"attachment-label\" [ngClass]=\"{ 'file-label': bRequired$ }\">{{ label$ }}</span>\n  <div *ngIf=\"(files.length === 0 && !allowMultiple$) || allowMultiple$\">\n    <div\n      style=\"margin-bottom: 10px\"\n      id=\"attachment-container\"\n      [ngClass]=\"validateMessage ? 'psdk-modal-file-selector-error' : 'psdk-modal-file-selector'\"\n    >\n      <div [hidden]=\"true\" id=\"attachment-ID\">\n        {{ valueRef }}\n      </div>\n      <input hidden type=\"file\" [required]=\"bRequired$\" #uploader [id]=\"valueRef\" [multiple]=\"allowMultiple$\" (change)=\"onFileAdded($event)\" />\n      <button mat-stroked-button color=\"primary\" [disabled]=\"bDisabled$\" (click)=\"uploader.click()\">\n        {{\n          allowMultiple$\n            ? uploadMultipleFilesLabel === 'file_upload_text_multiple'\n              ? 'Choose files'\n              : uploadMultipleFilesLabel\n            : uploadSingleFileLabel === 'file_upload_text_one'\n              ? 'Choose a file'\n              : uploadSingleFileLabel\n        }}\n      </button>\n    </div>\n  </div>\n  <span *ngIf=\"validateMessage\" class=\"file-error\">{{ validateMessage }}</span>\n  <div *ngIf=\"files && files.length > 0\">\n    <div *ngFor=\"let file of files\">\n      <div class=\"psdk-attachment-card\">\n        <div className=\"psdk-utility-card-icon\">\n          <img *ngIf=\"!file.inProgress\" class=\"psdk-attachment-card-svg-icon\" src=\"{{ srcImg }}\" />\n          <mat-spinner *ngIf=\"file.inProgress\" class=\"progress-spinner\" diameter=\"40\"></mat-spinner>\n        </div>\n        <div class=\"psdk-attachment-card-main\">\n          <div class=\"psdk-attachment-card-main-primary-label\">{{ file.props.name }}</div>\n          <div *ngIf=\"file.props.meta\" [ngStyle]=\"{ color: file.props.error ? 'red' : null }\">{{ file.props.meta }}</div>\n        </div>\n        <div class=\"psdk-attachment-action\">\n          <button id=\"delete-attachment\" *ngIf=\"file.ID\" class=\"psdk-utility-button\" (click)=\"deleteFile(file)\">\n            <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ deleteIcon }}\" />\n          </button>\n          <div *ngIf=\"!file.ID\">\n            <button id=\"setting-button\" mat-icon-button [matMenuTriggerFor]=\"actionMenu\">\n              <mat-icon>more_vert</mat-icon>\n            </button>\n            <mat-menu #actionMenu=\"matMenu\">\n              <button mat-menu-item (click)=\"downloadFile(file.responseProps ? file.responseProps : {})\">Download</button>\n              <button mat-menu-item (click)=\"deleteFile(file)\">Delete</button>\n            </mat-menu>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".progress-spinner{text-align:center;position:absolute;left:45%}.psdk-modal-file-selector{border:1px dashed var(--app-neutral-dark-color);width:100%;padding:.3rem;text-align:center;position:relative}.psdk-modal-file-selector-error{border:1px dashed var(--app-error-light-color);width:100%;padding:.3rem;text-align:center;position:relative}.psdk-modal-file-selector{border:1px dashed var(--app-neutral-dark-color);padding:.5rem;text-align:center;position:relative}.label-required:after{display:inline;content:\" *\";vertical-align:top;color:var(--app-neutral-dark-color)}.file-error{color:var(--app-error-light-color)}.psdk-modal-file-selector-error{border:1px dashed var(--app-error-light-color);padding:.5rem;text-align:center;position:relative}.psdk-full-width{width:100%}.psdk-label-readonly{opacity:54%;font-size:.8rem;font-weight:400}.psdk-data-readonly{padding-top:.625rem;width:100%}.psdk-attachment-list{border:1px solid var(--app-neutral-color)}::ng-deep .mat-mdc-form-field-infix{width:auto}.psdk-attachment-card{display:flex;align-items:center;border:.0625rem solid rgb(207,207,207);border-radius:.25rem;padding:.25rem 0rem .25rem .25rem;min-height:3rem;margin-bottom:.5rem}.psdk-attachment-card-main-primary-label{font-weight:500;text-overflow:ellipsis;overflow:hidden;white-space:normal}.psdk-attachment-card-main{flex-grow:2;margin-left:5px}.psdk-attachment-action{flex-grow:1;text-align:right}.psdk-attachment-card-svg-icon{width:2.5rem}.psdk-utility-button{background:none;border:none;margin-right:.5rem;cursor:pointer}.psdk-utility-card-action-svg-icon{width:1.4rem;display:inline-block}.file-div{border:1px dashed var(--app-neutral-dark-color);width:100%;padding:.5rem;text-align:center;position:relative}.file-div-error{border:1px dashed var(--app-error-light-color);width:100%;padding:.5rem;text-align:center;position:relative}.attachment-label{display:block;margin-bottom:10px}.file-label:after{display:inline;content:\" *\";vertical-align:top;color:var(--app-neutral-dark-color)}\n"] }]
         }], ctorParameters: () => [{ type: AngularPConnectService }, { type: Utils }, { type: i0.NgZone }], propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
                 type: Input
+            }], fileInput: [{
+                type: ViewChild,
+                args: ['uploader', { static: false }]
             }] } });
 
 class CaseHistoryComponent {
@@ -15591,7 +15328,6 @@ class CaseHistoryComponent {
     }
     ngOnInit() {
         this.configProps$ = this.pConn$.getConfigProps();
-        // @ts-ignore - second parameter pageReference for getValue method should be optional
         const caseID = this.pConn$.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID);
         const dataViewName = 'D_pyWorkHistory';
         const context = this.pConn$.getContextName();
@@ -15887,7 +15623,6 @@ class FileUtilityComponent {
     }
     onAttachFiles(files) {
         const attachmentUtils = PCore.getAttachmentUtils();
-        // @ts-ignore - second parameter pageReference for getValue method should be optional
         const caseID = this.pConn$.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID);
         if (files.length > 0) {
             this.lu_bLoading$ = true;
@@ -15920,7 +15655,6 @@ class FileUtilityComponent {
     errorHandler() { }
     onAttachLinks(links) {
         const attachmentUtils = PCore.getAttachmentUtils();
-        // @ts-ignore - second parameter pageReference for getValue method should be optional
         const caseID = this.pConn$.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID);
         if (links.length > 0) {
             this.lu_bLoading$ = true;
@@ -16228,7 +15962,6 @@ class FileUtilityComponent {
         }
     }
     getCaseID() {
-        // @ts-ignore - second parameter pageReference for getValue method should be optional
         return this.pConn$.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID) || '';
     }
     fetchCaseAttachments(caseID) {
@@ -16267,7 +16000,6 @@ class FileUtilityComponent {
         return att.error ? () => this.removeFile() : null;
     }
     caseHasChanged() {
-        // @ts-ignore - second parameter pageReference for getValue method should be optional
         const caseID = this.pConn$.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID);
         if (this.currentCaseID !== caseID) {
             this.currentCaseID = caseID;
@@ -16603,13 +16335,11 @@ class FeedContainerComponent {
             this.updateSelf();
         }
         else {
-            // @ts-ignore - parameter “contextName” for getDataObject method should be optional
             const newPulseData = this.pConn$.getDataObject().pulse;
             if (!isEqual(newPulseData, this.pulseData)) {
                 this.updateSelf();
             }
         }
-        // @ts-ignore - parameter “contextName” for getDataObject method should be optional
         this.pulseData = this.pConn$.getDataObject().pulse;
     }
     updateSelf() {
@@ -16618,9 +16348,7 @@ class FeedContainerComponent {
     getMessageData() {
         const messageIDs = this.pConn$.getConfigProps().messageIDs;
         const userName = this.pConn$.getConfigProps().currentUser;
-        // @ts-ignore - second parameter pageReference for getValue method should be optional
         const imageKey = this.pConn$.getValue('OperatorID.pyImageInsKey');
-        // @ts-ignore - parameter “contextName” for getDataObject method should be optional
         const oData = this.pConn$.getDataObject();
         if (messageIDs && messageIDs.length > 0) {
             this.pulseMessages$ = JSON.parse(JSON.stringify(oData.pulse.messages));
@@ -18162,7 +17890,6 @@ class RepeatingStructuresComponent {
         this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
         this.fields$ = this.initializeColumns(componentConfig.fields);
         const refList = this.configProps$.referenceList;
-        // @ts-ignore - second parameter pageReference for getValue method should be optional
         const tableDataResults = JSON.parse(JSON.stringify(this.pConn$.getValue(refList)));
         // update elements like date format
         const updatedRefList = this.updateData(tableDataResults, this.fields$);