@pega/angular-sdk-components 0.23.7 → 0.23.9

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

@@ -25,11 +25,11 @@ import * as i5 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { debounceTime, startWith, map } from 'rxjs/operators';
 import { v4 } from 'uuid';
-import * as i6 from '@angular/material/card';
+import * as i5$1 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i6$1 from '@angular/material/menu';
+import * as i6 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i5$1 from '@angular/material/list';
+import * as i5$2 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
 import * as i4$3 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@@ -37,11 +37,11 @@ import * as i2$1 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import * as i8 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i6$2 from '@angular/material/input';
+import * as i6$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpParams } from '@angular/common/http';
-import * as i5$2 from '@angular/material/checkbox';
+import * as i5$3 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MomentDateModule } from '@angular/material-moment-adapter';
 import utc from 'dayjs/plugin/utc';
@@ -49,7 +49,7 @@ import tzone from 'dayjs/plugin/timezone';
 import * as i8$1 from '@angular-material-components/datetime-picker';
 import { NGX_MAT_DATE_FORMATS, NgxMatDatetimePickerModule, NgxMatTimepickerModule } from '@angular-material-components/datetime-picker';
 import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
-import * as i6$3 from '@angular/material/select';
+import * as i6$2 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import { NgxMatIntlTelInputComponent } from 'ngx-mat-intl-tel-input';
 import * as i7$1 from '@angular/material/radio';
@@ -62,10 +62,13 @@ import * as i14 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import * as i7$2 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
-import * as i6$4 from '@angular/material/table';
+import * as i6$3 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import * as i8$2 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
+import * as i11 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import cloneDeep from 'lodash/cloneDeep';
 import download from 'downloadjs';
 import * as i3$2 from '@angular/material/badge';
 import { MatBadgeModule } from '@angular/material/badge';
@@ -1159,6 +1162,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: ProgressSpinnerService }, { type: ErrorMessagesService }, { type: Utils }]; } });
 
 /* eslint-disable no-case-declarations */
