@pega/angular-sdk-components 0.23.8 → 0.23.10

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,7 +62,7 @@ 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';
@@ -121,18 +121,16 @@ class ReferenceComponent {
     static createFullReferencedViewFromRef(inPConn) {
         // BAIL and ERROR if inPConn is NOT a reference!
         if (inPConn.getComponentName() !== 'reference') {
-            // debugger;
             console.error(`Reference component: createFullReferencedViewFromRef inPConn is NOT a reference! ${inPConn.getComponentName()}`);
         }
-        const theResolvedConfigProps = inPConn.resolveConfigProps(inPConn.getConfigProps());
         const referenceConfig = { ...inPConn.getComponentConfig() } || {};
         // Since SDK-A implements Reference as static methods and we don't rely on
         //  the Reference component's handling of the visibility prop, we leave it in
         //  (and also leaving the others in for now) so the referenced View can act on
         //  the visibility prop. (The following 3 lines were carried over from React SDK)
         delete referenceConfig?.name;
-        // delete referenceConfig?.type;
-        // delete referenceConfig?.visibility;
+        delete referenceConfig?.type;
+        delete referenceConfig?.visibility;
         const viewMetadata = inPConn.getReferencedView();
         if (!viewMetadata) {
             console.log('View not found ', inPConn.getComponentConfig());
@@ -147,23 +145,28 @@ class ReferenceComponent {
                 ...referenceConfig
             }
         };
+        const theResolvedConfigProps = inPConn.resolveConfigProps(inPConn.getConfigProps());
+        const { visibility = true, context, readOnly = false, displayMode = '' } = theResolvedConfigProps;
         if (ReferenceComponent.bLogging) {
-            console.log(`Reference: about to call createComponent with pageReference: context: ${theResolvedConfigProps.context}`);
+            console.log(`Reference: about to call createComponent with pageReference: context: ${inPConn.getContextName()}`);
         }
         const viewComponent = inPConn.createComponent(viewObject, null, null, {
-            pageReference: theResolvedConfigProps.context
+            pageReference: context && context.startsWith('@CLASS') ? '' : context
         });
         // updating the referencedComponent should trigger a render
         const newCompPConnect = viewComponent.getPConnect();
         newCompPConnect.setInheritedConfig({
             ...referenceConfig,
-            readOnly: theResolvedConfigProps.readOnly ? theResolvedConfigProps.readOnly : false,
-            displayMode: theResolvedConfigProps.displayMode ? theResolvedConfigProps.displayMode : null
+            readOnly,
+            displayMode
         });
         if (ReferenceComponent.bLogging) {
             console.log(`Angular Reference component: createFullReferencedViewFromRef -> newCompPConnect configProps: ${JSON.stringify(newCompPConnect.getConfigProps())}`);
         }
-        return newCompPConnect;
+        if (visibility !== false) {
+            return newCompPConnect;
+        }
+        return null;
     }
     // STATIC method that other components can call to normalize
     //  a pConn object that might be a 'reference'. If the incoming
@@ -197,7 +200,7 @@ class ReferenceComponent {
                 // debugger;
                 let theRefViewPConn = this.createFullReferencedViewFromRef(inPConn.getPConnect());
                 // now return its PConnect
-                theRefViewPConn = theRefViewPConn.getComponent();
+                theRefViewPConn = theRefViewPConn?.getComponent();
                 // const theFullReference = theRefViewPConn.getPConnect().getFullReference();
                 // console.log(`theFullReference: ${theFullReference}`);
                 return theRefViewPConn;
@@ -961,13 +964,25 @@ class AngularPConnectService {
         }
         else {
             returnObject.compID = theCompID;
-            returnObject.unsubscribeFn = theUnsub;
+            returnObject.unsubscribeFn = () => {
+                this.removeFormField(inComp);
+                theUnsub();
+            };
         }
         // initialize this components entry in the componentPropsArr
         this.componentPropsArr[theCompID] = {};
+        this.addFormField(inComp);
         // return object with compID and unsubscribe...
         return returnObject;
     }
+    addFormField(inComp) {
+        inComp.pConn$?.addFormField();
+    }
+    removeFormField(inComp) {
+        if (inComp.pConn$?.removeFormField) {
+            inComp.pConn$?.removeFormField();
+        }
+    }
     // Returns true if the component's entry in ___componentPropsArr___ is
     //  the same as the inCompProps passed in.
     //  As a side effect, update the component's entry in componentPropsArr
@@ -1162,6 +1177,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;
@@ -1172,7 +1194,6 @@ class AssignmentComponent {
         this.isInModal$ = false;
         // For interaction with AngularPConnect
         this.angularPConnectData = {};
-        this.bIsRefComponent = false;
         this.bInitialized = false;
         this.bHasNavigation$ = false;
         this.bIsVertical$ = false;
@@ -1224,18 +1245,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;
@@ -1245,15 +1260,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;
@@ -1284,7 +1293,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();
@@ -1513,6 +1524,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"] }] }); }
 }
@@ -1933,17 +1967,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;
@@ -1998,10 +2116,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);
@@ -2160,8 +2281,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);
@@ -2368,13 +2489,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          isConfirm: true\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          isConfirm: true\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
             }] } });
 
@@ -2488,10 +2609,6 @@ class ModalViewContainerComponent {
         this.formGroup$ = fb.group({ hideRequired: false });
     }
     ngOnInit() {
-        if (this.displayOnlyFA$) {
-            // for when non modal
-            this.bShowAsModal$ = false;
-        }
         // First thing in initialization is registering and subscribing to the AngularPConnect service
         this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
         const baseContext = this.pConn$.getContextName();
@@ -2588,7 +2705,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
@@ -2626,8 +2743,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$);
@@ -2650,22 +2774,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;
@@ -2739,15 +2884,13 @@ class ModalViewContainerComponent {
         return `${this.localizedVal('Create', this.localeCategory)} ${this.localizedVal(caseTypeName, undefined, caseLocaleRef)} (${ID})`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModalViewContainerComponent, deps: [{ token: AngularPConnectService }, { token: i0.NgZone }, { token: ProgressSpinnerService }, { token: i4.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ModalViewContainerComponent, isStandalone: true, selector: "app-modal-view-container", inputs: { pConn$: "pConn$", displayOnlyFA$: "displayOnlyFA$" }, outputs: { modalVisibleChange: "modalVisibleChange" }, ngImport: i0, template: "<div id=\"dialog\" *ngIf=\"bShowModal$ && bShowAsModal$\" class=\"psdk-dialog-background\">\n  <div class=\"psdk-modal-view-container-top\" id=\"{{ buildName$ }}\">\n    <h3 *ngIf=\"title$ != ''\">{{ title$ }}</h3>\n    <component-mapper\n      name=\"Assignment\"\n      [props]=\"{ pConn$: createdViewPConn$, formGroup$, arChildren$, itemKey$, isCreateStage$: true, updateToken$, isInModal$: true, banners }\"\n    ></component-mapper>\n    <div *ngIf=\"isMultiRecord\">\n      <component-mapper\n        name=\"ListViewActionButtons\"\n        [props]=\"{ pConn$: createdViewPConn$, context$ }\"\n        [outputEvents]=\"{ closeActionsDialog: closeActionsDialog }\"\n      ></component-mapper>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"bShowModal$ && !bShowAsModal$\">\n  <div id=\"{{ buildName$ }}\">\n    <h3 *ngIf=\"title$ != ''\">{{ title$ }}</h3>\n    <component-mapper\n      name=\"Assignment\"\n      [props]=\"{ pConn$: createdViewPConn$, formGroup$, arChildren$, itemKey$, isCreateStage$: true, updateToken$ }\"\n    ></component-mapper>\n  </div>\n</div>\n\n<div *ngIf=\"bShowCancelAlert$\">\n  <component-mapper\n    name=\"CancelAlert\"\n    [props]=\"{ bShowAlert$: bShowCancelAlert$, pConn$: cancelPConn$ }\"\n    [parent]=\"this\"\n    [outputEvents]=\"{ onAlertState$: onAlertState }\"\n  ></component-mapper>\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: "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: ModalViewContainerComponent, isStandalone: true, selector: "app-modal-view-container", inputs: { pConn$: "pConn$" }, outputs: { modalVisibleChange: "modalVisibleChange" }, ngImport: i0, template: "<div id=\"dialog\" *ngIf=\"bShowModal$ && bShowAsModal$\" class=\"psdk-dialog-background\">\n  <div class=\"psdk-modal-view-container-top\" id=\"{{ buildName$ }}\">\n    <h3 *ngIf=\"title$ != ''\">{{ title$ }}</h3>\n    <component-mapper\n      name=\"Assignment\"\n      [props]=\"{ pConn$: createdViewPConn$, formGroup$, arChildren$, itemKey$, isCreateStage$: true, updateToken$, isInModal$: true, banners }\"\n    ></component-mapper>\n    <div *ngIf=\"isMultiRecord\">\n      <component-mapper\n        name=\"ListViewActionButtons\"\n        [props]=\"{ pConn$: createdViewPConn$, context$ }\"\n        [outputEvents]=\"{ closeActionsDialog: closeActionsDialog }\"\n      ></component-mapper>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"bShowModal$ && !bShowAsModal$\">\n  <div id=\"{{ buildName$ }}\">\n    <h3 *ngIf=\"title$ != ''\">{{ title$ }}</h3>\n    <component-mapper\n      name=\"Assignment\"\n      [props]=\"{ pConn$: createdViewPConn$, formGroup$, arChildren$, itemKey$, isCreateStage$: true, updateToken$ }\"\n    ></component-mapper>\n  </div>\n</div>\n\n<div *ngIf=\"bShowCancelAlert$\">\n  <component-mapper\n    name=\"CancelAlert\"\n    [props]=\"{ bShowAlert$: bShowCancelAlert$, pConn$: cancelPConn$ }\"\n    [parent]=\"this\"\n    [outputEvents]=\"{ onAlertState$: onAlertState }\"\n  ></component-mapper>\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: "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: ModalViewContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-modal-view-container', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div id=\"dialog\" *ngIf=\"bShowModal$ && bShowAsModal$\" class=\"psdk-dialog-background\">\n  <div class=\"psdk-modal-view-container-top\" id=\"{{ buildName$ }}\">\n    <h3 *ngIf=\"title$ != ''\">{{ title$ }}</h3>\n    <component-mapper\n      name=\"Assignment\"\n      [props]=\"{ pConn$: createdViewPConn$, formGroup$, arChildren$, itemKey$, isCreateStage$: true, updateToken$, isInModal$: true, banners }\"\n    ></component-mapper>\n    <div *ngIf=\"isMultiRecord\">\n      <component-mapper\n        name=\"ListViewActionButtons\"\n        [props]=\"{ pConn$: createdViewPConn$, context$ }\"\n        [outputEvents]=\"{ closeActionsDialog: closeActionsDialog }\"\n      ></component-mapper>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"bShowModal$ && !bShowAsModal$\">\n  <div id=\"{{ buildName$ }}\">\n    <h3 *ngIf=\"title$ != ''\">{{ title$ }}</h3>\n    <component-mapper\n      name=\"Assignment\"\n      [props]=\"{ pConn$: createdViewPConn$, formGroup$, arChildren$, itemKey$, isCreateStage$: true, updateToken$ }\"\n    ></component-mapper>\n  </div>\n</div>\n\n<div *ngIf=\"bShowCancelAlert$\">\n  <component-mapper\n    name=\"CancelAlert\"\n    [props]=\"{ bShowAlert$: bShowCancelAlert$, pConn$: cancelPConn$ }\"\n    [parent]=\"this\"\n    [outputEvents]=\"{ onAlertState$: onAlertState }\"\n  ></component-mapper>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: i0.NgZone }, { type: ProgressSpinnerService }, { type: i4.FormBuilder }]; }, propDecorators: { pConn$: [{
                 type: Input
-            }], displayOnlyFA$: [{
-                type: Input
             }], modalVisibleChange: [{
                 type: Output
             }] } });