+function getRefreshProps(refreshConditions) {
+    // refreshConditions cuurently supports only "Changes" event
+    if (!refreshConditions) {
+        return [];
+    }
+    return refreshConditions.filter(item => item.event && item.event === 'Changes').map(item => [item.field, item.field?.substring(1)]) || [];
+}
 class AssignmentComponent {
     constructor(angularPConnect, psService, erService, ngZone, snackBar) {
         this.angularPConnect = angularPConnect;
@@ -1169,7 +1179,6 @@ class AssignmentComponent {
         this.isInModal$ = false;
         // For interaction with AngularPConnect
         this.angularPConnectData = {};
-        this.bIsRefComponent = false;
         this.bInitialized = false;
         this.bHasNavigation$ = false;
         this.bIsVertical$ = false;
@@ -1221,18 +1230,12 @@ class AssignmentComponent {
         }
     }
     updateChanges() {
-        this.bIsRefComponent = this.checkIfRefComponent(this.pConn$);
-        this.ngZone.run(() => {
-            // pConn$ may be a 'reference' component, so normalize it
-            // this.pConn$ = ReferenceComponent.normalizePConn(this.pConn$);
-            this.newPConn$ = ReferenceComponent.normalizePConn(this.pConn$);
-            //  If 'reference' so we need to get the children of the normalized pConn
-            if (this.bIsRefComponent) {
-                // this.arChildren$ = ReferenceComponent.normalizePConnArray(this.pConn$.getChildren());
-                this.arChildren$ = ReferenceComponent.normalizePConnArray(this.newPConn$.getChildren());
-            }
-        });
-        this.createButtons();
+        this.registerForRefresh();
+        // pConn$ may be a 'reference' component, so normalize it
+        this.newPConn$ = ReferenceComponent.normalizePConn(this.pConn$);
+        if (this.arChildren$) {
+            this.createButtons();
+        }
     }
     checkIfRefComponent(thePConn) {
         let bReturn = false;
@@ -1242,15 +1245,9 @@ class AssignmentComponent {
         return bReturn;
     }
     initComponent() {
-        this.bIsRefComponent = this.checkIfRefComponent(this.pConn$);
         // pConn$ may be a 'reference' component, so normalize it
         // this.pConn$ = ReferenceComponent.normalizePConn(this.pConn$);
         this.newPConn$ = ReferenceComponent.normalizePConn(this.pConn$);
-        // If 'reference' so we need to get the children of the normalized pConn
-        if (this.bIsRefComponent) {
-            // this.arChildren$ = ReferenceComponent.normalizePConnArray(this.pConn$.getChildren());
-            this.arChildren$ = ReferenceComponent.normalizePConnArray(this.newPConn$.getChildren());
-        }
         // prevent re-intializing with flowContainer update unless an action is taken
         this.bReInit = false;
         this.bHasNavigation$ = false;
@@ -1281,7 +1278,9 @@ class AssignmentComponent {
         this.cancelAssignment = actionsAPI.cancelAssignment.bind(actionsAPI);
         this.showPage = actionsAPI.showPage.bind(actionsAPI);
         this.cancelCreateStageAssignment = actionsAPI.cancelCreateStageAssignment.bind(actionsAPI);
-        this.createButtons();
+        if (this.arChildren$) {
+            this.createButtons();
+        }
     }
     createButtons() {
         // let oData = this.pConn$.getDataObject();
@@ -1510,6 +1509,29 @@ class AssignmentComponent {
             control.markAsTouched();
         });
     }
+    registerForRefresh() {
+        // @ts-ignore - Property 'getActionRefreshConditions' is private and only accessible within class 'CaseInfo'
+        const refreshConditions = this.pConn$.getCaseInfo()?.getActionRefreshConditions();
+        const pageReference = this.pConn$.getPageReference();
+        const context = this.pConn$.getContextName();
+        // refresh api de-registration
+        PCore.getRefreshManager().deRegisterForRefresh(context);
+        // refresh api registration
+        const refreshProps = getRefreshProps(refreshConditions);
+        const caseKey = this.pConn$.getCaseInfo().getKey();
+        const refreshOptions = {
+            autoDetectRefresh: true,
+            preserveClientChanges: false
+        };
+        if (refreshProps.length > 0) {
+            refreshProps.forEach(prop => {
+                PCore.getRefreshManager().registerForRefresh('PROP_CHANGE', this.pConn$.getActionsApi().refreshCaseView.bind(this.pConn$.getActionsApi(), caseKey, null, pageReference, {
+                    ...refreshOptions,
+                    refreshFor: prop[0]
+                }), `${pageReference}.${prop[1]}`, `${context}/${pageReference}`, context);
+            });
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AssignmentComponent, deps: [{ token: AngularPConnectService }, { token: ProgressSpinnerService }, { token: ErrorMessagesService }, { token: i0.NgZone }, { token: i4$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AssignmentComponent, isStandalone: true, selector: "app-assignment", inputs: { pConn$: "pConn$", formGroup$: "formGroup$", arChildren$: "arChildren$", itemKey$: "itemKey$", isCreateStage$: "isCreateStage$", updateToken$: "updateToken$", isInModal$: "isInModal$", banners: "banners" }, usesOnChanges: true, ngImport: i0, template: "<div>\n  <div><component-mapper name=\"AlertBanner\" [props]=\"{ banners }\" [parent]=\"this\"></component-mapper></div>\n  <div *ngIf=\"bHasNavigation$\" class=\"psdk-stepper\">\n    <component-mapper\n      name=\"MultiStep\"\n      [props]=\"{\n        pConn$: newPConn$,\n        formGroup$,\n        arChildren$,\n        arMainButtons$,\n        arSecondaryButtons$,\n        bIsVertical$,\n        arCurrentStepIndicies$,\n        arNavigationSteps$\n      }\"\n      [parent]=\"this\"\n      [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n    ></component-mapper>\n  </div>\n  <div *ngIf=\"!bHasNavigation$\">\n    <component-mapper\n      name=\"AssignmentCard\"\n      [props]=\"{ pConn$: newPConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$, updateToken$ }\"\n      [parent]=\"this\"\n      [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n    ></component-mapper>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatSnackBarModule; }) }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
@@ -1930,17 +1952,101 @@ function getToDoAssignments(pConnect) {
     return todoAssignmentsCopy;
 }
 
-class FlowContainerComponent {
-    // itemKey: string = "";   // JA - this is what Nebula/Constellation uses to pass to finishAssignment, navigateToStep
-    constructor(angularPConnect, cdRef, psService, fb, ngZone, utils) {
-        this.angularPConnect = angularPConnect;
+const processRootViewDetails = (rootView, containerItem, options) => {
+    const { config: { context: viewContext, name: viewName } } = rootView;
+    const { context: containerContext } = containerItem;
+    const { parentPConnect } = options;
+    let resolvedViewName = viewName;
+    let resolvedViewContext = viewContext;
+    const isAnnotedViewName = PCore.getAnnotationUtils().isProperty(viewName);
+    const isAnnotedViewContext = PCore.getAnnotationUtils().isProperty(viewContext);
+    // resolving annoted view context
+    if (isAnnotedViewContext) {
+        const viewContextProperty = PCore.getAnnotationUtils().getPropertyName(viewContext);
+        resolvedViewContext = PCore.getStoreValue(`.${viewContextProperty}`, viewContextProperty.startsWith('.') ? parentPConnect.getPageReference() : '', containerContext);
+    }
+    if (!resolvedViewContext) {
+        resolvedViewContext = parentPConnect.getPageReference();
+    }
+    // resolving annoted view name
+    if (isAnnotedViewName) {
+        const viewNameProperty = PCore.getAnnotationUtils().getPropertyName(viewName);
+        resolvedViewName = PCore.getStoreValue(`.${viewNameProperty}`, resolvedViewContext, containerContext);
+    }
+    /* Special case where context and viewname are dynamic values
+      Use case - split for each shape
+      Ex - (caseInfo.content.SCRequestWorkQueues[1]):context --> .pyViewName:viewName
+    */
+    if (isAnnotedViewName && isAnnotedViewContext && resolvedViewName !== '') {
+        /* Allow context processor to resolve view and context when both are dynamic */
+        resolvedViewName = viewName;
+        resolvedViewContext = viewContext;
+    }
+    return {
+        viewName: resolvedViewName,
+        viewContext: resolvedViewContext
+    };
+};
+const getPConnectOfActiveContainerItem = (containerInfo, options) => {
+    const { accessedOrder, items } = containerInfo;
+    const { isAssignmentView = false, parentPConnect } = options;
+    const containerName = parentPConnect.getContainerName();
+    const { CONTAINER_NAMES } = PCore.getContainerUtils();
+    const { CREATE_DETAILS_VIEW_NAME } = PCore.getConstants();
+    if (accessedOrder && items) {
+        const activeContainerItemKey = accessedOrder[accessedOrder.length - 1];
+        if (items[activeContainerItemKey] && items[activeContainerItemKey].view && Object.keys(items[activeContainerItemKey].view).length > 0) {
+            const activeContainerItem = items[activeContainerItemKey];
+            const target = activeContainerItemKey.substring(0, activeContainerItemKey.lastIndexOf('_'));
+            const { view: rootView, context } = activeContainerItem;
+            const { viewName, viewContext } = processRootViewDetails(rootView, activeContainerItem, { parentPConnect });
+            if (!viewName)
+                return null;
+            const config = {
+                meta: rootView,
+                options: {
+                    context,
+                    pageReference: viewContext || parentPConnect.getPageReference(),
+                    containerName,
+                    containerItemID: activeContainerItemKey,
+                    parentPageReference: parentPConnect.getPageReference(),
+                    hasForm: isAssignmentView ||
+                        containerName === CONTAINER_NAMES.WORKAREA ||
+                        containerName === CONTAINER_NAMES.MODAL ||
+                        viewName === CREATE_DETAILS_VIEW_NAME,
+                    target
+                }
+            };
+            return PCore.createPConnect(config).getPConnect();
+        }
+    }
+    return null;
+};
+
+class FlowContainerBaseComponent {
+    constructor(injector) {
+        // For interaction with AngularPConnect
+        this.angularPConnectData = {};
+        this.angularPConnect = injector.get(AngularPConnectService);
+    }
+    getPConnectOfActiveContainerItem(parentPConnect) {
+        const routingInfo = this.angularPConnect.getComponentProp(this, 'routingInfo');
+        const isAssignmentView = this.angularPConnect.getComponentProp(this, 'isAssignmentView');
+        return getPConnectOfActiveContainerItem(routingInfo, {
+            isAssignmentView,
+            parentPConnect
+        });
+    }
+}
+
+class FlowContainerComponent extends FlowContainerBaseComponent {
+    constructor(injector, cdRef, psService, fb, ngZone, utils) {
+        super(injector);
         this.cdRef = cdRef;
         this.psService = psService;
         this.fb = fb;
         this.ngZone = ngZone;
         this.utils = utils;
-        // For interaction with AngularPConnect
-        this.angularPConnectData = {};
         this.itemKey$ = '';
         // todo
         this.todo_showTodo$ = false;
@@ -1995,10 +2101,13 @@ class FlowContainerComponent {
     checkAndUpdate() {
         // Should always check the bridge to see if the component should update itself (re-render)
         const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
+        const pConn = this.pConnectOfActiveContainerItem || this.pConn$;
+        const caseViewModeFromProps = this.angularPConnect.getComponentProp(this, 'caseViewMode');
+        const caseViewModeFromRedux = pConn.getValue('context_data.caseViewMode', '');
         // ONLY call updateSelf when the component should update
         //    AND removing the "gate" that was put there since shouldComponentUpdate
         //      should be the real "gate"
-        if (bUpdateSelf) {
+        if (bUpdateSelf || caseViewModeFromProps !== caseViewModeFromRedux) {
             // don't want to redraw the flow container when there are page messages, because
             // the redraw causes us to loose the errors on the elements
             const completeProps = this.angularPConnect.getCurrentCompleteProps(this);
@@ -2097,30 +2206,6 @@ class FlowContainerComponent {
         // turn off spinner
         this.psService.sendMessage(false);
     }
-    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
-        //  a different operator. So, see if there are any assignments for
-        //  the current operator
-        let bAssignmentsForThisOperator = false;
-        // Bail if there is no assignmentsList
-        if (!assignmentsList) {
-            return hasAssignments;
-        }
-        for (const assignment of assignmentsList) {
-            if (assignment.assigneeInfo.ID === thisOperator) {
-                bAssignmentsForThisOperator = true;
-            }
-        }
-        const hasChildCaseAssignments = this.hasChildCaseAssignments();
-        if (bAssignmentsForThisOperator || hasChildCaseAssignments || this.isCaseWideLocalAction()) {
-            hasAssignments = true;
-        }
-        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);
@@ -2181,8 +2266,8 @@ 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.pConnectOfActiveContainerItem = this.getPConnectOfActiveContainerItem(this.pConn$) || this.pConn$;
+        const caseViewMode = this.pConnectOfActiveContainerItem.getValue('context_data.caseViewMode');
         this.bShowBanner = showBanner(this.pConn$);
         if (caseViewMode && caseViewMode == 'review') {
             this.loadReviewPage(localPConn);
@@ -2249,18 +2334,10 @@ 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()) {
+        if (this.caseMessages$ || !hasAssignments(this.pConn$)) {
             this.bHasCaseMessages$ = true;
             this.bShowConfirm = true;
             this.checkSvg$ = this.utils.getImageSrc('check', this.utils.getSDKStaticContentUrl());
-            // Temp fix for 8.7 change: confirmationNote no longer coming through in caseMessages$.
-            // So, if we get here and caseMessages$ is empty, use default value in DX API response
-            if (!this.caseMessages$) {
-                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);
         }
         else if (this.bHasCaseMessages$) {
@@ -2397,13 +2474,13 @@ class FlowContainerComponent {
             data: pConnect.getDataObject(contextName)
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowContainerComponent, deps: [{ token: AngularPConnectService }, { token: i0.ChangeDetectorRef }, { token: ProgressSpinnerService }, { token: i4.FormBuilder }, { token: i0.NgZone }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FlowContainerComponent, isStandalone: true, selector: "app-flow-container", inputs: { pConn$: "pConn$" }, providers: [Utils], ngImport: i0, template: "<div style=\"text-align: left\" class=\"psdk-flow-container-top\">\n  <div *ngIf=\"!bShowConfirm\">\n    <div *ngIf=\"!todo_showTodo$\">\n      <h2>{{ containerName$ }}</h2>\n      <div *ngIf=\"banners?.length\">\n        <component-mapper name=\"AlertBanner\" [props]=\"{ banners }\"></component-mapper>\n      </div>\n    </div>\n    <div *ngIf=\"todo_showTodo$\">\n      <component-mapper\n        name=\"Todo\"\n        [props]=\"{\n          pConn$: todo_pConn$,\n          caseInfoID$: todo_caseInfoID$,\n          datasource$: todo_datasource$,\n          showTodoList$: todo_showTodoList$,\n          headerText$: todo_headerText$,\n          type$: 'TODO',\n          context$: todo_context$,\n          itemKey$: itemKey$\n        }\"\n      ></component-mapper>\n    </div>\n    <div *ngIf=\"!todo_showTodo$\">\n      <component-mapper name=\"Assignment\" [props]=\"{ pConn$, formGroup$, arChildren$, itemKey$ }\"></component-mapper>\n    </div>\n  </div>\n  <div *ngIf=\"bHasCaseMessages$\">\n    <mat-card class=\"psdk-message-card\">\n      <div style=\"display: flex; flex-direction: row\">\n        <div><img class=\"psdk-icon\" src=\"{{ checkSvg$ }}\" /></div>\n        <div>{{ caseMessages$ }}</div>\n      </div>\n    </mat-card>\n  </div>\n  <div *ngIf=\"bShowBanner && bShowConfirm\">\n    <component-mapper name=\"View\" [props]=\"{ formGroup$, pConn$: confirm_pconn }\"></component-mapper>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatCardModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6.MatCard; }), selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowContainerComponent, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: ProgressSpinnerService }, { token: i4.FormBuilder }, { token: i0.NgZone }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FlowContainerComponent, isStandalone: true, selector: "app-flow-container", inputs: { pConn$: "pConn$" }, providers: [Utils], usesInheritance: true, ngImport: i0, template: "<div style=\"text-align: left\" class=\"psdk-flow-container-top\">\n  <div *ngIf=\"!bShowConfirm\">\n    <div *ngIf=\"!todo_showTodo$\">\n      <h2>{{ containerName$ }}</h2>\n      <div *ngIf=\"banners?.length\">\n        <component-mapper name=\"AlertBanner\" [props]=\"{ banners }\"></component-mapper>\n      </div>\n    </div>\n    <div *ngIf=\"todo_showTodo$\">\n      <component-mapper\n        *ngIf=\"pConnectOfActiveContainerItem\"\n        name=\"Todo\"\n        [props]=\"{\n          pConn$: pConnectOfActiveContainerItem,\n          caseInfoID$: todo_caseInfoID$,\n          datasource$: todo_datasource$,\n          showTodoList$: todo_showTodoList$,\n          headerText$: todo_headerText$,\n          type$: 'TODO',\n          context$: todo_context$,\n          itemKey$: itemKey$,\n          isConfirm: true\n        }\"\n      ></component-mapper>\n    </div>\n    <div *ngIf=\"!todo_showTodo$\">\n      <component-mapper\n        *ngIf=\"pConnectOfActiveContainerItem\"\n        name=\"Assignment\"\n        [props]=\"{ pConn$: pConnectOfActiveContainerItem, formGroup$, arChildren$, itemKey$ }\"\n      ></component-mapper>\n    </div>\n  </div>\n  <div *ngIf=\"bHasCaseMessages$\">\n    <mat-card class=\"psdk-message-card\">\n      <div style=\"display: flex; flex-direction: row\">\n        <div><img class=\"psdk-icon\" src=\"{{ checkSvg$ }}\" /></div>\n        <div>{{ caseMessages$ }}</div>\n      </div>\n    </mat-card>\n  </div>\n  <div *ngIf=\"bShowBanner && bShowConfirm\">\n    <component-mapper name=\"View\" [props]=\"{ formGroup$, pConn$: confirm_pconn }\"></component-mapper>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatCardModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5$1.MatCard; }), selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-flow-container', providers: [Utils], standalone: true, imports: [CommonModule, MatCardModule, forwardRef(() => ComponentMapperComponent)], template: "<div style=\"text-align: left\" class=\"psdk-flow-container-top\">\n  <div *ngIf=\"!bShowConfirm\">\n    <div *ngIf=\"!todo_showTodo$\">\n      <h2>{{ containerName$ }}</h2>\n      <div *ngIf=\"banners?.length\">\n        <component-mapper name=\"AlertBanner\" [props]=\"{ banners }\"></component-mapper>\n      </div>\n    </div>\n    <div *ngIf=\"todo_showTodo$\">\n      <component-mapper\n        name=\"Todo\"\n        [props]=\"{\n          pConn$: todo_pConn$,\n          caseInfoID$: todo_caseInfoID$,\n          datasource$: todo_datasource$,\n          showTodoList$: todo_showTodoList$,\n          headerText$: todo_headerText$,\n          type$: 'TODO',\n          context$: todo_context$,\n          itemKey$: itemKey$\n        }\"\n      ></component-mapper>\n    </div>\n    <div *ngIf=\"!todo_showTodo$\">\n      <component-mapper name=\"Assignment\" [props]=\"{ pConn$, formGroup$, arChildren$, itemKey$ }\"></component-mapper>\n    </div>\n  </div>\n  <div *ngIf=\"bHasCaseMessages$\">\n    <mat-card class=\"psdk-message-card\">\n      <div style=\"display: flex; flex-direction: row\">\n        <div><img class=\"psdk-icon\" src=\"{{ checkSvg$ }}\" /></div>\n        <div>{{ caseMessages$ }}</div>\n      </div>\n    </mat-card>\n  </div>\n  <div *ngIf=\"bShowBanner && bShowConfirm\">\n    <component-mapper name=\"View\" [props]=\"{ formGroup$, pConn$: confirm_pconn }\"></component-mapper>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: i0.ChangeDetectorRef }, { type: ProgressSpinnerService }, { type: i4.FormBuilder }, { type: i0.NgZone }, { type: Utils }]; }, propDecorators: { pConn$: [{
+            args: [{ selector: 'app-flow-container', providers: [Utils], standalone: true, imports: [CommonModule, MatCardModule, forwardRef(() => ComponentMapperComponent)], template: "<div style=\"text-align: left\" class=\"psdk-flow-container-top\">\n  <div *ngIf=\"!bShowConfirm\">\n    <div *ngIf=\"!todo_showTodo$\">\n      <h2>{{ containerName$ }}</h2>\n      <div *ngIf=\"banners?.length\">\n        <component-mapper name=\"AlertBanner\" [props]=\"{ banners }\"></component-mapper>\n      </div>\n    </div>\n    <div *ngIf=\"todo_showTodo$\">\n      <component-mapper\n        *ngIf=\"pConnectOfActiveContainerItem\"\n        name=\"Todo\"\n        [props]=\"{\n          pConn$: pConnectOfActiveContainerItem,\n          caseInfoID$: todo_caseInfoID$,\n          datasource$: todo_datasource$,\n          showTodoList$: todo_showTodoList$,\n          headerText$: todo_headerText$,\n          type$: 'TODO',\n          context$: todo_context$,\n          itemKey$: itemKey$,\n          isConfirm: true\n        }\"\n      ></component-mapper>\n    </div>\n    <div *ngIf=\"!todo_showTodo$\">\n      <component-mapper\n        *ngIf=\"pConnectOfActiveContainerItem\"\n        name=\"Assignment\"\n        [props]=\"{ pConn$: pConnectOfActiveContainerItem, formGroup$, arChildren$, itemKey$ }\"\n      ></component-mapper>\n    </div>\n  </div>\n  <div *ngIf=\"bHasCaseMessages$\">\n    <mat-card class=\"psdk-message-card\">\n      <div style=\"display: flex; flex-direction: row\">\n        <div><img class=\"psdk-icon\" src=\"{{ checkSvg$ }}\" /></div>\n        <div>{{ caseMessages$ }}</div>\n      </div>\n    </mat-card>\n  </div>\n  <div *ngIf=\"bShowBanner && bShowConfirm\">\n    <component-mapper name=\"View\" [props]=\"{ formGroup$, pConn$: confirm_pconn }\"></component-mapper>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: ProgressSpinnerService }, { type: i4.FormBuilder }, { type: i0.NgZone }, { type: Utils }]; }, propDecorators: { pConn$: [{
                 type: Input
             }] } });
 
@@ -2617,7 +2694,7 @@ class ModalViewContainerComponent {
         }
     }
     createView(routingInfo, currentItem, latestItem, key) {
-        const configObject = this.getConfigObject(currentItem, this.pConn$);
+        const configObject = this.getConfigObject(currentItem, null, false);
         const newComp = configObject?.getPConnect();
         // const newCompName = newComp.getComponentName();
         // @ts-ignore - parameter “contextName” for getDataObject method should be optional
@@ -2655,8 +2732,15 @@ class ModalViewContainerComponent {
                     isDataObject || this.isMultiRecord
                         ? this.getModalHeading(dataObjectAction)
                         : this.determineModalHeaderByAction(actionName, caseTypeName, ID, `${theNewCaseInfo?.getClassName()}!CASE!${theNewCaseInfo.getName()}`.toUpperCase());
-                // // update children with new view's children
-                this.arChildren$ = newComp.getChildren();
+                const bIsRefComponent = this.checkIfRefComponent(newComp);
+                if (bIsRefComponent) {
+                    const newPConn = ReferenceComponent.normalizePConn(newComp);
+                    this.arChildren$ = ReferenceComponent.normalizePConnArray(newPConn.getChildren());
+                }
+                else {
+                    // update children with new view's children
+                    this.arChildren$ = newComp.getChildren();
+                }
                 this.bShowModal$ = true;
                 // for when non modal
                 this.modalVisibleChange.emit(this.bShowModal$);
@@ -2679,22 +2763,43 @@ class ModalViewContainerComponent {
             this.oCaseInfo = {};
         });
     }
-    getConfigObject(item, pConnect) {
+    getConfigObject(item, pConnect, isReverseCoexistence = false) {
+        let config;
+        if (isReverseCoexistence) {
+            config = {
+                options: {
+                    pageReference: pConnect?.getPageReference(),
+                    hasForm: true,
+                    containerName: pConnect?.getContainerName() || PCore.getConstants().MODAL
+                }
+            };
+            return PCore.createPConnect(config);
+        }
         if (item) {
-            const { context, view } = item;
-            const config = {
+            const { context, view, isBulkAction } = item;
+            const target = PCore.getContainerUtils().getTargetFromContainerItemID(context);
+            config = {
                 meta: view,
                 options: {
                     context,
                     pageReference: view.config.context || pConnect.getPageReference(),
                     hasForm: true,
-                    containerName: pConnect?.getContainerName() || PCore.getConstants().MODAL
+                    ...(isBulkAction && { isBulkAction }),
+                    containerName: pConnect?.getContainerName() || PCore.getConstants().MODAL,
+                    target
                 }
             };
             return PCore.createPConnect(config);
         }
         return null;
     }
+    checkIfRefComponent(thePConn) {
+        let bReturn = false;
+        if (thePConn && thePConn.getComponentName() == 'reference') {
+            bReturn = true;
+        }
+        return bReturn;
+    }
     onAlertState(bData) {
         this.bAlertState = bData;
         this.bShowCancelAlert$ = false;
@@ -2958,7 +3063,7 @@ class NavbarComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavbarComponent, deps: [{ token: AngularPConnectService }, { token: i0.ChangeDetectorRef }, { token: ProgressSpinnerService }, { token: i0.NgZone }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NavbarComponent, isStandalone: true, selector: "app-navbar", inputs: { pConn$: "pConn$", appName$: "appName$", pages$: "pages$", caseTypes$: "caseTypes$" }, providers: [Utils], ngImport: i0, template: "<div class=\"psdk-appshell-nav\">\n  <div class=\"psdk-nav-header\">\n    <div>\n      <img src=\"{{ portalLogoImage$ }}\" class=\"psdk-nav-logo\" />\n    </div>\n    <div class=\"psdk-nav-portal-info\">\n      <div class=\"psdk-nav-portal-app\">{{ portalApp$ }}</div>\n    </div>\n  </div>\n  <div class=\"psdk-nav-divider\"></div>\n  <div>\n    <mat-list>\n      <mat-list-item id=\"create-case-button\" (click)=\"navPanelCreateButtonClick()\">\n        <div class=\"flex-box\">\n          <img class=\"psdk-nav-svg-icon\" src=\"{{ navExpandCollapse$ }}\" />\n          <span class=\"psdk-nav-button-span\">Create</span>\n        </div>\n      </mat-list-item>\n      <mat-list *ngIf=\"bShowCaseTypes$\" style=\"margin-left: 40px\">\n        <mat-list-item\n          id=\"case-list-item\"\n          *ngFor=\"let caseType of caseTypes$\"\n          (click)=\"navPanelCreateCaseType(caseType.pyClassName, caseType.pyFlowType)\"\n        >\n          <span class=\"psdk-nav-button-span\">{{ caseType.pyLabel }}</span>\n        </mat-list-item>\n      </mat-list>\n    </mat-list>\n  </div>\n  <div style=\"height: 100%\">\n    <mat-list *ngFor=\"let page of navPages$\">\n      <mat-list-item (click)=\"navPanelButtonClick(page)\">\n        <div class=\"flex-box\">\n          <img class=\"psdk-nav-svg-icon\" src=\"{{ page.iconName }}\" />\n          <span class=\"psdk-nav-button-span\">{{ localizedVal(page.pyLabel, localeCategory) }}</span>\n        </div>\n      </mat-list-item>\n    </mat-list>\n  </div>\n  <div class=\"psdk-nav-divider\"></div>\n  <div>\n    <mat-list>\n      <mat-list-item [matMenuTriggerFor]=\"menu\" class=\"psdk-profile-list-item\">\n        <div class=\"flex-box\">\n          <div class=\"psdk-nav-oper-avatar\">{{ portalOperatorInitials$ }}</div>\n          <span class=\"psdk-nav-button-span\">{{ portalOperator$ }}</span>\n        </div>\n      </mat-list-item>\n      <mat-menu #menu=\"matMenu\">\n        <button mat-menu-item>Profile</button>\n        <button mat-menu-item (click)=\"navPanelLogoutClick()\">{{ localizedVal('Logoff', localeCategory) }}</button>\n      </mat-menu>\n    </mat-list>\n  </div>\n</div>\n", styles: [".psdk-nav-divider{border-bottom:.0625rem solid var(--app-divider-color);width:100%;align-items:center}.psdk-nav-header{display:flex;padding-top:.625rem}.psdk-nav-logo{width:3.75rem;padding:.625rem;margin-right:1.25rem}.psdk-nav-svg-icon{filter:var(--app-white-color-filter);width:1.6rem;padding-right:.625rem}.psdk-nav-portal-name{font-size:.875rem}.psdk-nav-portal-app{font-size:1.25rem}.psdk-appshell-nav{z-index:199;position:fixed;display:flex;flex-direction:column;justify-content:flex-start;background:var(--app-nav-bg);width:var(--app-nav-width);height:100%;color:var(--app-nav-color);overflow-y:auto;overflow-x:hidden;white-space:nowrap;transition:width .3s cubic-bezier(.4,.6,.1,1);will-change:width}.psdk-appshell-nav:hover{width:var(--app-nav-width-expanded)}.psdk-appshell-topnav{display:flex;flex-direction:column;justify-content:flex-start;background:var(--app-nav-bg);width:var(--app-nav-width);height:15%;color:var(--app-nav-color);overflow:hidden;white-space:nowrap;transition:width .3s cubic-bezier(.4,.6,.1,1);will-change:width}.psdk-appshell-middlenav{display:flex;flex-direction:column;justify-content:space-between;background:var(--app-nav-bg);width:var(--app-nav-width);height:50%;color:var(--app-nav-color);overflow:hidden;white-space:nowrap;transition:width .3s cubic-bezier(.4,.6,.1,1);will-change:width}.psdk-nav-ul-middle{display:block;list-style-type:none;margin:0rem;padding-inline-start:30px}.psdk-nav-li-middle{box-sizing:border-box;text-align:left}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-nav-button-span{padding:0 1rem;color:var(--app-nav-color)}.psdk-nav-oper-avatar{margin:0rem;padding:0rem;min-width:2.5rem;min-height:2.5rem;max-width:2.5rem;max-height:2.5rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:inline-flex;background:var(--app-neutral-color);color:var(--app-form-color);font-weight:400;font-size:1rem}mat-list{padding:0}.psdk-profile-list-item{padding-left:24px}mat-list-item{padding:20px 0 20px 30px;cursor:pointer!important;height:auto!important}mat-list-item:hover{background-color:var(--app-label-color)}mat-list-item .flex-box{display:flex;align-items:center;width:100%;text-align:left}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i5$1.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i5$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NavbarComponent, isStandalone: true, selector: "app-navbar", inputs: { pConn$: "pConn$", appName$: "appName$", pages$: "pages$", caseTypes$: "caseTypes$" }, providers: [Utils], ngImport: i0, template: "<div class=\"psdk-appshell-nav\">\n  <div class=\"psdk-nav-header\">\n    <div>\n      <img src=\"{{ portalLogoImage$ }}\" class=\"psdk-nav-logo\" />\n    </div>\n    <div class=\"psdk-nav-portal-info\">\n      <div class=\"psdk-nav-portal-app\">{{ portalApp$ }}</div>\n    </div>\n  </div>\n  <div class=\"psdk-nav-divider\"></div>\n  <div>\n    <mat-list>\n      <mat-list-item id=\"create-case-button\" (click)=\"navPanelCreateButtonClick()\">\n        <div class=\"flex-box\">\n          <img class=\"psdk-nav-svg-icon\" src=\"{{ navExpandCollapse$ }}\" />\n          <span class=\"psdk-nav-button-span\">Create</span>\n        </div>\n      </mat-list-item>\n      <mat-list *ngIf=\"bShowCaseTypes$\" style=\"margin-left: 40px\">\n        <mat-list-item\n          id=\"case-list-item\"\n          *ngFor=\"let caseType of caseTypes$\"\n          (click)=\"navPanelCreateCaseType(caseType.pyClassName, caseType.pyFlowType)\"\n        >\n          <span class=\"psdk-nav-button-span\">{{ caseType.pyLabel }}</span>\n        </mat-list-item>\n      </mat-list>\n    </mat-list>\n  </div>\n  <div style=\"height: 100%\">\n    <mat-list *ngFor=\"let page of navPages$\">\n      <mat-list-item (click)=\"navPanelButtonClick(page)\">\n        <div class=\"flex-box\">\n          <img class=\"psdk-nav-svg-icon\" src=\"{{ page.iconName }}\" />\n          <span class=\"psdk-nav-button-span\">{{ localizedVal(page.pyLabel, localeCategory) }}</span>\n        </div>\n      </mat-list-item>\n    </mat-list>\n  </div>\n  <div class=\"psdk-nav-divider\"></div>\n  <div>\n    <mat-list>\n      <mat-list-item [matMenuTriggerFor]=\"menu\" class=\"psdk-profile-list-item\">\n        <div class=\"flex-box\">\n          <div class=\"psdk-nav-oper-avatar\">{{ portalOperatorInitials$ }}</div>\n          <span class=\"psdk-nav-button-span\">{{ portalOperator$ }}</span>\n        </div>\n      </mat-list-item>\n      <mat-menu #menu=\"matMenu\">\n        <button mat-menu-item>Profile</button>\n        <button mat-menu-item (click)=\"navPanelLogoutClick()\">{{ localizedVal('Logoff', localeCategory) }}</button>\n      </mat-menu>\n    </mat-list>\n  </div>\n</div>\n", styles: [".psdk-nav-divider{border-bottom:.0625rem solid var(--app-divider-color);width:100%;align-items:center}.psdk-nav-header{display:flex;padding-top:.625rem}.psdk-nav-logo{width:3.75rem;padding:.625rem;margin-right:1.25rem}.psdk-nav-svg-icon{filter:var(--app-white-color-filter);width:1.6rem;padding-right:.625rem}.psdk-nav-portal-name{font-size:.875rem}.psdk-nav-portal-app{font-size:1.25rem}.psdk-appshell-nav{z-index:199;position:fixed;display:flex;flex-direction:column;justify-content:flex-start;background:var(--app-nav-bg);width:var(--app-nav-width);height:100%;color:var(--app-nav-color);overflow-y:auto;overflow-x:hidden;white-space:nowrap;transition:width .3s cubic-bezier(.4,.6,.1,1);will-change:width}.psdk-appshell-nav:hover{width:var(--app-nav-width-expanded)}.psdk-appshell-topnav{display:flex;flex-direction:column;justify-content:flex-start;background:var(--app-nav-bg);width:var(--app-nav-width);height:15%;color:var(--app-nav-color);overflow:hidden;white-space:nowrap;transition:width .3s cubic-bezier(.4,.6,.1,1);will-change:width}.psdk-appshell-middlenav{display:flex;flex-direction:column;justify-content:space-between;background:var(--app-nav-bg);width:var(--app-nav-width);height:50%;color:var(--app-nav-color);overflow:hidden;white-space:nowrap;transition:width .3s cubic-bezier(.4,.6,.1,1);will-change:width}.psdk-nav-ul-middle{display:block;list-style-type:none;margin:0rem;padding-inline-start:30px}.psdk-nav-li-middle{box-sizing:border-box;text-align:left}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-nav-button-span{padding:0 1rem;color:var(--app-nav-color)}.psdk-nav-oper-avatar{margin:0rem;padding:0rem;min-width:2.5rem;min-height:2.5rem;max-width:2.5rem;max-height:2.5rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:inline-flex;background:var(--app-neutral-color);color:var(--app-form-color);font-weight:400;font-size:1rem}mat-list{padding:0}.psdk-profile-list-item{padding-left:24px}mat-list-item{padding:20px 0 20px 30px;cursor:pointer!important;height:auto!important}mat-list-item:hover{background-color:var(--app-label-color)}mat-list-item .flex-box{display:flex;align-items:center;width:100%;text-align:left}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i5$2.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i5$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavbarComponent, decorators: [{
             type: Component,
@@ -3565,7 +3670,7 @@ class ViewComponent {
          * The resolution lies in transferring this responsibility to the Reference component, eliminating the need for this code when Reference
          * component is able to handle it.
          */
-        if (this.pConn$.getPageReference().length > 'caseInfo.content'.length) {
+        if (!this.configProps$.visibility && this.pConn$.getPageReference().length > 'caseInfo.content'.length) {
             this.visibility$ = evaluateVisibility(this.pConn$);
         }
         // was:  this.arChildren$ = this.pConn$.getChildren() as Array<any>;
@@ -4204,7 +4309,7 @@ class AutoCompleteComponent {
         return errMessage;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutoCompleteComponent, deps: [{ token: AngularPConnectService }, { token: i0.ChangeDetectorRef }, { token: Utils }, { token: DatapageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AutoCompleteComponent, isStandalone: true, selector: "app-auto-complete", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$, hideLabel }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <input\n          matInput\n          [placeholder]=\"placeholder\"\n          [formControl]=\"fieldControl\"\n          [attr.data-test-id]=\"testId\"\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [matAutocomplete]=\"auto\"\n          (input)=\"fieldOnChange($event)\"\n          (blur)=\"fieldOnBlur($event)\"\n        />\n        <mat-autocomplete #auto=\"matAutocomplete\" autoActiveFirstOption (optionSelected)=\"optionChanged($event)\">\n          <mat-option *ngFor=\"let opt of filteredOptions | async\" [value]=\"opt.value\">\n            <span>{{ opt.value }}</span>\n          </mat-option>\n        </mat-autocomplete>\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i0.forwardRef(function () { return i3.AsyncPipe; }), name: "async" }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return 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(function () { return MatAutocompleteModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i8.MatAutocomplete; }), selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i0.forwardRef(function () { return i7.MatOption; }), selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i0.forwardRef(function () { return i8.MatAutocompleteTrigger; }), selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatOptionModule; }) }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AutoCompleteComponent, isStandalone: true, selector: "app-auto-complete", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$, hideLabel }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <input\n          matInput\n          [placeholder]=\"placeholder\"\n          [formControl]=\"fieldControl\"\n          [attr.data-test-id]=\"testId\"\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [matAutocomplete]=\"auto\"\n          (input)=\"fieldOnChange($event)\"\n          (blur)=\"fieldOnBlur($event)\"\n        />\n        <mat-autocomplete #auto=\"matAutocomplete\" autoActiveFirstOption (optionSelected)=\"optionChanged($event)\">\n          <mat-option *ngFor=\"let opt of filteredOptions | async\" [value]=\"opt.value\">\n            <span>{{ opt.value }}</span>\n          </mat-option>\n        </mat-autocomplete>\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i0.forwardRef(function () { return i3.AsyncPipe; }), name: "async" }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6$1.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(function () { return MatAutocompleteModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i8.MatAutocomplete; }), selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i0.forwardRef(function () { return i7.MatOption; }), selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i0.forwardRef(function () { return i8.MatAutocompleteTrigger; }), selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatOptionModule; }) }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutoCompleteComponent, decorators: [{
             type: Component,
@@ -4312,6 +4417,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
+function isSelfReferencedProperty(param, referenceProp) {
+    const [, parentPropName] = param.split('.');
+    const referencePropParent = referenceProp?.split('.').pop();
+    return parentPropName === referencePropParent;
+}
+function updateNewInstructions(c11nEnv, selectionList) {
+    const { datasource: { parameters = {} } = {} } = c11nEnv.getFieldMetadata(selectionList) || {};
+    const compositeKeys = [];
+    Object.values(parameters).forEach((param) => {
+        if (isSelfReferencedProperty(param, selectionList))
+            compositeKeys.push(param.substring(param.lastIndexOf('.') + 1));
+    });
+    c11nEnv.getListActions().initDefaultPageInstructions(selectionList, compositeKeys);
+}
+function insertInstruction(c11nEnv, selectionList, selectionKey, primaryField, item) {
+    const { id, primary } = item;
+    const actualProperty = selectionKey.startsWith('.') ? selectionKey.substring(1) : selectionKey;
+    const displayProperty = primaryField.startsWith('.') ? primaryField.substring(1) : primaryField;
+    const rows = c11nEnv.getValue(`${c11nEnv.getPageReference()}${selectionList}`) || [];
+    const startIndex = rows.length;
+    const content = {
+        [actualProperty]: id,
+        [displayProperty]: primary,
+        nonFormProperties: actualProperty !== displayProperty ? [displayProperty] : []
+    };
+    c11nEnv.getListActions().insert(content, startIndex);
+}
+function deleteInstruction(c11nEnv, selectionList, selectionKey, item) {
+    const { id } = item;
+    const actualProperty = selectionKey.startsWith('.') ? selectionKey.substring(1) : selectionKey;
+    const rows = c11nEnv.getValue(`${c11nEnv.getPageReference()}${selectionList}`) || [];
+    const index = rows.findIndex(row => row[actualProperty] === id);
+    c11nEnv.getListActions().deleteEntry(index);
+}
+
 class CheckBoxComponent {
     constructor(angularPConnect, cdRef, utils) {
         this.angularPConnect = angularPConnect;
@@ -4332,6 +4472,7 @@ class CheckBoxComponent {
         this.displayMode$ = '';
         this.bHasForm$ = true;
         this.componentReference = '';
+        this.listOfCheckboxes = [];
         this.fieldControl = new FormControl('', null);
     }
     ngOnInit() {
@@ -4342,6 +4483,10 @@ class CheckBoxComponent {
         // call updateSelf when initializing
         // this.updateSelf();
         this.checkAndUpdate();
+        if (this.selectionMode === 'multi' && this.referenceList?.length > 0) {
+            this.pConn$.setReferenceList(this.selectionList);
+            updateNewInstructions(this.pConn$, this.selectionList);
+        }
         if (this.formGroup$) {
             // add control to formGroup
             this.formGroup$.addControl(this.controlName$, this.fieldControl);
@@ -4378,58 +4523,113 @@ class CheckBoxComponent {
     updateSelf() {
         // moved this from ngOnInit() and call this from there instead...
         this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
-        if (this.configProps$.value != undefined) {
-            this.value$ = this.configProps$.value;
-        }
         this.testId = this.configProps$.testId;
-        this.label$ = this.configProps$.label;
         this.displayMode$ = this.configProps$.displayMode;
-        this.caption$ = this.configProps$.caption;
-        this.helperText = this.configProps$.helperText;
-        this.trueLabel$ = this.configProps$.trueLabel;
-        this.falseLabel$ = this.configProps$.falseLabel;
-        // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
-        setTimeout(() => {
-            if (this.configProps$.required != null) {
-                this.bRequired$ = this.utils.getBooleanValue(this.configProps$.required);
-            }
-            this.cdRef.detectChanges();
-        });
-        if (this.configProps$.visibility != null) {
-            this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
-        }
-        // disabled
-        if (this.configProps$.disabled != undefined) {
-            this.bDisabled$ = this.utils.getBooleanValue(this.configProps$.disabled);
-        }
-        if (this.bDisabled$) {
-            this.fieldControl.disable();
-        }
-        else {
-            this.fieldControl.enable();
-        }
-        if (this.configProps$.readOnly != null) {
-            this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
-        }
-        this.componentReference = this.pConn$.getStateProps().value;
+        this.label$ = this.configProps$.label;
         if (this.label$ != '') {
             this.showLabel$ = true;
         }
-        // eslint-disable-next-line sonarjs/no-redundant-boolean
-        if (this.value$ === 'true' || this.value$ == true) {
-            this.isChecked$ = true;
+        this.actionsApi = this.pConn$.getActionsApi();
+        this.propName = this.pConn$.getStateProps().value;
+        // multi case
+        this.selectionMode = this.configProps$.selectionMode;
+        if (this.selectionMode === 'multi') {
+            this.referenceList = this.configProps$.referenceList;
+            this.selectionList = this.configProps$.selectionList;
+            this.selectedvalues = this.configProps$.readonlyContextList;
+            this.primaryField = this.configProps$.primaryField;
+            this.datasource = this.configProps$.datasource;
+            this.selectionKey = this.configProps$.selectionKey;
+            const listSourceItems = this.datasource?.source ?? [];
+            const dataField = this.selectionKey?.split?.('.')[1];
+            const listToDisplay = [];
+            listSourceItems.forEach(element => {
+                element.selected = this.selectedvalues?.some?.(data => data[dataField] === element.key);
+                listToDisplay.push(element);
+            });
+            this.listOfCheckboxes = listToDisplay;
         }
         else {
-            this.isChecked$ = false;
+            if (this.configProps$.value != undefined) {
+                this.value$ = this.configProps$.value;
+            }
+            this.caption$ = this.configProps$.caption;
+            this.helperText = this.configProps$.helperText;
+            this.trueLabel$ = this.configProps$.trueLabel;
+            this.falseLabel$ = this.configProps$.falseLabel;
+            // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
+            setTimeout(() => {
+                if (this.configProps$.required != null) {
+                    this.bRequired$ = this.utils.getBooleanValue(this.configProps$.required);
+                }
+                this.cdRef.detectChanges();
+            });
+            if (this.configProps$.visibility != null) {
+                this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
+            }
+            // disabled
+            if (this.configProps$.disabled != undefined) {
+                this.bDisabled$ = this.utils.getBooleanValue(this.configProps$.disabled);
+            }
+            if (this.bDisabled$) {
+                this.fieldControl.disable();
+            }
+            else {
+                this.fieldControl.enable();
+            }
+            if (this.configProps$.readOnly != null) {
+                this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
+                this.fieldControl.disable();
+            }
+            this.componentReference = this.pConn$.getStateProps().value;
+            // eslint-disable-next-line sonarjs/no-redundant-boolean
+            if (this.value$ === 'true' || this.value$ == true) {
+                this.isChecked$ = true;
+            }
+            else {
+                this.isChecked$ = false;
+            }
+            // trigger display of error message with field control
+            if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
+                const timer = interval(100).subscribe(() => {
+                    this.fieldControl.setErrors({ message: true });
+                    this.fieldControl.markAsTouched();
+                    timer.unsubscribe();
+                });
+            }
         }
     }
     fieldOnChange(event) {
         event.value = event.checked;
-        this.angularPConnectData.actions?.onChange(this, event);
+        handleEvent(this.actionsApi, 'changeNblur', this.propName, event.checked);
     }
     fieldOnBlur(event) {
-        event.value = event.checked;
-        this.angularPConnectData.actions?.onBlur(this, event);
+        if (this.selectionMode === 'multi') {
+            this.pConn$.getValidationApi().validate(this.selectedvalues, this.selectionList);
+        }
+        else {
+            event.value = event.checked;
+            this.angularPConnectData.actions?.onBlur(this, event);
+        }
+    }
+    handleChangeMultiMode(event, element) {
+        if (!element.selected) {
+            insertInstruction(this.pConn$, this.selectionList, this.selectionKey, this.primaryField, {
+                id: element.key,
+                primary: element.text ?? element.value
+            });
+        }
+        else {
+            deleteInstruction(this.pConn$, this.selectionList, this.selectionKey, {
+                id: element.key,
+                primary: element.text ?? element.value
+            });
+        }
+        this.pConn$.clearErrorMessages({
+            property: this.selectionList,
+            category: '',
+            context: ''
+        });
     }
     getErrorMessage() {
         let errMessage = '';
@@ -4447,11 +4647,11 @@ class CheckBoxComponent {
         return errMessage;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckBoxComponent, deps: [{ token: AngularPConnectService }, { token: i0.ChangeDetectorRef }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckBoxComponent, isStandalone: true, selector: "app-check-box", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper\n    *ngIf=\"bVisible$ !== false\"\n    name=\"FieldValueList\"\n    [props]=\"{ label$: caption$, value$: value$ ? trueLabel$ : falseLabel$, displayMode$ }\"\n  ></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <div class=\"mat-form-field-infix\" *ngIf=\"showLabel$\">\n        <span>\n          <label class=\"mat-form-field-label psdk-label-readonly\">{{ label$ }}</label>\n        </span>\n        <mat-checkbox\n          [labelPosition]=\"'after'\"\n          [checked]=\"isChecked$\"\n          [disabled]=\"bDisabled$\"\n          [attr.data-test-id]=\"testId\"\n          [formControl]=\"fieldControl\"\n          (change)=\"fieldOnChange($event)\"\n          (blur)=\"fieldOnBlur($event)\"\n          >{{ caption$ }}</mat-checkbox\n        >\n      </div>\n      <div class=\"mat-form-field-infix\" *ngIf=\"!bReadonly$ && !showLabel$\">\n        <mat-checkbox\n          [labelPosition]=\"'after'\"\n          [checked]=\"isChecked$\"\n          [disabled]=\"bDisabled$\"\n          [attr.data-test-id]=\"testId\"\n          [formControl]=\"fieldControl\"\n          (change)=\"fieldOnChange($event)\"\n          (blur)=\"fieldOnBlur($event)\"\n          >{{ caption$ }}</mat-checkbox\n        >\n      </div>\n      <mat-hint *ngIf=\"helperText\">{{ helperText }}</mat-hint>\n      <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{min-width:9.375rem;width:100%;text-align:left}.psdk-label-readonly{top:0rem;margin-top:.625rem;font-size:.875rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatCheckboxModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5$2.MatCheckbox; }), selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatHint; }), selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckBoxComponent, isStandalone: true, selector: "app-check-box", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper\n    *ngIf=\"bVisible$ !== false\"\n    name=\"FieldValueList\"\n    [props]=\"{ label$: caption$, value$: value$ ? trueLabel$ : falseLabel$, displayMode$ }\"\n  ></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <div class=\"mat-form-field-infix\" *ngIf=\"showLabel$\">\n        <span>\n          <label class=\"mat-form-field-label psdk-label-readonly\">{{ label$ }}</label>\n        </span>\n      </div>\n      <div *ngIf=\"selectionMode === 'multi'; else single\">\n        <mat-option *ngFor=\"let item of listOfCheckboxes\" (click)=\"handleChangeMultiMode($event, item)\">\n          <mat-checkbox\n            [labelPosition]=\"'after'\"\n            [checked]=\"item.selected\"\n            [attr.data-test-id]=\"testId + ':' + item.value\"\n            (change)=\"handleChangeMultiMode($event, item)\"\n            (blur)=\"fieldOnBlur($event)\"\n            >{{ item.text ?? item.value }}\n          </mat-checkbox>\n        </mat-option>\n      </div>\n      <ng-template #single>\n        <mat-checkbox\n          [labelPosition]=\"'after'\"\n          [checked]=\"isChecked$\"\n          [attr.data-test-id]=\"testId\"\n          [formControl]=\"fieldControl\"\n          (change)=\"fieldOnChange($event)\"\n          (blur)=\"fieldOnBlur($event)\"\n          >{{ caption$ }}</mat-checkbox\n        >\n        <p *ngIf=\"helperText\">{{ helperText }}</p>\n      </ng-template>\n      <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{min-width:9.375rem;width:100%;text-align:left}.psdk-label-readonly{top:0rem;margin-top:.625rem;font-size:.875rem;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%;color:#0009}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}p{font-size:.75rem;color:#00000094}mat-checkbox{margin-left:-11px}.mat-mdc-option{margin-left:-16px}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatCheckboxModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5$3.MatCheckbox; }), selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatOptionModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i7.MatOption; }), selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-check-box', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatCheckboxModule, MatFormFieldModule, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper\n    *ngIf=\"bVisible$ !== false\"\n    name=\"FieldValueList\"\n    [props]=\"{ label$: caption$, value$: value$ ? trueLabel$ : falseLabel$, displayMode$ }\"\n  ></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <div class=\"mat-form-field-infix\" *ngIf=\"showLabel$\">\n        <span>\n          <label class=\"mat-form-field-label psdk-label-readonly\">{{ label$ }}</label>\n        </span>\n        <mat-checkbox\n          [labelPosition]=\"'after'\"\n          [checked]=\"isChecked$\"\n          [disabled]=\"bDisabled$\"\n          [attr.data-test-id]=\"testId\"\n          [formControl]=\"fieldControl\"\n          (change)=\"fieldOnChange($event)\"\n          (blur)=\"fieldOnBlur($event)\"\n          >{{ caption$ }}</mat-checkbox\n        >\n      </div>\n      <div class=\"mat-form-field-infix\" *ngIf=\"!bReadonly$ && !showLabel$\">\n        <mat-checkbox\n          [labelPosition]=\"'after'\"\n          [checked]=\"isChecked$\"\n          [disabled]=\"bDisabled$\"\n          [attr.data-test-id]=\"testId\"\n          [formControl]=\"fieldControl\"\n          (change)=\"fieldOnChange($event)\"\n          (blur)=\"fieldOnBlur($event)\"\n          >{{ caption$ }}</mat-checkbox\n        >\n      </div>\n      <mat-hint *ngIf=\"helperText\">{{ helperText }}</mat-hint>\n      <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{min-width:9.375rem;width:100%;text-align:left}.psdk-label-readonly{top:0rem;margin-top:.625rem;font-size:.875rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"] }]
+            args: [{ selector: 'app-check-box', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatCheckboxModule, MatFormFieldModule, MatOptionModule, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper\n    *ngIf=\"bVisible$ !== false\"\n    name=\"FieldValueList\"\n    [props]=\"{ label$: caption$, value$: value$ ? trueLabel$ : falseLabel$, displayMode$ }\"\n  ></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <div class=\"mat-form-field-infix\" *ngIf=\"showLabel$\">\n        <span>\n          <label class=\"mat-form-field-label psdk-label-readonly\">{{ label$ }}</label>\n        </span>\n      </div>\n      <div *ngIf=\"selectionMode === 'multi'; else single\">\n        <mat-option *ngFor=\"let item of listOfCheckboxes\" (click)=\"handleChangeMultiMode($event, item)\">\n          <mat-checkbox\n            [labelPosition]=\"'after'\"\n            [checked]=\"item.selected\"\n            [attr.data-test-id]=\"testId + ':' + item.value\"\n            (change)=\"handleChangeMultiMode($event, item)\"\n            (blur)=\"fieldOnBlur($event)\"\n            >{{ item.text ?? item.value }}\n          </mat-checkbox>\n        </mat-option>\n      </div>\n      <ng-template #single>\n        <mat-checkbox\n          [labelPosition]=\"'after'\"\n          [checked]=\"isChecked$\"\n          [attr.data-test-id]=\"testId\"\n          [formControl]=\"fieldControl\"\n          (change)=\"fieldOnChange($event)\"\n          (blur)=\"fieldOnBlur($event)\"\n          >{{ caption$ }}</mat-checkbox\n        >\n        <p *ngIf=\"helperText\">{{ helperText }}</p>\n      </ng-template>\n      <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{min-width:9.375rem;width:100%;text-align:left}.psdk-label-readonly{top:0rem;margin-top:.625rem;font-size:.875rem;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%;color:#0009}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}p{font-size:.75rem;color:#00000094}mat-checkbox{margin-left:-11px}.mat-mdc-option{margin-left:-16px}\n"] }]
         }], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: i0.ChangeDetectorRef }, { type: Utils }]; }, propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
@@ -5635,7 +5835,7 @@ class CurrencyComponent {
         return errMessage;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CurrencyComponent, deps: [{ token: AngularPConnectService }, { token: i0.ChangeDetectorRef }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CurrencyComponent, isStandalone: true, selector: "app-currency", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\" class=\"psdk-currency-field\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <div class=\"psdk-currency-input\">\n          <span>{{ symbol }}</span>\n          <input\n            style=\"margin-left: 5px\"\n            type=\"float\"\n            matInput\n            [placeholder]=\"placeholder\"\n            [value]=\"value$ | number: '1.2-2'\"\n            [required]=\"bRequired$\"\n            [formControl]=\"fieldControl\"\n            [attr.data-test-id]=\"testId\"\n            (change)=\"fieldOnChange($event)\"\n            (blur)=\"fieldOnBlur($event)\"\n          />\n        </div>\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}.psdk-currency-input{display:flex}.psdk-currency-field ::ng-deep .mdc-floating-label{position:initial!important}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i0.forwardRef(function () { return i3.DecimalPipe; }), name: "number" }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return 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: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CurrencyComponent, isStandalone: true, selector: "app-currency", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\" class=\"psdk-currency-field\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <div class=\"psdk-currency-input\">\n          <span>{{ symbol }}</span>\n          <input\n            style=\"margin-left: 5px\"\n            type=\"float\"\n            matInput\n            [placeholder]=\"placeholder\"\n            [value]=\"value$ | number: '1.2-2'\"\n            [required]=\"bRequired$\"\n            [formControl]=\"fieldControl\"\n            [attr.data-test-id]=\"testId\"\n            (change)=\"fieldOnChange($event)\"\n            (blur)=\"fieldOnBlur($event)\"\n          />\n        </div>\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}.psdk-currency-input{display:flex}.psdk-currency-field ::ng-deep .mdc-floating-label{position:initial!important}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i0.forwardRef(function () { return i3.DecimalPipe; }), name: "number" }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6$1.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: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CurrencyComponent, decorators: [{
             type: Component,
@@ -6166,7 +6366,7 @@ class DateComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateComponent, deps: [{ token: AngularPConnectService }, { token: i0.ChangeDetectorRef }, { token: Utils }, { token: MAT_DATE_FORMATS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateComponent, isStandalone: true, selector: "app-date", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, providers: [{ provide: MAT_DATE_FORMATS, useClass: MyFormat$1 }], ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper\n    *ngIf=\"bVisible$ !== false\"\n    name=\"FieldValueList\"\n    [props]=\"{ label$, value$: getFormattedValue(), displayMode$ }\"\n  ></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <input\n          matInput\n          #dateInput\n          [attr.data-test-id]=\"testId\"\n          [matDatepicker]=\"pegadate\"\n          [placeholder]=\"dateFormatInfo.dateFormatStringLC\"\n          type=\"text\"\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [formControl]=\"fieldControl\"\n          (dateChange)=\"fieldOnDateChange($event)\"\n          (blur)=\"fieldOnBlur($event)\"\n        />\n        <mat-datepicker-toggle matSuffix [for]=\"pegadate\"></mat-datepicker-toggle>\n        <mat-datepicker #pegadate [startAt]=\"value$\"></mat-datepicker>\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'date' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatSuffix; }), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return 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(function () { return MatDatepickerModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i4$2.MatDatepicker; }), selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i0.forwardRef(function () { return i4$2.MatDatepickerInput; }), selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i0.forwardRef(function () { return i4$2.MatDatepickerToggle; }), selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatNativeDateModule; }) }, { kind: "ngmodule", type: i0.forwardRef(function () { return MomentDateModule; }) }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateComponent, isStandalone: true, selector: "app-date", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, providers: [{ provide: MAT_DATE_FORMATS, useClass: MyFormat$1 }], ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper\n    *ngIf=\"bVisible$ !== false\"\n    name=\"FieldValueList\"\n    [props]=\"{ label$, value$: getFormattedValue(), displayMode$ }\"\n  ></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <input\n          matInput\n          #dateInput\n          [attr.data-test-id]=\"testId\"\n          [matDatepicker]=\"pegadate\"\n          [placeholder]=\"dateFormatInfo.dateFormatStringLC\"\n          type=\"text\"\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [formControl]=\"fieldControl\"\n          (dateChange)=\"fieldOnDateChange($event)\"\n          (blur)=\"fieldOnBlur($event)\"\n        />\n        <mat-datepicker-toggle matSuffix [for]=\"pegadate\"></mat-datepicker-toggle>\n        <mat-datepicker #pegadate [startAt]=\"value$\"></mat-datepicker>\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'date' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatSuffix; }), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6$1.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(function () { return MatDatepickerModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i4$2.MatDatepicker; }), selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i0.forwardRef(function () { return i4$2.MatDatepickerInput; }), selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i0.forwardRef(function () { return i4$2.MatDatepickerToggle; }), selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatNativeDateModule; }) }, { kind: "ngmodule", type: i0.forwardRef(function () { return MomentDateModule; }) }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateComponent, decorators: [{
             type: Component,
@@ -6347,7 +6547,7 @@ class DateTimeComponent {
         return errMessage;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateTimeComponent, deps: [{ token: AngularPConnectService }, { token: i0.ChangeDetectorRef }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateTimeComponent, isStandalone: true, selector: "app-date-time", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, providers: [{ provide: NGX_MAT_DATE_FORMATS, useClass: MyFormat }], ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <input\n          matInput\n          [attr.data-test-id]=\"testId\"\n          [ngxMatDatetimePicker]=\"picker\"\n          [placeholder]=\"placeholder\"\n          [formControl]=\"fieldControl\"\n          (dateChange)=\"fieldOnChange($event)\"\n          (blur)=\"fieldOnBlur($event)\"\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n        />\n        <mat-datepicker-toggle matSuffix [for]=\"$any(picker)\"></mat-datepicker-toggle>\n        <ngx-mat-datetime-picker #picker [stepHour]=\"stepHour\" [stepMinute]=\"stepMinute\" [stepSecond]=\"stepSecond\"> </ngx-mat-datetime-picker>\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'date-time' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}::ng-deep .mat-datepicker-content,::ng-deep .time-container{box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;display:block;border-radius:4px;background-color:var(--mat-datepicker-calendar-container-background-color);color:var(--mat-datepicker-calendar-container-text-color)}::ng-deep .mat-calendar-body-cell-content{color:var(--mat-datepicker-calendar-date-text-color);border-color:var(--mat-datepicker-calendar-date-outline-color)}::ng-deep .mat-calendar-body-selected{background-color:var(--mat-datepicker-calendar-date-selected-state-background-color);color:var(--mat-datepicker-calendar-date-selected-state-text-color)}::ng-deep .mat-calendar-body-cell-content{border:none!important}::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--mat-datepicker-calendar-date-hover-state-background-color)}::ng-deep .mat-calendar-arrow{fill:var(--mat-datepicker-calendar-period-button-icon-color)}::ng-deep .mat-calendar-table-header th{text-align:center;padding:0 0 8px;color:var(--mat-datepicker-calendar-header-text-color);font-size:var(--mat-datepicker-calendar-header-text-size);font-weight:var(--mat-datepicker-calendar-header-text-weight)}::ng-deep .mat-datepicker-content .mat-calendar-previous-button,::ng-deep .mat-datepicker-content .mat-calendar-next-button{color:var(--mat-datepicker-calendar-navigation-button-icon-color)}::ng-deep .mat-calendar-table-header-divider:after{content:\"\";position:absolute;top:0;left:-8px;right:-8px;height:1px;background:var(--mat-datepicker-calendar-header-divider-color)}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatSuffix; }), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return 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(function () { return MatDatepickerModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i4$2.MatDatepickerToggle; }), selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return NgxMatMomentModule; }) }, { kind: "ngmodule", type: i0.forwardRef(function () { return NgxMatDatetimePickerModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i8$1.NgxMatDatetimepicker; }), selector: "ngx-mat-datetime-picker", exportAs: ["ngxMatDatetimePicker"] }, { kind: "directive", type: i0.forwardRef(function () { return i8$1.NgxMatDatepickerInput; }), selector: "input[ngxMatDatetimePicker]", inputs: ["ngxMatDatetimePicker", "min", "max", "matDatepickerFilter"], exportAs: ["ngxMatDatepickerInput"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return NgxMatTimepickerModule; }) }, { kind: "ngmodule", type: i0.forwardRef(function () { return MomentDateModule; }) }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateTimeComponent, isStandalone: true, selector: "app-date-time", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, providers: [{ provide: NGX_MAT_DATE_FORMATS, useClass: MyFormat }], ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <input\n          matInput\n          [attr.data-test-id]=\"testId\"\n          [ngxMatDatetimePicker]=\"picker\"\n          [placeholder]=\"placeholder\"\n          [formControl]=\"fieldControl\"\n          (dateChange)=\"fieldOnChange($event)\"\n          (blur)=\"fieldOnBlur($event)\"\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n        />\n        <mat-datepicker-toggle matSuffix [for]=\"$any(picker)\"></mat-datepicker-toggle>\n        <ngx-mat-datetime-picker #picker [stepHour]=\"stepHour\" [stepMinute]=\"stepMinute\" [stepSecond]=\"stepSecond\"> </ngx-mat-datetime-picker>\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'date-time' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}::ng-deep .mat-datepicker-content,::ng-deep .time-container{box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;display:block;border-radius:4px;background-color:var(--mat-datepicker-calendar-container-background-color);color:var(--mat-datepicker-calendar-container-text-color)}::ng-deep .mat-calendar-body-cell-content{color:var(--mat-datepicker-calendar-date-text-color);border-color:var(--mat-datepicker-calendar-date-outline-color)}::ng-deep .mat-calendar-body-selected{background-color:var(--mat-datepicker-calendar-date-selected-state-background-color);color:var(--mat-datepicker-calendar-date-selected-state-text-color)}::ng-deep .mat-calendar-body-cell-content{border:none!important}::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--mat-datepicker-calendar-date-hover-state-background-color)}::ng-deep .mat-calendar-arrow{fill:var(--mat-datepicker-calendar-period-button-icon-color)}::ng-deep .mat-calendar-table-header th{text-align:center;padding:0 0 8px;color:var(--mat-datepicker-calendar-header-text-color);font-size:var(--mat-datepicker-calendar-header-text-size);font-weight:var(--mat-datepicker-calendar-header-text-weight)}::ng-deep .mat-datepicker-content .mat-calendar-previous-button,::ng-deep .mat-datepicker-content .mat-calendar-next-button{color:var(--mat-datepicker-calendar-navigation-button-icon-color)}::ng-deep .mat-calendar-table-header-divider:after{content:\"\";position:absolute;top:0;left:-8px;right:-8px;height:1px;background:var(--mat-datepicker-calendar-header-divider-color)}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatSuffix; }), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6$1.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(function () { return MatDatepickerModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i4$2.MatDatepickerToggle; }), selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return NgxMatMomentModule; }) }, { kind: "ngmodule", type: i0.forwardRef(function () { return NgxMatDatetimePickerModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i8$1.NgxMatDatetimepicker; }), selector: "ngx-mat-datetime-picker", exportAs: ["ngxMatDatetimePicker"] }, { kind: "directive", type: i0.forwardRef(function () { return i8$1.NgxMatDatepickerInput; }), selector: "input[ngxMatDatetimePicker]", inputs: ["ngxMatDatetimePicker", "min", "max", "matDatepickerFilter"], exportAs: ["ngxMatDatepickerInput"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return NgxMatTimepickerModule; }) }, { kind: "ngmodule", type: i0.forwardRef(function () { return MomentDateModule; }) }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateTimeComponent, decorators: [{
             type: Component,
@@ -6377,10 +6577,7 @@ class ThousandSeparatorDirective {
         const input = this.el.nativeElement;
         let value = input.value.replace(/,/g, ''); // Remove existing commas
         if (event?.data !== '.') {
-            if (Number.isNaN(Number(value))) {
-                value = value.slice(0, -1);
-            }
-            value = value ? Number(value).toLocaleString() : ''; // Add thousands separator
+            value = Number(value).toLocaleString(); // Add thousands separator
             input.value = value;
         }
     }
@@ -6521,7 +6718,7 @@ class DecimalComponent {
         return errMessage;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DecimalComponent, deps: [{ token: AngularPConnectService }, { token: i0.ChangeDetectorRef }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DecimalComponent, isStandalone: true, selector: "app-decimal", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <input\n          type=\"text\"\n          matInput\n          appThousandSeparator\n          [placeholder]=\"placeholder\"\n          step=\"0.01\"\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [formControl]=\"fieldControl\"\n          [attr.data-test-id]=\"testId\"\n          (blur)=\"fieldOnBlur($event)\"\n        />\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return FormsModule; }) }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return 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: "directive", type: i0.forwardRef(function () { return ThousandSeparatorDirective; }), selector: "[appThousandSeparator]" }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DecimalComponent, isStandalone: true, selector: "app-decimal", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <input\n          type=\"text\"\n          matInput\n          appThousandSeparator\n          [placeholder]=\"placeholder\"\n          step=\"0.01\"\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [formControl]=\"fieldControl\"\n          [attr.data-test-id]=\"testId\"\n          (blur)=\"fieldOnBlur($event)\"\n        />\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return FormsModule; }) }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6$1.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: "directive", type: i0.forwardRef(function () { return ThousandSeparatorDirective; }), selector: "[appThousandSeparator]" }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DecimalComponent, decorators: [{
             type: Component,
@@ -6709,7 +6906,7 @@ class DropdownComponent {
         return errMessage;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownComponent, deps: [{ token: AngularPConnectService }, { token: i0.ChangeDetectorRef }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropdownComponent, isStandalone: true, selector: "app-dropdown", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper\n    *ngIf=\"bVisible$ !== false\"\n    name=\"FieldValueList\"\n    [props]=\"{ label$, value$: this.localizedValue, displayMode$ }\"\n  ></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-select\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [attr.data-test-id]=\"testId\"\n          (selectionChange)=\"fieldOnChange($event)\"\n          [formControl]=\"fieldControl\"\n        >\n          <mat-option *ngFor=\"let opt of options$\" [value]=\"opt.key\">\n            {{ getLocalizedOptionValue(opt) }}\n          </mat-option>\n        </mat-select>\n        <mat-label>{{ label$ }}</mat-label>\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-form{min-width:9.375rem;width:100%}.psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatSelectModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$3.MatSelect; }), selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i0.forwardRef(function () { return i7.MatOption; }), selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatOptionModule; }) }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropdownComponent, isStandalone: true, selector: "app-dropdown", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper\n    *ngIf=\"bVisible$ !== false\"\n    name=\"FieldValueList\"\n    [props]=\"{ label$, value$: this.localizedValue, displayMode$ }\"\n  ></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-select\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [attr.data-test-id]=\"testId\"\n          (selectionChange)=\"fieldOnChange($event)\"\n          [formControl]=\"fieldControl\"\n        >\n          <mat-option *ngFor=\"let opt of options$\" [value]=\"opt.key\">\n            {{ getLocalizedOptionValue(opt) }}\n          </mat-option>\n        </mat-select>\n        <mat-label>{{ label$ }}</mat-label>\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-form{min-width:9.375rem;width:100%}.psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatSelectModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$2.MatSelect; }), selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i0.forwardRef(function () { return i7.MatOption; }), selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatOptionModule; }) }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
@@ -6845,7 +7042,7 @@ class EmailComponent {
         return errMessage;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EmailComponent, deps: [{ token: AngularPConnectService }, { token: i0.ChangeDetectorRef }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EmailComponent, isStandalone: true, selector: "app-email", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <input\n          matInput\n          [placeholder]=\"placeholder\"\n          type=\"email\"\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [formControl]=\"fieldControl\"\n          [attr.data-test-id]=\"testId\"\n          (change)=\"fieldOnChange($event)\"\n          (blur)=\"fieldOnBlur($event)\"\n        />\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return 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: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EmailComponent, isStandalone: true, selector: "app-email", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <input\n          matInput\n          [placeholder]=\"placeholder\"\n          type=\"email\"\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [formControl]=\"fieldControl\"\n          [attr.data-test-id]=\"testId\"\n          (change)=\"fieldOnChange($event)\"\n          (blur)=\"fieldOnBlur($event)\"\n        />\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6$1.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: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EmailComponent, decorators: [{
             type: Component,
@@ -7043,7 +7240,7 @@ class IntegerComponent {
         return errMessage;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IntegerComponent, deps: [{ token: AngularPConnectService }, { token: i0.ChangeDetectorRef }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: IntegerComponent, isStandalone: true, selector: "app-integer", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <input\n          matInput\n          [placeholder]=\"placeholder\"\n          type=\"number\"\n          step=\"1\"\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [formControl]=\"fieldControl\"\n          [attr.data-test-id]=\"testId\"\n          (change)=\"fieldOnChange($event)\"\n          (blur)=\"fieldOnBlur($event)\"\n        />\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NumberValueAccessor; }), selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return 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: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: IntegerComponent, isStandalone: true, selector: "app-integer", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <input\n          matInput\n          [placeholder]=\"placeholder\"\n          type=\"number\"\n          step=\"1\"\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [formControl]=\"fieldControl\"\n          [attr.data-test-id]=\"testId\"\n          (change)=\"fieldOnChange($event)\"\n          (blur)=\"fieldOnBlur($event)\"\n        />\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NumberValueAccessor; }), selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6$1.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: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IntegerComponent, decorators: [{
             type: Component,
@@ -7221,7 +7418,7 @@ class PercentageComponent {
         return errMessage;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PercentageComponent, deps: [{ token: AngularPConnectService }, { token: i0.ChangeDetectorRef }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PercentageComponent, isStandalone: true, selector: "app-percentage", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <!-- <span matPrefix>% &nbsp;</span> -->\n        <input\n          matInput\n          [placeholder]=\"placeholder\"\n          type=\"number\"\n          step=\".01\"\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [formControl]=\"fieldControl\"\n          [attr.data-test-id]=\"testId\"\n          (change)=\"fieldOnChange($event)\"\n          (blur)=\"fieldOnBlur($event)\"\n        />\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NumberValueAccessor; }), selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return 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: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PercentageComponent, isStandalone: true, selector: "app-percentage", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <!-- <span matPrefix>% &nbsp;</span> -->\n        <input\n          matInput\n          [placeholder]=\"placeholder\"\n          type=\"number\"\n          step=\".01\"\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [formControl]=\"fieldControl\"\n          [attr.data-test-id]=\"testId\"\n          (change)=\"fieldOnChange($event)\"\n          (blur)=\"fieldOnBlur($event)\"\n        />\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NumberValueAccessor; }), selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6$1.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: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PercentageComponent, decorators: [{
             type: Component,
@@ -7546,7 +7743,7 @@ class RadioButtonsComponent {
         return errMessage;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioButtonsComponent, deps: [{ token: AngularPConnectService }, { token: i0.ChangeDetectorRef }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RadioButtonsComponent, isStandalone: true, selector: "app-radio-buttons", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, providers: [Utils], ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper\n    *ngIf=\"bVisible$ !== false\"\n    name=\"FieldValueList\"\n    [props]=\"{ label$, value$: this.localizedValue, displayMode$ }\"\n  ></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n    <mat-form-field class=\"psdk-radio-form\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n      <span class=\"psdk-label-wrapper-readonly\">\n        <label class=\"psdk-label-readonly\">{{ label$ }}</label>\n      </span>\n      <!-- <mat-label>{{label$}}</mat-label> -->\n      <input matInput [placeholder]=\"placeholder\" style=\"display: none\" />\n      <mat-radio-group\n        [value]=\"value$\"\n        [required]=\"bRequired$\"\n        [formControl]=\"fieldControl\"\n        [attr.data-test-id]=\"testId\"\n        (change)=\"fieldOnChange($event)\"\n        class=\"{{ bInline$ ? 'psdk-radio-horizontal' : 'psdk-radio-vertical' }}\"\n      >\n        <mat-radio-button\n          *ngFor=\"let opt of options$\"\n          [checked]=\"isSelected(opt.key)\"\n          [disabled]=\"bReadonly$\"\n          [value]=\"opt.key\"\n          class=\"psdk-radio-button\"\n        >\n          {{ getLocalizedOptionValue(opt) }}\n        </mat-radio-button>\n      </mat-radio-group>\n      <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n    </mat-form-field>\n  </div>\n</ng-template>\n", styles: [".psdk-label-readonly{opacity:54%;font-size:.7rem}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}.psdk-radio-horizontal{display:flex;flex-direction:row}.psdk-radio-vertical{display:flex;flex-direction:column}.psdk-radio-button{padding:.3125rem 0}.psdk-radio-form{width:100%}.psdk-radio-form ::ng-deep .mat-form-field-underline{background-color:transparent}.psdk-radio-form ::ng-deep .mat-form-field-label{top:0}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return 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(function () { return MatRadioModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i7$1.MatRadioGroup; }), selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i0.forwardRef(function () { return i7$1.MatRadioButton; }), selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RadioButtonsComponent, isStandalone: true, selector: "app-radio-buttons", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, providers: [Utils], ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper\n    *ngIf=\"bVisible$ !== false\"\n    name=\"FieldValueList\"\n    [props]=\"{ label$, value$: this.localizedValue, displayMode$ }\"\n  ></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n    <mat-form-field class=\"psdk-radio-form\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n      <span class=\"psdk-label-wrapper-readonly\">\n        <label class=\"psdk-label-readonly\">{{ label$ }}</label>\n      </span>\n      <!-- <mat-label>{{label$}}</mat-label> -->\n      <input matInput [placeholder]=\"placeholder\" style=\"display: none\" />\n      <mat-radio-group\n        [value]=\"value$\"\n        [required]=\"bRequired$\"\n        [formControl]=\"fieldControl\"\n        [attr.data-test-id]=\"testId\"\n        (change)=\"fieldOnChange($event)\"\n        class=\"{{ bInline$ ? 'psdk-radio-horizontal' : 'psdk-radio-vertical' }}\"\n      >\n        <mat-radio-button\n          *ngFor=\"let opt of options$\"\n          [checked]=\"isSelected(opt.key)\"\n          [disabled]=\"bReadonly$\"\n          [value]=\"opt.key\"\n          class=\"psdk-radio-button\"\n        >\n          {{ getLocalizedOptionValue(opt) }}\n        </mat-radio-button>\n      </mat-radio-group>\n      <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n    </mat-form-field>\n  </div>\n</ng-template>\n", styles: [".psdk-label-readonly{opacity:54%;font-size:.7rem}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}.psdk-radio-horizontal{display:flex;flex-direction:row}.psdk-radio-vertical{display:flex;flex-direction:column}.psdk-radio-button{padding:.3125rem 0}.psdk-radio-form{width:100%}.psdk-radio-form ::ng-deep .mat-form-field-underline{background-color:transparent}.psdk-radio-form ::ng-deep .mat-form-field-label{top:0}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6$1.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(function () { return MatRadioModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i7$1.MatRadioGroup; }), selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i0.forwardRef(function () { return i7$1.MatRadioButton; }), selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioButtonsComponent, decorators: [{
             type: Component,
@@ -7737,7 +7934,7 @@ class TextAreaComponent {
         return errMessage;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextAreaComponent, deps: [{ token: AngularPConnectService }, { token: i0.ChangeDetectorRef }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TextAreaComponent, isStandalone: true, selector: "app-text-area", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\">\n      <div *ngIf=\"bVisible$\">\n        <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n          <textarea\n            matInput\n            rows=\"5\"\n            [placeholder]=\"label$\"\n            type=\"text\"\n            [attr.data-test-id]=\"testId\"\n            [value]=\"value$\"\n            [required]=\"bRequired$\"\n            [disabled]=\"bDisabled$\"\n            [formControl]=\"fieldControl\"\n            (change)=\"fieldOnChange($event)\"\n          ></textarea>\n          <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n        </mat-form-field>\n      </div>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return 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: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TextAreaComponent, isStandalone: true, selector: "app-text-area", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\">\n      <div *ngIf=\"bVisible$\">\n        <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n          <textarea\n            matInput\n            rows=\"5\"\n            [placeholder]=\"label$\"\n            type=\"text\"\n            [attr.data-test-id]=\"testId\"\n            [value]=\"value$\"\n            [required]=\"bRequired$\"\n            [disabled]=\"bDisabled$\"\n            [formControl]=\"fieldControl\"\n            (change)=\"fieldOnChange($event)\"\n          ></textarea>\n          <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n        </mat-form-field>\n      </div>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6$1.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: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextAreaComponent, decorators: [{
             type: Component,
@@ -8069,7 +8266,7 @@ class TextInputComponent {
         return errMessage;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextInputComponent, deps: [{ token: AngularPConnectService }, { token: i0.ChangeDetectorRef }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TextInputComponent, isStandalone: true, selector: "app-text-input", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <input\n          matInput\n          [placeholder]=\"placeholder\"\n          type=\"text\"\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [attr.data-test-id]=\"testId\"\n          [formControl]=\"fieldControl\"\n          (change)=\"fieldOnChange($event)\"\n          (blur)=\"fieldOnBlur($event)\"\n        />\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return 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: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TextInputComponent, isStandalone: true, selector: "app-text-input", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <input\n          matInput\n          [placeholder]=\"placeholder\"\n          type=\"text\"\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [attr.data-test-id]=\"testId\"\n          [formControl]=\"fieldControl\"\n          (change)=\"fieldOnChange($event)\"\n          (blur)=\"fieldOnBlur($event)\"\n        />\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6$1.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: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
@@ -8208,7 +8405,7 @@ class TimeComponent {
         return errMessage;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimeComponent, deps: [{ token: AngularPConnectService }, { token: i0.ChangeDetectorRef }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimeComponent, isStandalone: true, selector: "app-time", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <input\n          matInput\n          [placeholder]=\"placeholder\"\n          type=\"time\"\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [attr.data-test-id]=\"testId\"\n          [formControl]=\"fieldControl\"\n          (change)=\"fieldOnChange($event)\"\n          (blur)=\"fieldOnBlur($event)\"\n        />\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return 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: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimeComponent, isStandalone: true, selector: "app-time", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <input\n          matInput\n          [placeholder]=\"placeholder\"\n          type=\"time\"\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [attr.data-test-id]=\"testId\"\n          [formControl]=\"fieldControl\"\n          (change)=\"fieldOnChange($event)\"\n          (blur)=\"fieldOnBlur($event)\"\n        />\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6$1.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: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimeComponent, decorators: [{
             type: Component,
@@ -8346,7 +8543,7 @@ class UrlComponent {
         return errMessage;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UrlComponent, deps: [{ token: AngularPConnectService }, { token: i0.ChangeDetectorRef }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UrlComponent, isStandalone: true, selector: "app-url", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <input\n          matInput\n          [placeholder]=\"placeholder\"\n          type=\"url\"\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [attr.data-test-id]=\"testId\"\n          [formControl]=\"fieldControl\"\n          (change)=\"fieldOnChange($event)\"\n          (blur)=\"fieldOnBlur($event)\"\n        />\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'url' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return 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: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UrlComponent, isStandalone: true, selector: "app-url", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <input\n          matInput\n          [placeholder]=\"placeholder\"\n          type=\"url\"\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [attr.data-test-id]=\"testId\"\n          [formControl]=\"fieldControl\"\n          (change)=\"fieldOnChange($event)\"\n          (blur)=\"fieldOnBlur($event)\"\n        />\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'url' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6$1.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: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UrlComponent, decorators: [{
             type: Component,
@@ -8414,12 +8611,13 @@ class UserReferenceComponent {
     updateSelf() {
         const props = this.pConn$.getConfigProps();
         this.testId = props.testId;
-        const { label, displayAs, value, showAsFormattedText, helperText, placeholder } = props;
+        const { label, displayAs, value, showAsFormattedText, helperText, placeholder, displayMode } = props;
         this.label$ = label;
         this.showAsFormattedText$ = showAsFormattedText;
         this.displayAs$ = displayAs;
         this.helperText = helperText;
         this.placeholder = placeholder || '';
+        this.displayMode$ = displayMode;
         const { readOnly, required } = props;
         [this.bReadonly$, this.bRequired$] = [readOnly, required].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));
         const isUserNameAvailable = user => {
@@ -8493,7 +8691,7 @@ class UserReferenceComponent {
         return errMessage;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserReferenceComponent, deps: [{ token: AngularPConnectService }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UserReferenceComponent, isStandalone: true, selector: "app-user-reference", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div class=\"psdk-user-reference\">\n  <div *ngIf=\"type === 'operator'\">\n    <component-mapper name=\"Operator\" [props]=\"{ pConn$ }\"></component-mapper>\n  </div>\n  <div [formGroup]=\"formGroup$\" *ngIf=\"type === 'dropdown'\">\n    <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n      <mat-select\n        [value]=\"value$\"\n        [required]=\"bRequired$\"\n        [formControl]=\"fieldControl\"\n        [attr.data-test-id]=\"testId\"\n        (selectionChange)=\"fieldOnChange($event)\"\n      >\n        <mat-option *ngFor=\"let opt of options$\" [value]=\"opt.key\">\n          {{ opt.value }}\n        </mat-option>\n      </mat-select>\n      <mat-label>{{ label$ }}</mat-label>\n      <mat-error *ngIf=\"fieldControl.invalid\">\n        {{ getErrorMessage() }}\n      </mat-error>\n    </mat-form-field>\n  </div>\n  <div [formGroup]=\"formGroup$\" *ngIf=\"type === 'searchbox'\">\n    <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n      <mat-label>{{ label$ }}</mat-label>\n      <input\n        matInput\n        [placeholder]=\"placeholder\"\n        [formControl]=\"fieldControl\"\n        [value]=\"value$\"\n        [required]=\"bRequired$\"\n        [matAutocomplete]=\"auto\"\n        [attr.data-test-id]=\"testId\"\n        (change)=\"fieldOnChange($event)\"\n        (blur)=\"fieldOnBlur($event)\"\n      />\n      <mat-autocomplete #auto=\"matAutocomplete\">\n        <mat-option *ngFor=\"let opt of options$\" [value]=\"opt.value\">\n          <span>{{ opt.value }}</span>\n        </mat-option>\n      </mat-autocomplete>\n      <mat-error *ngIf=\"fieldControl.invalid\">\n        {{ getErrorMessage() }}\n      </mat-error>\n    </mat-form-field>\n  </div>\n</div>\n", styles: [".psdk-user-reference{font-size:.8rem;color:var(--app-neutral-color)}.psdk-single{flex:1}.psdk-double{flex:2}.psdk-top-pad{padding-top:10px}.psdk-full-width{width:100%;padding-left:.625rem}dt{flex:1}dd{flex:2}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatSelectModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$3.MatSelect; }), selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i0.forwardRef(function () { return i7.MatOption; }), selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatOptionModule; }) }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return 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(function () { return MatAutocompleteModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i8.MatAutocomplete; }), selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i0.forwardRef(function () { return i8.MatAutocompleteTrigger; }), selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UserReferenceComponent, isStandalone: true, selector: "app-user-reference", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div class=\"psdk-user-reference\">\n  <div *ngIf=\"displayMode$; else noDisplayMode\">\n    <component-mapper name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n  </div>\n  <ng-template #noDisplayMode>\n    <div *ngIf=\"type === 'operator'\">\n      <component-mapper name=\"Operator\" [props]=\"{ pConn$ }\"></component-mapper>\n    </div>\n    <div [formGroup]=\"formGroup$\" *ngIf=\"type === 'dropdown'\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-select\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [formControl]=\"fieldControl\"\n          [attr.data-test-id]=\"testId\"\n          (selectionChange)=\"fieldOnChange($event)\"\n        >\n          <mat-option *ngFor=\"let opt of options$\" [value]=\"opt.key\">\n            {{ opt.value }}\n          </mat-option>\n        </mat-select>\n        <mat-label>{{ label$ }}</mat-label>\n        <mat-error *ngIf=\"fieldControl.invalid\">\n          {{ getErrorMessage() }}\n        </mat-error>\n      </mat-form-field>\n    </div>\n    <div [formGroup]=\"formGroup$\" *ngIf=\"type === 'searchbox'\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <input\n          matInput\n          [placeholder]=\"placeholder\"\n          [formControl]=\"fieldControl\"\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [matAutocomplete]=\"auto\"\n          [attr.data-test-id]=\"testId\"\n          (change)=\"fieldOnChange($event)\"\n          (blur)=\"fieldOnBlur($event)\"\n        />\n        <mat-autocomplete #auto=\"matAutocomplete\">\n          <mat-option *ngFor=\"let opt of options$\" [value]=\"opt.value\">\n            <span>{{ opt.value }}</span>\n          </mat-option>\n        </mat-autocomplete>\n        <mat-error *ngIf=\"fieldControl.invalid\">\n          {{ getErrorMessage() }}\n        </mat-error>\n      </mat-form-field>\n    </div>\n  </ng-template>\n</div>\n", styles: [".psdk-user-reference{font-size:.8rem;color:var(--app-neutral-color)}.psdk-single{flex:1}.psdk-double{flex:2}.psdk-top-pad{padding-top:10px}.psdk-full-width{width:100%;padding-left:.625rem}dt{flex:1}dd{flex:2}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatSelectModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$2.MatSelect; }), selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i0.forwardRef(function () { return i7.MatOption; }), selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatOptionModule; }) }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6$1.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(function () { return MatAutocompleteModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i8.MatAutocomplete; }), selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i0.forwardRef(function () { return i8.MatAutocompleteTrigger; }), selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserReferenceComponent, decorators: [{
             type: Component,
@@ -8506,7 +8704,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         MatInputModule,
                         MatAutocompleteModule,
                         forwardRef(() => ComponentMapperComponent)
-                    ], template: "<div class=\"psdk-user-reference\">\n  <div *ngIf=\"type === 'operator'\">\n    <component-mapper name=\"Operator\" [props]=\"{ pConn$ }\"></component-mapper>\n  </div>\n  <div [formGroup]=\"formGroup$\" *ngIf=\"type === 'dropdown'\">\n    <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n      <mat-select\n        [value]=\"value$\"\n        [required]=\"bRequired$\"\n        [formControl]=\"fieldControl\"\n        [attr.data-test-id]=\"testId\"\n        (selectionChange)=\"fieldOnChange($event)\"\n      >\n        <mat-option *ngFor=\"let opt of options$\" [value]=\"opt.key\">\n          {{ opt.value }}\n        </mat-option>\n      </mat-select>\n      <mat-label>{{ label$ }}</mat-label>\n      <mat-error *ngIf=\"fieldControl.invalid\">\n        {{ getErrorMessage() }}\n      </mat-error>\n    </mat-form-field>\n  </div>\n  <div [formGroup]=\"formGroup$\" *ngIf=\"type === 'searchbox'\">\n    <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n      <mat-label>{{ label$ }}</mat-label>\n      <input\n        matInput\n        [placeholder]=\"placeholder\"\n        [formControl]=\"fieldControl\"\n        [value]=\"value$\"\n        [required]=\"bRequired$\"\n        [matAutocomplete]=\"auto\"\n        [attr.data-test-id]=\"testId\"\n        (change)=\"fieldOnChange($event)\"\n        (blur)=\"fieldOnBlur($event)\"\n      />\n      <mat-autocomplete #auto=\"matAutocomplete\">\n        <mat-option *ngFor=\"let opt of options$\" [value]=\"opt.value\">\n          <span>{{ opt.value }}</span>\n        </mat-option>\n      </mat-autocomplete>\n      <mat-error *ngIf=\"fieldControl.invalid\">\n        {{ getErrorMessage() }}\n      </mat-error>\n    </mat-form-field>\n  </div>\n</div>\n", styles: [".psdk-user-reference{font-size:.8rem;color:var(--app-neutral-color)}.psdk-single{flex:1}.psdk-double{flex:2}.psdk-top-pad{padding-top:10px}.psdk-full-width{width:100%;padding-left:.625rem}dt{flex:1}dd{flex:2}\n"] }]
+                    ], template: "<div class=\"psdk-user-reference\">\n  <div *ngIf=\"displayMode$; else noDisplayMode\">\n    <component-mapper name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n  </div>\n  <ng-template #noDisplayMode>\n    <div *ngIf=\"type === 'operator'\">\n      <component-mapper name=\"Operator\" [props]=\"{ pConn$ }\"></component-mapper>\n    </div>\n    <div [formGroup]=\"formGroup$\" *ngIf=\"type === 'dropdown'\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-select\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [formControl]=\"fieldControl\"\n          [attr.data-test-id]=\"testId\"\n          (selectionChange)=\"fieldOnChange($event)\"\n        >\n          <mat-option *ngFor=\"let opt of options$\" [value]=\"opt.key\">\n            {{ opt.value }}\n          </mat-option>\n        </mat-select>\n        <mat-label>{{ label$ }}</mat-label>\n        <mat-error *ngIf=\"fieldControl.invalid\">\n          {{ getErrorMessage() }}\n        </mat-error>\n      </mat-form-field>\n    </div>\n    <div [formGroup]=\"formGroup$\" *ngIf=\"type === 'searchbox'\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <input\n          matInput\n          [placeholder]=\"placeholder\"\n          [formControl]=\"fieldControl\"\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [matAutocomplete]=\"auto\"\n          [attr.data-test-id]=\"testId\"\n          (change)=\"fieldOnChange($event)\"\n          (blur)=\"fieldOnBlur($event)\"\n        />\n        <mat-autocomplete #auto=\"matAutocomplete\">\n          <mat-option *ngFor=\"let opt of options$\" [value]=\"opt.value\">\n            <span>{{ opt.value }}</span>\n          </mat-option>\n        </mat-autocomplete>\n        <mat-error *ngIf=\"fieldControl.invalid\">\n          {{ getErrorMessage() }}\n        </mat-error>\n      </mat-form-field>\n    </div>\n  </ng-template>\n</div>\n", styles: [".psdk-user-reference{font-size:.8rem;color:var(--app-neutral-color)}.psdk-single{flex:1}.psdk-double{flex:2}.psdk-top-pad{padding-top:10px}.psdk-full-width{width:100%;padding-left:.625rem}dt{flex:1}dd{flex:2}\n"] }]
         }], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: Utils }]; }, propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
@@ -9099,7 +9297,7 @@ class CaseViewComponent {
         openProcessAction(data.ID, { ...data });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.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: "16.2.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>{{ 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:-moz-fit-content;width:fit-content;margin:.625rem}button{margin:0rem .3125rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatToolbarModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i4$4.MatToolbar; }), selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i0.forwardRef(function () { return i4$4.MatToolbarRow; }), selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatButtonModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i3$1.MatButton; }), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatMenuModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$1.MatMenu; }), selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(function () { return i6$1.MatMenuItem; }), selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$1.MatMenuTrigger; }), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.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>{{ 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:-moz-fit-content;width:fit-content;margin:.625rem}button{margin:0rem .3125rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatToolbarModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i4$4.MatToolbar; }), selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i0.forwardRef(function () { return i4$4.MatToolbarRow; }), selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatButtonModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i3$1.MatButton; }), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatMenuModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6.MatMenu; }), selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(function () { return i6.MatMenuItem; }), selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(function () { return i6.MatMenuTrigger; }), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaseViewComponent, decorators: [{
             type: Component,
@@ -12400,7 +12598,7 @@ class ListViewComponent {
         return select;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListViewComponent, deps: [{ token: ProgressSpinnerService }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.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:-moz-fit-content;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(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatSuffix; }), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return 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(function () { return MatTableModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$4.MatTable; }), selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatHeaderCellDef; }), selector: "[matHeaderCellDef]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatHeaderRowDef; }), selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatColumnDef; }), selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatCellDef; }), selector: "[matCellDef]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatRowDef; }), selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatHeaderCell; }), selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatCell; }), selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i0.forwardRef(function () { return i6$4.MatHeaderRow; }), selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i0.forwardRef(function () { return i6$4.MatRow; }), selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatSortModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i7$2.MatSort; }), selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i0.forwardRef(function () { return i7$2.MatSortHeader; }), selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return DragDropModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return 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(function () { return 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(function () { return MatButtonModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i3$1.MatButton; }), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(function () { return i3$1.MatIconButton; }), selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatMenuModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$1.MatMenu; }), selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(function () { return i6$1.MatMenuItem; }), selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$1.MatMenuTrigger; }), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatIconModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i2$2.MatIcon; }), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatRadioModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i7$1.MatRadioButton; }), selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatCheckboxModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5$2.MatCheckbox; }), selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatPaginatorModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i14.MatPaginator; }), selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatSelectModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$3.MatSelect; }), selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i0.forwardRef(function () { return i7.MatOption; }), selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatOptionModule; }) }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatDatepickerModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i4$2.MatDatepicker; }), selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i0.forwardRef(function () { return i4$2.MatDatepickerInput; }), selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i0.forwardRef(function () { return i4$2.MatDatepickerToggle; }), selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.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:-moz-fit-content;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(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatSuffix; }), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6$1.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(function () { return MatTableModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$3.MatTable; }), selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$3.MatHeaderCellDef; }), selector: "[matHeaderCellDef]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$3.MatHeaderRowDef; }), selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$3.MatColumnDef; }), selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$3.MatCellDef; }), selector: "[matCellDef]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$3.MatRowDef; }), selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$3.MatHeaderCell; }), selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$3.MatCell; }), selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i0.forwardRef(function () { return i6$3.MatHeaderRow; }), selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i0.forwardRef(function () { return i6$3.MatRow; }), selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatSortModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i7$2.MatSort; }), selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i0.forwardRef(function () { return i7$2.MatSortHeader; }), selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return DragDropModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return 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(function () { return 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(function () { return MatButtonModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i3$1.MatButton; }), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(function () { return i3$1.MatIconButton; }), selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatMenuModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6.MatMenu; }), selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(function () { return i6.MatMenuItem; }), selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(function () { return i6.MatMenuTrigger; }), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatIconModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i2$2.MatIcon; }), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatRadioModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i7$1.MatRadioButton; }), selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatCheckboxModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5$3.MatCheckbox; }), selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatPaginatorModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i14.MatPaginator; }), selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatSelectModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$2.MatSelect; }), selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i0.forwardRef(function () { return i7.MatOption; }), selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatOptionModule; }) }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatDatepickerModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i4$2.MatDatepicker; }), selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i0.forwardRef(function () { return i4$2.MatDatepickerInput; }), selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i0.forwardRef(function () { return i4$2.MatDatepickerToggle; }), selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListViewComponent, decorators: [{
             type: Component,
@@ -12478,6 +12676,477 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+function setVisibilityForList(c11nEnv, visibility) {
+    const { selectionMode, selectionList, renderMode, referenceList } = c11nEnv.getComponentConfig();
+    // usecase:multiselect, fieldgroup, editable table
+    if ((selectionMode === PCore.getConstants().LIST_SELECTION_MODE.MULTI && selectionList) || (renderMode === 'Editable' && referenceList)) {
+        c11nEnv.getListActions().setVisibility(visibility);
+    }
+}
+function preProcessColumns(columns) {
+    return columns?.map(col => {
+        const tempColObj = { ...col };
+        tempColObj.value = col.value && col.value.startsWith('.') ? col.value.substring(1) : col.value;
+        if (tempColObj.setProperty) {
+            tempColObj.setProperty = col.setProperty && col.setProperty.startsWith('.') ? col.setProperty.substring(1) : col.setProperty;
+        }
+        return tempColObj;
+    });
+}
+function getDisplayFieldsMetaData(columns) {
+    const displayColumns = columns?.filter(col => col.display === 'true');
+    const metaDataObj = {
+        key: '',
+        primary: '',
+        secondary: []
+    };
+    const keyCol = columns?.filter(col => col.key === 'true');
+    metaDataObj.key = keyCol?.length > 0 ? keyCol[0].value : 'auto';
+    const itemsRecordsColumn = columns?.filter(col => col.itemsRecordsColumn === 'true');
+    if (itemsRecordsColumn?.length > 0) {
+        metaDataObj.itemsRecordsColumn = itemsRecordsColumn[0].value;
+    }
+    const itemsGroupKeyColumn = columns?.filter(col => col.itemsGroupKeyColumn === 'true');
+    if (itemsGroupKeyColumn?.length > 0) {
+        metaDataObj.itemsGroupKeyColumn = itemsGroupKeyColumn[0].value;
+    }
+    for (let index = 0; index < displayColumns?.length; index += 1) {
+        if (displayColumns[index].secondary === 'true') {
+            metaDataObj.secondary.push(displayColumns[index].value);
+        }
+        else if (displayColumns[index].primary === 'true') {
+            metaDataObj.primary = displayColumns[index].value;
+        }
+    }
+    return metaDataObj;
+}
+function createSingleTreeObejct(entry, displayFieldMeta, showSecondaryData, selected) {
+    const secondaryArr = [];
+    displayFieldMeta.secondary.forEach(col => {
+        secondaryArr.push(entry[col]);
+    });
+    const isSelected = selected.some(item => item.id === entry[displayFieldMeta.key]);
+    return {
+        id: entry[displayFieldMeta.key],
+        primary: entry[displayFieldMeta.primary],
+        secondary: showSecondaryData ? secondaryArr : [],
+        selected: isSelected
+    };
+}
+function putItemsDataInItemsTree(listObjData, displayFieldMeta, itemsTree, showSecondaryInSearchOnly, selected) {
+    let newTreeItems = itemsTree.slice();
+    const showSecondaryData = !showSecondaryInSearchOnly;
+    for (const obj of listObjData) {
+        const items = obj[displayFieldMeta.itemsRecordsColumn].map(entry => createSingleTreeObejct(entry, displayFieldMeta, showSecondaryData, selected));
+        newTreeItems = newTreeItems.map(caseObject => {
+            if (caseObject.id === obj[displayFieldMeta.itemsGroupKeyColumn]) {
+                caseObject.items = [...items];
+            }
+            return caseObject;
+        });
+    }
+    return newTreeItems;
+}
+function prepareSearchResults(listObjData, displayFieldMeta) {
+    const searchResults = [];
+    for (const obj of listObjData) {
+        searchResults.push(...obj[displayFieldMeta.itemsRecordsColumn]);
+    }
+    return searchResults;
+}
+async function doSearch(searchText, clickedGroup, initialCaseClass, displayFieldMeta, dataApiObj, // deep clone of the dataApiObj
+itemsTree, isGroupData, showSecondaryInSearchOnly, selected) {
+    let searchTextForUngroupedData = '';
+    if (dataApiObj) {
+        // creating dataApiObject in grouped data cases
+        if (isGroupData) {
+            dataApiObj = cloneDeep(dataApiObj);
+            dataApiObj.fetchedNQData = false;
+            dataApiObj.cache = {};
+            // if we have no search text and no group selected, return the original tree
+            if (searchText === '' && clickedGroup === '') {
+                return itemsTree;
+            }
+            // setting the inital search text & search classes in ApiObject
+            dataApiObj.parameters[Object.keys(dataApiObj.parameters)[1]] = searchText;
+            dataApiObj.parameters[Object.keys(dataApiObj.parameters)[0]] = initialCaseClass;
+            // if we have a selected group
+            if (clickedGroup) {
+                // check if the data for this group is already present and no search text
+                if (searchText === '') {
+                    const containsData = itemsTree.find(item => item.id === clickedGroup);
+                    // do not make API call when items of respective group are already fetched
+                    if (containsData?.items?.length)
+                        return itemsTree;
+                }
+                dataApiObj.parameters[Object.keys(dataApiObj.parameters)[0]] = JSON.stringify([clickedGroup]);
+            }
+        }
+        else {
+            searchTextForUngroupedData = searchText;
+        }
+        // search API call
+        const response = await dataApiObj.fetchData(searchTextForUngroupedData).catch(() => {
+            return itemsTree;
+        });
+        let listObjData = response.data;
+        let newItemsTree = [];
+        if (isGroupData) {
+            if (searchText) {
+                listObjData = prepareSearchResults(listObjData, displayFieldMeta);
+            }
+            else {
+                newItemsTree = putItemsDataInItemsTree(listObjData, displayFieldMeta, itemsTree, showSecondaryInSearchOnly, selected);
+                return newItemsTree;
+            }
+        }
+        const showSecondaryData = showSecondaryInSearchOnly ? !!searchText : true;
+        if (listObjData !== undefined && listObjData.length > 0) {
+            newItemsTree = listObjData.map(entry => createSingleTreeObejct(entry, displayFieldMeta, showSecondaryData, selected));
+        }
+        return newItemsTree;
+    }
+    return itemsTree;
+}
+function setValuesToPropertyList(searchText, assocProp, items, columns, actions, updatePropertyInRedux = true) {
+    const setPropertyList = columns
+        ?.filter(col => col.setProperty)
+        .map(col => {
+        return {
+            source: col.value,
+            target: col.setProperty,
+            key: col.key,
+            primary: col.primary
+        };
+    });
+    const valueToSet = [];
+    if (setPropertyList.length > 0) {
+        setPropertyList.forEach(prop => {
+            items.forEach(item => {
+                if (prop.key === 'true' && item) {
+                    valueToSet.push(item.id);
+                }
+                else if (prop.primary === 'true' || !item) {
+                    valueToSet.push(searchText);
+                }
+            });
+            if (updatePropertyInRedux) {
+                // BUG-666851 setting options so that the store values are replaced and not merged
+                const options = {
+                    isArrayDeepMerge: false
+                };
+                if (prop.target === 'Associated property') {
+                    actions.updateFieldValue(assocProp, valueToSet, options);
+                }
+                else {
+                    actions.updateFieldValue(`.${prop.target}`, valueToSet, options);
+                }
+            }
+        });
+    }
+    return valueToSet;
+}
+function getGroupDataForItemsTree(groupDataSource, groupsDisplayFieldMeta, showSecondaryInSearchOnly) {
+    return groupDataSource?.map(group => {
+        const secondaryArr = [];
+        groupsDisplayFieldMeta.secondary.forEach(col => {
+            secondaryArr.push(group[col]);
+        });
+        return {
+            id: group[groupsDisplayFieldMeta.key],
+            primary: group[groupsDisplayFieldMeta.primary],
+            secondary: showSecondaryInSearchOnly ? [] : secondaryArr,
+            items: []
+        };
+    });
+}
+
+class MultiselectComponent {
+    constructor(angularPConnect, utils) {
+        this.angularPConnect = angularPConnect;
+        this.utils = utils;
+        // Used with AngularPConnect
+        this.angularPConnectData = {};
+        this.label$ = '';
+        this.value$ = '';
+        this.bRequired$ = false;
+        this.bDisabled$ = false;
+        this.bVisible$ = true;
+        this.bHasForm$ = true;
+        this.fieldControl = new FormControl('', null);
+        this.showSecondaryInSearchOnly = false;
+        this.isGroupData = false;
+        this.groupDataSource = [];
+        this.matchPosition = 'contains';
+        this.groupColumnsConfig = [{}];
+        this.selectedItems = [];
+        this.itemsTreeBaseData = [];
+        this.itemsTree = [];
+        this.optionClicked = (event, data, trigger) => {
+            event.stopPropagation();
+            this.toggleSelection(data, trigger);
+        };
+        this.toggleSelection = (data, trigger) => {
+            data.selected = !data.selected;
+            this.trigger = trigger;
+            this.itemsTree.map((ele) => {
+                if (ele.id === data.id) {
+                    ele.selected = data.selected;
+                }
+                return ele;
+            });
+            if (data.selected === true) {
+                this.selectedItems.push(data);
+            }
+            else {
+                const index = this.selectedItems.findIndex(value => value.id === data.id);
+                this.selectedItems.splice(index, 1);
+            }
+            this.value$ = '';
+            // if this is a referenceList case
+            if (this.referenceList)
+                this.setSelectedItemsForReferenceList(data);
+            this.getCaseListBasedOnParams(this.value$, '', [...this.selectedItems], [...this.itemsTree], true);
+        };
+        this.removeChip = (data) => {
+            if (data) {
+                data = this.itemsTree.filter((ele) => {
+                    return ele.id === data.id;
+                });
+                this.toggleSelection(data[0]);
+            }
+        };
+    }
+    ngOnInit() {
+        // First thing in initialization is registering and subscribing to the AngularPConnect service
+        this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+        this.controlName$ = this.angularPConnect.getComponentID(this);
+        // Then, continue on with other initialization
+        this.checkAndUpdate();
+        if (this.formGroup$) {
+            // add control to formGroup
+            this.formGroup$.addControl(this.controlName$, this.fieldControl);
+            this.fieldControl.setValue(this.value$);
+            this.bHasForm$ = true;
+        }
+        else {
+            this.bHasForm$ = false;
+        }
+    }
+    ngOnDestroy() {
+        if (this.formGroup$) {
+            this.formGroup$.removeControl(this.controlName$);
+        }
+        if (this.angularPConnectData.unsubscribeFn) {
+            this.angularPConnectData.unsubscribeFn();
+        }
+    }
+    // Callback passed when subscribing to store change
+    onStateChange() {
+        this.checkAndUpdate();
+    }
+    checkAndUpdate() {
+        // Should always check the bridge to see if the component should
+        // update itself (re-render)
+        const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
+        // ONLY call updateSelf when the component should update
+        if (bUpdateSelf) {
+            this.updateSelf();
+        }
+    }
+    // updateSelf
+    updateSelf() {
+        this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
+        let { datasource = [], columns = [{}] } = this.configProps$;
+        this.setPropertyValuesFromProps();
+        if (this.referenceList.length > 0) {
+            datasource = this.referenceList;
+            columns = [
+                {
+                    value: this.primaryField,
+                    display: 'true',
+                    useForSearch: true,
+                    primary: 'true'
+                },
+                {
+                    value: this.selectionKey,
+                    setProperty: this.selectionKey,
+                    key: 'true'
+                }
+            ];
+            let secondaryColumns = [];
+            if (this.secondaryFields) {
+                secondaryColumns = this.secondaryFields.map(secondaryField => ({
+                    value: secondaryField,
+                    display: 'true',
+                    secondary: 'true',
+                    useForSearch: 'true'
+                }));
+            }
+            else {
+                secondaryColumns = [
+                    {
+                        value: this.selectionKey,
+                        display: 'true',
+                        secondary: 'true',
+                        useForSearch: 'true'
+                    }
+                ];
+            }
+            if (this.referenceType === 'Case') {
+                columns = [...columns, ...secondaryColumns];
+            }
+        }
+        this.value$ = this.value$ ? this.value$ : '';
+        const contextName = this.pConn$.getContextName();
+        const dataConfig = {
+            dataSource: datasource,
+            groupDataSource: this.groupDataSource,
+            isGroupData: this.isGroupData,
+            showSecondaryInSearchOnly: this.showSecondaryInSearchOnly,
+            parameters: this.parameters,
+            matchPosition: this.matchPosition,
+            listType: this.listType,
+            maxResultsDisplay: this.maxResultsDisplay || '100',
+            columns: preProcessColumns(columns),
+            groupColumnsConfig: preProcessColumns(this.groupColumnsConfig)
+        };
+        const groupsDisplayFieldMeta = this.listType !== 'associated' ? getDisplayFieldsMetaData(dataConfig.groupColumnsConfig) : null;
+        this.itemsTreeBaseData = getGroupDataForItemsTree(this.groupDataSource, groupsDisplayFieldMeta, this.showSecondaryInSearchOnly) || [];
+        this.itemsTree = this.isGroupData ? getGroupDataForItemsTree(this.groupDataSource, groupsDisplayFieldMeta, this.showSecondaryInSearchOnly) : [];
+        this.displayFieldMeta = this.listType !== 'associated' ? getDisplayFieldsMetaData(dataConfig.columns) : null;
+        this.listActions = this.pConn$.getListActions();
+        this.pConn$.setReferenceList(this.selectionList);
+        if (this.configProps$.visibility != null) {
+            this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
+        }
+        // disabled
+        if (this.configProps$.disabled != undefined) {
+            this.bDisabled$ = this.utils.getBooleanValue(this.configProps$.disabled);
+        }
+        if (this.bDisabled$) {
+            this.fieldControl.disable();
+        }
+        else {
+            this.fieldControl.enable();
+        }
+        if (this.listType !== 'associated') {
+            PCore.getDataApi()
+                ?.init(dataConfig, contextName)
+                .then(async (dataObj) => {
+                this.dataApiObj = dataObj;
+                if (!this.isGroupData) {
+                    this.getCaseListBasedOnParams(this.value$ ?? '', '', [...this.selectedItems], [...this.itemsTree]);
+                }
+            });
+        }
+    }
+    setPropertyValuesFromProps() {
+        this.label$ = this.configProps$.label;
+        this.placeholder = this.configProps$.placeholder || '';
+        this.listType = this.configProps$.listType ? this.configProps$.listType : '';
+        this.hideLabel = this.configProps$.hideLabel;
+        this.parameters = this.configProps$?.parameters ? this.configProps$?.parameters : {};
+        this.referenceList = this.configProps$?.referenceList;
+        this.selectionKey = this.configProps$?.selectionKey;
+        this.primaryField = this.configProps$?.primaryField;
+        this.initialCaseClass = this.configProps$?.initialCaseClass;
+        this.showSecondaryInSearchOnly = this.configProps$?.showSecondaryInSearchOnly ? this.configProps$?.showSecondaryInSearchOnly : false;
+        this.isGroupData = this.configProps$?.isGroupData ? this.configProps$.isGroupData : false;
+        this.referenceType = this.configProps$?.referenceType;
+        this.secondaryFields = this.configProps$?.secondaryFields;
+        this.groupDataSource = this.configProps$?.groupDataSource ? this.configProps$?.groupDataSource : [];
+        this.matchPosition = this.configProps$?.matchPosition ? this.configProps$?.matchPosition : 'contains';
+        this.maxResultsDisplay = this.configProps$?.maxResultsDisplay;
+        this.groupColumnsConfig = this.configProps$?.groupColumnsConfig ? this.configProps$?.groupColumnsConfig : [{}];
+        this.selectionList = this.configProps$?.selectionList;
+        this.value$ = this.configProps$?.value;
+    }
+    // main search function trigger
+    getCaseListBasedOnParams(searchText, group, selectedRows, currentItemsTree, isTriggeredFromSearch = false) {
+        if (this.referenceList && this.referenceList.length > 0) {
+            this.listActions.getSelectedRows(true).then(result => {
+                selectedRows =
+                    result.length > 0
+                        ? result.map(item => {
+                            return {
+                                id: item[this.selectionKey.startsWith('.') ? this.selectionKey.substring(1) : this.selectionKey],
+                                primary: item[this.primaryField.startsWith('.') ? this.primaryField.substring(1) : this.primaryField]
+                            };
+                        })
+                        : [];
+                this.selectedItems = selectedRows;
+                const initalItemsTree = isTriggeredFromSearch || !currentItemsTree ? [...this.itemsTreeBaseData] : [...currentItemsTree];
+                doSearch(searchText, group, this.initialCaseClass, this.displayFieldMeta, this.dataApiObj, initalItemsTree, this.isGroupData, this.showSecondaryInSearchOnly, selectedRows || []).then(res => {
+                    this.itemsTree = res || [];
+                    if (this.trigger) {
+                        this.trigger.openPanel();
+                    }
+                });
+            });
+        }
+    }
+    fieldOnChange(event) {
+        this.value$ = event.target.value;
+        this.getCaseListBasedOnParams(this.value$, '', [...this.selectedItems], [...this.itemsTree], true);
+    }
+    optionChanged(event) {
+        this.angularPConnectData.actions?.onChange(this, event);
+    }
+    setSelectedItemsForReferenceList(data) {
+        // Clear error messages if any
+        const propName = this.pConn$.getStateProps().selectionList;
+        this.pConn$.clearErrorMessages({
+            property: propName,
+            category: '',
+            context: ''
+        });
+        const { selected } = data;
+        if (selected) {
+            insertInstruction(this.pConn$, this.selectionList, this.selectionKey, this.primaryField, data);
+        }
+        else {
+            deleteInstruction(this.pConn$, this.selectionList, this.selectionKey, data);
+        }
+    }
+    getErrorMessage() {
+        let errMessage = '';
+        // look for validation messages for json, pre-defined or just an error pushed from workitem (400)
+        if (this.fieldControl.hasError('message')) {
+            errMessage = this.angularPConnectData.validateMessage ?? '';
+            return errMessage;
+        }
+        if (this.fieldControl.hasError('required')) {
+            errMessage = 'You must enter a value';
+        }
+        else if (this.fieldControl.errors) {
+            errMessage = this.fieldControl.errors.toString();
+        }
+        return errMessage;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiselectComponent, deps: [{ token: AngularPConnectService }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiselectComponent, isStandalone: true, selector: "app-multiselect", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div [formGroup]=\"formGroup$\">\n  <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\">\n    <mat-label>{{ label$ }}</mat-label>\n    <mat-chip-grid #chipGrid>\n      <ng-container *ngFor=\"let select of selectedItems\">\n        <mat-chip-row (removed)=\"removeChip(select)\">\n          {{ select.primary }}\n          <button matChipRemove>\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </mat-chip-row>\n      </ng-container>\n    </mat-chip-grid>\n    <input\n      matInput\n      [placeholder]=\"placeholder\"\n      [formControl]=\"fieldControl\"\n      [value]=\"value$\"\n      [required]=\"bRequired$\"\n      [matAutocomplete]=\"auto\"\n      (input)=\"fieldOnChange($event)\"\n      [matChipInputFor]=\"chipGrid\"\n      #trigger=\"matAutocompleteTrigger\"\n    />\n    <mat-autocomplete #auto=\"matAutocomplete\">\n      <mat-option *ngFor=\"let item of itemsTree\" [value]=\"item.primary\" (click)=\"optionClicked($event, item, trigger)\">\n        <mat-checkbox [checked]=\"item.selected\" (click)=\"optionClicked($event, item, trigger)\">\n          <span>{{ item.primary }}</span>\n        </mat-checkbox>\n      </mat-option>\n    </mat-autocomplete>\n    <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n  </mat-form-field>\n</div>\n", styles: [".psdk-full-width{width:100%}::ng-deep .mat-mdc-form-field-infix{padding-left:10px}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatError; }), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6$1.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(function () { return MatAutocompleteModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i8.MatAutocomplete; }), selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i0.forwardRef(function () { return i7.MatOption; }), selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i0.forwardRef(function () { return i8.MatAutocompleteTrigger; }), selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatOptionModule; }) }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatCheckboxModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5$3.MatCheckbox; }), selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatIconModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i2$2.MatIcon; }), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatChipsModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i11.MatChipGrid; }), selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i0.forwardRef(function () { return i11.MatChipInput; }), selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i0.forwardRef(function () { return i11.MatChipRemove; }), selector: "[matChipRemove]" }, { kind: "component", type: i0.forwardRef(function () { return i11.MatChipRow; }), selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiselectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-multiselect', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatAutocompleteModule,
+                        MatOptionModule,
+                        MatCheckboxModule,
+                        MatIconModule,
+                        MatChipsModule,
+                        forwardRef(() => ComponentMapperComponent)
+                    ], template: "<div [formGroup]=\"formGroup$\">\n  <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\">\n    <mat-label>{{ label$ }}</mat-label>\n    <mat-chip-grid #chipGrid>\n      <ng-container *ngFor=\"let select of selectedItems\">\n        <mat-chip-row (removed)=\"removeChip(select)\">\n          {{ select.primary }}\n          <button matChipRemove>\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </mat-chip-row>\n      </ng-container>\n    </mat-chip-grid>\n    <input\n      matInput\n      [placeholder]=\"placeholder\"\n      [formControl]=\"fieldControl\"\n      [value]=\"value$\"\n      [required]=\"bRequired$\"\n      [matAutocomplete]=\"auto\"\n      (input)=\"fieldOnChange($event)\"\n      [matChipInputFor]=\"chipGrid\"\n      #trigger=\"matAutocompleteTrigger\"\n    />\n    <mat-autocomplete #auto=\"matAutocomplete\">\n      <mat-option *ngFor=\"let item of itemsTree\" [value]=\"item.primary\" (click)=\"optionClicked($event, item, trigger)\">\n        <mat-checkbox [checked]=\"item.selected\" (click)=\"optionClicked($event, item, trigger)\">\n          <span>{{ item.primary }}</span>\n        </mat-checkbox>\n      </mat-option>\n    </mat-autocomplete>\n    <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n  </mat-form-field>\n</div>\n", styles: [".psdk-full-width{width:100%}::ng-deep .mat-mdc-form-field-infix{padding-left:10px}\n"] }]
+        }], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: Utils }]; }, propDecorators: { pConn$: [{
+                type: Input
+            }], formGroup$: [{
+                type: Input
+            }] } });
+
 class NarrowWideFormComponent {
     ngOnInit() {
         this.updateSelf();
@@ -13833,9 +14502,7 @@ class SimpleTableManualComponent {
             this.rawFields?.forEach(item => {
                 const referenceListData = getReferenceList(this.pConn$);
                 const isDatapage = referenceListData.startsWith('D_');
-                const pageReferenceValue = isDatapage
-                    ? `${referenceListData}[${index}]`
-                    : `${this.pConn$.getPageReference()}${referenceListData.substring(referenceListData.lastIndexOf('.'))}[${index}]`;
+                const pageReferenceValue = isDatapage ? `${referenceListData}[${index}]` : `${this.pConn$.getPageReference()}${referenceListData}[${index}]`;
                 const config = {
                     meta: item,
                     options: {
@@ -13853,7 +14520,7 @@ class SimpleTableManualComponent {
         this.elementsData = eleData;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SimpleTableManualComponent, deps: [{ token: AngularPConnectService }, { token: Utils }, { token: DatapageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SimpleTableManualComponent, isStandalone: true, selector: "app-simple-table-manual", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"bVisible$\">\n  <div class=\"simple-table-wrapper\">\n    <h3 *ngIf=\"label\" className=\"label\" style=\"font-weight: bold\">\n      {{ label }} <span class=\"results-count\">{{ getResultsText() }}</span>\n    </h3>\n    <table *ngIf=\"readOnlyMode || allowEditingInModal\" mat-table [dataSource]=\"rowData\" class=\"mat-elevation-z8\" id=\"readonly-table\" matSort>\n      <ng-container *ngFor=\"let dCol of processedFields\" [matColumnDef]=\"dCol.config.name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n          <div>{{ dCol.config.label }}</div>\n          <div class=\"psdk-mat-header-filter\">\n            <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n          </div>\n          <div (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 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\">{{ element[dCol.config.name] || '---' }}</td>\n      </ng-container>\n      <ng-container matColumnDef=\"DeleteIcon\">\n        <div *ngIf=\"allowEditingInModal\">\n          <th mat-header-cell *matHeaderCellDef></th>\n          <td mat-cell *matCellDef=\"let element; index as j\">\n            <div class=\"header-icon\">\n              <button mat-icon-button [matMenuTriggerFor]=\"utilityMenu\">\n                <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n              </button>\n              <mat-menu #utilityMenu=\"matMenu\" overlapTrigger=\"false\">\n                <button mat-menu-item (click)=\"editRecord(element, j)\">Edit</button>\n                <button mat-menu-item (click)=\"deleteRecord(j)\">Delete</button>\n              </mat-menu>\n            </div>\n          </td>\n        </div>\n      </ng-container>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n    <table *ngIf=\"editableMode && !allowEditingInModal\" mat-table [dataSource]=\"elementsData\" class=\"mat-elevation-z8\" id=\"editable-table\">\n      <ng-container *ngFor=\"let dCol of fieldDefs; let i = index\">\n        <ng-container *ngIf=\"dCol.name != 'DeleteIcon'\" [matColumnDef]=\"dCol.name\">\n          <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\">{{ dCol.label }}</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <component-mapper\n              [name]=\"element[i].getPConnect().getComponentName()\"\n              [props]=\"{\n                pConn$: element[i].getPConnect(),\n                formGroup$: formGroup$\n              }\"\n              errorMsg=\"Table wants component not yet available: {{ element[i].getPConnect().getComponentName() }}\"\n            ></component-mapper>\n          </td>\n        </ng-container>\n      </ng-container>\n      <ng-container matColumnDef=\"DeleteIcon\">\n        <th mat-header-cell *matHeaderCellDef></th>\n        <td mat-cell *matCellDef=\"let element; index as j\">\n          <button id=\"delete-button\" mat-icon-button (click)=\"deleteRecord(j)\">\n            <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ menuIconOverride$ }}\" />\n          </button>\n        </td>\n      </ng-container>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n    <div class=\"psdk-no-records\" id=\"no-records\" *ngIf=\"editableMode && referenceList?.length === 0\">No Records Found.</div>\n    <div class=\"psdk-no-records\" id=\"no-records\" *ngIf=\"readOnlyMode && rowData?.data?.length === 0\">No Records Found.</div>\n  </div>\n  <button *ngIf=\"showAddRowButton\" mat-button color=\"primary\" style=\"font-size: 16px\" (click)=\"addRecord()\">+ Add</button>\n</ng-container>\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", styles: [".simple-table-wrapper{width:100%;margin-top:.5rem;margin-bottom:.5rem}table{width:100%}::ng-deep .mat-sort-header-content{white-space:normal}::ng-deep td.mat-mdc-cell{white-space:normal}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{border-right:1px solid var(--app-neutral-light-color);padding:8px!important}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:-moz-fit-content;width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:normal;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}.psdk-icon-search{vertical-align:sub;padding:0rem .125rem;min-width:unset;width:1.1rem}.psdk-outer-div-in-form{display:inline-grid}.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)}tr.mat-mdc-row{cursor:pointer}tr.mat-mdc-header-row{background:var(--app-table-header-background-color)}.psdk-data-readonly{margin-top:.625rem;width:100%}.psdk-no-records{height:56px;justify-content:center;display:flex;align-items:center;border:1px solid var(--app-neutral-light-color);border-top:none;background:var(--app-form-color)}.psdk-utility-card-action-svg-icon{width:1.4rem}.label{margin:8px}.results-count{opacity:.7;font-size:.8rem;font-weight:700;margin-inline-start:.625rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatTableModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$4.MatTable; }), selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatHeaderCellDef; }), selector: "[matHeaderCellDef]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatHeaderRowDef; }), selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatColumnDef; }), selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatCellDef; }), selector: "[matCellDef]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatRowDef; }), selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatHeaderCell; }), selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$4.MatCell; }), selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i0.forwardRef(function () { return i6$4.MatHeaderRow; }), selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i0.forwardRef(function () { return i6$4.MatRow; }), selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatButtonModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i3$1.MatButton; }), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(function () { return i3$1.MatIconButton; }), selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatSortModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i7$2.MatSort; }), selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i0.forwardRef(function () { return i7$2.MatSortHeader; }), selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatMenuModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$1.MatMenu; }), selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(function () { return i6$1.MatMenuItem; }), selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$1.MatMenuTrigger; }), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatSuffix; }), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatDatepickerModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i4$2.MatDatepicker; }), selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i0.forwardRef(function () { return i4$2.MatDatepickerInput; }), selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i0.forwardRef(function () { return i4$2.MatDatepickerToggle; }), selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatOptionModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i7.MatOption; }), selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatSelectModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$3.MatSelect; }), selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return 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: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SimpleTableManualComponent, isStandalone: true, selector: "app-simple-table-manual", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"bVisible$\">\n  <div class=\"simple-table-wrapper\">\n    <h3 *ngIf=\"label\" className=\"label\" style=\"font-weight: bold\">\n      {{ label }} <span class=\"results-count\">{{ getResultsText() }}</span>\n    </h3>\n    <table *ngIf=\"readOnlyMode || allowEditingInModal\" mat-table [dataSource]=\"rowData\" class=\"mat-elevation-z8\" id=\"readonly-table\" matSort>\n      <ng-container *ngFor=\"let dCol of processedFields\" [matColumnDef]=\"dCol.config.name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n          <div>{{ dCol.config.label }}</div>\n          <div class=\"psdk-mat-header-filter\">\n            <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n          </div>\n          <div (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 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\">{{ element[dCol.config.name] || '---' }}</td>\n      </ng-container>\n      <ng-container matColumnDef=\"DeleteIcon\">\n        <div *ngIf=\"allowEditingInModal\">\n          <th mat-header-cell *matHeaderCellDef></th>\n          <td mat-cell *matCellDef=\"let element; index as j\">\n            <div class=\"header-icon\">\n              <button mat-icon-button [matMenuTriggerFor]=\"utilityMenu\">\n                <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n              </button>\n              <mat-menu #utilityMenu=\"matMenu\" overlapTrigger=\"false\">\n                <button mat-menu-item (click)=\"editRecord(element, j)\">Edit</button>\n                <button mat-menu-item (click)=\"deleteRecord(j)\">Delete</button>\n              </mat-menu>\n            </div>\n          </td>\n        </div>\n      </ng-container>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n    <table *ngIf=\"editableMode && !allowEditingInModal\" mat-table [dataSource]=\"elementsData\" class=\"mat-elevation-z8\" id=\"editable-table\">\n      <ng-container *ngFor=\"let dCol of fieldDefs; let i = index\">\n        <ng-container *ngIf=\"dCol.name != 'DeleteIcon'\" [matColumnDef]=\"dCol.name\">\n          <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\">{{ dCol.label }}</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <component-mapper\n              [name]=\"element[i].getPConnect().getComponentName()\"\n              [props]=\"{\n                pConn$: element[i].getPConnect(),\n                formGroup$: formGroup$\n              }\"\n              errorMsg=\"Table wants component not yet available: {{ element[i].getPConnect().getComponentName() }}\"\n            ></component-mapper>\n          </td>\n        </ng-container>\n      </ng-container>\n      <ng-container matColumnDef=\"DeleteIcon\">\n        <th mat-header-cell *matHeaderCellDef></th>\n        <td mat-cell *matCellDef=\"let element; index as j\">\n          <button id=\"delete-button\" mat-icon-button (click)=\"deleteRecord(j)\">\n            <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ menuIconOverride$ }}\" />\n          </button>\n        </td>\n      </ng-container>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n    <div class=\"psdk-no-records\" id=\"no-records\" *ngIf=\"editableMode && referenceList?.length === 0\">No Records Found.</div>\n    <div class=\"psdk-no-records\" id=\"no-records\" *ngIf=\"readOnlyMode && rowData?.data?.length === 0\">No Records Found.</div>\n  </div>\n  <button *ngIf=\"showAddRowButton\" mat-button color=\"primary\" style=\"font-size: 16px\" (click)=\"addRecord()\">+ Add</button>\n</ng-container>\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", styles: [".simple-table-wrapper{width:100%;margin-top:.5rem;margin-bottom:.5rem}table{width:100%}::ng-deep .mat-sort-header-content{white-space:normal}::ng-deep td.mat-mdc-cell{white-space:normal}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{border-right:1px solid var(--app-neutral-light-color);padding:8px!important}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:-moz-fit-content;width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:normal;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}.psdk-icon-search{vertical-align:sub;padding:0rem .125rem;min-width:unset;width:1.1rem}.psdk-outer-div-in-form{display:inline-grid}.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)}tr.mat-mdc-row{cursor:pointer}tr.mat-mdc-header-row{background:var(--app-table-header-background-color)}.psdk-data-readonly{margin-top:.625rem;width:100%}.psdk-no-records{height:56px;justify-content:center;display:flex;align-items:center;border:1px solid var(--app-neutral-light-color);border-top:none;background:var(--app-form-color)}.psdk-utility-card-action-svg-icon{width:1.4rem}.label{margin:8px}.results-count{opacity:.7;font-size:.8rem;font-weight:700;margin-inline-start:.625rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatTableModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$3.MatTable; }), selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$3.MatHeaderCellDef; }), selector: "[matHeaderCellDef]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$3.MatHeaderRowDef; }), selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$3.MatColumnDef; }), selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$3.MatCellDef; }), selector: "[matCellDef]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$3.MatRowDef; }), selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$3.MatHeaderCell; }), selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i0.forwardRef(function () { return i6$3.MatCell; }), selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i0.forwardRef(function () { return i6$3.MatHeaderRow; }), selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i0.forwardRef(function () { return i6$3.MatRow; }), selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatButtonModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i3$1.MatButton; }), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(function () { return i3$1.MatIconButton; }), selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatSortModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i7$2.MatSort; }), selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i0.forwardRef(function () { return i7$2.MatSortHeader; }), selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatMenuModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6.MatMenu; }), selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(function () { return i6.MatMenuItem; }), selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(function () { return i6.MatMenuTrigger; }), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatSuffix; }), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatDatepickerModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i4$2.MatDatepicker; }), selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i0.forwardRef(function () { return i4$2.MatDatepickerInput; }), selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i0.forwardRef(function () { return i4$2.MatDatepickerToggle; }), selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatOptionModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i7.MatOption; }), selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatSelectModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$2.MatSelect; }), selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6$1.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: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SimpleTableManualComponent, decorators: [{
             type: Component,
@@ -14315,7 +14982,7 @@ class WssNavBarComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WssNavBarComponent, deps: [{ token: AngularPConnectService }, { token: i0.ChangeDetectorRef }, { token: ProgressSpinnerService }, { token: i0.NgZone }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: WssNavBarComponent, isStandalone: true, selector: "app-wss-nav-bar", inputs: { pConn$: "pConn$", appName$: "appName$", pages$: "pages$", caseTypes$: "caseTypes$", homePage: "homePage" }, providers: [Utils], ngImport: i0, template: "<mat-toolbar style=\"margin-bottom: 5px; background-color: #262626\">\n  <mat-toolbar-row mat-icon-button>\n    <div class=\"psdk-nav-header\" (click)=\"navPanelButtonClick(homePage)\">\n      <div>\n        <img src=\"{{ portalLogoImage$ }}\" class=\"psdk-nav-logo\" />\n      </div>\n      <div class=\"psdk-nav-portal-info\">\n        <div class=\"psdk-nav-portal-app\">{{ portalApp$ }}</div>\n      </div>\n    </div>\n\n    <div *ngFor=\"let page of navPages$\">\n      <div class=\"flex-box mat-list-item\" style=\"cursor: pointer\" (click)=\"navPanelButtonClick(page)\">\n        <div mat-button class=\"psdk-nav-button-span\">{{ page.pyLabel }}</div>\n      </div>\n    </div>\n\n    <span class=\"spacer\"></span>\n\n    <mat-list>\n      <mat-list-item [matMenuTriggerFor]=\"menu\" class=\"psdk-profile-list-item\">\n        <div class=\"flex-box\">\n          <div class=\"psdk-nav-oper-avatar\">{{ portalOperatorInitials$ }}</div>\n        </div>\n      </mat-list-item>\n      <mat-menu #menu=\"matMenu\">\n        <button mat-menu-item>Profile</button>\n        <button mat-menu-item (click)=\"navPanelLogoutClick()\">Logoff</button>\n      </mat-menu>\n    </mat-list>\n  </mat-toolbar-row>\n</mat-toolbar>\n", styles: [".psdk-nav-divider{border-bottom:.0625rem solid var(--app-divider-color);width:100%;align-items:center}.psdk-nav-header{display:flex;padding-top:.625rem;cursor:pointer;padding-right:1rem;align-items:center}.psdk-nav-header:hover{background-color:var(--app-neutral-color)}.psdk-nav-logo{width:3.75rem;padding:.625rem;margin-right:1.25rem}.psdk-nav-svg-icon{filter:var(--app-white-color-filter);width:1.6rem;padding-right:.625rem}.psdk-nav-portal-name{font-size:.875rem}.psdk-nav-portal-app{font-size:1.5rem;color:var(--app-nav-color)}.psdk-appshell-nav{z-index:3;position:fixed;display:flex;flex-direction:column;justify-content:flex-start;background:var(--app-nav-bg);width:var(--app-nav-width);height:100%;color:var(--app-nav-color);overflow-y:auto;overflow-x:hidden;white-space:nowrap;will-change:width}.psdk-appshell-nav:hover{width:var(--app-nav-width-expanded)}.psdk-appshell-topnav{display:flex;flex-direction:column;justify-content:flex-start;background:var(--app-nav-bg);width:var(--app-nav-width);height:15%;color:var(--app-nav-color);overflow:hidden;white-space:nowrap;will-change:width}.psdk-appshell-middlenav{display:flex;flex-direction:column;justify-content:space-between;background:var(--app-nav-bg);width:var(--app-nav-width);height:50%;color:var(--app-nav-color);overflow:hidden;white-space:nowrap;will-change:width}.psdk-nav-ul-middle{display:block;list-style-type:none;margin:0rem;padding-inline-start:30px}.psdk-nav-li-middle{box-sizing:border-box;text-align:left}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-nav-button-span{padding:0 1rem;color:var(--app-nav-color)}.psdk-nav-button-span:hover{background-color:var(--app-neutral-color)}.psdk-nav-oper-avatar{margin:0rem;padding:0rem;min-width:2.5rem;min-height:2.5rem;max-width:2.5rem;max-height:2.5rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:inline-flex;background:var(--app-neutral-color);color:var(--app-form-color);font-weight:400;font-size:1rem}mat-list{padding:0}.psdk-profile-list-item{padding-left:24px}mat-list-item{padding:20px 0 20px 30px;cursor:pointer!important;height:auto!important}mat-list-item .flex-box{display:flex;align-items:center;width:100%;text-align:left}.spacer{flex:1 1 auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i5$1.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i5$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i4$4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i4$4.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: WssNavBarComponent, isStandalone: true, selector: "app-wss-nav-bar", inputs: { pConn$: "pConn$", appName$: "appName$", pages$: "pages$", caseTypes$: "caseTypes$", homePage: "homePage" }, providers: [Utils], ngImport: i0, template: "<mat-toolbar style=\"margin-bottom: 5px; background-color: #262626\">\n  <mat-toolbar-row mat-icon-button>\n    <div class=\"psdk-nav-header\" (click)=\"navPanelButtonClick(homePage)\">\n      <div>\n        <img src=\"{{ portalLogoImage$ }}\" class=\"psdk-nav-logo\" />\n      </div>\n      <div class=\"psdk-nav-portal-info\">\n        <div class=\"psdk-nav-portal-app\">{{ portalApp$ }}</div>\n      </div>\n    </div>\n\n    <div *ngFor=\"let page of navPages$\">\n      <div class=\"flex-box mat-list-item\" style=\"cursor: pointer\" (click)=\"navPanelButtonClick(page)\">\n        <div mat-button class=\"psdk-nav-button-span\">{{ page.pyLabel }}</div>\n      </div>\n    </div>\n\n    <span class=\"spacer\"></span>\n\n    <mat-list>\n      <mat-list-item [matMenuTriggerFor]=\"menu\" class=\"psdk-profile-list-item\">\n        <div class=\"flex-box\">\n          <div class=\"psdk-nav-oper-avatar\">{{ portalOperatorInitials$ }}</div>\n        </div>\n      </mat-list-item>\n      <mat-menu #menu=\"matMenu\">\n        <button mat-menu-item>Profile</button>\n        <button mat-menu-item (click)=\"navPanelLogoutClick()\">Logoff</button>\n      </mat-menu>\n    </mat-list>\n  </mat-toolbar-row>\n</mat-toolbar>\n", styles: [".psdk-nav-divider{border-bottom:.0625rem solid var(--app-divider-color);width:100%;align-items:center}.psdk-nav-header{display:flex;padding-top:.625rem;cursor:pointer;padding-right:1rem;align-items:center}.psdk-nav-header:hover{background-color:var(--app-neutral-color)}.psdk-nav-logo{width:3.75rem;padding:.625rem;margin-right:1.25rem}.psdk-nav-svg-icon{filter:var(--app-white-color-filter);width:1.6rem;padding-right:.625rem}.psdk-nav-portal-name{font-size:.875rem}.psdk-nav-portal-app{font-size:1.5rem;color:var(--app-nav-color)}.psdk-appshell-nav{z-index:3;position:fixed;display:flex;flex-direction:column;justify-content:flex-start;background:var(--app-nav-bg);width:var(--app-nav-width);height:100%;color:var(--app-nav-color);overflow-y:auto;overflow-x:hidden;white-space:nowrap;will-change:width}.psdk-appshell-nav:hover{width:var(--app-nav-width-expanded)}.psdk-appshell-topnav{display:flex;flex-direction:column;justify-content:flex-start;background:var(--app-nav-bg);width:var(--app-nav-width);height:15%;color:var(--app-nav-color);overflow:hidden;white-space:nowrap;will-change:width}.psdk-appshell-middlenav{display:flex;flex-direction:column;justify-content:space-between;background:var(--app-nav-bg);width:var(--app-nav-width);height:50%;color:var(--app-nav-color);overflow:hidden;white-space:nowrap;will-change:width}.psdk-nav-ul-middle{display:block;list-style-type:none;margin:0rem;padding-inline-start:30px}.psdk-nav-li-middle{box-sizing:border-box;text-align:left}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-nav-button-span{padding:0 1rem;color:var(--app-nav-color)}.psdk-nav-button-span:hover{background-color:var(--app-neutral-color)}.psdk-nav-oper-avatar{margin:0rem;padding:0rem;min-width:2.5rem;min-height:2.5rem;max-width:2.5rem;max-height:2.5rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:inline-flex;background:var(--app-neutral-color);color:var(--app-form-color);font-weight:400;font-size:1rem}mat-list{padding:0}.psdk-profile-list-item{padding-left:24px}mat-list-item{padding:20px 0 20px 30px;cursor:pointer!important;height:auto!important}mat-list-item .flex-box{display:flex;align-items:center;width:100%;text-align:left}.spacer{flex:1 1 auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i5$2.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i5$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i4$4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i4$4.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WssNavBarComponent, decorators: [{
             type: Component,
@@ -14991,7 +15658,7 @@ class CaseHistoryComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaseHistoryComponent, deps: [{ token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CaseHistoryComponent, isStandalone: true, selector: "app-case-history", inputs: { pConn$: "pConn$" }, ngImport: i0, template: "<div>\n  <h2 class=\"psdk-case-history-title\">{{ configProps$.label }}</h2>\n  <table mat-table [dataSource]=\"repeatList$\">\n    <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.fieldName\">\n      <th mat-header-cell *matHeaderCellDef>{{ dCol.label }}</th>\n      <td mat-cell *matCellDef=\"let element\">{{ element[dCol.fieldName] }}</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>\n", styles: ["table{width:100%}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-search{padding-left:.625rem}.psdk-icon-search{vertical-align:sub;padding:0rem .125rem;min-width:unset;width:1.1rem}.psdk-case-history-title{margin-left:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i6$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CaseHistoryComponent, isStandalone: true, selector: "app-case-history", inputs: { pConn$: "pConn$" }, ngImport: i0, template: "<div>\n  <h2 class=\"psdk-case-history-title\">{{ configProps$.label }}</h2>\n  <table mat-table [dataSource]=\"repeatList$\">\n    <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.fieldName\">\n      <th mat-header-cell *matHeaderCellDef>{{ dCol.label }}</th>\n      <td mat-cell *matCellDef=\"let element\">{{ element[dCol.fieldName] }}</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>\n", styles: ["table{width:100%}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-search{padding-left:.625rem}.psdk-icon-search{vertical-align:sub;padding:0rem .125rem;min-width:unset;width:1.1rem}.psdk-case-history-title{margin-left:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i6$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaseHistoryComponent, decorators: [{
             type: Component,
@@ -15619,7 +16286,7 @@ class FileUtilityComponent {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileUtilityComponent, deps: [{ token: AngularPConnectService }, { token: Utils }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FileUtilityComponent, isStandalone: true, selector: "app-file-utility", inputs: { pConn$: "pConn$" }, ngImport: i0, template: "<div>\n  <component-mapper\n    name=\"ListUtility\"\n    [props]=\"{\n      name$: lu_name$,\n      icon$: lu_icon$,\n      bLoading$: lu_bLoading$,\n      count$: lu_count$,\n      arActions$: lu_arActions$,\n      arItems$: lu_arItems$,\n      onViewAll$: lu_onViewAllFunction,\n      menuIconOverrideAction$: removeFileFromList$\n    }\"\n  ></component-mapper>\n</div>\n\n<div *ngIf=\"bShowFileModal$\" class=\"psdk-dialog-background\">\n  <div class=\"psdk-modal-file-top\">\n    <h3>{{ pConn$.getLocalizedValue('Add local files', '', '') }}</h3>\n    <div class=\"psdk-modal-body\">\n      <div class=\"psdk-modal-file-selector\">\n        <input hidden type=\"file\" multiple #uploader (change)=\"uploadMyFiles($event)\" />\n\n        <button mat-stroked-button color=\"primary\" (click)=\"uploader.click()\">{{ pConn$.getLocalizedValue('Upload file(s)', '', '') }}</button>\n      </div>\n\n      <component-mapper\n        name=\"SummaryList\"\n        [props]=\"{ arItems$: arFileList$, menuIconOverride$: 'trash', menuIconOverrideAction$: removeFileFromList$ }\"\n      ></component-mapper>\n    </div>\n\n    <component-mapper\n      name=\"ActionButtons\"\n      [props]=\"{ arMainButtons$: arFileMainButtons$, arSecondaryButtons$: arFileSecondaryButtons$ }\"\n      [parent]=\"this\"\n      [outputEvents]=\"{ actionButtonClick: onFileActionButtonClick }\"\n    ></component-mapper>\n  </div>\n</div>\n\n<div *ngIf=\"bShowLinkModal$\" class=\"psdk-dialog-background\">\n  <div class=\"psdk-modal-link-top\">\n    <h3>{{ pConn$.getLocalizedValue('Add local link', '', '') }}</h3>\n    <div class=\"psdk-modal-link-entry\">\n      <div class=\"psdk-modal-body\">\n        <div class=\"psdk-modal-links-row\">\n          <div class=\"psdk-links-two-column\">\n            <div class=\"psdk-modal-link-data\">\n              <mat-form-field class=\"psdk-full-width\">\n                <mat-label>Link title</mat-label>\n                <input matInput type=\"text\" required=\"true\" (change)=\"_fieldOnChangeLink($event)\" [value]=\"link_title$\" />\n              </mat-form-field>\n            </div>\n            <div class=\"psdk-modal-link-data\">\n              <mat-form-field class=\"psdk-full-width\">\n                <mat-label>URL</mat-label>\n                <input matInput type=\"text\" required=\"true\" (change)=\"_fieldOnChangeURL($event)\" [value]=\"link_url$\" />\n              </mat-form-field>\n            </div>\n          </div>\n\n          <div class=\"psdk-modal-link-add\">\n            <button mat-raised-button color=\"primary\" (click)=\"_addLink()\">{{ pConn$.getLocalizedValue('Add Link', '', '') }}</button>\n          </div>\n        </div>\n\n        <component-mapper\n          name=\"SummaryList\"\n          [props]=\"{ arItems$: arLinksList$, menuIconOverride$: 'trash', menuIconOverrideAction$: removeLinksFromList$ }\"\n        ></component-mapper>\n      </div>\n    </div>\n\n    <component-mapper\n      name=\"ActionButtons\"\n      [props]=\"{ arMainButtons$: arLinkMainButtons$, arSecondaryButtons$: arLinkSecondaryButtons$ }\"\n      [parent]=\"this\"\n      [outputEvents]=\"{ actionButtonClick: onLinkActionButtonClick }\"\n    ></component-mapper>\n  </div>\n</div>\n\n<div *ngIf=\"bShowViewAllModal$\" class=\"psdk-dialog-background\">\n  <div class=\"psdk-modal-file-top\">\n    <div class=\"psdk-view-all-header\">\n      <div>\n        <h3>{{ pConn$.getLocalizedValue('Attachments', '', '') }}</h3>\n      </div>\n      <div>\n        <button mat-icon-button (click)=\"_closeViewAll()\">\n          <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ closeSvgIcon$ }}\" />\n        </button>\n      </div>\n    </div>\n    <div class=\"psdk-view-all-body\">\n      <component-mapper name=\"SummaryList\" [props]=\"{ arItems$: va_arItems$, menuIconOverrideAction$: removeLinksFromList$ }\"></component-mapper>\n    </div>\n  </div>\n</div>\n", styles: [".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,.psdk-modal-link-top{display:table;margin:auto;min-width:650px;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-modal-file-selector{border:1px dashed var(--app-neutral-dark-color);width:100%;padding:.3rem;text-align:center}.psdk-modal-link-entry{display:flex;flex-direction:row}.psdk-modal-link-data{flex-grow:3;margin:0 .3rem}.psdk-modal-link-add{flex-grow:1}.psdk-full-width{width:100%}.psdk-modal-body{max-height:500px;overflow-y:auto;overflow-x:hidden;width:100%}.psdk-view-all-header{display:flex;justify-content:space-between}.psdk-view-all-close-icon{width:1.5rem}.psdk-view-all-body{max-height:500px;overflow-y:auto;overflow-x:hidden}.psdk-links-two-column{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;width:85%}.psdk-modal-links-row{display:flex;flex-direction:row;justify-content:space-between}.psdk-links-add-link{padding:15px}ul{columns:2;-webkit-columns:2;-moz-columns:2}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatButtonModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i3$1.MatButton; }), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(function () { return i3$1.MatIconButton; }), selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return 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: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FileUtilityComponent, isStandalone: true, selector: "app-file-utility", inputs: { pConn$: "pConn$" }, ngImport: i0, template: "<div>\n  <component-mapper\n    name=\"ListUtility\"\n    [props]=\"{\n      name$: lu_name$,\n      icon$: lu_icon$,\n      bLoading$: lu_bLoading$,\n      count$: lu_count$,\n      arActions$: lu_arActions$,\n      arItems$: lu_arItems$,\n      onViewAll$: lu_onViewAllFunction,\n      menuIconOverrideAction$: removeFileFromList$\n    }\"\n  ></component-mapper>\n</div>\n\n<div *ngIf=\"bShowFileModal$\" class=\"psdk-dialog-background\">\n  <div class=\"psdk-modal-file-top\">\n    <h3>{{ pConn$.getLocalizedValue('Add local files', '', '') }}</h3>\n    <div class=\"psdk-modal-body\">\n      <div class=\"psdk-modal-file-selector\">\n        <input hidden type=\"file\" multiple #uploader (change)=\"uploadMyFiles($event)\" />\n\n        <button mat-stroked-button color=\"primary\" (click)=\"uploader.click()\">{{ pConn$.getLocalizedValue('Upload file(s)', '', '') }}</button>\n      </div>\n\n      <component-mapper\n        name=\"SummaryList\"\n        [props]=\"{ arItems$: arFileList$, menuIconOverride$: 'trash', menuIconOverrideAction$: removeFileFromList$ }\"\n      ></component-mapper>\n    </div>\n\n    <component-mapper\n      name=\"ActionButtons\"\n      [props]=\"{ arMainButtons$: arFileMainButtons$, arSecondaryButtons$: arFileSecondaryButtons$ }\"\n      [parent]=\"this\"\n      [outputEvents]=\"{ actionButtonClick: onFileActionButtonClick }\"\n    ></component-mapper>\n  </div>\n</div>\n\n<div *ngIf=\"bShowLinkModal$\" class=\"psdk-dialog-background\">\n  <div class=\"psdk-modal-link-top\">\n    <h3>{{ pConn$.getLocalizedValue('Add local link', '', '') }}</h3>\n    <div class=\"psdk-modal-link-entry\">\n      <div class=\"psdk-modal-body\">\n        <div class=\"psdk-modal-links-row\">\n          <div class=\"psdk-links-two-column\">\n            <div class=\"psdk-modal-link-data\">\n              <mat-form-field class=\"psdk-full-width\">\n                <mat-label>Link title</mat-label>\n                <input matInput type=\"text\" required=\"true\" (change)=\"_fieldOnChangeLink($event)\" [value]=\"link_title$\" />\n              </mat-form-field>\n            </div>\n            <div class=\"psdk-modal-link-data\">\n              <mat-form-field class=\"psdk-full-width\">\n                <mat-label>URL</mat-label>\n                <input matInput type=\"text\" required=\"true\" (change)=\"_fieldOnChangeURL($event)\" [value]=\"link_url$\" />\n              </mat-form-field>\n            </div>\n          </div>\n\n          <div class=\"psdk-modal-link-add\">\n            <button mat-raised-button color=\"primary\" (click)=\"_addLink()\">{{ pConn$.getLocalizedValue('Add Link', '', '') }}</button>\n          </div>\n        </div>\n\n        <component-mapper\n          name=\"SummaryList\"\n          [props]=\"{ arItems$: arLinksList$, menuIconOverride$: 'trash', menuIconOverrideAction$: removeLinksFromList$ }\"\n        ></component-mapper>\n      </div>\n    </div>\n\n    <component-mapper\n      name=\"ActionButtons\"\n      [props]=\"{ arMainButtons$: arLinkMainButtons$, arSecondaryButtons$: arLinkSecondaryButtons$ }\"\n      [parent]=\"this\"\n      [outputEvents]=\"{ actionButtonClick: onLinkActionButtonClick }\"\n    ></component-mapper>\n  </div>\n</div>\n\n<div *ngIf=\"bShowViewAllModal$\" class=\"psdk-dialog-background\">\n  <div class=\"psdk-modal-file-top\">\n    <div class=\"psdk-view-all-header\">\n      <div>\n        <h3>{{ pConn$.getLocalizedValue('Attachments', '', '') }}</h3>\n      </div>\n      <div>\n        <button mat-icon-button (click)=\"_closeViewAll()\">\n          <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ closeSvgIcon$ }}\" />\n        </button>\n      </div>\n    </div>\n    <div class=\"psdk-view-all-body\">\n      <component-mapper name=\"SummaryList\" [props]=\"{ arItems$: va_arItems$, menuIconOverrideAction$: removeLinksFromList$ }\"></component-mapper>\n    </div>\n  </div>\n</div>\n", styles: [".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,.psdk-modal-link-top{display:table;margin:auto;min-width:650px;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-modal-file-selector{border:1px dashed var(--app-neutral-dark-color);width:100%;padding:.3rem;text-align:center}.psdk-modal-link-entry{display:flex;flex-direction:row}.psdk-modal-link-data{flex-grow:3;margin:0 .3rem}.psdk-modal-link-add{flex-grow:1}.psdk-full-width{width:100%}.psdk-modal-body{max-height:500px;overflow-y:auto;overflow-x:hidden;width:100%}.psdk-view-all-header{display:flex;justify-content:space-between}.psdk-view-all-close-icon{width:1.5rem}.psdk-view-all-body{max-height:500px;overflow-y:auto;overflow-x:hidden}.psdk-links-two-column{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;width:85%}.psdk-modal-links-row{display:flex;flex-direction:row;justify-content:space-between}.psdk-links-add-link{padding:15px}ul{columns:2;-webkit-columns:2;-moz-columns:2}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatButtonModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i3$1.MatButton; }), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(function () { return i3$1.MatIconButton; }), selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatInputModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i6$1.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: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileUtilityComponent, decorators: [{
             type: Component,
@@ -16128,7 +16795,7 @@ class FeedContainerComponent {
         this.pulseComment[messageID] = event.target.value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FeedContainerComponent, deps: [{ token: AngularPConnectService }, { token: i0.ChangeDetectorRef }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FeedContainerComponent, isStandalone: true, selector: "app-feed-container", inputs: { pConn$: "pConn$" }, providers: [Utils], ngImport: i0, template: "<div>\n  <div style=\"text-align: left\">\n    <h3>Pulse</h3>\n\n    <div class=\"psdk-pulse-divider\"></div>\n\n    <br />\n    <div class=\"psdk-pulse\">\n      <div class=\"psdk-avatar-big\">{{ this.currentUserInitials$ }}</div>\n      <mat-form-field class=\"psdk-full-width\">\n        <textarea matInput rows=\"5\" id=\"pulseMessage\" placeholder=\"Start a conversation\" type=\"text\" (change)=\"messageChange($event)\"></textarea>\n      </mat-form-field>\n    </div>\n  </div>\n</div>\n\n<mat-grid-list cols=\"2\" rowHeight=\"6.25rem\">\n  <mat-grid-tile> </mat-grid-tile>\n  <mat-grid-tile>\n    <button mat-raised-button color=\"primary\" (click)=\"postClick()\">Post</button>\n  </mat-grid-tile>\n</mat-grid-list>\n\n<div *ngFor=\"let pulseMessage of pulseMessages$; let odd = odd\" style=\"text-align: left\" [style.background-color]=\"odd ? 'white' : '#eeeeee'\">\n  <div class=\"psdk-pulse-divider\"></div>\n  <br />\n  <div class=\"psdk-pulse\">\n    <div class=\"psdk-avatar-big\">{{ pulseMessage.displayPostedByInitials }}</div>\n    <div class=\"psdk-pulse-message-group\">\n      <div class=\"psdk-pulse-message-by\">{{ pulseMessage.displayPostedBy }}</div>\n      <div class=\"psdk-pulse-message-time\">{{ pulseMessage.displayPostedTime }}</div>\n    </div>\n  </div>\n  <div class=\"psdk-pulse-message-text\">{{ pulseMessage.message }}</div>\n  <div class=\"psdk-pulse-message-actions\">\n    <div class=\"psdk-pulse-message-action-group\">\n      <button mat-button (click)=\"commentClick(pulseMessage.ID)\">\n        <img class=\"psdk-comment-svg-icon\" src=\"{{ svgComment$ }}\" />\n        <label class=\"psdk-pulse-message-like-label\"\n          >Comment <span *ngIf=\"pulseMessage?.replies.length > 0\"> | {{ pulseMessage.replies.length }}</span></label\n        >\n      </button>\n    </div>\n    <div class=\"psdk-pulse-message-action-like\">\n      <div *ngIf=\"pulseMessage?.likeCount; else notLiked\">\n        <button *ngIf=\"pulseMessage?.likedByMe == 'true'\" mat-button (click)=\"likeClick(pulseMessage.ID, pulseMessage.ID, true, 'top')\">\n          <!-- <mat-icon class=\"psdk-icon-liked-by-me\" svgIcon=\"thumb-up\" mastListIcon ></mat-icon> -->\n          <img class=\"psdk-liked-by-me-svg-icon\" src=\"{{ svgLikedByMe$ }}\" />\n          <label class=\"psdk-pulse-message-like-label\">Like | {{ pulseMessage.likeCount }}</label>\n        </button>\n        <button *ngIf=\"pulseMessage?.likedByMe != 'true'\" mat-button (click)=\"likeClick(pulseMessage.ID, pulseMessage.ID, false, 'top')\">\n          <!-- <mat-icon class=\"psdk-icon\" svgIcon=\"thumb-up-outline\" mastListIcon ></mat-icon> -->\n          <img class=\"psdk-like-svg-icon\" src=\"{{ svgLike$ }}\" />\n          <label class=\"psdk-pulse-message-like-label\">Like | {{ pulseMessage.likeCount }}</label>\n        </button>\n      </div>\n      <ng-template #notLiked>\n        <button mat-button (click)=\"likeClick(pulseMessage.ID, pulseMessage.ID, false, 'top')\">\n          <!-- <mat-icon class=\"psdk-icon\" svgIcon=\"thumb-up-outline\" mastListIcon ></mat-icon> -->\n          <img class=\"psdk-like-svg-icon\" src=\"{{ svgLike$ }}\" />\n          <label class=\"psdk-pulse-message-like-label\">Like</label>\n        </button>\n      </ng-template>\n    </div>\n  </div>\n\n  <div *ngIf=\"pulseMessage?.replies\" class=\"psdk-pulse-reply\">\n    <div *ngFor=\"let replyMessage of pulseMessage.replies\" class=\"psdk-pulse-reply-align\">\n      <div class=\"psdk-pulse-divider\"></div>\n      <br />\n      <div class=\"psdk-pulse-reply-group\">\n        <div class=\"psdk-avatar\">{{ replyMessage.displayPostedByInitials }}</div>\n        <div class=\"psdk-pulse-reply-by\">{{ replyMessage.displayPostedBy }}</div>\n        <div class=\"psdk-pulse-reply-message\">{{ replyMessage.message }}</div>\n      </div>\n      <div class=\"psdk-pulse-reply-actions\">\n        <button mat-button (click)=\"commentClick(pulseMessage.ID)\" class=\"psdk-pulse-reply-comment\">\n          <img class=\"psdk-comment-svg-icon\" src=\"{{ svgComment$ }}\" />\n        </button>\n        <div *ngIf=\"replyMessage?.likeCount; else replyNotLiked\">\n          <button\n            *ngIf=\"replyMessage?.likedByMe === 'true'\"\n            mat-button\n            (click)=\"likeClick(pulseMessage.ID, replyMessage.ID, true, 'reply')\"\n            class=\"psdk-pulse-reply-like\"\n          >\n            <img class=\"psdk-liked-by-me-svg-icon\" src=\"{{ svgLikedByMe$ }}\" />\n          </button>\n          <button\n            *ngIf=\"replyMessage?.likedByMe != 'true'\"\n            mat-button\n            (click)=\"likeClick(pulseMessage.ID, replyMessage.ID, false, 'reply')\"\n            class=\"psdk-pulse-reply-like\"\n          >\n            <img class=\"psdk-like-svg-icon\" src=\"{{ svgLike$ }}\" />\n          </button>\n          <label class=\"psdk-pulse-reply-like-label\">Like | {{ replyMessage.likeCount }}</label>\n        </div>\n        <ng-template #replyNotLiked>\n          <button\n            *ngIf=\"replyMessage?.likedByMe != 'true'\"\n            mat-button\n            (click)=\"likeClick(pulseMessage.ID, replyMessage.ID, false, 'reply')\"\n            class=\"psdk-pulse-reply-like\"\n          >\n            <img class=\"psdk-like-svg-icon\" src=\"{{ svgLike$ }}\" />\n          </button>\n        </ng-template>\n\n        <div class=\"psdk-pulse-reply-time\">{{ replyMessage.displayPostedTime }}</div>\n      </div>\n      <br />\n    </div>\n\n    <div *ngIf=\"showReplyComment$[pulseMessage.ID] == true\">\n      <div class=\"psdk-pulse-divider\"></div>\n      <br />\n      <div class=\"psdk-pulse-comment-group\">\n        <div class=\"psdk-avatar\">{{ this.currentUserInitials$ }}</div>\n        <mat-form-field class=\"psdk-full-width\">\n          <textarea\n            matInput\n            rows=\"5\"\n            id=\"pulseMessage\"\n            placeholder=\"Add a comment\"\n            type=\"text\"\n            (change)=\"newCommentChange($event, pulseMessage.ID)\"\n          ></textarea>\n        </mat-form-field>\n        <button mat-button (click)=\"postCommentClick(pulseMessage.ID)\" class=\"psdk-pulse-comment-post\">\n          <img class=\"psdk-send-svg-icon\" src=\"{{ svgSend$ }}\" />\n        </button>\n      </div>\n    </div>\n  </div>\n  <br />\n</div>\n", styles: [".psdk-pulse-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-full-width{width:100%;padding-left:.625rem}.psdk-icon{padding:0rem .125rem;min-width:unset;display:inline-block}.psdk-icon-liked-by-me{padding:0rem .125rem;min-width:unset;display:inline-block;color:var(--app-primary-color)}.psdk-send-svg-icon{width:1.4rem}.psdk-comment-svg-icon,.psdk-like-svg-icon{width:1.4rem;padding:0rem .3215rem}.psdk-liked-by-me-svg-icon{width:1.4rem;padding:0rem .3215rem;filter:var(--app-primary-color-filter)}.psdk-avatar{margin:0rem;padding:0rem;min-width:2.5rem;min-height:2.5rem;max-width:2.5rem;max-height:2.5rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:flex;background:var(--app-primary-color);color:var(--app-form-color);font-weight:700;font-size:1.25rem}.psdk-avatar-big{margin:0rem;padding:0rem;min-width:3.125rem;min-height:3.125rem;max-width:3.125rem;max-height:3.125rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:flex;background:var(--app-primary-color);color:var(--app-form-color);font-weight:700;font-size:1.5625rem}.psdk-pulse{display:inline-flex;width:100%;padding-bottom:.625rem}.psdk-pulse-message-group{display:flex;flex-direction:column;padding-left:.625rem}.psdk-pulse-message-by{margin-bottom:0rem;font-weight:700;font-size:.9375rem}.psdk-pulse-message-time{color:var(--app-pulse-message-color)}.psdk-pulse-message-text{white-space:pre-line}.psdk-pulse-message-actions{display:flex;flex-direction:row;padding-top:1.25rem}.psdk-pulse-message-action-group,.psdk-pulse-message-action-like{flex-basis:15em}.psdk-pulse-message-like-label{vertical-align:middle}.psdk-pulse-reply{padding-left:1.25rem}.psdk-pulse-reply-align{text-align:left}.psdk-pulse-reply-group{display:flex;flex-direction:row;align-items:center}.psdk-pulse-reply-by{padding:0rem .625rem;font-weight:700;font-size:.9375rem}.psdk-pulse-reply-message{background-color:var(--app-pulse-message-background-color);border-radius:.625rem;padding:0rem 1.25rem;white-space:pre-line}.psdk-pulse-reply-actions{display:flex;flex-direction:row;align-items:center;padding-left:3.125rem}.psdk-pulse-reply-comment,.psdk-pulse-reply-like{padding:0rem;min-width:1.875rem}.psdk-pulse-reply-like-label{vertical-align:middle;padding-right:.3125rem}.psdk-pulse-reply-time{color:var(--app-pulse-message-color);padding-left:.625rem}.psdk-pulse-comment-group{display:flex;flex-direction:row;align-items:center}.psdk-pulse-comment-post{padding:0rem;min-width:1.875rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: 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: MatGridListModule }, { kind: "component", type: i2.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { kind: "component", type: i2.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FeedContainerComponent, isStandalone: true, selector: "app-feed-container", inputs: { pConn$: "pConn$" }, providers: [Utils], ngImport: i0, template: "<div>\n  <div style=\"text-align: left\">\n    <h3>Pulse</h3>\n\n    <div class=\"psdk-pulse-divider\"></div>\n\n    <br />\n    <div class=\"psdk-pulse\">\n      <div class=\"psdk-avatar-big\">{{ this.currentUserInitials$ }}</div>\n      <mat-form-field class=\"psdk-full-width\">\n        <textarea matInput rows=\"5\" id=\"pulseMessage\" placeholder=\"Start a conversation\" type=\"text\" (change)=\"messageChange($event)\"></textarea>\n      </mat-form-field>\n    </div>\n  </div>\n</div>\n\n<mat-grid-list cols=\"2\" rowHeight=\"6.25rem\">\n  <mat-grid-tile> </mat-grid-tile>\n  <mat-grid-tile>\n    <button mat-raised-button color=\"primary\" (click)=\"postClick()\">Post</button>\n  </mat-grid-tile>\n</mat-grid-list>\n\n<div *ngFor=\"let pulseMessage of pulseMessages$; let odd = odd\" style=\"text-align: left\" [style.background-color]=\"odd ? 'white' : '#eeeeee'\">\n  <div class=\"psdk-pulse-divider\"></div>\n  <br />\n  <div class=\"psdk-pulse\">\n    <div class=\"psdk-avatar-big\">{{ pulseMessage.displayPostedByInitials }}</div>\n    <div class=\"psdk-pulse-message-group\">\n      <div class=\"psdk-pulse-message-by\">{{ pulseMessage.displayPostedBy }}</div>\n      <div class=\"psdk-pulse-message-time\">{{ pulseMessage.displayPostedTime }}</div>\n    </div>\n  </div>\n  <div class=\"psdk-pulse-message-text\">{{ pulseMessage.message }}</div>\n  <div class=\"psdk-pulse-message-actions\">\n    <div class=\"psdk-pulse-message-action-group\">\n      <button mat-button (click)=\"commentClick(pulseMessage.ID)\">\n        <img class=\"psdk-comment-svg-icon\" src=\"{{ svgComment$ }}\" />\n        <label class=\"psdk-pulse-message-like-label\"\n          >Comment <span *ngIf=\"pulseMessage?.replies.length > 0\"> | {{ pulseMessage.replies.length }}</span></label\n        >\n      </button>\n    </div>\n    <div class=\"psdk-pulse-message-action-like\">\n      <div *ngIf=\"pulseMessage?.likeCount; else notLiked\">\n        <button *ngIf=\"pulseMessage?.likedByMe == 'true'\" mat-button (click)=\"likeClick(pulseMessage.ID, pulseMessage.ID, true, 'top')\">\n          <!-- <mat-icon class=\"psdk-icon-liked-by-me\" svgIcon=\"thumb-up\" mastListIcon ></mat-icon> -->\n          <img class=\"psdk-liked-by-me-svg-icon\" src=\"{{ svgLikedByMe$ }}\" />\n          <label class=\"psdk-pulse-message-like-label\">Like | {{ pulseMessage.likeCount }}</label>\n        </button>\n        <button *ngIf=\"pulseMessage?.likedByMe != 'true'\" mat-button (click)=\"likeClick(pulseMessage.ID, pulseMessage.ID, false, 'top')\">\n          <!-- <mat-icon class=\"psdk-icon\" svgIcon=\"thumb-up-outline\" mastListIcon ></mat-icon> -->\n          <img class=\"psdk-like-svg-icon\" src=\"{{ svgLike$ }}\" />\n          <label class=\"psdk-pulse-message-like-label\">Like | {{ pulseMessage.likeCount }}</label>\n        </button>\n      </div>\n      <ng-template #notLiked>\n        <button mat-button (click)=\"likeClick(pulseMessage.ID, pulseMessage.ID, false, 'top')\">\n          <!-- <mat-icon class=\"psdk-icon\" svgIcon=\"thumb-up-outline\" mastListIcon ></mat-icon> -->\n          <img class=\"psdk-like-svg-icon\" src=\"{{ svgLike$ }}\" />\n          <label class=\"psdk-pulse-message-like-label\">Like</label>\n        </button>\n      </ng-template>\n    </div>\n  </div>\n\n  <div *ngIf=\"pulseMessage?.replies\" class=\"psdk-pulse-reply\">\n    <div *ngFor=\"let replyMessage of pulseMessage.replies\" class=\"psdk-pulse-reply-align\">\n      <div class=\"psdk-pulse-divider\"></div>\n      <br />\n      <div class=\"psdk-pulse-reply-group\">\n        <div class=\"psdk-avatar\">{{ replyMessage.displayPostedByInitials }}</div>\n        <div class=\"psdk-pulse-reply-by\">{{ replyMessage.displayPostedBy }}</div>\n        <div class=\"psdk-pulse-reply-message\">{{ replyMessage.message }}</div>\n      </div>\n      <div class=\"psdk-pulse-reply-actions\">\n        <button mat-button (click)=\"commentClick(pulseMessage.ID)\" class=\"psdk-pulse-reply-comment\">\n          <img class=\"psdk-comment-svg-icon\" src=\"{{ svgComment$ }}\" />\n        </button>\n        <div *ngIf=\"replyMessage?.likeCount; else replyNotLiked\">\n          <button\n            *ngIf=\"replyMessage?.likedByMe === 'true'\"\n            mat-button\n            (click)=\"likeClick(pulseMessage.ID, replyMessage.ID, true, 'reply')\"\n            class=\"psdk-pulse-reply-like\"\n          >\n            <img class=\"psdk-liked-by-me-svg-icon\" src=\"{{ svgLikedByMe$ }}\" />\n          </button>\n          <button\n            *ngIf=\"replyMessage?.likedByMe != 'true'\"\n            mat-button\n            (click)=\"likeClick(pulseMessage.ID, replyMessage.ID, false, 'reply')\"\n            class=\"psdk-pulse-reply-like\"\n          >\n            <img class=\"psdk-like-svg-icon\" src=\"{{ svgLike$ }}\" />\n          </button>\n          <label class=\"psdk-pulse-reply-like-label\">Like | {{ replyMessage.likeCount }}</label>\n        </div>\n        <ng-template #replyNotLiked>\n          <button\n            *ngIf=\"replyMessage?.likedByMe != 'true'\"\n            mat-button\n            (click)=\"likeClick(pulseMessage.ID, replyMessage.ID, false, 'reply')\"\n            class=\"psdk-pulse-reply-like\"\n          >\n            <img class=\"psdk-like-svg-icon\" src=\"{{ svgLike$ }}\" />\n          </button>\n        </ng-template>\n\n        <div class=\"psdk-pulse-reply-time\">{{ replyMessage.displayPostedTime }}</div>\n      </div>\n      <br />\n    </div>\n\n    <div *ngIf=\"showReplyComment$[pulseMessage.ID] == true\">\n      <div class=\"psdk-pulse-divider\"></div>\n      <br />\n      <div class=\"psdk-pulse-comment-group\">\n        <div class=\"psdk-avatar\">{{ this.currentUserInitials$ }}</div>\n        <mat-form-field class=\"psdk-full-width\">\n          <textarea\n            matInput\n            rows=\"5\"\n            id=\"pulseMessage\"\n            placeholder=\"Add a comment\"\n            type=\"text\"\n            (change)=\"newCommentChange($event, pulseMessage.ID)\"\n          ></textarea>\n        </mat-form-field>\n        <button mat-button (click)=\"postCommentClick(pulseMessage.ID)\" class=\"psdk-pulse-comment-post\">\n          <img class=\"psdk-send-svg-icon\" src=\"{{ svgSend$ }}\" />\n        </button>\n      </div>\n    </div>\n  </div>\n  <br />\n</div>\n", styles: [".psdk-pulse-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-full-width{width:100%;padding-left:.625rem}.psdk-icon{padding:0rem .125rem;min-width:unset;display:inline-block}.psdk-icon-liked-by-me{padding:0rem .125rem;min-width:unset;display:inline-block;color:var(--app-primary-color)}.psdk-send-svg-icon{width:1.4rem}.psdk-comment-svg-icon,.psdk-like-svg-icon{width:1.4rem;padding:0rem .3215rem}.psdk-liked-by-me-svg-icon{width:1.4rem;padding:0rem .3215rem;filter:var(--app-primary-color-filter)}.psdk-avatar{margin:0rem;padding:0rem;min-width:2.5rem;min-height:2.5rem;max-width:2.5rem;max-height:2.5rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:flex;background:var(--app-primary-color);color:var(--app-form-color);font-weight:700;font-size:1.25rem}.psdk-avatar-big{margin:0rem;padding:0rem;min-width:3.125rem;min-height:3.125rem;max-width:3.125rem;max-height:3.125rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:flex;background:var(--app-primary-color);color:var(--app-form-color);font-weight:700;font-size:1.5625rem}.psdk-pulse{display:inline-flex;width:100%;padding-bottom:.625rem}.psdk-pulse-message-group{display:flex;flex-direction:column;padding-left:.625rem}.psdk-pulse-message-by{margin-bottom:0rem;font-weight:700;font-size:.9375rem}.psdk-pulse-message-time{color:var(--app-pulse-message-color)}.psdk-pulse-message-text{white-space:pre-line}.psdk-pulse-message-actions{display:flex;flex-direction:row;padding-top:1.25rem}.psdk-pulse-message-action-group,.psdk-pulse-message-action-like{flex-basis:15em}.psdk-pulse-message-like-label{vertical-align:middle}.psdk-pulse-reply{padding-left:1.25rem}.psdk-pulse-reply-align{text-align:left}.psdk-pulse-reply-group{display:flex;flex-direction:row;align-items:center}.psdk-pulse-reply-by{padding:0rem .625rem;font-weight:700;font-size:.9375rem}.psdk-pulse-reply-message{background-color:var(--app-pulse-message-background-color);border-radius:.625rem;padding:0rem 1.25rem;white-space:pre-line}.psdk-pulse-reply-actions{display:flex;flex-direction:row;align-items:center;padding-left:3.125rem}.psdk-pulse-reply-comment,.psdk-pulse-reply-like{padding:0rem;min-width:1.875rem}.psdk-pulse-reply-like-label{vertical-align:middle;padding-right:.3125rem}.psdk-pulse-reply-time{color:var(--app-pulse-message-color);padding-left:.625rem}.psdk-pulse-comment-group{display:flex;flex-direction:row;align-items:center}.psdk-pulse-comment-post{padding:0rem;min-width:1.875rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6$1.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: MatGridListModule }, { kind: "component", type: i2.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { kind: "component", type: i2.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FeedContainerComponent, decorators: [{
             type: Component,
@@ -16159,7 +16826,7 @@ class ListUtilityComponent {
         return `${this.utils.getSDKStaticContentUrl()}assets/icons/`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListUtilityComponent, deps: [{ token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListUtilityComponent, isStandalone: true, selector: "app-list-utility", inputs: { name$: "name$", icon$: "icon$", bLoading$: "bLoading$", count$: "count$", arActions$: "arActions$", arItems$: "arItems$", menuIconOverrideAction$: "menuIconOverrideAction$", onViewAll$: "onViewAll$" }, ngImport: i0, template: "<div style=\"text-align: left\">\n  <div class=\"psdk-utility\">\n    <div class=\"header\">\n      <div class=\"header-icon\">\n        <img class=\"psdk-utility-svg-icon\" src=\"{{ headerSvgIcon$ }}\" />\n      </div>\n      <div class=\"header-text\">{{ name$ }}</div>\n      <div class=\"psdk-utility-count\" id=\"attachments-count\">{{ count$ }}</div>\n      <div style=\"flex-grow: 1\"></div>\n      <div class=\"header-icon\">\n        <button mat-icon-button [matMenuTriggerFor]=\"utilityMenu\">\n          <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n        </button>\n        <mat-menu #utilityMenu=\"matMenu\" overlapTrigger=\"false\">\n          <ng-container *ngFor=\"let action of arActions$\">\n            <button mat-menu-item (click)=\"action.onClick()\">{{ action.text }}</button>\n          </ng-container>\n        </mat-menu>\n      </div>\n    </div>\n    <div class=\"psdk-utiltiy-divider\"></div>\n    <br />\n    <mat-spinner *ngIf=\"bLoading$\" class=\"progress-spinner\" diameter=\"50\"></mat-spinner>\n    <div *ngIf=\"count$ == 0\" class=\"message\">{{ noItemsMessage$ }}</div>\n    <div *ngIf=\"count$ > 0\" class=\"psdk-utility-items\">\n      <component-mapper name=\"SummaryList\" [props]=\"{ arItems$, menuIconOverrideAction$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-utility-view-all\">\n      <button *ngIf=\"count$ > 3\" mat-button color=\"primary\" (click)=\"onViewAll$.onClick()\">View all</button>\n    </div>\n  </div>\n</div>\n", styles: [".progress-spinner{text-align:center;position:absolute;top:40%;left:40%}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-utility-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-utility-view-all{width:100%;display:flex;justify-content:center}.psdk-utility-count{background:var(--app-primary-light-color);border-radius:.5625rem;color:var(--app-inverse-form-color);display:inline-block;font-size:.75rem;font-weight:700;text-align:center;width:1.125rem;vertical-align:top;margin:0 0 .313rem 1rem}.psdk-utility .header-text{font-size:1rem;font-weight:700;padding-bottom:.3125rem;text-align:left;display:inline-block}.psdk-utility .header-icon{display:inline-block}.psdk-utility{width:100%;padding:.625rem 0rem;text-align:left;background-color:var(--app-form-color);border-radius:.6125rem;margin:.3125rem 0rem;position:relative}.psdk-utility .header{text-align:left;display:flex;align-items:center}.psdk-utility-svg-icon{width:1.4rem;display:inline-block}.psdk-settings-svg-icon{width:1.4rem;display:inline-block;filter:var(--app-primary-color-filter)}.psdk-utility .message{text-align:center}.psdk-utility-card{display:flex;flex-direction:row;padding:.25rem 0rem .25rem .25rem}.psdk-utility-card-icon{flex-grow:1;max-width:2.813rem}.psdk-utility-card-svg-icon{width:2.5rem;display:inline-block}.psdk-utility-card-main{flex-grow:2;max-width:16.563rem}.psdk-utility-card-main-primary-url{color:var(--app-primary-color)}.psdk-utility-card-main-primary-url .mat-mdc-button.mat-primary{padding-left:0}.psdk-utility-card-main-primary-label{font-weight:700}.psdk-utility-card-actions{flex-grow:1;text-align:right}.psdk-utility-card-action-svg-icon{width:1.4rem;display:inline-block}.psdk-utility-card-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-utility-card-action-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:bottom}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatButtonModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i3$1.MatButton; }), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(function () { return i3$1.MatIconButton; }), selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatMenuModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6$1.MatMenu; }), selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(function () { return i6$1.MatMenuItem; }), selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(function () { return i6$1.MatMenuTrigger; }), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatProgressSpinnerModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i4$3.MatProgressSpinner; }), selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListUtilityComponent, isStandalone: true, selector: "app-list-utility", inputs: { name$: "name$", icon$: "icon$", bLoading$: "bLoading$", count$: "count$", arActions$: "arActions$", arItems$: "arItems$", menuIconOverrideAction$: "menuIconOverrideAction$", onViewAll$: "onViewAll$" }, ngImport: i0, template: "<div style=\"text-align: left\">\n  <div class=\"psdk-utility\">\n    <div class=\"header\">\n      <div class=\"header-icon\">\n        <img class=\"psdk-utility-svg-icon\" src=\"{{ headerSvgIcon$ }}\" />\n      </div>\n      <div class=\"header-text\">{{ name$ }}</div>\n      <div class=\"psdk-utility-count\" id=\"attachments-count\">{{ count$ }}</div>\n      <div style=\"flex-grow: 1\"></div>\n      <div class=\"header-icon\">\n        <button mat-icon-button [matMenuTriggerFor]=\"utilityMenu\">\n          <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n        </button>\n        <mat-menu #utilityMenu=\"matMenu\" overlapTrigger=\"false\">\n          <ng-container *ngFor=\"let action of arActions$\">\n            <button mat-menu-item (click)=\"action.onClick()\">{{ action.text }}</button>\n          </ng-container>\n        </mat-menu>\n      </div>\n    </div>\n    <div class=\"psdk-utiltiy-divider\"></div>\n    <br />\n    <mat-spinner *ngIf=\"bLoading$\" class=\"progress-spinner\" diameter=\"50\"></mat-spinner>\n    <div *ngIf=\"count$ == 0\" class=\"message\">{{ noItemsMessage$ }}</div>\n    <div *ngIf=\"count$ > 0\" class=\"psdk-utility-items\">\n      <component-mapper name=\"SummaryList\" [props]=\"{ arItems$, menuIconOverrideAction$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-utility-view-all\">\n      <button *ngIf=\"count$ > 3\" mat-button color=\"primary\" (click)=\"onViewAll$.onClick()\">View all</button>\n    </div>\n  </div>\n</div>\n", styles: [".progress-spinner{text-align:center;position:absolute;top:40%;left:40%}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-utility-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-utility-view-all{width:100%;display:flex;justify-content:center}.psdk-utility-count{background:var(--app-primary-light-color);border-radius:.5625rem;color:var(--app-inverse-form-color);display:inline-block;font-size:.75rem;font-weight:700;text-align:center;width:1.125rem;vertical-align:top;margin:0 0 .313rem 1rem}.psdk-utility .header-text{font-size:1rem;font-weight:700;padding-bottom:.3125rem;text-align:left;display:inline-block}.psdk-utility .header-icon{display:inline-block}.psdk-utility{width:100%;padding:.625rem 0rem;text-align:left;background-color:var(--app-form-color);border-radius:.6125rem;margin:.3125rem 0rem;position:relative}.psdk-utility .header{text-align:left;display:flex;align-items:center}.psdk-utility-svg-icon{width:1.4rem;display:inline-block}.psdk-settings-svg-icon{width:1.4rem;display:inline-block;filter:var(--app-primary-color-filter)}.psdk-utility .message{text-align:center}.psdk-utility-card{display:flex;flex-direction:row;padding:.25rem 0rem .25rem .25rem}.psdk-utility-card-icon{flex-grow:1;max-width:2.813rem}.psdk-utility-card-svg-icon{width:2.5rem;display:inline-block}.psdk-utility-card-main{flex-grow:2;max-width:16.563rem}.psdk-utility-card-main-primary-url{color:var(--app-primary-color)}.psdk-utility-card-main-primary-url .mat-mdc-button.mat-primary{padding-left:0}.psdk-utility-card-main-primary-label{font-weight:700}.psdk-utility-card-actions{flex-grow:1;text-align:right}.psdk-utility-card-action-svg-icon{width:1.4rem;display:inline-block}.psdk-utility-card-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-utility-card-action-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:bottom}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatButtonModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i3$1.MatButton; }), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(function () { return i3$1.MatIconButton; }), selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatMenuModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i6.MatMenu; }), selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(function () { return i6.MatMenuItem; }), selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(function () { return i6.MatMenuTrigger; }), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatProgressSpinnerModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i4$3.MatProgressSpinner; }), selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListUtilityComponent, decorators: [{
             type: Component,
@@ -16356,6 +17023,9 @@ class TodoComponent {
     getAssignmentName(assignment) {
         return this.type$ === this.CONSTS.TODO ? assignment.name : assignment.stepName;
     }
+    get canPerform() {
+        return this.assignmentsSource$?.[0]?.canPerform === 'true' || this.assignmentsSource$?.[0]?.canPerform === true;
+    }
     initAssignments() {
         if (this.assignmentsSource$) {
             this.assignmentCount$ = this.assignmentsSource$.length;
@@ -16398,7 +17068,7 @@ class TodoComponent {
         let { classname = '' } = assignment;
         const sTarget = this.pConn$.getContainerName();
         const sTargetContainerName = sTarget;
-        const options = { containerName: sTargetContainerName };
+        const options = { containerName: sTargetContainerName, channelName: '' };
         if (classname === null || classname === '') {
             classname = this.pConn$.getCaseInfo().getClassName();
         }
@@ -16428,11 +17098,11 @@ class TodoComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TodoComponent, deps: [{ token: ProgressSpinnerService }, { token: ErrorMessagesService }, { token: i0.NgZone }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TodoComponent, isStandalone: true, selector: "app-todo", inputs: { pConn$: "pConn$", caseInfoID$: "caseInfoID$", datasource$: "datasource$", headerText$: "headerText$", showTodoList$: "showTodoList$", target$: "target$", type$: "type$", context$: "context$", myWorkList$: "myWorkList$", isConfirm: "isConfirm" }, providers: [Utils], usesOnChanges: true, ngImport: i0, template: "<div class=\"psdk-todo\">\n  <div class=\"psdk-todo-header\">\n    <div *ngIf=\"showTodoList$\" class=\"psdk-avatar\">{{ this.currentUserInitials$ }}</div>\n    <div id=\"worklist\" class=\"psdk-todo-text\">{{ headerText$ }}</div>\n    <div *ngIf=\"showTodoList$\" class=\"psdk-assignment-count\">{{ assignmentCount$ }}</div>\n  </div>\n  <br /><br />\n  <div *ngIf=\"showTodoList$\" class=\"psdk-display-divider\"></div>\n\n  <div class=\"psdk-todo-assignments\">\n    <div *ngFor=\"let assignment of arAssignments$\">\n      <div class=\"psdk-todo-assignment\">\n        <div class=\"psdk-avatar\">{{ this.currentUserInitials$ }}</div>\n        <div class=\"psdk-todo-card\">\n          <div class=\"psdk-todo-assignment-title\">{{ getAssignmentName(assignment) }}</div>\n          <div class=\"psdk-todo-assignment-data\">\n            <div class=\"psdk-todo-assignment-task\">\n              Task in\n              <button class=\"psdk-todo-id\" style=\"cursor: pointer\" (click)=\"clickGo(assignment)\">\n                {{ assignment.name }} {{ getID(assignment) }}\n              </button>\n              <span *ngIf=\"assignment.status != undefined\">\n                &bull; <span class=\"psdk-todo-assignment-status\">{{ assignment?.status }}</span>\n              </span>\n              &bull; {{ localizedVal('Urgency', localeCategory) }} {{ getPriority(assignment) }}\n            </div>\n          </div>\n        </div>\n        <div class=\"psdk-todo-assignment-action\">\n          <button mat-flat-button color=\"primary\" (click)=\"clickGo(assignment)\">{{ localizedVal('Go', localeCategory) }}</button>\n        </div>\n      </div>\n      <div class=\"psdk-display-divider\"></div>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"assignmentCount$ > 3\">\n  <div *ngIf=\"bShowMore$; else showLess\" class=\"psdk-todo-show-more\">\n    <button mat-stroked-button (click)=\"_showMore()\">Show more</button>\n  </div>\n  <ng-template #showLess>\n    <div class=\"psdk-todo-show-more\">\n      <button mat-stroked-button (click)=\"_showLess()\">Show less</button>\n    </div>\n  </ng-template>\n</div>\n", styles: [".psdk-display-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-todo{padding:1rem;background-color:var(--app-form-color);border-radius:.6125rem;border-left:6px solid;border-left-color:var(--app-primary-color)}.psdk-todo-header{display:inline-flex}.psdk-todo-text{padding:.5rem .625rem;font-size:1.1rem;font-weight:700}.psdk-assignment-count{background-color:var(--app-primary-light-color);margin:.5rem;border-radius:45%;padding:.15rem .4rem}.psdk-todo-id{color:var(--app-primary-color);padding:0;cursor:pointer;border:0;background-color:transparent;align-items:center}.psdk-avatar{margin:0rem;padding:0rem;min-width:2.5rem;min-height:2.5rem;max-width:2.5rem;max-height:2.5rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:flex;background:var(--app-primary-color);color:var(--app-form-color);font-weight:700;font-size:1.25rem}.psdk-todo-assignment{display:inline-flex;width:100%;padding:.625rem 0rem}.psdk-todo-assignment-data{display:inline-flex}.psdk-todo-assignment-status{background-color:var(--app-neutral-light-color);border-radius:.125rem;color:var(--app-assignment-status-color);font-size:.75rem;font-weight:700;line-height:1.25rem;height:1.25rem;padding:0 .5rem;text-transform:uppercase}.psdk-todo-assignment-task{color:var(--app-neutral-color)}.psdk-todo-assignment-action{display:inline-flex}.psdk-todo-card{width:100%;padding-left:.625rem}.psdk-todo-show-more{width:100%;text-align:center;margin-top:.625rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TodoComponent, isStandalone: true, selector: "app-todo", inputs: { pConn$: "pConn$", caseInfoID$: "caseInfoID$", datasource$: "datasource$", headerText$: "headerText$", showTodoList$: "showTodoList$", target$: "target$", type$: "type$", context$: "context$", myWorkList$: "myWorkList$", isConfirm: "isConfirm" }, providers: [Utils], usesOnChanges: true, ngImport: i0, template: "<div class=\"psdk-todo\">\n  <div *ngIf=\"showTodoList$\" class=\"psdk-todo-header\">\n    <div class=\"psdk-avatar\">{{ this.currentUserInitials$ }}</div>\n    <div id=\"worklist\" class=\"psdk-todo-text\">{{ headerText$ }}</div>\n    <div class=\"psdk-assignment-count\">{{ assignmentCount$ }}</div>\n  </div>\n  <div *ngIf=\"showTodoList$\" class=\"psdk-display-divider\"></div>\n\n  <div class=\"psdk-todo-assignments\">\n    <div *ngFor=\"let assignment of arAssignments$\">\n      <div class=\"psdk-todo-assignment\">\n        <div class=\"psdk-avatar\">{{ this.currentUserInitials$ }}</div>\n        <div class=\"psdk-todo-card\">\n          <div class=\"psdk-todo-assignment-title\">{{ getAssignmentName(assignment) }}</div>\n          <div class=\"psdk-todo-assignment-data\">\n            <div class=\"psdk-todo-assignment-task\">\n              Task in\n              <button class=\"psdk-todo-id\" style=\"cursor: pointer\" (click)=\"clickGo(assignment)\">\n                {{ assignment.name }} {{ getID(assignment) }}\n              </button>\n              <span *ngIf=\"assignment.status != undefined\">\n                &bull; <span class=\"psdk-todo-assignment-status\">{{ assignment?.status }}</span>\n              </span>\n              &bull; {{ localizedVal('Urgency', localeCategory) }} {{ getPriority(assignment) }}\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"!isConfirm || canPerform\" class=\"psdk-todo-assignment-action\">\n          <button mat-flat-button color=\"primary\" (click)=\"clickGo(assignment)\">{{ localizedVal('Go', localeCategory) }}</button>\n        </div>\n      </div>\n      <div class=\"psdk-display-divider\"></div>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"assignmentCount$ > 3\">\n  <div *ngIf=\"bShowMore$; else showLess\" class=\"psdk-todo-show-more\">\n    <button mat-stroked-button (click)=\"_showMore()\">Show more</button>\n  </div>\n  <ng-template #showLess>\n    <div class=\"psdk-todo-show-more\">\n      <button mat-stroked-button (click)=\"_showLess()\">Show less</button>\n    </div>\n  </ng-template>\n</div>\n", styles: [".psdk-todo-assignments>*:last-child .psdk-display-divider{display:none}.psdk-display-divider{border-bottom:.0625rem solid var(--app-neutral-light-color);margin-block:.5rem}.psdk-todo{padding:1rem;background-color:var(--app-form-color);border-radius:.6125rem;border-left:6px solid;border-left-color:var(--app-primary-color)}.psdk-todo-header{display:inline-flex}.psdk-todo-text{padding:.5rem .625rem;font-size:1.1rem;font-weight:700}.psdk-assignment-count{background-color:var(--app-primary-light-color);margin:.5rem;border-radius:45%;padding:.15rem .4rem}.psdk-todo-id{color:var(--app-primary-color);padding:0;cursor:pointer;border:0;background-color:transparent;align-items:center}.psdk-avatar{margin:0rem;padding:0rem;min-width:2.5rem;min-height:2.5rem;max-width:2.5rem;max-height:2.5rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:flex;background:var(--app-primary-color);color:var(--app-form-color);font-weight:700;font-size:1.25rem}.psdk-todo-assignment{display:inline-flex;width:100%;padding:.625rem 0rem}.psdk-todo-assignment-data{display:inline-flex}.psdk-todo-assignment-status{background-color:var(--app-neutral-light-color);border-radius:.125rem;color:var(--app-assignment-status-color);font-size:.75rem;font-weight:700;line-height:1.25rem;height:1.25rem;padding:0 .5rem;text-transform:uppercase}.psdk-todo-assignment-task{color:var(--app-neutral-color)}.psdk-todo-assignment-action{display:inline-flex}.psdk-todo-card{width:100%;padding-left:.625rem}.psdk-todo-show-more{width:100%;text-align:center;margin-top:.625rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TodoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-todo', providers: [Utils], standalone: true, imports: [CommonModule, MatButtonModule], template: "<div class=\"psdk-todo\">\n  <div class=\"psdk-todo-header\">\n    <div *ngIf=\"showTodoList$\" class=\"psdk-avatar\">{{ this.currentUserInitials$ }}</div>\n    <div id=\"worklist\" class=\"psdk-todo-text\">{{ headerText$ }}</div>\n    <div *ngIf=\"showTodoList$\" class=\"psdk-assignment-count\">{{ assignmentCount$ }}</div>\n  </div>\n  <br /><br />\n  <div *ngIf=\"showTodoList$\" class=\"psdk-display-divider\"></div>\n\n  <div class=\"psdk-todo-assignments\">\n    <div *ngFor=\"let assignment of arAssignments$\">\n      <div class=\"psdk-todo-assignment\">\n        <div class=\"psdk-avatar\">{{ this.currentUserInitials$ }}</div>\n        <div class=\"psdk-todo-card\">\n          <div class=\"psdk-todo-assignment-title\">{{ getAssignmentName(assignment) }}</div>\n          <div class=\"psdk-todo-assignment-data\">\n            <div class=\"psdk-todo-assignment-task\">\n              Task in\n              <button class=\"psdk-todo-id\" style=\"cursor: pointer\" (click)=\"clickGo(assignment)\">\n                {{ assignment.name }} {{ getID(assignment) }}\n              </button>\n              <span *ngIf=\"assignment.status != undefined\">\n                &bull; <span class=\"psdk-todo-assignment-status\">{{ assignment?.status }}</span>\n              </span>\n              &bull; {{ localizedVal('Urgency', localeCategory) }} {{ getPriority(assignment) }}\n            </div>\n          </div>\n        </div>\n        <div class=\"psdk-todo-assignment-action\">\n          <button mat-flat-button color=\"primary\" (click)=\"clickGo(assignment)\">{{ localizedVal('Go', localeCategory) }}</button>\n        </div>\n      </div>\n      <div class=\"psdk-display-divider\"></div>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"assignmentCount$ > 3\">\n  <div *ngIf=\"bShowMore$; else showLess\" class=\"psdk-todo-show-more\">\n    <button mat-stroked-button (click)=\"_showMore()\">Show more</button>\n  </div>\n  <ng-template #showLess>\n    <div class=\"psdk-todo-show-more\">\n      <button mat-stroked-button (click)=\"_showLess()\">Show less</button>\n    </div>\n  </ng-template>\n</div>\n", styles: [".psdk-display-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-todo{padding:1rem;background-color:var(--app-form-color);border-radius:.6125rem;border-left:6px solid;border-left-color:var(--app-primary-color)}.psdk-todo-header{display:inline-flex}.psdk-todo-text{padding:.5rem .625rem;font-size:1.1rem;font-weight:700}.psdk-assignment-count{background-color:var(--app-primary-light-color);margin:.5rem;border-radius:45%;padding:.15rem .4rem}.psdk-todo-id{color:var(--app-primary-color);padding:0;cursor:pointer;border:0;background-color:transparent;align-items:center}.psdk-avatar{margin:0rem;padding:0rem;min-width:2.5rem;min-height:2.5rem;max-width:2.5rem;max-height:2.5rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:flex;background:var(--app-primary-color);color:var(--app-form-color);font-weight:700;font-size:1.25rem}.psdk-todo-assignment{display:inline-flex;width:100%;padding:.625rem 0rem}.psdk-todo-assignment-data{display:inline-flex}.psdk-todo-assignment-status{background-color:var(--app-neutral-light-color);border-radius:.125rem;color:var(--app-assignment-status-color);font-size:.75rem;font-weight:700;line-height:1.25rem;height:1.25rem;padding:0 .5rem;text-transform:uppercase}.psdk-todo-assignment-task{color:var(--app-neutral-color)}.psdk-todo-assignment-action{display:inline-flex}.psdk-todo-card{width:100%;padding-left:.625rem}.psdk-todo-show-more{width:100%;text-align:center;margin-top:.625rem}\n"] }]
+            args: [{ selector: 'app-todo', providers: [Utils], standalone: true, imports: [CommonModule, MatButtonModule], template: "<div class=\"psdk-todo\">\n  <div *ngIf=\"showTodoList$\" class=\"psdk-todo-header\">\n    <div class=\"psdk-avatar\">{{ this.currentUserInitials$ }}</div>\n    <div id=\"worklist\" class=\"psdk-todo-text\">{{ headerText$ }}</div>\n    <div class=\"psdk-assignment-count\">{{ assignmentCount$ }}</div>\n  </div>\n  <div *ngIf=\"showTodoList$\" class=\"psdk-display-divider\"></div>\n\n  <div class=\"psdk-todo-assignments\">\n    <div *ngFor=\"let assignment of arAssignments$\">\n      <div class=\"psdk-todo-assignment\">\n        <div class=\"psdk-avatar\">{{ this.currentUserInitials$ }}</div>\n        <div class=\"psdk-todo-card\">\n          <div class=\"psdk-todo-assignment-title\">{{ getAssignmentName(assignment) }}</div>\n          <div class=\"psdk-todo-assignment-data\">\n            <div class=\"psdk-todo-assignment-task\">\n              Task in\n              <button class=\"psdk-todo-id\" style=\"cursor: pointer\" (click)=\"clickGo(assignment)\">\n                {{ assignment.name }} {{ getID(assignment) }}\n              </button>\n              <span *ngIf=\"assignment.status != undefined\">\n                &bull; <span class=\"psdk-todo-assignment-status\">{{ assignment?.status }}</span>\n              </span>\n              &bull; {{ localizedVal('Urgency', localeCategory) }} {{ getPriority(assignment) }}\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"!isConfirm || canPerform\" class=\"psdk-todo-assignment-action\">\n          <button mat-flat-button color=\"primary\" (click)=\"clickGo(assignment)\">{{ localizedVal('Go', localeCategory) }}</button>\n        </div>\n      </div>\n      <div class=\"psdk-display-divider\"></div>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"assignmentCount$ > 3\">\n  <div *ngIf=\"bShowMore$; else showLess\" class=\"psdk-todo-show-more\">\n    <button mat-stroked-button (click)=\"_showMore()\">Show more</button>\n  </div>\n  <ng-template #showLess>\n    <div class=\"psdk-todo-show-more\">\n      <button mat-stroked-button (click)=\"_showLess()\">Show less</button>\n    </div>\n  </ng-template>\n</div>\n", styles: [".psdk-todo-assignments>*:last-child .psdk-display-divider{display:none}.psdk-display-divider{border-bottom:.0625rem solid var(--app-neutral-light-color);margin-block:.5rem}.psdk-todo{padding:1rem;background-color:var(--app-form-color);border-radius:.6125rem;border-left:6px solid;border-left-color:var(--app-primary-color)}.psdk-todo-header{display:inline-flex}.psdk-todo-text{padding:.5rem .625rem;font-size:1.1rem;font-weight:700}.psdk-assignment-count{background-color:var(--app-primary-light-color);margin:.5rem;border-radius:45%;padding:.15rem .4rem}.psdk-todo-id{color:var(--app-primary-color);padding:0;cursor:pointer;border:0;background-color:transparent;align-items:center}.psdk-avatar{margin:0rem;padding:0rem;min-width:2.5rem;min-height:2.5rem;max-width:2.5rem;max-height:2.5rem;border-radius:50%;justify-content:center;align-items:center;text-align:center;display:flex;background:var(--app-primary-color);color:var(--app-form-color);font-weight:700;font-size:1.25rem}.psdk-todo-assignment{display:inline-flex;width:100%;padding:.625rem 0rem}.psdk-todo-assignment-data{display:inline-flex}.psdk-todo-assignment-status{background-color:var(--app-neutral-light-color);border-radius:.125rem;color:var(--app-assignment-status-color);font-size:.75rem;font-weight:700;line-height:1.25rem;height:1.25rem;padding:0 .5rem;text-transform:uppercase}.psdk-todo-assignment-task{color:var(--app-neutral-color)}.psdk-todo-assignment-action{display:inline-flex}.psdk-todo-card{width:100%;padding-left:.625rem}.psdk-todo-show-more{width:100%;text-align:center;margin-top:.625rem}\n"] }]
         }], ctorParameters: function () { return [{ type: ProgressSpinnerService }, { type: ErrorMessagesService }, { type: i0.NgZone }, { type: Utils }]; }, propDecorators: { pConn$: [{
                 type: Input
             }], caseInfoID$: [{
@@ -16762,7 +17432,7 @@ class MaterialSummaryItemComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaterialSummaryItemComponent, deps: [{ token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MaterialSummaryItemComponent, isStandalone: true, selector: "app-material-summary-item", inputs: { item$: "item$", menuIconOverride$: "menuIconOverride$", menuIconOverrideAction$: "menuIconOverrideAction$" }, ngImport: i0, template: "<div class=\"psdk-utility-card\">\n  <div class=\"psdk-utility-card-icon\">\n    <img class=\"psdk-utility-card-svg-icon\" src=\"{{ imagePath$ }}{{ item$.visual.icon }}.svg\" />\n  </div>\n  <div class=\"psdk-utility-card-main\">\n    <div *ngIf=\"item$.primary.type == 'URL'\" class=\"psdk-utility-card-main-primary-url\">\n      <button mat-button color=\"primary\" (click)=\"item$.primary.click()\">\n        {{ item$.primary.name }}&nbsp;\n        <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ imagePath$ }}{{ item$.primary.icon }}.svg\" />\n      </button>\n    </div>\n    <div *ngIf=\"item$.primary.type != 'URL'\" class=\"psdk-utility-card-main-primary-label\">\n      {{ item$.primary.name }}\n    </div>\n    <div *ngIf=\"item$.secondary.text != ''\" [style.color]=\"item$.secondary.error ? 'red' : undefined\">{{ item$.secondary.text }}</div>\n  </div>\n  <div class=\"psdk-utility-card-actions\">\n    <div *ngIf=\"menuIconOverride$ == ''; else showCustom\">\n      <button id=\"setting-button\" mat-icon-button [matMenuTriggerFor]=\"actionMenu\">\n        <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n      </button>\n      <mat-menu #actionMenu=\"matMenu\" overlapTrigger=\"false\">\n        <ng-container *ngFor=\"let action of item$.actions\">\n          <button mat-menu-item (click)=\"action.onClick()\">\n            <img class=\"psdk-utility-card-action-actions-svg-icon\" src=\"{{ imagePath$ }}{{ action.icon }}.svg\" />&nbsp;\n            {{ action.text }}\n          </button>\n        </ng-container>\n      </mat-menu>\n    </div>\n    <ng-template #showCustom>\n      <button id=\"delete-attachment\" mat-icon-button (click)=\"menuIconOverrideAction$.onClick(item$)\">\n        <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ menuIconOverride$ }}\" />\n      </button>\n    </ng-template>\n  </div>\n</div>\n", styles: [".psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-utility-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-utility-view-all{width:100%;display:flex;justify-content:center}.psdk-utility-count{background:var(--app-primary-light-color);border-radius:.5625rem;color:var(--app-inverse-form-color);display:inline-block;font-size:.75rem;font-weight:700;text-align:center;width:1.125rem;vertical-align:top;margin:0 0 .313rem 1rem}.psdk-utility .header-text{font-size:1rem;font-weight:700;padding-bottom:.3125rem;text-align:left;display:inline-block}.psdk-utility .header-icon{display:inline-block}.psdk-utility{width:100%;padding:.625rem 0rem;text-align:left;background-color:var(--app-form-color);border-radius:.6125rem;margin:.3125rem 0rem}.psdk-utility .header{text-align:left;display:flex;align-items:center}.psdk-utility-svg-icon{width:1.4rem;display:inline-block}.psdk-settings-svg-icon{width:1.4rem;display:inline-block;filter:var(--app-primary-color-filter)}.psdk-utility .message{text-align:center}.psdk-utility-card{display:flex;flex-direction:row;padding:.25rem 0rem .25rem .25rem}.psdk-utility-card-icon{flex-grow:1;max-width:2.813rem}.psdk-utility-card-svg-icon{width:2.5rem;display:inline-block}.psdk-utility-card-main{flex-grow:2;max-width:16.563rem}.psdk-utility-card-main-primary-url{color:var(--app-primary-color)}.psdk-utility-card-main-primary-url .mat-mdc-button.mat-primary{padding-left:0}.psdk-utility-card-main-primary-label{font-weight:700}.psdk-utility-card-actions{flex-grow:1;text-align:right}.psdk-utility-card-action-svg-icon{width:1.4rem;display:inline-block}.psdk-utility-card-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-utility-card-action-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:bottom}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MaterialSummaryItemComponent, isStandalone: true, selector: "app-material-summary-item", inputs: { item$: "item$", menuIconOverride$: "menuIconOverride$", menuIconOverrideAction$: "menuIconOverrideAction$" }, ngImport: i0, template: "<div class=\"psdk-utility-card\">\n  <div class=\"psdk-utility-card-icon\">\n    <img class=\"psdk-utility-card-svg-icon\" src=\"{{ imagePath$ }}{{ item$.visual.icon }}.svg\" />\n  </div>\n  <div class=\"psdk-utility-card-main\">\n    <div *ngIf=\"item$.primary.type == 'URL'\" class=\"psdk-utility-card-main-primary-url\">\n      <button mat-button color=\"primary\" (click)=\"item$.primary.click()\">\n        {{ item$.primary.name }}&nbsp;\n        <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ imagePath$ }}{{ item$.primary.icon }}.svg\" />\n      </button>\n    </div>\n    <div *ngIf=\"item$.primary.type != 'URL'\" class=\"psdk-utility-card-main-primary-label\">\n      {{ item$.primary.name }}\n    </div>\n    <div *ngIf=\"item$.secondary.text != ''\" [style.color]=\"item$.secondary.error ? 'red' : undefined\">{{ item$.secondary.text }}</div>\n  </div>\n  <div class=\"psdk-utility-card-actions\">\n    <div *ngIf=\"menuIconOverride$ == ''; else showCustom\">\n      <button id=\"setting-button\" mat-icon-button [matMenuTriggerFor]=\"actionMenu\">\n        <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n      </button>\n      <mat-menu #actionMenu=\"matMenu\" overlapTrigger=\"false\">\n        <ng-container *ngFor=\"let action of item$.actions\">\n          <button mat-menu-item (click)=\"action.onClick()\">\n            <img class=\"psdk-utility-card-action-actions-svg-icon\" src=\"{{ imagePath$ }}{{ action.icon }}.svg\" />&nbsp;\n            {{ action.text }}\n          </button>\n        </ng-container>\n      </mat-menu>\n    </div>\n    <ng-template #showCustom>\n      <button id=\"delete-attachment\" mat-icon-button (click)=\"menuIconOverrideAction$.onClick(item$)\">\n        <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ menuIconOverride$ }}\" />\n      </button>\n    </ng-template>\n  </div>\n</div>\n", styles: [".psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-utility-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-utility-view-all{width:100%;display:flex;justify-content:center}.psdk-utility-count{background:var(--app-primary-light-color);border-radius:.5625rem;color:var(--app-inverse-form-color);display:inline-block;font-size:.75rem;font-weight:700;text-align:center;width:1.125rem;vertical-align:top;margin:0 0 .313rem 1rem}.psdk-utility .header-text{font-size:1rem;font-weight:700;padding-bottom:.3125rem;text-align:left;display:inline-block}.psdk-utility .header-icon{display:inline-block}.psdk-utility{width:100%;padding:.625rem 0rem;text-align:left;background-color:var(--app-form-color);border-radius:.6125rem;margin:.3125rem 0rem}.psdk-utility .header{text-align:left;display:flex;align-items:center}.psdk-utility-svg-icon{width:1.4rem;display:inline-block}.psdk-settings-svg-icon{width:1.4rem;display:inline-block;filter:var(--app-primary-color-filter)}.psdk-utility .message{text-align:center}.psdk-utility-card{display:flex;flex-direction:row;padding:.25rem 0rem .25rem .25rem}.psdk-utility-card-icon{flex-grow:1;max-width:2.813rem}.psdk-utility-card-svg-icon{width:2.5rem;display:inline-block}.psdk-utility-card-main{flex-grow:2;max-width:16.563rem}.psdk-utility-card-main-primary-url{color:var(--app-primary-color)}.psdk-utility-card-main-primary-url .mat-mdc-button.mat-primary{padding-left:0}.psdk-utility-card-main-primary-label{font-weight:700}.psdk-utility-card-actions{flex-grow:1;text-align:right}.psdk-utility-card-action-svg-icon{width:1.4rem;display:inline-block}.psdk-utility-card-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-utility-card-action-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:bottom}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaterialSummaryItemComponent, decorators: [{
             type: Component,
@@ -17180,6 +17850,7 @@ const pegaSdkComponentMap = {
     MaterialUtility: MaterialUtilityComponent,
     ModalViewContainer: ModalViewContainerComponent,
     MultiReferenceReadOnly: MultiReferenceReadonlyComponent,
+    Multiselect: MultiselectComponent,
     MultiStep: MultiStepComponent,
     //   'NarrowWide': NarrowWideFormComponent,
     NarrowWideDetails: DetailsNarrowWideComponent,
@@ -17592,7 +18263,7 @@ class RepeatingStructuresComponent {
         return fields.map((field) => field.name);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RepeatingStructuresComponent, deps: [{ token: ProgressSpinnerService }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RepeatingStructuresComponent, isStandalone: true, selector: "app-repeating-structures", inputs: { pConn$: "pConn$" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div>\n  <mat-form-field class=\"psdk-search\">\n    <mat-label\n      ><mat-icon class=\"psdk-icon-search\" style=\"transform: scale(1.2); width: 2rem; vertical-align: sub\" svgIcon=\"magnify\" mastListIcon></mat-icon>\n      Search</mat-label\n    >\n    <input matInput (keyup)=\"applySearch($event)\" placeholder=\"\" />\n  </mat-form-field>\n\n  <table mat-table [dataSource]=\"repeatList$\" matSort>\n    <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.name\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ dCol.label }}</th>\n      <td mat-cell *matCellDef=\"let element\">{{ element[dCol.name] }}</td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\" (click)=\"rowClick(row)\"></tr>\n  </table>\n\n  <mat-paginator [pageSizeOptions]=\"[10, 20, 50, 100, 500]\" showFirstLastButtons></mat-paginator>\n</div>\n", styles: ["table{width:100%}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-search{padding-left:.625rem}.psdk-icon-search{vertical-align:sub;padding:0rem .125rem;min-width:unset}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: 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: MatTableModule }, { kind: "component", type: i6$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i7$2.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i14.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RepeatingStructuresComponent, isStandalone: true, selector: "app-repeating-structures", inputs: { pConn$: "pConn$" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div>\n  <mat-form-field class=\"psdk-search\">\n    <mat-label\n      ><mat-icon class=\"psdk-icon-search\" style=\"transform: scale(1.2); width: 2rem; vertical-align: sub\" svgIcon=\"magnify\" mastListIcon></mat-icon>\n      Search</mat-label\n    >\n    <input matInput (keyup)=\"applySearch($event)\" placeholder=\"\" />\n  </mat-form-field>\n\n  <table mat-table [dataSource]=\"repeatList$\" matSort>\n    <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.name\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ dCol.label }}</th>\n      <td mat-cell *matCellDef=\"let element\">{{ element[dCol.name] }}</td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\" (click)=\"rowClick(row)\"></tr>\n  </table>\n\n  <mat-paginator [pageSizeOptions]=\"[10, 20, 50, 100, 500]\" showFirstLastButtons></mat-paginator>\n</div>\n", styles: ["table{width:100%}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-search{padding-left:.625rem}.psdk-icon-search{vertical-align:sub;padding:0rem .125rem;min-width:unset}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6$1.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: MatTableModule }, { kind: "component", type: i6$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i7$2.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i14.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RepeatingStructuresComponent, decorators: [{
             type: Component,
@@ -17796,5 +18467,5 @@ const localSdkComponentMap = {
  * Generated bundle index. Do not edit.
  */
 
-export { ActionButtonsComponent, AlertBannerComponent, AlertComponent, AngularPConnectService, AppAnnouncementComponent, AppShellComponent, AssignmentCardComponent, AssignmentComponent, AttachmentComponent, AutoCompleteComponent, CancelAlertComponent, CaseCreateStageComponent, CaseHistoryComponent, CaseService, CaseSummaryComponent, CaseViewComponent, CheckBoxComponent, ComponentMapperComponent, ConfirmationComponent, CurrencyComponent, DELETE_ICON, DashboardFilterComponent, DataReferenceComponent, DatapageService, DateComponent, DateTimeComponent, DecimalComponent, DefaultFormComponent, DeferLoadComponent, DetailsComponent, DetailsNarrowWideComponent, DetailsOneColumnComponent, DetailsSubTabsComponent, DetailsThreeColumnComponent, DetailsTwoColumnComponent, DetailsWideNarrowComponent, DropdownComponent, EmailComponent, ErrorBoundaryComponent, ErrorMessagesService, FeedContainerComponent, FieldGroupListComponent, FieldGroupTemplateComponent, FieldValueListComponent, FileUtilityComponent, FlowContainerComponent, GetLoginStatusService, Group$1 as Group, HybridViewContainerComponent, InlineDashboardComponent, InlineDashboardPageComponent, IntegerComponent, ListPageComponent, ListUtilityComponent, ListViewComponent, MaterialCaseSummaryComponent, MaterialDetailsComponent, MaterialDetailsFieldsComponent, MaterialSummaryItemComponent, MaterialSummaryListComponent, MaterialUtilityComponent, MaterialVerticalTabsComponent, ModalViewContainerComponent, MultiReferenceReadonlyComponent, MultiStepComponent, NarrowWideFormComponent, NavbarComponent, OAuthResponseService, OneColumnComponent, OneColumnPageComponent, OneColumnTabComponent, OperatorComponent, PageComponent, PercentageComponent, PhoneComponent, PreviewViewContainerComponent, ProgressSpinnerService, PromotedFiltersComponent, PulseComponent, RadioButtonsComponent, ReferenceComponent, RegionComponent, RepeatingStructuresComponent, ResetPConnectService, RichTextComponent, RichTextEditorComponent, RootContainerComponent, SdkComponentMap, SemanticLinkComponent, ServerConfigService, SimpleTableComponent, SimpleTableManualComponent, SimpleTableSelectComponent, SingleReferenceReadonlyComponent, StagesComponent, SubTabsComponent, TABLE_CELL, TemplateUtils, TextAreaComponent, TextComponent, TextContentComponent, TextInputComponent, ThousandSeparatorDirective, ThreeColumnComponent, ThreeColumnPageComponent, TimeComponent, TodoComponent, TwoColumnComponent, TwoColumnPageComponent, TwoColumnTabComponent, UpdateWorklistService, UrlComponent, UserReferenceComponent, UtilityComponent, Utils, ViewComponent, ViewContainerComponent, WideNarrowFormComponent, WideNarrowPageComponent, buildFieldsForTable, buildFilterComponents, buildMetaForListView, buildView, combineFilters, compareSdkPCoreVersions, createFilter, createFilterComponent, createMetaForTable, createPConnect, currencyMap, dateFormatInfoDefault, endpoints, filterDataByCommonFields, filterDataByDate, filterForFieldValueList, format, formatters, getAddRowCallback, getAllFields, getApiContext, getBanners, getComponentFromMap, getContext, getCurrencyCharacters, getCurrencyOptions, getCurrentTimezone$1 as getCurrentTimezone, getDateFormatInfo, getDeferFriendlyTabs, getFilterExpression, getFormattedDate, getLocale$1 as getLocale, getMessagesGrouped, getReferenceList, getSdkComponentMap, getSeconds, getToDoAssignments, getTransientTabs, getVisibleTabs, handleEvent, loginBoxType, populateRowKey, sdkVersion, showBanner, tabClick };
+export { ActionButtonsComponent, AlertBannerComponent, AlertComponent, AngularPConnectService, AppAnnouncementComponent, AppShellComponent, AssignmentCardComponent, AssignmentComponent, AttachmentComponent, AutoCompleteComponent, CancelAlertComponent, CaseCreateStageComponent, CaseHistoryComponent, CaseService, CaseSummaryComponent, CaseViewComponent, CheckBoxComponent, ComponentMapperComponent, ConfirmationComponent, CurrencyComponent, DELETE_ICON, DashboardFilterComponent, DataReferenceComponent, DatapageService, DateComponent, DateTimeComponent, DecimalComponent, DefaultFormComponent, DeferLoadComponent, DetailsComponent, DetailsNarrowWideComponent, DetailsOneColumnComponent, DetailsSubTabsComponent, DetailsThreeColumnComponent, DetailsTwoColumnComponent, DetailsWideNarrowComponent, DropdownComponent, EmailComponent, ErrorBoundaryComponent, ErrorMessagesService, FeedContainerComponent, FieldGroupListComponent, FieldGroupTemplateComponent, FieldValueListComponent, FileUtilityComponent, FlowContainerBaseComponent, FlowContainerComponent, GetLoginStatusService, Group$1 as Group, HybridViewContainerComponent, InlineDashboardComponent, InlineDashboardPageComponent, IntegerComponent, ListPageComponent, ListUtilityComponent, ListViewComponent, MaterialCaseSummaryComponent, MaterialDetailsComponent, MaterialDetailsFieldsComponent, MaterialSummaryItemComponent, MaterialSummaryListComponent, MaterialUtilityComponent, MaterialVerticalTabsComponent, ModalViewContainerComponent, MultiReferenceReadonlyComponent, MultiStepComponent, NarrowWideFormComponent, NavbarComponent, OAuthResponseService, OneColumnComponent, OneColumnPageComponent, OneColumnTabComponent, OperatorComponent, PageComponent, PercentageComponent, PhoneComponent, PreviewViewContainerComponent, ProgressSpinnerService, PromotedFiltersComponent, PulseComponent, RadioButtonsComponent, ReferenceComponent, RegionComponent, RepeatingStructuresComponent, ResetPConnectService, RichTextComponent, RichTextEditorComponent, RootContainerComponent, SdkComponentMap, SemanticLinkComponent, ServerConfigService, SimpleTableComponent, SimpleTableManualComponent, SimpleTableSelectComponent, SingleReferenceReadonlyComponent, StagesComponent, SubTabsComponent, TABLE_CELL, TemplateUtils, TextAreaComponent, TextComponent, TextContentComponent, TextInputComponent, ThousandSeparatorDirective, ThreeColumnComponent, ThreeColumnPageComponent, TimeComponent, TodoComponent, TwoColumnComponent, TwoColumnPageComponent, TwoColumnTabComponent, UpdateWorklistService, UrlComponent, UserReferenceComponent, UtilityComponent, Utils, ViewComponent, ViewContainerComponent, WideNarrowFormComponent, WideNarrowPageComponent, buildFieldsForTable, buildFilterComponents, buildMetaForListView, buildView, combineFilters, compareSdkPCoreVersions, createFilter, createFilterComponent, createMetaForTable, createPConnect, currencyMap, dateFormatInfoDefault, deleteInstruction, endpoints, filterDataByCommonFields, filterDataByDate, filterForFieldValueList, format, formatters, getAddRowCallback, getAllFields, getApiContext, getBanners, getComponentFromMap, getContext, getCurrencyCharacters, getCurrencyOptions, getCurrentTimezone$1 as getCurrentTimezone, getDateFormatInfo, getDeferFriendlyTabs, getFilterExpression, getFormattedDate, getLocale$1 as getLocale, getMessagesGrouped, getReferenceList, getSdkComponentMap, getSeconds, getToDoAssignments, getTransientTabs, getVisibleTabs, handleEvent, hasAssignments, insertInstruction, loginBoxType, populateRowKey, sdkVersion, showBanner, tabClick, updateNewInstructions };
 //# sourceMappingURL=pega-angular-sdk-components.mjs.map