@@ -2929,7 +3072,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,
@@ -3098,16 +3241,6 @@ class RootContainerComponent {
             this.updateSelf();
         }
     }
-    modalVisibleChanged(isVisible) {
-        if (this.displayOnlyFA$) {
-            if (isVisible) {
-                this.bShowRoot$ = false;
-            }
-            else {
-                this.bShowRoot$ = true;
-            }
-        }
-    }
     updateSelf() {
         // need to call this.getCurrentCompleteProps (not this.thePConn.getConfigProps)
         //  to get full set of props that affect this component in Redux
@@ -3216,7 +3349,7 @@ class RootContainerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootContainerComponent, deps: [{ token: AngularPConnectService }, { token: ProgressSpinnerService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RootContainerComponent, isStandalone: true, selector: "app-root-container", inputs: { pConn$: "pConn$", displayOnlyFA$: "displayOnlyFA$", isMashup$: "isMashup$" }, ngImport: i0, template: "<div class=\"progress-box\" *ngIf=\"bIsProgress$\">\n  <mat-spinner class=\"progress-spinner\"></mat-spinner>\n</div>\n\n<div *ngIf=\"bShowRoot$\">\n  <div [ngSwitch]=\"componentName$\">\n    <component-mapper *ngSwitchCase=\"'View'\" name=\"View\" [props]=\"{ pConn$, displayOnlyFA$ }\"></component-mapper>\n    <!-- <app-reference *ngSwitchCase=\"'reference'\" [pConn$]=\"pConn$\" [displayOnlyFA$]=\"displayOnlyFA$\"></app-reference> -->\n    <component-mapper\n      *ngSwitchCase=\"'ViewContainer'\"\n      name=\"ViewContainer\"\n      [props]=\"{ pConn$: displayOnlyFA$ ? viewContainerPConn$ : pConn$, displayOnlyFA$ }\"\n    ></component-mapper>\n    <app-hybrid-view-container *ngSwitchCase=\"'HybridViewContainer'\" [pConn$]=\"pConn$\" [displayOnlyFA$]=\"displayOnlyFA$\"></app-hybrid-view-container>\n    <app-modal-view-container\n      *ngSwitchCase=\"'ModalViewContainer'\"\n      [pConn$]=\"pConn$\"\n      [displayOnlyFA$]=\"displayOnlyFA$\"\n      (modalVisibleChange)=\"modalVisibleChanged($event)\"\n    ></app-modal-view-container>\n    <div *ngSwitchCase=\"''\"></div>\n    <div *ngSwitchDefault>{{ localizedVal('RootContainer Missing: ' + componentName$, localeCategory) }}.</div>\n  </div>\n</div>\n\n<div *ngIf=\"pvConn$ != null\">\n  <app-preview-view-container [pConn$]=\"pvConn$\"></app-preview-view-container>\n</div>\n\n<div *ngIf=\"mConn$ != null\">\n  <app-modal-view-container\n    [pConn$]=\"mConn$\"\n    [displayOnlyFA$]=\"displayOnlyFA$\"\n    (modalVisibleChange)=\"modalVisibleChanged($event)\"\n  ></app-modal-view-container>\n</div>\n", styles: [".progress-box{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-background-color);position:fixed;z-index:99999;top:0rem;left:0rem;opacity:.5}.progress-spinner{text-align:center}\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: "directive", type: i0.forwardRef(function () { return i3.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }, { 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 HybridViewContainerComponent; }), selector: "app-hybrid-view-container", inputs: ["pConn$", "formGroup$", "displayOnlyFA$"] }, { kind: "component", type: i0.forwardRef(function () { return ModalViewContainerComponent; }), selector: "app-modal-view-container", inputs: ["pConn$", "displayOnlyFA$"], outputs: ["modalVisibleChange"] }, { kind: "component", type: i0.forwardRef(function () { return PreviewViewContainerComponent; }), selector: "app-preview-view-container", inputs: ["pConn$"] }, { 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: RootContainerComponent, isStandalone: true, selector: "app-root-container", inputs: { pConn$: "pConn$", displayOnlyFA$: "displayOnlyFA$", isMashup$: "isMashup$" }, ngImport: i0, template: "<div class=\"progress-box\" *ngIf=\"bIsProgress$\">\n  <mat-spinner class=\"progress-spinner\"></mat-spinner>\n</div>\n\n<div *ngIf=\"bShowRoot$\">\n  <div [ngSwitch]=\"componentName$\">\n    <component-mapper *ngSwitchCase=\"'View'\" name=\"View\" [props]=\"{ pConn$, displayOnlyFA$ }\"></component-mapper>\n    <component-mapper\n      *ngSwitchCase=\"'ViewContainer'\"\n      name=\"ViewContainer\"\n      [props]=\"{ pConn$: viewContainerPConn$, displayOnlyFA$ }\"\n    ></component-mapper>\n    <div *ngSwitchDefault>{{ localizedVal('RootContainer Missing: ' + componentName$, localeCategory) }}.</div>\n  </div>\n</div>\n\n<div *ngIf=\"pvConn$ != null\">\n  <app-preview-view-container [pConn$]=\"pvConn$\"></app-preview-view-container>\n</div>\n\n<div *ngIf=\"mConn$ != null\">\n  <app-modal-view-container [pConn$]=\"mConn$\"></app-modal-view-container>\n</div>\n", styles: [".progress-box{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-background-color);position:fixed;z-index:99999;top:0rem;left:0rem;opacity:.5}.progress-spinner{text-align:center}\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: "directive", type: i0.forwardRef(function () { return i3.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }, { 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 ModalViewContainerComponent; }), selector: "app-modal-view-container", inputs: ["pConn$"], outputs: ["modalVisibleChange"] }, { kind: "component", type: i0.forwardRef(function () { return PreviewViewContainerComponent; }), selector: "app-preview-view-container", inputs: ["pConn$"] }, { 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: RootContainerComponent, decorators: [{
             type: Component,
@@ -3227,7 +3360,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         ModalViewContainerComponent,
                         PreviewViewContainerComponent,
                         forwardRef(() => ComponentMapperComponent)
-                    ], template: "<div class=\"progress-box\" *ngIf=\"bIsProgress$\">\n  <mat-spinner class=\"progress-spinner\"></mat-spinner>\n</div>\n\n<div *ngIf=\"bShowRoot$\">\n  <div [ngSwitch]=\"componentName$\">\n    <component-mapper *ngSwitchCase=\"'View'\" name=\"View\" [props]=\"{ pConn$, displayOnlyFA$ }\"></component-mapper>\n    <!-- <app-reference *ngSwitchCase=\"'reference'\" [pConn$]=\"pConn$\" [displayOnlyFA$]=\"displayOnlyFA$\"></app-reference> -->\n    <component-mapper\n      *ngSwitchCase=\"'ViewContainer'\"\n      name=\"ViewContainer\"\n      [props]=\"{ pConn$: displayOnlyFA$ ? viewContainerPConn$ : pConn$, displayOnlyFA$ }\"\n    ></component-mapper>\n    <app-hybrid-view-container *ngSwitchCase=\"'HybridViewContainer'\" [pConn$]=\"pConn$\" [displayOnlyFA$]=\"displayOnlyFA$\"></app-hybrid-view-container>\n    <app-modal-view-container\n      *ngSwitchCase=\"'ModalViewContainer'\"\n      [pConn$]=\"pConn$\"\n      [displayOnlyFA$]=\"displayOnlyFA$\"\n      (modalVisibleChange)=\"modalVisibleChanged($event)\"\n    ></app-modal-view-container>\n    <div *ngSwitchCase=\"''\"></div>\n    <div *ngSwitchDefault>{{ localizedVal('RootContainer Missing: ' + componentName$, localeCategory) }}.</div>\n  </div>\n</div>\n\n<div *ngIf=\"pvConn$ != null\">\n  <app-preview-view-container [pConn$]=\"pvConn$\"></app-preview-view-container>\n</div>\n\n<div *ngIf=\"mConn$ != null\">\n  <app-modal-view-container\n    [pConn$]=\"mConn$\"\n    [displayOnlyFA$]=\"displayOnlyFA$\"\n    (modalVisibleChange)=\"modalVisibleChanged($event)\"\n  ></app-modal-view-container>\n</div>\n", styles: [".progress-box{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-background-color);position:fixed;z-index:99999;top:0rem;left:0rem;opacity:.5}.progress-spinner{text-align:center}\n"] }]
+                    ], template: "<div class=\"progress-box\" *ngIf=\"bIsProgress$\">\n  <mat-spinner class=\"progress-spinner\"></mat-spinner>\n</div>\n\n<div *ngIf=\"bShowRoot$\">\n  <div [ngSwitch]=\"componentName$\">\n    <component-mapper *ngSwitchCase=\"'View'\" name=\"View\" [props]=\"{ pConn$, displayOnlyFA$ }\"></component-mapper>\n    <component-mapper\n      *ngSwitchCase=\"'ViewContainer'\"\n      name=\"ViewContainer\"\n      [props]=\"{ pConn$: viewContainerPConn$, displayOnlyFA$ }\"\n    ></component-mapper>\n    <div *ngSwitchDefault>{{ localizedVal('RootContainer Missing: ' + componentName$, localeCategory) }}.</div>\n  </div>\n</div>\n\n<div *ngIf=\"pvConn$ != null\">\n  <app-preview-view-container [pConn$]=\"pvConn$\"></app-preview-view-container>\n</div>\n\n<div *ngIf=\"mConn$ != null\">\n  <app-modal-view-container [pConn$]=\"mConn$\"></app-modal-view-container>\n</div>\n", styles: [".progress-box{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-background-color);position:fixed;z-index:99999;top:0rem;left:0rem;opacity:.5}.progress-spinner{text-align:center}\n"] }]
         }], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: ProgressSpinnerService }, { type: i0.NgZone }]; }, propDecorators: { pConn$: [{
                 type: Input
             }], displayOnlyFA$: [{
@@ -3536,7 +3669,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>;
@@ -4138,7 +4271,9 @@ class AutoCompleteComponent {
         // PConnect wants to use changeHandler for onChange
         // this.angularPConnect.changeHandler( this, event);
         this.filterValue = event.target.value;
-        this.angularPConnectData.actions?.onChange(this, event);
+        const actionsApi = this.pConn$?.getActionsApi();
+        const propName = (this.pConn$?.getStateProps()).value;
+        handleEvent(actionsApi, 'change', propName, this.filterValue);
     }
     optionChanged(event) {
         this.angularPConnectData.actions?.onChange(this, event);
@@ -4175,7 +4310,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,
@@ -4474,8 +4609,9 @@ class CheckBoxComponent {
             this.pConn$.getValidationApi().validate(this.selectedvalues, this.selectionList);
         }
         else {
-            event.value = event.checked;
-            this.angularPConnectData.actions?.onBlur(this, event);
+            const actionsApi = this.pConn$?.getActionsApi();
+            const propName = (this.pConn$?.getStateProps()).value;
+            handleEvent(actionsApi, 'changeNblur', propName, event.checked);
         }
     }
     handleChangeMultiMode(event, element) {
@@ -4513,7 +4649,7 @@ 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=\"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$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.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"] }] }); }
+    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,
@@ -5683,7 +5819,9 @@ class CurrencyComponent {
     }
     fieldOnBlur(event) {
         // PConnect wants to use eventHandler for onBlur
-        this.angularPConnectData.actions?.onBlur(this, event);
+        const actionsApi = this.pConn$?.getActionsApi();
+        const propName = (this.pConn$?.getStateProps()).value;
+        handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
     }
     getErrorMessage() {
         let errMessage = '';
@@ -5701,7 +5839,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,
@@ -6206,7 +6344,9 @@ class DateComponent {
             // convert date to pega "date" format
             event.value = event.value?.toISOString();
         }
-        this.angularPConnectData.actions?.onBlur(this, { value: event.value });
+        const actionsApi = this.pConn$?.getActionsApi();
+        const propName = (this.pConn$?.getStateProps()).value;
+        handleEvent(actionsApi, 'changeNblur', propName, event?.value);
     }
     hasErrors() {
         return this.fieldControl.status === 'INVALID';
@@ -6232,7 +6372,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,
@@ -6392,10 +6532,9 @@ class DateTimeComponent {
         handleEvent(actionsApi, 'changeNblur', propName, value?.toISOString());
     }
     fieldOnBlur(event) {
-        // PConnect wants to use eventHandler for onBlur
-        if (event.target.value)
-            event.value = event.target.value;
-        this.angularPConnectData.actions?.onBlur(this, event);
+        const actionsApi = this.pConn$?.getActionsApi();
+        const propName = (this.pConn$?.getStateProps()).value;
+        handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
     }
     getErrorMessage() {
         let errMessage = '';
@@ -6413,7 +6552,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,
@@ -6584,7 +6723,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,
@@ -6747,10 +6886,6 @@ class DropdownComponent {
             this.configProps$.onRecordChange(event);
         }
     }
-    fieldOnBlur(event) {
-        // PConnect wants to use eventHandler for onBlur
-        this.angularPConnectData.actions?.onBlur(this, event);
-    }
     getLocalizedOptionValue(opt) {
         return this.pConn$.getLocalizedValue(opt.value, this.localePath, 
         // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'.
@@ -6772,7 +6907,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,
@@ -6889,8 +7024,9 @@ class EmailComponent {
         this.angularPConnectData.actions?.onChange(this, event);
     }
     fieldOnBlur(event) {
-        // PConnect wants to use eventHandler for onBlur
-        this.angularPConnectData.actions?.onBlur(this, event);
+        const actionsApi = this.pConn$?.getActionsApi();
+        const propName = (this.pConn$?.getStateProps()).value;
+        handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
     }
     getErrorMessage() {
         let errMessage = '';
@@ -6908,7 +7044,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,
@@ -7086,8 +7222,9 @@ class IntegerComponent {
         this.angularPConnectData.actions?.onChange(this, event);
     }
     fieldOnBlur(event) {
-        // PConnect wants to use eventHandler for onBlur
-        this.angularPConnectData.actions?.onBlur(this, event);
+        const actionsApi = this.pConn$?.getActionsApi();
+        const propName = (this.pConn$?.getStateProps()).value;
+        handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
     }
     getErrorMessage() {
         // field control gets error message from here
@@ -7106,7 +7243,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,
@@ -7264,8 +7401,9 @@ class PercentageComponent {
         this.angularPConnectData.actions?.onChange(this, event);
     }
     fieldOnBlur(event) {
-        // PConnect wants to use eventHandler for onBlur
-        this.angularPConnectData.actions?.onBlur(this, event);
+        const actionsApi = this.pConn$?.getActionsApi();
+        const propName = (this.pConn$?.getStateProps()).value;
+        handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
     }
     getErrorMessage() {
         // field control gets error message from here
@@ -7284,7 +7422,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,
@@ -7418,8 +7556,9 @@ class PhoneComponent {
         }
     }
     fieldOnBlur(event) {
-        // PConnect wants to use eventHandler for onBlur
-        this.angularPConnectData.actions?.onBlur(this, event);
+        const actionsApi = this.pConn$?.getActionsApi();
+        const propName = (this.pConn$?.getStateProps()).value;
+        handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
     }
     getErrorMessage() {
         let errMessage = '';
@@ -7582,11 +7721,9 @@ class RadioButtonsComponent {
         return this.value$ === buttonValue;
     }
     fieldOnChange(event) {
-        this.angularPConnectData.actions?.onChange(this, event);
-    }
-    fieldOnBlur(event) {
-        // PConnect wants to use eventHandler for onBlur
-        this.angularPConnectData.actions?.onBlur(this, event);
+        const actionsApi = this.pConn$?.getActionsApi();
+        const propName = (this.pConn$?.getStateProps()).value;
+        handleEvent(actionsApi, 'changeNblur', propName, event?.value);
     }
     getLocalizedOptionValue(opt) {
         return this.pConn$.getLocalizedValue(opt.value, this.localePath, 
@@ -7609,7 +7746,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,
@@ -7776,12 +7913,9 @@ class TextAreaComponent {
         }
     }
     fieldOnChange(event) {
-        // PConnect wants to use changeHandler for onChange
-        this.angularPConnectData.actions?.onChange(this, event);
-    }
-    fieldOnBlur(event) {
-        // PConnect wants to use eventHandler for onBlur
-        this.angularPConnectData.actions?.onBlur(this, event);
+        const actionsApi = this.pConn$?.getActionsApi();
+        const propName = (this.pConn$?.getStateProps()).value;
+        handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
     }
     getErrorMessage() {
         // field control gets error message from here
@@ -7800,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,
@@ -8113,8 +8247,9 @@ class TextInputComponent {
         this.angularPConnectData.actions?.onChange(this, event);
     }
     fieldOnBlur(event) {
-        // PConnect wants to use eventHandler for onBlur
-        this.angularPConnectData.actions?.onBlur(this, event);
+        const actionsApi = this.pConn$?.getActionsApi();
+        const propName = (this.pConn$?.getStateProps()).value;
+        handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
     }
     getErrorMessage() {
         let errMessage = '';
@@ -8132,7 +8267,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,
@@ -8251,9 +8386,9 @@ class TimeComponent {
         this.angularPConnectData.actions?.onChange(this, event);
     }
     fieldOnBlur(event) {
-        // PConnect wants to use eventHandler for onBlur
-        event.value = event.target.value;
-        this.angularPConnectData.actions?.onBlur(this, event);
+        const actionsApi = this.pConn$?.getActionsApi();
+        const propName = (this.pConn$?.getStateProps()).value;
+        handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
     }
     getErrorMessage() {
         let errMessage = '';
@@ -8271,7 +8406,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,
@@ -8390,8 +8525,9 @@ class UrlComponent {
         this.angularPConnectData.actions?.onChange(this, event);
     }
     fieldOnBlur(event) {
-        // PConnect wants to use eventHandler for onBlur
-        this.angularPConnectData.actions?.onBlur(this, event);
+        const actionsApi = this.pConn$?.getActionsApi();
+        const propName = (this.pConn$?.getStateProps()).value;
+        handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
     }
     getErrorMessage() {
         let errMessage = '';
@@ -8409,7 +8545,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,
@@ -8535,11 +8671,9 @@ class UserReferenceComponent {
             const index = this.options$?.findIndex(element => element.value === event.target.value);
             key = index > -1 ? (key = this.options$[index].key) : event.target.value;
         }
-        const eve = {
-            value: key
-        };
-        // PConnect wants to use eventHandler for onBlur
-        this.angularPConnectData.actions?.onChange(this, eve);
+        const actionsApi = this.pConn$?.getActionsApi();
+        const propName = (this.pConn$?.getStateProps()).value;
+        handleEvent(actionsApi, 'changeNblur', propName, key);
     }
     getErrorMessage() {
         let errMessage = '';
@@ -8557,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=\"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$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,
@@ -9163,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,
@@ -9522,9 +9656,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+function areViewsChanged(oldViews, newViews) {
+    if (oldViews.length !== newViews.length) {
+        return true;
+    }
+    return !oldViews.every((oldView, index) => {
+        const newView = newViews[index];
+        return oldView.getPConnect().viewName === newView.getPConnect().viewName;
+    });
+}
 class DefaultFormComponent {
-    constructor(templateUtils) {
+    constructor(angularPConnect, templateUtils) {
+        this.angularPConnect = angularPConnect;
         this.templateUtils = templateUtils;
+        // Used with AngularPConnect
+        this.angularPConnectData = {};
+        this.arChildren$ = [];
         this.NO_HEADER_TEMPLATES = [
             'SubTabs',
             'SimpleTable',
@@ -9537,6 +9684,19 @@ class DefaultFormComponent {
         ];
     }
     ngOnInit() {
+        // First thing in initialization is registering and subscribing to the AngularPConnect service
+        this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+        this.updateSelf();
+    }
+    ngOnDestroy() {
+        if (this.angularPConnectData.unsubscribeFn) {
+            this.angularPConnectData.unsubscribeFn();
+        }
+    }
+    onStateChange() {
+        this.updateSelf();
+    }
+    updateSelf() {
         const configProps = this.pConn$.getConfigProps();
         this.template = configProps?.template;
         const propToUse = { ...this.pConn$.getInheritedProps() };
@@ -9562,15 +9722,19 @@ class DefaultFormComponent {
         // repoint children before getting templateArray
         // Children may contain 'reference' component, so we need to
         //  normalize them
-        this.arChildren$ = ReferenceComponent.normalizePConnArray(kids[0].getPConnect().getChildren());
+        const children = ReferenceComponent.normalizePConnArray(kids[0].getPConnect().getChildren());
+        const visibleChildren = children.filter(child => child !== undefined);
+        if (areViewsChanged(this.arChildren$, visibleChildren)) {
+            this.arChildren$ = visibleChildren;
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefaultFormComponent, deps: [{ token: TemplateUtils }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefaultFormComponent, deps: [{ token: AngularPConnectService }, { token: TemplateUtils }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DefaultFormComponent, isStandalone: true, selector: "app-default-form", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<!-- When adding a component here, add the same component in 'region' template as well -->\n<div *ngIf=\"!NO_HEADER_TEMPLATES.includes(template) && showLabel\">\n  <div class=\"template-title-container\">{{ label }}</div>\n</div>\n<div *ngIf=\"instructions\" class=\"psdk-default-form-instruction-text\">\n  <div key=\"instructions\" id=\"instruction-text\" [innerHTML]=\"instructions\"></div>\n</div>\n<div [className]=\"divClass$\">\n  <div *ngFor=\"let kid of arChildren$\" [ngClass]=\"{ 'grid-column': kid.getPConnect().getComponentName() === 'View' }\">\n    <component-mapper\n      [name]=\"kid.getPConnect().getComponentName()\"\n      [props]=\"{\n        pConn$: kid.getPConnect(),\n        formGroup$: formGroup$\n      }\"\n      errorMsg=\"DefaultForm wants component not yet available: {{ kid.getPConnect().getComponentName() }}\"\n    ></component-mapper>\n  </div>\n</div>\n", styles: [".psdk-default-form-one-column{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));column-gap:1rem}.psdk-default-form-two-column{display:grid;grid-template-columns:repeat(2,1fr);column-gap:1rem}.psdk-default-form-three-column{display:grid;grid-template-columns:repeat(3,1fr);column-gap:1rem}.psdk-default-form-three-column .grid-column{grid-column:1/span 3}.psdk-default-form-two-column .grid-column{grid-column:1/span 2}.psdk-default-form-one-column .grid-column{grid-column:1}.template-title-container{font-size:.9375rem;font-weight:600;margin:10px 0}.psdk-default-form-instruction-text{padding-top:.625rem;padding-bottom:.625rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "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: DefaultFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-default-form', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<!-- When adding a component here, add the same component in 'region' template as well -->\n<div *ngIf=\"!NO_HEADER_TEMPLATES.includes(template) && showLabel\">\n  <div class=\"template-title-container\">{{ label }}</div>\n</div>\n<div *ngIf=\"instructions\" class=\"psdk-default-form-instruction-text\">\n  <div key=\"instructions\" id=\"instruction-text\" [innerHTML]=\"instructions\"></div>\n</div>\n<div [className]=\"divClass$\">\n  <div *ngFor=\"let kid of arChildren$\" [ngClass]=\"{ 'grid-column': kid.getPConnect().getComponentName() === 'View' }\">\n    <component-mapper\n      [name]=\"kid.getPConnect().getComponentName()\"\n      [props]=\"{\n        pConn$: kid.getPConnect(),\n        formGroup$: formGroup$\n      }\"\n      errorMsg=\"DefaultForm wants component not yet available: {{ kid.getPConnect().getComponentName() }}\"\n    ></component-mapper>\n  </div>\n</div>\n", styles: [".psdk-default-form-one-column{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));column-gap:1rem}.psdk-default-form-two-column{display:grid;grid-template-columns:repeat(2,1fr);column-gap:1rem}.psdk-default-form-three-column{display:grid;grid-template-columns:repeat(3,1fr);column-gap:1rem}.psdk-default-form-three-column .grid-column{grid-column:1/span 3}.psdk-default-form-two-column .grid-column{grid-column:1/span 2}.psdk-default-form-one-column .grid-column{grid-column:1}.template-title-container{font-size:.9375rem;font-weight:600;margin:10px 0}.psdk-default-form-instruction-text{padding-top:.625rem;padding-bottom:.625rem}\n"] }]
-        }], ctorParameters: function () { return [{ type: TemplateUtils }]; }, propDecorators: { pConn$: [{
+        }], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: TemplateUtils }]; }, propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
                 type: Input
@@ -10283,7 +10447,7 @@ class FieldGroupTemplateComponent {
             this.pConn$.setInheritedProp('displayMode', 'LABELS_LEFT');
         }
         this.referenceList = this.configProps$.referenceList;
-        if (this.prevRefLength != this.referenceList.length) {
+        if (this.prevRefLength != this.referenceList?.length) {
             // eslint-disable-next-line sonarjs/no-collapsible-if
             if (!this.readonlyMode) {
                 if (this.referenceList?.length === 0 && this.allowAddEdit !== false) {
@@ -12464,7 +12628,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,
@@ -12991,7 +13155,7 @@ class MultiselectComponent {
         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$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: "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 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"] }] }); }
+    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,
@@ -14368,9 +14532,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: {
@@ -14388,7 +14550,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,
@@ -14850,7 +15012,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,
@@ -15526,7 +15688,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,
@@ -16154,7 +16316,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,
@@ -16663,7 +16825,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,
@@ -16694,7 +16856,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,
@@ -16936,7 +17098,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();
         }
@@ -17300,7 +17462,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,
@@ -18131,7 +18293,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,
@@ -18335,5 +18497,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, 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 };
+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