@pega/angular-sdk-components 0.242.1 → 0.242.3

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, forwardRef, Injectable, Inject, ViewChild, ViewContainerRef, Directive, HostListener } from '@angular/core';
+import { EventEmitter, Component, Input, Output, forwardRef, Injectable, Inject, Directive, ViewChild, ViewContainerRef, HostListener } from '@angular/core';
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3$1 from '@angular/material/button';
@@ -44,9 +44,9 @@ import { HttpHeaders, HttpParams } from '@angular/common/http';
 import * as i5$3 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { NgxCurrencyInputMode, NgxCurrencyDirective } from 'ngx-currency';
-import { MomentDateModule } from '@angular/material-moment-adapter';
 import utc from 'dayjs/plugin/utc';
 import tzone from 'dayjs/plugin/timezone';
+import { MomentDateModule } from '@angular/material-moment-adapter';
 import * as i8$1 from '@danielmoncada/angular-datetime-picker';
 import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angular-datetime-picker';
 import * as i6$2 from '@angular/material/select';
@@ -1790,7 +1790,7 @@ class DeferLoadComponent {
                 }
             };
             const configObject = PCore.createPConnect(config);
-            configObject.getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+            configObject.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
             this.loadedPConn$ = ReferenceComponent.normalizePConn(configObject.getPConnect());
             this.componentName$ = this.loadedPConn$.getComponentName();
             if (this.deferLoadId) {
@@ -2056,6 +2056,7 @@ class FlowContainerComponent extends FlowContainerBaseComponent {
         // with init, force children to be loaded of global pConn
         this.initComponent(true);
         this.initContainer();
+        this.checkAndUpdate();
         PCore.getPubSubUtils().subscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL, () => {
             this.handleCancel();
         }, 'cancelAssignment');
@@ -2339,7 +2340,9 @@ class FlowContainerComponent extends FlowContainerBaseComponent {
     }
     showCaseMessages() {
         this.caseMessages$ = this.localizedVal(this.pConn$.getValue('caseMessages'), this.localeCategory);
-        if (this.caseMessages$ || !this.hasAssignments()) {
+        // caseMessages's behavior has changed in 24.2, and hence it doesn't let Optional Action work.
+        // Changing the below condition for now. Was: (theCaseMessages || !hasAssignments())
+        if (!this.hasAssignments()) {
             this.bHasCaseMessages$ = true;
             this.bShowConfirm = true;
             this.checkSvg$ = this.utils.getImageSrc('check', this.utils.getSDKStaticContentUrl());
@@ -2360,6 +2363,7 @@ class FlowContainerComponent extends FlowContainerBaseComponent {
     updateFlowContainerChildren() {
         // routingInfo was added as component prop in populateAdditionalProps
         const routingInfo = this.angularPConnect.getComponentProp(this, 'routingInfo');
+        this.confirm_pconn = null;
         let loadingInfo;
         try {
             // @ts-ignore - Property 'getLoadingStatus' is private and only accessible within class 'C11nEnv'
@@ -2454,7 +2458,6 @@ class FlowContainerComponent extends FlowContainerBaseComponent {
             control.markAsTouched();
         });
     }
-    // eslint-disable-next-line sonarjs/no-identical-functions
     topViewRefresh() {
         Object.values(this.formGroup$.controls).forEach(control => {
             control.markAsTouched();
@@ -2486,11 +2489,11 @@ class FlowContainerComponent extends FlowContainerBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.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: "18.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          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(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatCardModule) }, { kind: "component", type: i0.forwardRef(() => i5$1.MatCard), selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.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          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 && confirm_pconn\">\n    <component-mapper name=\"View\" [props]=\"{ formGroup$, pConn$: confirm_pconn }\"></component-mapper>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatCardModule) }, { kind: "component", type: i0.forwardRef(() => i5$1.MatCard), selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.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        *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          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" }]
+            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          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 && confirm_pconn\">\n    <component-mapper name=\"View\" [props]=\"{ formGroup$, pConn$: confirm_pconn }\"></component-mapper>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: ProgressSpinnerService }, { type: i4.FormBuilder }, { type: i0.NgZone }, { type: Utils }], propDecorators: { pConn$: [{
                 type: Input
             }] } });
@@ -3222,6 +3225,8 @@ class RootContainerComponent {
                 context: myContext
             }
         });
+        // clear out hasViewContainer
+        sessionStorage.setItem('hasViewContainer', 'false');
         this.mConn$ = configObjModal.getPConnect();
         // First thing in initialization is registering and subscribing to the AngularPConnect service
         this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
@@ -3428,11 +3433,11 @@ class StagesComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: StagesComponent, deps: [{ token: AngularPConnectService }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: StagesComponent, isStandalone: true, selector: "app-stages", inputs: { pConn$: "pConn$" }, ngImport: i0, template: "<div class=\"psdk-stages-bar\">\n  <div class=\"psdk-stages-chevron\" *ngFor=\"let stage of arStageResults$\">\n    <div *ngIf=\"stage.visited_status == 'completed'\" class=\"psdk-stages-inner-past\">\n      <img class=\"psdk-stages-icon\" src=\"{{ checkSvgIcon$ }}\" />{{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}\n    </div>\n    <div *ngIf=\"stage.visited_status == 'active'\" class=\"psdk-stages-inner-present\">\n      {{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}\n    </div>\n    <div *ngIf=\"stage.visited_status == 'future'\" class=\"psdk-stages-inner-future\">\n      {{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}\n    </div>\n  </div>\n</div>\n\n<div class=\"psdk-stages-divider\"></div>\n", styles: [".psdk-stages{padding:.625rem 0rem}.psdk-stages-span span{padding:.3125rem;font-weight:700;font-size:1.5rem}.psdk-stages-div{display:inline-flex;padding:.3125rem;font-weight:700;font-size:1.3rem;color:var(--app-neutral-color)}.psdk-stages-past{color:var(--app-primary-color);padding-right:.3125rem}.psdk-stages-present{color:var(--app-secondary-color);padding-right:.3125rem}.psdk-stages-future{color:var(--app-neutral-color);padding-right:.3125rem}.psdk-stages-full{display:block}.psdk-stages-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-stages-icon{width:1.4rem;display:inline-block;vertical-align:top}.psdk-stages-bar{margin:1rem 0rem;background-color:var(--app-form-color);border-radius:.5rem;border:.0625rem solid var(--app-neutral-light-color);overflow:hidden;height:2rem;display:flex}.psdk-stages-chevron{position:relative;padding:1rem;display:flex;justify-content:center;align-items:center;max-width:100%;min-width:0px;flex-grow:1;flex-shrink:1}.psdk-stages-chevron:not(:last-child):after{content:\"\";position:absolute;display:block;z-index:2;width:1.75rem;right:-.4375rem;background:inherit;border-style:solid;border-color:#cfcfcf;border-width:.0625rem .0625rem 0px 0px;border-radius:0px .3125rem 0px 0px;transform:rotate(45deg) skew(15deg,15deg);height:2rem}.psdk-stages-inner-past{color:var(--app-inverse-form-color);font-size:1rem}.psdk-stages-inner-present{color:var(--app-primary-color);font-weight:700;font-size:1rem}.psdk-stages-inner-future{color:var(--app-neutral-color);font-size:1rem}\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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: StagesComponent, isStandalone: true, selector: "app-stages", inputs: { pConn$: "pConn$" }, ngImport: i0, template: "<div class=\"psdk-stages-bar\">\n  <div class=\"psdk-stages-chevron\" *ngFor=\"let stage of arStageResults$\">\n    <div *ngIf=\"stage.visited_status == 'completed'\" class=\"psdk-stages-inner-past\">\n      <img class=\"psdk-stages-icon\" src=\"{{ checkSvgIcon$ }}\" />{{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}\n    </div>\n    <div *ngIf=\"stage.visited_status == 'active'\" class=\"psdk-stages-inner-present\">\n      {{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}\n    </div>\n    <div *ngIf=\"stage.visited_status == 'future'\" class=\"psdk-stages-inner-future\">\n      {{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}\n    </div>\n  </div>\n</div>\n\n<div class=\"psdk-stages-divider\"></div>\n", styles: [".psdk-stages{padding:.625rem 0rem}.psdk-stages-span span{padding:.3125rem;font-weight:700;font-size:1.5rem}.psdk-stages-div{display:inline-flex;padding:.3125rem;font-weight:700;font-size:1.3rem;color:var(--app-neutral-color)}.psdk-stages-past{color:var(--app-primary-color);padding-right:.3125rem}.psdk-stages-present{color:var(--app-secondary-color);padding-right:.3125rem}.psdk-stages-future{color:var(--app-neutral-color);padding-right:.3125rem}.psdk-stages-full{display:block}.psdk-stages-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-stages-icon{width:1.4rem;display:inline-block;vertical-align:top}.psdk-stages-bar{margin:1rem 0rem;background-color:var(--app-form-color);border-radius:.5rem;border:.0625rem solid var(--app-neutral-light-color);overflow:hidden;display:flex;flex-wrap:wrap}.psdk-stages-chevron{position:relative;padding:.5rem;display:flex;justify-content:center;align-items:center;max-width:100%;min-width:0px;flex-grow:1;flex-shrink:1}.psdk-stages-chevron:not(:last-child):after{content:\"\";position:absolute;display:block;z-index:2;width:1.75rem;right:-.4375rem;background:inherit;border-style:solid;border-color:#cfcfcf;border-width:.0625rem .0625rem 0px 0px;border-radius:0px .3125rem 0px 0px;transform:rotate(45deg) skew(15deg,15deg);height:2rem}.psdk-stages-inner-past{color:var(--app-inverse-form-color);font-size:1rem}.psdk-stages-inner-present{color:var(--app-primary-color);font-weight:700;font-size:1rem}.psdk-stages-inner-future{color:var(--app-neutral-color);font-size:1rem}\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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: StagesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-stages', standalone: true, imports: [CommonModule], template: "<div class=\"psdk-stages-bar\">\n  <div class=\"psdk-stages-chevron\" *ngFor=\"let stage of arStageResults$\">\n    <div *ngIf=\"stage.visited_status == 'completed'\" class=\"psdk-stages-inner-past\">\n      <img class=\"psdk-stages-icon\" src=\"{{ checkSvgIcon$ }}\" />{{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}\n    </div>\n    <div *ngIf=\"stage.visited_status == 'active'\" class=\"psdk-stages-inner-present\">\n      {{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}\n    </div>\n    <div *ngIf=\"stage.visited_status == 'future'\" class=\"psdk-stages-inner-future\">\n      {{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}\n    </div>\n  </div>\n</div>\n\n<div class=\"psdk-stages-divider\"></div>\n", styles: [".psdk-stages{padding:.625rem 0rem}.psdk-stages-span span{padding:.3125rem;font-weight:700;font-size:1.5rem}.psdk-stages-div{display:inline-flex;padding:.3125rem;font-weight:700;font-size:1.3rem;color:var(--app-neutral-color)}.psdk-stages-past{color:var(--app-primary-color);padding-right:.3125rem}.psdk-stages-present{color:var(--app-secondary-color);padding-right:.3125rem}.psdk-stages-future{color:var(--app-neutral-color);padding-right:.3125rem}.psdk-stages-full{display:block}.psdk-stages-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-stages-icon{width:1.4rem;display:inline-block;vertical-align:top}.psdk-stages-bar{margin:1rem 0rem;background-color:var(--app-form-color);border-radius:.5rem;border:.0625rem solid var(--app-neutral-light-color);overflow:hidden;height:2rem;display:flex}.psdk-stages-chevron{position:relative;padding:1rem;display:flex;justify-content:center;align-items:center;max-width:100%;min-width:0px;flex-grow:1;flex-shrink:1}.psdk-stages-chevron:not(:last-child):after{content:\"\";position:absolute;display:block;z-index:2;width:1.75rem;right:-.4375rem;background:inherit;border-style:solid;border-color:#cfcfcf;border-width:.0625rem .0625rem 0px 0px;border-radius:0px .3125rem 0px 0px;transform:rotate(45deg) skew(15deg,15deg);height:2rem}.psdk-stages-inner-past{color:var(--app-inverse-form-color);font-size:1rem}.psdk-stages-inner-present{color:var(--app-primary-color);font-weight:700;font-size:1rem}.psdk-stages-inner-future{color:var(--app-neutral-color);font-size:1rem}\n"] }]
+            args: [{ selector: 'app-stages', standalone: true, imports: [CommonModule], template: "<div class=\"psdk-stages-bar\">\n  <div class=\"psdk-stages-chevron\" *ngFor=\"let stage of arStageResults$\">\n    <div *ngIf=\"stage.visited_status == 'completed'\" class=\"psdk-stages-inner-past\">\n      <img class=\"psdk-stages-icon\" src=\"{{ checkSvgIcon$ }}\" />{{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}\n    </div>\n    <div *ngIf=\"stage.visited_status == 'active'\" class=\"psdk-stages-inner-present\">\n      {{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}\n    </div>\n    <div *ngIf=\"stage.visited_status == 'future'\" class=\"psdk-stages-inner-future\">\n      {{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}\n    </div>\n  </div>\n</div>\n\n<div class=\"psdk-stages-divider\"></div>\n", styles: [".psdk-stages{padding:.625rem 0rem}.psdk-stages-span span{padding:.3125rem;font-weight:700;font-size:1.5rem}.psdk-stages-div{display:inline-flex;padding:.3125rem;font-weight:700;font-size:1.3rem;color:var(--app-neutral-color)}.psdk-stages-past{color:var(--app-primary-color);padding-right:.3125rem}.psdk-stages-present{color:var(--app-secondary-color);padding-right:.3125rem}.psdk-stages-future{color:var(--app-neutral-color);padding-right:.3125rem}.psdk-stages-full{display:block}.psdk-stages-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-stages-icon{width:1.4rem;display:inline-block;vertical-align:top}.psdk-stages-bar{margin:1rem 0rem;background-color:var(--app-form-color);border-radius:.5rem;border:.0625rem solid var(--app-neutral-light-color);overflow:hidden;display:flex;flex-wrap:wrap}.psdk-stages-chevron{position:relative;padding:.5rem;display:flex;justify-content:center;align-items:center;max-width:100%;min-width:0px;flex-grow:1;flex-shrink:1}.psdk-stages-chevron:not(:last-child):after{content:\"\";position:absolute;display:block;z-index:2;width:1.75rem;right:-.4375rem;background:inherit;border-style:solid;border-color:#cfcfcf;border-width:.0625rem .0625rem 0px 0px;border-radius:0px .3125rem 0px 0px;transform:rotate(45deg) skew(15deg,15deg);height:2rem}.psdk-stages-inner-past{color:var(--app-inverse-form-color);font-size:1rem}.psdk-stages-inner-present{color:var(--app-primary-color);font-weight:700;font-size:1rem}.psdk-stages-inner-future{color:var(--app-neutral-color);font-size:1rem}\n"] }]
         }], ctorParameters: () => [{ type: AngularPConnectService }, { type: Utils }], propDecorators: { pConn$: [{
                 type: Input
             }] } });
@@ -3727,11 +3732,11 @@ class ViewComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ViewComponent, deps: [{ token: AngularPConnectService }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: ViewComponent, isStandalone: true, selector: "app-view", inputs: { pConn$: "pConn$", formGroup$: "formGroup$", displayOnlyFA$: "displayOnlyFA$" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"visibility$ !== false\" class=\"ng-view-top\">\n  <div *ngIf=\"showLabel$ && label$ && templateName$ !== 'SimpleTable' && templateName$ !== 'DefaultForm'\" class=\"template-title-container\">\n    <span>{{ label$ }}</span>\n  </div>\n\n  <ng-container *ngIf=\"templateName$; else noTemplate\">\n    <div>\n      <component-mapper\n        [name]=\"templateName$\"\n        [props]=\"{ formGroup$, pConn$, displayOnlyFA$ }\"\n        errorMsg=\"View template not recognized: [{{ templateName$ }}]\"\n      ></component-mapper>\n    </div>\n  </ng-container>\n\n  <ng-template #noTemplate>\n    <div *ngIf=\"displayOnlyFA$; else displayAll\">\n      <div *ngFor=\"let kid of arChildren$\">\n        <div [ngSwitch]=\"kid.getPConnect().getComponentName()\">\n          <component-mapper\n            [name]=\"kid.getPConnect().getComponentName()\"\n            [props]=\"{ pConn$: kid.getPConnect() }\"\n            errorMsg=\"View Missing (displayOnlyFA): {{ kid.getPConnect().getComponentName() }}\"\n          ></component-mapper>\n        </div>\n      </div>\n    </div>\n    <ng-template #displayAll>\n      <div *ngFor=\"let kid of arChildren$\">\n        <component-mapper\n          [name]=\"kid.getPConnect().getComponentName()\"\n          [props]=\"{ pConn$: kid.getPConnect() }\"\n          errorMsg=\"View Missing (displayAll): {{ kid.getPConnect().getComponentName() }}\"\n        ></component-mapper>\n      </div>\n    </ng-template>\n  </ng-template>\n</div>\n", styles: ["h3{margin-left:.8rem}.ng-view-top{padding:0}.template-title-container{display:flex;justify-content:space-between;align-items:center;font-size:.9375rem;font-weight:600;padding:1rem 0}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgSwitch), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: ViewComponent, isStandalone: true, selector: "app-view", inputs: { pConn$: "pConn$", formGroup$: "formGroup$", displayOnlyFA$: "displayOnlyFA$" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"visibility$ !== false\" class=\"ng-view-top\">\n  <div *ngIf=\"showLabel$ && label$ && templateName$ !== 'SimpleTable' && templateName$ !== 'DefaultForm'\" class=\"template-title-container\">\n    <span>{{ label$ }}</span>\n  </div>\n\n  <ng-container *ngIf=\"templateName$; else noTemplate\">\n    <div>\n      <component-mapper\n        [name]=\"templateName$\"\n        [props]=\"{ formGroup$, pConn$, displayOnlyFA$ }\"\n        errorMsg=\"View template not recognized: [{{ templateName$ }}]\"\n      ></component-mapper>\n    </div>\n  </ng-container>\n\n  <ng-template #noTemplate>\n    <div *ngFor=\"let kid of arChildren$\">\n      <component-mapper\n        [name]=\"kid.getPConnect().getComponentName()\"\n        [props]=\"{ pConn$: kid.getPConnect() }\"\n        errorMsg=\"View Missing (displayAll): {{ kid.getPConnect().getComponentName() }}\"\n      ></component-mapper>\n    </div>\n  </ng-template>\n</div>\n", styles: ["h3{margin-left:.8rem}.ng-view-top{padding:0}.template-title-container{display:flex;justify-content:space-between;align-items:center;font-size:.9375rem;font-weight:600;padding:1rem 0}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-view', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"visibility$ !== false\" class=\"ng-view-top\">\n  <div *ngIf=\"showLabel$ && label$ && templateName$ !== 'SimpleTable' && templateName$ !== 'DefaultForm'\" class=\"template-title-container\">\n    <span>{{ label$ }}</span>\n  </div>\n\n  <ng-container *ngIf=\"templateName$; else noTemplate\">\n    <div>\n      <component-mapper\n        [name]=\"templateName$\"\n        [props]=\"{ formGroup$, pConn$, displayOnlyFA$ }\"\n        errorMsg=\"View template not recognized: [{{ templateName$ }}]\"\n      ></component-mapper>\n    </div>\n  </ng-container>\n\n  <ng-template #noTemplate>\n    <div *ngIf=\"displayOnlyFA$; else displayAll\">\n      <div *ngFor=\"let kid of arChildren$\">\n        <div [ngSwitch]=\"kid.getPConnect().getComponentName()\">\n          <component-mapper\n            [name]=\"kid.getPConnect().getComponentName()\"\n            [props]=\"{ pConn$: kid.getPConnect() }\"\n            errorMsg=\"View Missing (displayOnlyFA): {{ kid.getPConnect().getComponentName() }}\"\n          ></component-mapper>\n        </div>\n      </div>\n    </div>\n    <ng-template #displayAll>\n      <div *ngFor=\"let kid of arChildren$\">\n        <component-mapper\n          [name]=\"kid.getPConnect().getComponentName()\"\n          [props]=\"{ pConn$: kid.getPConnect() }\"\n          errorMsg=\"View Missing (displayAll): {{ kid.getPConnect().getComponentName() }}\"\n        ></component-mapper>\n      </div>\n    </ng-template>\n  </ng-template>\n</div>\n", styles: ["h3{margin-left:.8rem}.ng-view-top{padding:0}.template-title-container{display:flex;justify-content:space-between;align-items:center;font-size:.9375rem;font-weight:600;padding:1rem 0}\n"] }]
+            args: [{ selector: 'app-view', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"visibility$ !== false\" class=\"ng-view-top\">\n  <div *ngIf=\"showLabel$ && label$ && templateName$ !== 'SimpleTable' && templateName$ !== 'DefaultForm'\" class=\"template-title-container\">\n    <span>{{ label$ }}</span>\n  </div>\n\n  <ng-container *ngIf=\"templateName$; else noTemplate\">\n    <div>\n      <component-mapper\n        [name]=\"templateName$\"\n        [props]=\"{ formGroup$, pConn$, displayOnlyFA$ }\"\n        errorMsg=\"View template not recognized: [{{ templateName$ }}]\"\n      ></component-mapper>\n    </div>\n  </ng-container>\n\n  <ng-template #noTemplate>\n    <div *ngFor=\"let kid of arChildren$\">\n      <component-mapper\n        [name]=\"kid.getPConnect().getComponentName()\"\n        [props]=\"{ pConn$: kid.getPConnect() }\"\n        errorMsg=\"View Missing (displayAll): {{ kid.getPConnect().getComponentName() }}\"\n      ></component-mapper>\n    </div>\n  </ng-template>\n</div>\n", styles: ["h3{margin-left:.8rem}.ng-view-top{padding:0}.template-title-container{display:flex;justify-content:space-between;align-items:center;font-size:.9375rem;font-weight:600;padding:1rem 0}\n"] }]
         }], ctorParameters: () => [{ type: AngularPConnectService }, { type: Utils }], propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
@@ -3799,17 +3804,20 @@ class ViewContainerComponent {
             dispatchObject: this.dispatchObject,
             visible: !PCore.checkIfSemanticURL()
         };
-        containerMgr.initializeContainers({
-            type: mode === CONTAINER_TYPE.MULTIPLE ? CONTAINER_TYPE.MULTIPLE : CONTAINER_TYPE.SINGLE
-        });
-        if (mode === CONTAINER_TYPE.MULTIPLE && limit) {
-            /* NOTE: setContainerLimit use is temporary. It is a non-public, unsupported API. */
-            PCore.getContainerUtils().setContainerLimit(`${APP.APP}/${name}`, limit);
-        }
-        if (!PCore.checkIfSemanticURL())
-            containerMgr.addContainerItem(this.pConn$);
-        if (!this.displayOnlyFA$)
-            configureBrowserBookmark(this.pConn$);
+        if (sessionStorage.getItem('hasViewContainer') == 'false') {
+            containerMgr.initializeContainers({
+                type: mode === CONTAINER_TYPE.MULTIPLE ? CONTAINER_TYPE.MULTIPLE : CONTAINER_TYPE.SINGLE
+            });
+            if (mode === CONTAINER_TYPE.MULTIPLE && limit) {
+                /* NOTE: setContainerLimit use is temporary. It is a non-public, unsupported API. */
+                PCore.getContainerUtils().setContainerLimit(`${APP.APP}/${name}`, limit);
+            }
+            if (!PCore.checkIfSemanticURL())
+                containerMgr.addContainerItem(this.pConn$);
+            if (!this.displayOnlyFA$)
+                configureBrowserBookmark(this.pConn$);
+            sessionStorage.setItem('hasViewContainer', 'true');
+        }
         // cannot call checkAndUpdate becasue first time through, will call updateSelf and that is incorrect (causes issues).
         // however, need angularPConnect to be initialized with currentProps for future updates, so calling shouldComponentUpdate directly
         // without checking to update here in init, will initialize and this is correct
@@ -4161,6 +4169,8 @@ class AutoCompleteComponent {
             this.value$ = index > -1 ? this.options$[index].value : this.configProps$.value;
         }
         this.setPropertyValuesFromProps();
+        this.actionsApi = this.pConn$.getActionsApi();
+        this.propName = this.pConn$.getStateProps().value;
         const context = this.pConn$.getContextName();
         const { columns, datasource } = this.generateColumnsAndDataSource();
         if (columns) {
@@ -4293,11 +4303,13 @@ class AutoCompleteComponent {
         // this works - this.pConn$.setValue( this.componentReference, this.fieldControl.value);
         // PConnect wants to use changeHandler for onChange
         // this.angularPConnect.changeHandler( this, event);
-        this.filterValue = event.target.value;
-        this.angularPConnectData.actions?.onChange(this, event);
+        const value = event.target.value;
+        this.filterValue = value;
+        handleEvent(this.actionsApi, 'change', this.propName, value);
     }
     optionChanged(event) {
-        this.angularPConnectData.actions?.onChange(this, event);
+        const value = event?.option?.value;
+        handleEvent(this.actionsApi, 'change', this.propName, value);
     }
     fieldOnBlur(event) {
         let key = '';
@@ -4307,9 +4319,7 @@ class AutoCompleteComponent {
             key = index > -1 ? (key = this.options$[index].key) : el.value;
         }
         const value = key;
-        const actionsApi = this.pConn$?.getActionsApi();
-        const propName = this.pConn$?.getStateProps().value;
-        handleEvent(actionsApi, 'changeNblur', propName, value);
+        handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
         if (this.configProps$?.onRecordChange) {
             el.value = value;
             this.configProps$.onRecordChange(event);
@@ -4575,8 +4585,8 @@ class CheckBoxComponent {
             }
             this.caption$ = this.configProps$.caption;
             this.helperText = this.configProps$.helperText;
-            this.trueLabel$ = this.configProps$.trueLabel;
-            this.falseLabel$ = this.configProps$.falseLabel;
+            this.trueLabel$ = this.configProps$.trueLabel || 'Yes';
+            this.falseLabel$ = this.configProps$.falseLabel || 'No';
             // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
             setTimeout(() => {
                 if (this.configProps$.required != null) {
@@ -4621,14 +4631,16 @@ class CheckBoxComponent {
     fieldOnChange(event) {
         event.value = event.checked;
         handleEvent(this.actionsApi, 'changeNblur', this.propName, event.checked);
+        this.pConn$.clearErrorMessages({
+            property: this.propName
+        });
     }
     fieldOnBlur(event) {
         if (this.selectionMode === 'multi') {
             this.pConn$.getValidationApi().validate(this.selectedvalues, this.selectionList);
         }
         else {
-            event.value = event.checked;
-            this.angularPConnectData.actions?.onBlur(this, event);
+            this.pConn$.getValidationApi().validate(event.target.checked);
         }
     }
     handleChangeMultiMode(event, element) {
@@ -5720,233 +5732,6 @@ const getCurrencyCharacters = (inISOCode) => {
     return theCurrencyChars;
 };
 
-class CurrencyComponent {
-    constructor(angularPConnect, cdRef, utils) {
-        this.angularPConnect = angularPConnect;
-        this.cdRef = cdRef;
-        this.utils = utils;
-        // Used with AngularPConnect
-        this.angularPConnectData = {};
-        this.label$ = '';
-        this.bRequired$ = false;
-        this.bReadonly$ = false;
-        this.bDisabled$ = false;
-        this.bVisible$ = true;
-        this.displayMode$ = '';
-        this.bHasForm$ = true;
-        this.componentReference = '';
-        this.currencyISOCode = 'USD';
-        this.currencyOptions = {};
-        this.fieldControl = new FormControl(null, { updateOn: 'blur' });
-    }
-    ngOnInit() {
-        // First thing in initialization is registering and subscribing to the AngularPConnect service
-        this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
-        this.controlName$ = this.angularPConnect.getComponentID(this);
-        // Then, continue on with other initialization
-        // call updateSelf when initializing
-        // this.updateSelf();
-        this.checkAndUpdate();
-        if (this.formGroup$) {
-            // add control to formGroup
-            this.formGroup$.addControl(this.controlName$, this.fieldControl);
-            this.fieldControl.setValue(this.value$);
-            this.bHasForm$ = true;
-        }
-        else {
-            this.bReadonly$ = true;
-            this.bHasForm$ = false;
-        }
-    }
-    ngOnDestroy() {
-        if (this.formGroup$) {
-            this.formGroup$.removeControl(this.controlName$);
-        }
-        if (this.angularPConnectData.unsubscribeFn) {
-            this.angularPConnectData.unsubscribeFn();
-        }
-    }
-    // Callback passed when subscribing to store change
-    onStateChange() {
-        this.checkAndUpdate();
-    }
-    checkAndUpdate() {
-        // Should always check the bridge to see if the component should
-        // update itself (re-render)
-        const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
-        // ONLY call updateSelf when the component should update
-        if (bUpdateSelf) {
-            this.updateSelf();
-        }
-    }
-    // updateSelf
-    updateSelf() {
-        // starting very simple...
-        // moved this from ngOnInit() and call this from there instead...
-        this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
-        this.testId = this.configProps$.testId;
-        this.label$ = this.configProps$.label;
-        this.displayMode$ = this.configProps$.displayMode;
-        this.inputMode = NgxCurrencyInputMode.Natural;
-        let nValue = this.configProps$.value;
-        if (nValue) {
-            if (typeof nValue === 'string') {
-                nValue = parseFloat(nValue);
-            }
-            this.value$ = nValue;
-        }
-        this.helperText = this.configProps$.helperText;
-        this.placeholder = this.configProps$.placeholder || '';
-        const currencyISOCode = this.configProps$?.currencyISOCode ?? '';
-        const theSymbols = getCurrencyCharacters(currencyISOCode);
-        this.currSym = theSymbols.theCurrencySymbol;
-        this.currSep = theSymbols.theDigitGroupSeparator;
-        this.currDec = theSymbols.theDecimalIndicator;
-        // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
-        setTimeout(() => {
-            if (this.configProps$.required != null) {
-                this.bRequired$ = this.utils.getBooleanValue(this.configProps$.required);
-            }
-            this.cdRef.detectChanges();
-        });
-        if (this.configProps$.visibility != null) {
-            this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
-        }
-        // disabled
-        if (this.configProps$.disabled != undefined) {
-            this.bDisabled$ = this.utils.getBooleanValue(this.configProps$.disabled);
-        }
-        if (this.bDisabled$) {
-            this.fieldControl.disable();
-        }
-        else {
-            this.fieldControl.enable();
-        }
-        if (this.configProps$.readOnly != null) {
-            this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
-        }
-        if (this.configProps$.currencyISOCode != null) {
-            this.currencyISOCode = this.configProps$.currencyISOCode;
-        }
-        this.decimalPrecision = this.configProps$?.allowDecimals ? 2 : 0;
-        this.componentReference = this.pConn$.getStateProps().value;
-        // trigger display of error message with field control
-        if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
-            const timer = interval(100).subscribe(() => {
-                this.fieldControl.setErrors({ message: true });
-                this.fieldControl.markAsTouched();
-                timer.unsubscribe();
-            });
-        }
-    }
-    fieldOnBlur(event) {
-        const actionsApi = this.pConn$?.getActionsApi();
-        const propName = this.pConn$?.getStateProps().value;
-        let value = event?.target?.value;
-        value = value?.substring(1);
-        if (this.currSep === ',') {
-            value = value.replace(/,/g, '');
-        }
-        else {
-            value = value?.replace(/\./g, '');
-            value = value?.replace(/,/g, '.');
-        }
-        handleEvent(actionsApi, 'changeNblur', propName, value);
-    }
-    getErrorMessage() {
-        let errMessage = '';
-        // look for validation messages for json, pre-defined or just an error pushed from workitem (400)
-        if (this.fieldControl.hasError('message')) {
-            errMessage = this.angularPConnectData.validateMessage ?? '';
-            return errMessage;
-        }
-        if (this.fieldControl.hasError('required')) {
-            errMessage = 'You must enter a value';
-        }
-        else if (this.fieldControl.errors) {
-            errMessage = this.fieldControl.errors.toString();
-        }
-        return errMessage;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.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: "18.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=\"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          <input\n            style=\"margin-left: 5px; margin-top: -1rem\"\n            type=\"text\"\n            matInput\n            currencyMask\n            [options]=\"{\n              prefix: currSym,\n              thousands: currSep,\n              decimal: currDec,\n              align: 'left',\n              nullable: true,\n              precision: decimalPrecision,\n              inputMode: inputMode\n            }\"\n            [placeholder]=\"placeholder\"\n            [formControlName]=\"controlName$\"\n            [required]=\"bRequired$\"\n            [formControl]=\"fieldControl\"\n            [attr.data-test-id]=\"testId\"\n            (blur)=\"fieldOnBlur($event)\"\n            [readonly]=\"bReadonly$\"\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(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i4.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i4.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i4.FormControlName), selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i5.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i5.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i5.MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => 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(() => NgxCurrencyDirective), selector: "input[currencyMask]", inputs: ["currencyMask", "options"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: CurrencyComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-currency', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, NgxCurrencyDirective, forwardRef(() => ComponentMapperComponent)], 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=\"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          <input\n            style=\"margin-left: 5px; margin-top: -1rem\"\n            type=\"text\"\n            matInput\n            currencyMask\n            [options]=\"{\n              prefix: currSym,\n              thousands: currSep,\n              decimal: currDec,\n              align: 'left',\n              nullable: true,\n              precision: decimalPrecision,\n              inputMode: inputMode\n            }\"\n            [placeholder]=\"placeholder\"\n            [formControlName]=\"controlName$\"\n            [required]=\"bRequired$\"\n            [formControl]=\"fieldControl\"\n            [attr.data-test-id]=\"testId\"\n            (blur)=\"fieldOnBlur($event)\"\n            [readonly]=\"bReadonly$\"\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"] }]
-        }], ctorParameters: () => [{ type: AngularPConnectService }, { type: i0.ChangeDetectorRef }, { type: Utils }], propDecorators: { pConn$: [{
-                type: Input
-            }], formGroup$: [{
-                type: Input
-            }] } });
-
-const dateFormatInfoDefault = {
-    dateFormatString: 'MM/DD/YYYY',
-    dateFormatStringLong: 'MMM DD, YYYY',
-    dateFormatStringLC: 'mm/dd/yyyy',
-    dateFormatMask: '__/__/____'
-};
-const getDateFormatInfo = () => {
-    const localizedVal = PCore?.getLocaleUtils().getLocaleValue;
-    const localeCategory = 'CosmosFields';
-    const theDateFormatInfo = dateFormatInfoDefault;
-    const theLocale = getLocale$1();
-    // NOTE: this date was chosen since it has a day larger than 12. If you change it,
-    //  you'll need to change the indexOf values below!
-    const theTestDate = new Date(Date.parse('30 November 2023 12:00:00 GMT'));
-    const theTestDateLocaleString = new Intl.DateTimeFormat(theLocale).format(theTestDate);
-    // console.log(`theLocale: ${theLocale} theTestDateLocaleString: ${theTestDateLocaleString}`);
-    // Build the format string based on where '11' (mm), '30' (dd), and '2023' (yyyy) are
-    //  Example: US locations are 0, 3, 6 but for NL locations are 3, 0, 6
-    const locMM = theTestDateLocaleString.indexOf('11');
-    const locDD = theTestDateLocaleString.indexOf('30');
-    const locYYYY = theTestDateLocaleString.indexOf('2023');
-    // If localized placeholder exists for one of day/month/year then show it otherwise fall back to ddmmyyyy
-    const localizedPlaceholderExists = localizedVal('month_placeholder', localeCategory) !== 'month_placeholder' ||
-        localizedVal('day_placeholder', localeCategory) !== 'day_placeholder' ||
-        localizedVal('year_placeholder', localeCategory) !== 'year_placeholder';
-    const arrPieces = [
-        {
-            loc: locMM,
-            format: 'MM',
-            longFormat: 'MMM',
-            placeholder: localizedPlaceholderExists ? localizedVal('month_placeholder', localeCategory) : 'mm',
-            mask: '__',
-            separator: theTestDateLocaleString[locMM + 2]
-        },
-        {
-            loc: locDD,
-            format: 'DD',
-            longFormat: 'DD',
-            placeholder: localizedPlaceholderExists ? localizedVal('day_placeholder', localeCategory) : 'dd',
-            mask: '__',
-            separator: theTestDateLocaleString[locDD + 2]
-        },
-        {
-            loc: locYYYY,
-            format: 'YYYY',
-            longFormat: 'YYYY',
-            placeholder: localizedPlaceholderExists ? localizedVal('year_placeholder', localeCategory) : 'yyyy',
-            mask: '____',
-            separator: theTestDateLocaleString[locYYYY + 4]
-        }
-    ];
-    // Sort the associative array by order of appearance (loc) of each piece
-    arrPieces.sort((a, b) => {
-        if (a.loc < b.loc)
-            return -1;
-        if (a.loc > b.loc)
-            return 1;
-        return 0;
-    });
-    // Construct the structure to return...
-    theDateFormatInfo.dateFormatString = `${arrPieces[0].format}${arrPieces[0].separator}${arrPieces[1].format}${arrPieces[1].separator}${arrPieces[2].format}`;
-    theDateFormatInfo.dateFormatStringLong = `${arrPieces[0].longFormat} ${arrPieces[1].longFormat}, ${arrPieces[2].longFormat}`;
-    theDateFormatInfo.dateFormatStringLC = `${arrPieces[0].placeholder}${arrPieces[0].separator}${arrPieces[1].placeholder}${arrPieces[1].separator}${arrPieces[2].placeholder}`;
-    theDateFormatInfo.dateFormatMask = `${arrPieces[0].mask}${arrPieces[0].separator}${arrPieces[1].mask}${arrPieces[1].separator}${arrPieces[2].mask}`;
-    return theDateFormatInfo;
-};
-
 function Boolean(value, { allowEmpty = true, tick = '', cross = '' } = {}) {
     if ((!allowEmpty && !value) || value === false || value?.toString()?.toLowerCase() === 'false' || value === 0 || value === '0') {
         return cross || '';
@@ -5977,10 +5762,8 @@ function getLocale(locale = '') {
     // fallback
     return Intl.DateTimeFormat().resolvedOptions().locale;
 }
-function getCurrentTimezone(timezone = 'America/New_York') {
-    if (timezone)
-        return timezone;
-    return PCore?.getLocaleUtils?.().getTimeZoneInUse?.();
+function getCurrentTimezone() {
+    return PCore?.getEnvironmentInfo?.().getTimeZone?.();
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -6083,7 +5866,7 @@ function TimeFormatter(value, options) {
         tempDate.setHours(hours);
         tempDate.setMinutes(minutes);
         tempDate.setSeconds(seconds);
-        return tempDate.toLocaleTimeString(locale);
+        return tempDate.toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit' });
     }
     return DateFormatter(value, options);
 }
@@ -6096,9 +5879,9 @@ var DateFormatter$1 = {
     }),
     'DateTime-Since': value => DateFormatter(value, { type: 'fromNow' }),
     'Time-Only': (value, options) => TimeFormatter(value, {
-        ...options,
         type: 'customFormat',
-        format: 'hh:mm:ss A'
+        format: 'hh:mm:ss A',
+        ...options
     }),
     convertToTimezone: (value, options) => {
         return value && options && options.timezone
@@ -6119,8 +5902,6 @@ var index = {
     ...DateFormatter$1
 };
 function getDateObject(text) {
-    if (text instanceof Date)
-        return text;
     // TODO - cleanup formatters util functions as DX APIs are returning values per ISO std now.
     const timeStamp = text.replace(/-/g, '');
     const isDateTime = timeStamp.indexOf('GMT') !== -1;
@@ -6174,6 +5955,12 @@ function format(value, type, options = {}) {
             formattedValue = Currency.Currency(value, params);
             break;
         }
+        case 'percentage': {
+            const defaultOptions = { locale: getLocale(), decPlaces: 2 };
+            const params = { ...defaultOptions, ...options };
+            formattedValue = Currency.Percentage(value, params);
+            break;
+        }
         case 'decimal': {
             const defaultOptions = { locale: getLocale(), decPlaces: 2 };
             const params = { ...defaultOptions, ...options };
@@ -6186,40 +5973,286 @@ function format(value, type, options = {}) {
             formattedValue = Currency.Integer(value, params);
             break;
         }
-        case 'date': {
-            const defaultOptions = {
-                format: 'MMM DD, YYYY',
-                timezone: getCurrentTimezone()
-            };
-            const params = { ...defaultOptions, ...options };
-            formattedValue = DateFormatter$1.Date(parseDateInISO(value), params);
-            break;
+        case 'date': {
+            const defaultOptions = {
+                format: 'MMM DD, YYYY',
+                timezone: getCurrentTimezone()
+            };
+            const params = { ...defaultOptions, ...options };
+            formattedValue = DateFormatter$1.Date(parseDateInISO(value), params);
+            break;
+        }
+        case 'datetime': {
+            const defaultOptions = {
+                format: 'MMM DD, YYYY h:mm A',
+                timezone: getCurrentTimezone()
+            };
+            const params = { ...defaultOptions, ...options };
+            formattedValue = DateFormatter$1.Date(parseDateInISO(value), params);
+            break;
+        }
+        case 'boolean':
+        case 'checkbox': {
+            formattedValue = Boolean$1.TrueFalse(value, { allowEmpty: false, ...options });
+            break;
+        }
+        case 'userreference': {
+            formattedValue = value.userName;
+            break;
+        }
+        case 'timeonly': {
+            const defaultOptions = {
+                locale: getLocale(),
+                format: 'hh:mm A',
+                timezone: getCurrentTimezone()
+            };
+            const params = { ...defaultOptions, ...options };
+            formattedValue = DateFormatter$1['Time-Only'](value, params);
+            break;
+        }
+        default:
+            formattedValue = value;
+    }
+    return formattedValue;
+}
+
+class CurrencyComponent {
+    constructor(angularPConnect, cdRef, utils) {
+        this.angularPConnect = angularPConnect;
+        this.cdRef = cdRef;
+        this.utils = utils;
+        // Used with AngularPConnect
+        this.angularPConnectData = {};
+        this.label$ = '';
+        this.bRequired$ = false;
+        this.bReadonly$ = false;
+        this.bDisabled$ = false;
+        this.bVisible$ = true;
+        this.displayMode$ = '';
+        this.bHasForm$ = true;
+        this.componentReference = '';
+        this.currencyISOCode = 'USD';
+        this.currencyOptions = {};
+        this.fieldControl = new FormControl(null, { updateOn: 'blur' });
+    }
+    ngOnInit() {
+        // First thing in initialization is registering and subscribing to the AngularPConnect service
+        this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+        this.controlName$ = this.angularPConnect.getComponentID(this);
+        // Then, continue on with other initialization
+        // call updateSelf when initializing
+        // this.updateSelf();
+        this.checkAndUpdate();
+        if (this.formGroup$) {
+            // add control to formGroup
+            this.formGroup$.addControl(this.controlName$, this.fieldControl);
+            this.fieldControl.setValue(this.value$);
+            this.bHasForm$ = true;
+        }
+        else {
+            this.bReadonly$ = true;
+            this.bHasForm$ = false;
+        }
+    }
+    ngOnDestroy() {
+        if (this.formGroup$) {
+            this.formGroup$.removeControl(this.controlName$);
+        }
+        if (this.angularPConnectData.unsubscribeFn) {
+            this.angularPConnectData.unsubscribeFn();
+        }
+    }
+    // Callback passed when subscribing to store change
+    onStateChange() {
+        this.checkAndUpdate();
+    }
+    checkAndUpdate() {
+        // Should always check the bridge to see if the component should
+        // update itself (re-render)
+        const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
+        // ONLY call updateSelf when the component should update
+        if (bUpdateSelf) {
+            this.updateSelf();
+        }
+    }
+    // updateSelf
+    updateSelf() {
+        // starting very simple...
+        // moved this from ngOnInit() and call this from there instead...
+        this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
+        this.testId = this.configProps$.testId;
+        this.label$ = this.configProps$.label;
+        this.displayMode$ = this.configProps$.displayMode;
+        this.inputMode = NgxCurrencyInputMode.Natural;
+        let nValue = this.configProps$.value;
+        if (nValue) {
+            if (typeof nValue === 'string') {
+                nValue = parseFloat(nValue);
+            }
+            this.value$ = nValue;
+        }
+        this.helperText = this.configProps$.helperText;
+        this.placeholder = this.configProps$.placeholder || '';
+        const currencyISOCode = this.configProps$?.currencyISOCode ?? '';
+        const theSymbols = getCurrencyCharacters(currencyISOCode);
+        this.currSym = theSymbols.theCurrencySymbol;
+        this.currSep = theSymbols.theDigitGroupSeparator;
+        this.currDec = theSymbols.theDecimalIndicator;
+        this.formatter = this.configProps$.formatter;
+        if (this.displayMode$ === 'DISPLAY_ONLY' || this.displayMode$ === 'STACKED_LARGE_VAL') {
+            const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
+            if (this.formatter) {
+                this.formattedValue = format(this.value$, this.formatter.toLowerCase(), theCurrencyOptions);
+            }
+            else {
+                this.formattedValue = format(this.value$, 'currency', theCurrencyOptions);
+            }
+        }
+        // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
+        setTimeout(() => {
+            if (this.configProps$.required != null) {
+                this.bRequired$ = this.utils.getBooleanValue(this.configProps$.required);
+            }
+            this.cdRef.detectChanges();
+        });
+        if (this.configProps$.visibility != null) {
+            this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
+        }
+        // disabled
+        if (this.configProps$.disabled != undefined) {
+            this.bDisabled$ = this.utils.getBooleanValue(this.configProps$.disabled);
+        }
+        if (this.bDisabled$) {
+            this.fieldControl.disable();
+        }
+        else {
+            this.fieldControl.enable();
+        }
+        if (this.configProps$.readOnly != null) {
+            this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
+        }
+        if (this.configProps$.currencyISOCode != null) {
+            this.currencyISOCode = this.configProps$.currencyISOCode;
+        }
+        this.decimalPrecision = this.configProps$?.allowDecimals ? 2 : 0;
+        this.componentReference = this.pConn$.getStateProps().value;
+        // trigger display of error message with field control
+        if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
+            const timer = interval(100).subscribe(() => {
+                this.fieldControl.setErrors({ message: true });
+                this.fieldControl.markAsTouched();
+                timer.unsubscribe();
+            });
+        }
+    }
+    fieldOnBlur(event) {
+        const actionsApi = this.pConn$?.getActionsApi();
+        const propName = this.pConn$?.getStateProps().value;
+        let value = event?.target?.value;
+        value = value?.substring(1);
+        if (this.currSep === ',') {
+            value = value.replace(/,/g, '');
         }
-        case 'datetime': {
-            const defaultOptions = {
-                format: 'MMM DD, YYYY h:mm A',
-                timezone: getCurrentTimezone()
-            };
-            const params = { ...defaultOptions, ...options };
-            formattedValue = DateFormatter$1.Date(parseDateInISO(value), params);
-            break;
+        else {
+            value = value?.replace(/\./g, '');
+            value = value?.replace(/,/g, '.');
         }
-        case 'boolean':
-        case 'checkbox': {
-            formattedValue = Boolean$1.TrueFalse(value, { allowEmpty: false, ...options });
-            break;
+        handleEvent(actionsApi, 'changeNblur', propName, value);
+    }
+    getErrorMessage() {
+        let errMessage = '';
+        // look for validation messages for json, pre-defined or just an error pushed from workitem (400)
+        if (this.fieldControl.hasError('message')) {
+            errMessage = this.angularPConnectData.validateMessage ?? '';
+            return errMessage;
         }
-        case 'userreference': {
-            formattedValue = value.userName;
-            break;
+        if (this.fieldControl.hasError('required')) {
+            errMessage = 'You must enter a value';
         }
-        default:
-            formattedValue = value;
+        else if (this.fieldControl.errors) {
+            errMessage = this.fieldControl.errors.toString();
+        }
+        return errMessage;
     }
-    return formattedValue;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.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: "18.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$: formattedValue, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"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          <input\n            style=\"margin-left: 5px; margin-top: -1rem\"\n            type=\"text\"\n            matInput\n            currencyMask\n            [options]=\"{\n              prefix: currSym,\n              thousands: currSep,\n              decimal: currDec,\n              align: 'left',\n              nullable: true,\n              precision: decimalPrecision,\n              inputMode: inputMode\n            }\"\n            [placeholder]=\"placeholder\"\n            [formControlName]=\"controlName$\"\n            [required]=\"bRequired$\"\n            [formControl]=\"fieldControl\"\n            [attr.data-test-id]=\"testId\"\n            (blur)=\"fieldOnBlur($event)\"\n            [readonly]=\"bReadonly$\"\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(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i4.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i4.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i4.FormControlName), selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i5.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i5.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i5.MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => 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(() => NgxCurrencyDirective), selector: "input[currencyMask]", inputs: ["currencyMask", "options"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: CurrencyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-currency', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, NgxCurrencyDirective, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$: formattedValue, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"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          <input\n            style=\"margin-left: 5px; margin-top: -1rem\"\n            type=\"text\"\n            matInput\n            currencyMask\n            [options]=\"{\n              prefix: currSym,\n              thousands: currSep,\n              decimal: currDec,\n              align: 'left',\n              nullable: true,\n              precision: decimalPrecision,\n              inputMode: inputMode\n            }\"\n            [placeholder]=\"placeholder\"\n            [formControlName]=\"controlName$\"\n            [required]=\"bRequired$\"\n            [formControl]=\"fieldControl\"\n            [attr.data-test-id]=\"testId\"\n            (blur)=\"fieldOnBlur($event)\"\n            [readonly]=\"bReadonly$\"\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"] }]
+        }], ctorParameters: () => [{ type: AngularPConnectService }, { type: i0.ChangeDetectorRef }, { type: Utils }], propDecorators: { pConn$: [{
+                type: Input
+            }], formGroup$: [{
+                type: Input
+            }] } });
+
+const dateFormatInfoDefault = {
+    dateFormatString: 'MM/DD/YYYY',
+    dateFormatStringLong: 'MMM DD, YYYY',
+    dateFormatStringLC: 'mm/dd/yyyy',
+    dateFormatMask: '__/__/____'
+};
+const getDateFormatInfo = () => {
+    const localizedVal = PCore?.getLocaleUtils().getLocaleValue;
+    const localeCategory = 'CosmosFields';
+    const theDateFormatInfo = dateFormatInfoDefault;
+    const theLocale = getLocale$1();
+    // NOTE: this date was chosen since it has a day larger than 12. If you change it,
+    //  you'll need to change the indexOf values below!
+    const theTestDate = new Date(Date.parse('30 November 2023 12:00:00 GMT'));
+    const theTestDateLocaleString = new Intl.DateTimeFormat(theLocale).format(theTestDate);
+    // console.log(`theLocale: ${theLocale} theTestDateLocaleString: ${theTestDateLocaleString}`);
+    // Build the format string based on where '11' (mm), '30' (dd), and '2023' (yyyy) are
+    //  Example: US locations are 0, 3, 6 but for NL locations are 3, 0, 6
+    const locMM = theTestDateLocaleString.indexOf('11');
+    const locDD = theTestDateLocaleString.indexOf('30');
+    const locYYYY = theTestDateLocaleString.indexOf('2023');
+    // If localized placeholder exists for one of day/month/year then show it otherwise fall back to ddmmyyyy
+    const localizedPlaceholderExists = localizedVal('month_placeholder', localeCategory) !== 'month_placeholder' ||
+        localizedVal('day_placeholder', localeCategory) !== 'day_placeholder' ||
+        localizedVal('year_placeholder', localeCategory) !== 'year_placeholder';
+    const arrPieces = [
+        {
+            loc: locMM,
+            format: 'MM',
+            longFormat: 'MMM',
+            placeholder: localizedPlaceholderExists ? localizedVal('month_placeholder', localeCategory) : 'mm',
+            mask: '__',
+            separator: theTestDateLocaleString[locMM + 2]
+        },
+        {
+            loc: locDD,
+            format: 'DD',
+            longFormat: 'DD',
+            placeholder: localizedPlaceholderExists ? localizedVal('day_placeholder', localeCategory) : 'dd',
+            mask: '__',
+            separator: theTestDateLocaleString[locDD + 2]
+        },
+        {
+            loc: locYYYY,
+            format: 'YYYY',
+            longFormat: 'YYYY',
+            placeholder: localizedPlaceholderExists ? localizedVal('year_placeholder', localeCategory) : 'yyyy',
+            mask: '____',
+            separator: theTestDateLocaleString[locYYYY + 4]
+        }
+    ];
+    // Sort the associative array by order of appearance (loc) of each piece
+    arrPieces.sort((a, b) => {
+        if (a.loc < b.loc)
+            return -1;
+        if (a.loc > b.loc)
+            return 1;
+        return 0;
+    });
+    // Construct the structure to return...
+    theDateFormatInfo.dateFormatString = `${arrPieces[0].format}${arrPieces[0].separator}${arrPieces[1].format}${arrPieces[1].separator}${arrPieces[2].format}`;
+    theDateFormatInfo.dateFormatStringLong = `${arrPieces[0].longFormat} ${arrPieces[1].longFormat}, ${arrPieces[2].longFormat}`;
+    theDateFormatInfo.dateFormatStringLC = `${arrPieces[0].placeholder}${arrPieces[0].separator}${arrPieces[1].placeholder}${arrPieces[1].separator}${arrPieces[2].placeholder}`;
+    theDateFormatInfo.dateFormatMask = `${arrPieces[0].mask}${arrPieces[0].separator}${arrPieces[1].mask}${arrPieces[1].separator}${arrPieces[2].mask}`;
+    return theDateFormatInfo;
+};
 
-/* eslint-disable max-classes-per-file */
 class MyFormat {
     constructor() {
         this.theDateFormat = getDateFormatInfo();
@@ -6307,26 +6340,14 @@ class DateComponent {
         // starting very simple...
         // moved this from ngOnInit() and call this from there instead...
         this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
-        if (this.configProps$.value != undefined) {
-            let sDateValue = '';
-            sDateValue = this.configProps$.value;
-            if (sDateValue != '') {
-                if (typeof sDateValue === 'object') {
-                    sDateValue = sDateValue.toISOString();
-                }
-                else if (sDateValue.indexOf('/') < 0) {
-                    // if we have the "pega" format, then for display, convert to standard format (US)
-                    // sDateValue = this.formatDate(sDateValue);
-                    sDateValue = this.utils.generateDate(sDateValue, 'Date-Long-Custom-YYYY');
-                }
-                this.value$ = new Date(sDateValue);
-            }
-        }
+        this.value$ = this.configProps$.value;
         this.testId = this.configProps$.testId;
         this.label$ = this.configProps$.label;
         this.displayMode$ = this.configProps$.displayMode;
         this.helperText = this.configProps$.helperText;
         this.placeholder = this.configProps$.placeholder || '';
+        this.actionsApi = this.pConn$.getActionsApi();
+        this.propName = this.pConn$.getStateProps().value;
         // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
         setTimeout(() => {
             if (this.configProps$.required != null) {
@@ -6334,6 +6355,11 @@ class DateComponent {
             }
             this.cdRef.detectChanges();
         });
+        if (this.displayMode$ === 'DISPLAY_ONLY' || this.displayMode$ === 'STACKED_LARGE_VAL') {
+            this.formattedValue$ = format(this.value$, 'date', {
+                format: this.theDateFormat.dateFormatString
+            });
+        }
         if (this.configProps$.visibility != null) {
             this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
         }
@@ -6362,19 +6388,11 @@ class DateComponent {
     }
     fieldOnDateChange(event) {
         // this comes from the date pop up
-        if (typeof event.value === 'object') {
-            // convert date to pega "date" format
-            event.value = event.value?.toISOString();
-        }
-        this.angularPConnectData.actions?.onChange(this, { value: event.value });
-    }
-    fieldOnBlur(event) {
-        // PConnect wants to use eventHandler for onBlur
-        if (typeof event.value === 'object') {
-            // convert date to pega "date" format
-            event.value = event.value?.toISOString();
-        }
-        this.angularPConnectData.actions?.onBlur(this, { value: event.value });
+        const value = event?.target?.value.format('YYYY-MM-DD');
+        handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+        this.pConn$.clearErrorMessages({
+            property: this.propName
+        });
     }
     hasErrors() {
         return this.fieldControl.status === 'INVALID';
@@ -6394,13 +6412,8 @@ class DateComponent {
         }
         return errMessage;
     }
-    getFormattedValue() {
-        return format(this.value$, 'date', {
-            format: this.theDateFormat.dateFormatString
-        });
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.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: "18.2.12", type: DateComponent, isStandalone: true, selector: "app-date", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, providers: [{ provide: MAT_DATE_FORMATS, useClass: MyFormat }], 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(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i4.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i4.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i5.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i5.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i5.MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i0.forwardRef(() => i5.MatSuffix), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => i6$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(() => MatDatepickerModule) }, { kind: "component", type: i0.forwardRef(() => i4$2.MatDatepicker), selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i0.forwardRef(() => i4$2.MatDatepickerInput), selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i0.forwardRef(() => i4$2.MatDatepickerToggle), selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatNativeDateModule) }, { kind: "ngmodule", type: i0.forwardRef(() => MomentDateModule) }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: DateComponent, isStandalone: true, selector: "app-date", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, providers: [{ provide: MAT_DATE_FORMATS, useClass: MyFormat }], ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$: formattedValue$, 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          #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        />\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(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i4.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i4.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i5.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i5.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i5.MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i0.forwardRef(() => i5.MatSuffix), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => i6$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(() => MatDatepickerModule) }, { kind: "component", type: i0.forwardRef(() => i4$2.MatDatepicker), selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i0.forwardRef(() => i4$2.MatDatepickerInput), selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i0.forwardRef(() => i4$2.MatDatepickerToggle), selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatNativeDateModule) }, { kind: "ngmodule", type: i0.forwardRef(() => MomentDateModule) }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: DateComponent, decorators: [{
             type: Component,
@@ -6413,7 +6426,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
                         MatNativeDateModule,
                         MomentDateModule,
                         forwardRef(() => ComponentMapperComponent)
-                    ], providers: [{ provide: MAT_DATE_FORMATS, useClass: MyFormat }], 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"] }]
+                    ], providers: [{ provide: MAT_DATE_FORMATS, useClass: MyFormat }], template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$: formattedValue$, 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          #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        />\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"] }]
         }], ctorParameters: () => [{ type: AngularPConnectService }, { type: i0.ChangeDetectorRef }, { type: Utils }, { type: MyFormat, decorators: [{
                     type: Inject,
                     args: [MAT_DATE_FORMATS]
@@ -6508,6 +6521,11 @@ class DateTimeComponent {
             }
             this.cdRef.detectChanges();
         });
+        if (this.displayMode$ === 'DISPLAY_ONLY' || this.displayMode$ === 'STACKED_LARGE_VAL') {
+            this.formattedValue$ = format(this.value$, 'datetime', {
+                format: `${this.theDateFormat.dateFormatString} hh:mm a`
+            });
+        }
         if (this.configProps$.visibility != null) {
             this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
         }
@@ -6525,6 +6543,8 @@ class DateTimeComponent {
             this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
         }
         this.componentReference = this.pConn$.getStateProps().value;
+        this.actionsApi = this.pConn$.getActionsApi();
+        this.propName = this.pConn$.getStateProps().value;
         // trigger display of error message with field control
         if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
             const timer = interval(100).subscribe(() => {
@@ -6540,14 +6560,7 @@ class DateTimeComponent {
             // convert date to pega "date" format
             event.value = event.value?.toISOString();
         }
-        this.angularPConnectData.actions?.onChange(this, { value: event.value });
-    }
-    fieldOnBlur(event) {
-        if (typeof event.value === 'object') {
-            // convert date to pega "date" format
-            event.value = event.value?.toISOString();
-        }
-        this.angularPConnectData.actions?.onBlur(this, event);
+        handleEvent(this.actionsApi, 'changeNblur', this.propName, event.value);
     }
     getErrorMessage() {
         let errMessage = '';
@@ -6565,7 +6578,7 @@ class DateTimeComponent {
         return errMessage;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.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: "18.2.12", type: DateTimeComponent, isStandalone: true, selector: "app-date-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          [owlDateTime]=\"dtPicker\"\n          [attr.data-test-id]=\"testId\"\n          [placeholder]=\"placeholder\"\n          [formControl]=\"fieldControl\"\n          (blur)=\"fieldOnBlur($event)\"\n          (dateTimeChange)=\"fieldOnDateChange($event)\"\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n        />\n        <mat-datepicker-toggle matSuffix [owlDateTimeTrigger]=\"dtPicker\"></mat-datepicker-toggle>\n        <owl-date-time #dtPicker></owl-date-time>\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(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i4.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i4.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i5.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i5.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i5.MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i0.forwardRef(() => i5.MatSuffix), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => i6$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(() => MatDatepickerModule) }, { kind: "component", type: i0.forwardRef(() => i4$2.MatDatepickerToggle), selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: i0.forwardRef(() => OwlDateTimeModule) }, { kind: "directive", type: i0.forwardRef(() => i8$1.OwlDateTimeTriggerDirective), selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { kind: "directive", type: i0.forwardRef(() => i8$1.OwlDateTimeInputDirective), selector: "input[owlDateTime]", inputs: ["required", "owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "rangeSeparator", "value", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i0.forwardRef(() => i8$1.OwlDateTimeComponent), selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "endAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "beforePickerOpen", "afterPickerOpen", "yearSelected", "monthSelected", "dateSelected"], exportAs: ["owlDateTime"] }, { kind: "ngmodule", type: i0.forwardRef(() => OwlNativeDateTimeModule) }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: DateTimeComponent, isStandalone: true, selector: "app-date-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$: formattedValue$, 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          [owlDateTime]=\"dtPicker\"\n          [attr.data-test-id]=\"testId\"\n          [placeholder]=\"placeholder\"\n          [formControl]=\"fieldControl\"\n          (dateTimeChange)=\"fieldOnDateChange($event)\"\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n        />\n        <mat-datepicker-toggle matSuffix [owlDateTimeTrigger]=\"dtPicker\"></mat-datepicker-toggle>\n        <owl-date-time #dtPicker></owl-date-time>\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(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i4.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i4.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i5.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i5.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i5.MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i0.forwardRef(() => i5.MatSuffix), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => i6$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(() => MatDatepickerModule) }, { kind: "component", type: i0.forwardRef(() => i4$2.MatDatepickerToggle), selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: i0.forwardRef(() => OwlDateTimeModule) }, { kind: "directive", type: i0.forwardRef(() => i8$1.OwlDateTimeTriggerDirective), selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { kind: "directive", type: i0.forwardRef(() => i8$1.OwlDateTimeInputDirective), selector: "input[owlDateTime]", inputs: ["required", "owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "rangeSeparator", "value", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i0.forwardRef(() => i8$1.OwlDateTimeComponent), selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "endAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "beforePickerOpen", "afterPickerOpen", "yearSelected", "monthSelected", "dateSelected"], exportAs: ["owlDateTime"] }, { kind: "ngmodule", type: i0.forwardRef(() => OwlNativeDateTimeModule) }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: DateTimeComponent, decorators: [{
             type: Component,
@@ -6578,7 +6591,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
                         OwlDateTimeModule,
                         OwlNativeDateTimeModule,
                         forwardRef(() => ComponentMapperComponent)
-                    ], 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          [owlDateTime]=\"dtPicker\"\n          [attr.data-test-id]=\"testId\"\n          [placeholder]=\"placeholder\"\n          [formControl]=\"fieldControl\"\n          (blur)=\"fieldOnBlur($event)\"\n          (dateTimeChange)=\"fieldOnDateChange($event)\"\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n        />\n        <mat-datepicker-toggle matSuffix [owlDateTimeTrigger]=\"dtPicker\"></mat-datepicker-toggle>\n        <owl-date-time #dtPicker></owl-date-time>\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"] }]
+                    ], template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$: formattedValue$, 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          [owlDateTime]=\"dtPicker\"\n          [attr.data-test-id]=\"testId\"\n          [placeholder]=\"placeholder\"\n          [formControl]=\"fieldControl\"\n          (dateTimeChange)=\"fieldOnDateChange($event)\"\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n        />\n        <mat-datepicker-toggle matSuffix [owlDateTimeTrigger]=\"dtPicker\"></mat-datepicker-toggle>\n        <owl-date-time #dtPicker></owl-date-time>\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"] }]
         }], ctorParameters: () => [{ type: AngularPConnectService }, { type: i0.ChangeDetectorRef }, { type: Utils }], propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
@@ -6667,11 +6680,11 @@ class DecimalComponent {
         this.currSep = showGroupSeparators ? theSymbols.theDigitGroupSeparator : '';
         const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
         this.formatter = this.configProps$.formatter;
-        if (this.formatter === 'Currency') {
+        if (this.formatter) {
             this.formattedValue = format(this.value$, this.formatter.toLowerCase(), theCurrencyOptions);
         }
         else {
-            this.formattedValue = format(this.value$, this.pConn$.getComponentName()?.toLowerCase(), theCurrencyOptions);
+            this.formattedValue = format(this.value$, 'decimal', theCurrencyOptions);
         }
         // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
         setTimeout(() => {
@@ -6859,9 +6872,10 @@ class DropdownComponent {
         if (this.value$ === '' && !this.bReadonly$) {
             this.value$ = 'Select';
         }
-        const propName = this.pConn$.getStateProps().value;
+        this.actionsApi = this.pConn$.getActionsApi();
+        this.propName = this.pConn$.getStateProps().value;
         const className = this.pConn$.getCaseInfo().getClassName();
-        const refName = propName?.slice(propName.lastIndexOf('.') + 1);
+        const refName = this.propName?.slice(this.propName.lastIndexOf('.') + 1);
         this.fieldMetadata = this.configProps$.fieldMetadata;
         const metaData = Array.isArray(this.fieldMetadata) ? this.fieldMetadata.filter(field => field?.classID === className)[0] : this.fieldMetadata;
         let displayName = metaData?.datasource?.propertyForDisplayText;
@@ -6887,16 +6901,13 @@ class DropdownComponent {
         if (event?.value === 'Select') {
             event.value = '';
         }
-        const actionsApi = this.pConn$?.getActionsApi();
-        const propName = this.pConn$?.getStateProps().value;
-        handleEvent(actionsApi, 'changeNblur', propName, event.value);
+        handleEvent(this.actionsApi, 'changeNblur', this.propName, event.value);
         if (this.configProps$?.onRecordChange) {
             this.configProps$.onRecordChange(event);
         }
-    }
-    fieldOnBlur(event) {
-        // PConnect wants to use eventHandler for onBlur
-        this.angularPConnectData.actions?.onBlur(this, event);
+        this.pConn$.clearErrorMessages({
+            property: this.propName
+        });
     }
     getLocalizedOptionValue(opt) {
         return this.pConn$.getLocalizedValue(opt.value, this.localePath, this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName));
@@ -7020,6 +7031,8 @@ class EmailComponent {
         if (this.configProps$.readOnly != null) {
             this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
         }
+        this.actionsApi = this.pConn$.getActionsApi();
+        this.propName = this.pConn$.getStateProps().value;
         this.componentReference = this.pConn$.getStateProps().value;
         // trigger display of error message with field control
         if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
@@ -7031,11 +7044,15 @@ class EmailComponent {
         }
     }
     fieldOnChange(event) {
-        this.angularPConnectData.actions?.onChange(this, event);
+        const value = event?.target?.value;
+        handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+        this.pConn$.clearErrorMessages({
+            property: this.propName
+        });
     }
     fieldOnBlur(event) {
-        // PConnect wants to use eventHandler for onBlur
-        this.angularPConnectData.actions?.onBlur(this, event);
+        const value = event?.target?.value;
+        handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
     }
     getErrorMessage() {
         let errMessage = '';
@@ -7098,12 +7115,12 @@ class GroupComponent {
         if (this.configProps$.visibility === undefined) {
             this.visibility$ = this.pConn$.getComputedVisibility();
         }
-        if (this.configProps$.displayMode === 'LABELS_LEFT') {
+        if (this.configProps$.displayMode === 'DISPLAY_ONLY') {
             if (this.configProps$.visibility === undefined)
                 this.visibility$ = true;
             this.arChildren$.forEach(child => {
                 const pConn = child.getPConnect();
-                pConn.setInheritedProp('displayMode', 'LABELS_LEFT');
+                pConn.setInheritedProp('displayMode', 'DISPLAY_ONLY');
                 pConn.setInheritedProp('readOnly', true);
                 return child;
             });
@@ -7194,6 +7211,8 @@ class IntegerComponent {
         }
         this.helperText = this.configProps$.helperText;
         this.placeholder = this.configProps$.placeholder || '';
+        this.actionsApi = this.pConn$.getActionsApi();
+        this.propName = this.pConn$.getStateProps().value;
         // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
         setTimeout(() => {
             if (this.configProps$.required != null) {
@@ -7227,12 +7246,14 @@ class IntegerComponent {
             });
         }
     }
-    fieldOnChange(event) {
-        this.angularPConnectData.actions?.onChange(this, event);
+    fieldOnChange() {
+        this.pConn$.clearErrorMessages({
+            property: this.propName
+        });
     }
     fieldOnBlur(event) {
-        // PConnect wants to use eventHandler for onBlur
-        this.angularPConnectData.actions?.onBlur(this, event);
+        const value = event?.target?.value;
+        handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
     }
     getErrorMessage() {
         // field control gets error message from here
@@ -7251,11 +7272,11 @@ class IntegerComponent {
         return errMessage;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.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: "18.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(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.NumberValueAccessor), selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i0.forwardRef(() => i4.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i4.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i4.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i5.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i5.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i5.MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => 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(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.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()\"\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(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.NumberValueAccessor), selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i0.forwardRef(() => i4.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i4.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i4.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i5.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i5.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i5.MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => 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(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: IntegerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-integer', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)], 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"] }]
+            args: [{ selector: 'app-integer', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)], 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()\"\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"] }]
         }], ctorParameters: () => [{ type: AngularPConnectService }, { type: i0.ChangeDetectorRef }, { type: Utils }], propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
@@ -7364,11 +7385,8 @@ class PercentageComponent {
         this.label$ = this.configProps$.label;
         this.displayMode$ = this.configProps$.displayMode;
         this.inputMode = NgxCurrencyInputMode.Natural;
-        let nValue = this.configProps$.value;
+        const nValue = this.configProps$.value;
         if (nValue) {
-            if (typeof nValue === 'string') {
-                nValue = parseInt(nValue, 10);
-            }
             this.value$ = nValue;
         }
         this.helperText = this.configProps$.helperText;
@@ -7377,6 +7395,11 @@ class PercentageComponent {
         const theSymbols = getCurrencyCharacters('');
         this.currDec = theSymbols.theDecimalIndicator || '2';
         this.currSep = showGroupSeparators ? theSymbols.theDigitGroupSeparator : '';
+        this.actionsApi = this.pConn$.getActionsApi();
+        this.propName = this.pConn$.getStateProps().value;
+        if (this.displayMode$ === 'DISPLAY_ONLY' || this.displayMode$ === 'STACKED_LARGE_VAL') {
+            this.formattedValue = format(nValue, 'percentage');
+        }
         // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
         setTimeout(() => {
             if (this.configProps$.required != null) {
@@ -7411,22 +7434,22 @@ class PercentageComponent {
             });
         }
     }
-    fieldOnChange(event) {
-        this.angularPConnectData.actions?.onChange(this, event);
+    fieldOnChange() {
+        this.pConn$.clearErrorMessages({
+            property: this.propName
+        });
     }
     fieldOnBlur(event) {
-        const actionsApi = this.pConn$?.getActionsApi();
-        const propName = this.pConn$?.getStateProps()?.value;
         let value = event?.target?.value;
         value = value ? value.replace(/%/g, '') : '';
-        if (this.currSep === ',') {
-            value = value.replace(/,/g, '');
-        }
-        else {
+        if (this.currSep === '.') {
             value = value?.replace(/\./g, '');
             value = value?.replace(/,/g, '.');
         }
-        handleEvent(actionsApi, 'changeNblur', propName, value);
+        else {
+            value = value.replace(/,/g, '');
+        }
+        handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
     }
     getErrorMessage() {
         // field control gets error message from here
@@ -7445,11 +7468,11 @@ class PercentageComponent {
         return errMessage;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.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: "18.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=\"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          currencyMask\n          [options]=\"{\n            prefix: '',\n            suffix: '%',\n            thousands: currSep,\n            decimal: currDec,\n            align: 'left',\n            nullable: true,\n            precision: decimalPrecision,\n            inputMode: inputMode\n          }\"\n          [placeholder]=\"placeholder\"\n          step=\".01\"\n          [formControlName]=\"controlName$\"\n          [required]=\"bRequired$\"\n          [formControl]=\"fieldControl\"\n          [attr.data-test-id]=\"testId\"\n          (change)=\"fieldOnChange($event)\"\n          (blur)=\"fieldOnBlur($event)\"\n          [readonly]=\"bReadonly$\"\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(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i4.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i4.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i4.FormControlName), selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i5.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i5.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i5.MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => 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(() => NgxCurrencyDirective), selector: "input[currencyMask]", inputs: ["currencyMask", "options"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.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$: formattedValue, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"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          currencyMask\n          [options]=\"{\n            prefix: '',\n            suffix: '%',\n            thousands: currSep,\n            decimal: currDec,\n            align: 'left',\n            nullable: true,\n            precision: decimalPrecision,\n            inputMode: inputMode\n          }\"\n          [placeholder]=\"placeholder\"\n          step=\".01\"\n          [formControlName]=\"controlName$\"\n          [required]=\"bRequired$\"\n          [formControl]=\"fieldControl\"\n          [attr.data-test-id]=\"testId\"\n          (change)=\"fieldOnChange()\"\n          (blur)=\"fieldOnBlur($event)\"\n          [readonly]=\"bReadonly$\"\n          [value]=\"value$\"\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(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i4.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i4.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i4.FormControlName), selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i5.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i5.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i5.MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => 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(() => NgxCurrencyDirective), selector: "input[currencyMask]", inputs: ["currencyMask", "options"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: PercentageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-percentage', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, NgxCurrencyDirective, forwardRef(() => ComponentMapperComponent)], 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=\"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          currencyMask\n          [options]=\"{\n            prefix: '',\n            suffix: '%',\n            thousands: currSep,\n            decimal: currDec,\n            align: 'left',\n            nullable: true,\n            precision: decimalPrecision,\n            inputMode: inputMode\n          }\"\n          [placeholder]=\"placeholder\"\n          step=\".01\"\n          [formControlName]=\"controlName$\"\n          [required]=\"bRequired$\"\n          [formControl]=\"fieldControl\"\n          [attr.data-test-id]=\"testId\"\n          (change)=\"fieldOnChange($event)\"\n          (blur)=\"fieldOnBlur($event)\"\n          [readonly]=\"bReadonly$\"\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"] }]
+            args: [{ selector: 'app-percentage', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, NgxCurrencyDirective, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$: formattedValue, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"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          currencyMask\n          [options]=\"{\n            prefix: '',\n            suffix: '%',\n            thousands: currSep,\n            decimal: currDec,\n            align: 'left',\n            nullable: true,\n            precision: decimalPrecision,\n            inputMode: inputMode\n          }\"\n          [placeholder]=\"placeholder\"\n          step=\".01\"\n          [formControlName]=\"controlName$\"\n          [required]=\"bRequired$\"\n          [formControl]=\"fieldControl\"\n          [attr.data-test-id]=\"testId\"\n          (change)=\"fieldOnChange()\"\n          (blur)=\"fieldOnBlur($event)\"\n          [readonly]=\"bReadonly$\"\n          [value]=\"value$\"\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"] }]
         }], ctorParameters: () => [{ type: AngularPConnectService }, { type: i0.ChangeDetectorRef }, { type: Utils }], propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
@@ -7528,6 +7551,8 @@ class PhoneComponent {
             this.value$ = this.configProps$.value;
         }
         this.helperText = this.configProps$.helperText;
+        this.actionsApi = this.pConn$.getActionsApi();
+        this.propName = this.pConn$.getStateProps().value;
         // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
         setTimeout(() => {
             if (this.configProps$.required != null) {
@@ -7563,25 +7588,16 @@ class PhoneComponent {
             });
         }
     }
+    fieldOnBlur() {
+        // 'blur' isn't getting fired
+    }
     fieldOnChange() {
         if (this.formGroup$.controls[this.controlName$].value) {
-            const actionsApi = this.pConn$?.getActionsApi();
-            const propName = this.pConn$?.getStateProps().value;
             const value = this.formGroup$.controls[this.controlName$].value;
-            const eventObj = {
-                target: {
-                    value
-                }
-            };
             this.afterBlur = true;
-            this.angularPConnectData.actions?.onChange(this, eventObj);
-            handleEvent(actionsApi, 'blur', propName, value);
+            handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
         }
     }
-    fieldOnBlur(event) {
-        // PConnect wants to use eventHandler for onBlur
-        this.angularPConnectData.actions?.onBlur(this, event);
-    }
     getErrorMessage() {
         let errMessage = '';
         // look for validation messages for json, pre-defined or just an error pushed from workitem (400)
@@ -7598,11 +7614,11 @@ class PhoneComponent {
         return errMessage;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: PhoneComponent, deps: [{ token: AngularPConnectService }, { token: i0.ChangeDetectorRef }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: PhoneComponent, isStandalone: true, selector: "app-phone", 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 #f=\"ngForm\" [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <ngx-mat-intl-tel-input\n          [attr.data-test-id]=\"testId\"\n          [formControl]=\"fieldControl\"\n          [preferredCountries]=\"['us']\"\n          [enablePlaceholder]=\"true\"\n          [enableSearch]=\"true\"\n          (change)=\"fieldOnChange()\"\n          (blur)=\"fieldOnBlur($event)\"\n        >\n        </ngx-mat-intl-tel-input>\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-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}.phone-label-readonly{opacity:54%;font-size:.7rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i4.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i4.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i4.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i4.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i5.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i5.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i5.MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i0.forwardRef(() => NgxMatIntlTelInputComponent), selector: "ngx-mat-intl-tel-input", inputs: ["preferredCountries", "enablePlaceholder", "inputPlaceholder", "cssClass", "name", "onlyCountries", "errorStateMatcher", "enableSearch", "searchPlaceholder", "describedBy", "format", "placeholder", "required", "disabled"], outputs: ["countryChanged"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: PhoneComponent, isStandalone: true, selector: "app-phone", 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 #f=\"ngForm\" [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <ngx-mat-intl-tel-input\n          [attr.data-test-id]=\"testId\"\n          [formControl]=\"fieldControl\"\n          [preferredCountries]=\"['us']\"\n          [enablePlaceholder]=\"true\"\n          [enableSearch]=\"true\"\n          (change)=\"fieldOnChange()\"\n          (blur)=\"fieldOnBlur()\"\n        >\n        </ngx-mat-intl-tel-input>\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-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}.phone-label-readonly{opacity:54%;font-size:.7rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i4.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i4.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i4.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i4.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i5.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i5.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i5.MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i0.forwardRef(() => NgxMatIntlTelInputComponent), selector: "ngx-mat-intl-tel-input", inputs: ["preferredCountries", "enablePlaceholder", "inputPlaceholder", "cssClass", "name", "onlyCountries", "errorStateMatcher", "enableSearch", "searchPlaceholder", "describedBy", "format", "placeholder", "required", "disabled"], outputs: ["countryChanged"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: PhoneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-phone', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, NgxMatIntlTelInputComponent, forwardRef(() => ComponentMapperComponent)], 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 #f=\"ngForm\" [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <ngx-mat-intl-tel-input\n          [attr.data-test-id]=\"testId\"\n          [formControl]=\"fieldControl\"\n          [preferredCountries]=\"['us']\"\n          [enablePlaceholder]=\"true\"\n          [enableSearch]=\"true\"\n          (change)=\"fieldOnChange()\"\n          (blur)=\"fieldOnBlur($event)\"\n        >\n        </ngx-mat-intl-tel-input>\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-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}.phone-label-readonly{opacity:54%;font-size:.7rem}\n"] }]
+            args: [{ selector: 'app-phone', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, NgxMatIntlTelInputComponent, forwardRef(() => ComponentMapperComponent)], 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 #f=\"ngForm\" [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <ngx-mat-intl-tel-input\n          [attr.data-test-id]=\"testId\"\n          [formControl]=\"fieldControl\"\n          [preferredCountries]=\"['us']\"\n          [enablePlaceholder]=\"true\"\n          [enableSearch]=\"true\"\n          (change)=\"fieldOnChange()\"\n          (blur)=\"fieldOnBlur()\"\n        >\n        </ngx-mat-intl-tel-input>\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-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}.phone-label-readonly{opacity:54%;font-size:.7rem}\n"] }]
         }], ctorParameters: () => [{ type: AngularPConnectService }, { type: i0.ChangeDetectorRef }, { type: Utils }], propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
@@ -7715,9 +7731,10 @@ class RadioButtonsComponent {
         }
         this.componentReference = this.pConn$.getStateProps().value;
         this.options$ = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject());
-        const propName = this.pConn$.getStateProps().value;
+        this.actionsApi = this.pConn$.getActionsApi();
+        this.propName = this.pConn$.getStateProps().value;
         const className = this.pConn$.getCaseInfo().getClassName();
-        const refName = propName?.slice(propName.lastIndexOf('.') + 1);
+        const refName = this.propName?.slice(this.propName.lastIndexOf('.') + 1);
         this.fieldMetadata = this.configProps$.fieldMetadata;
         const metaData = Array.isArray(this.fieldMetadata) ? this.fieldMetadata.filter(field => field?.classID === className)[0] : this.fieldMetadata;
         let displayName = metaData?.datasource?.propertyForDisplayText;
@@ -7740,11 +7757,7 @@ 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);
+        handleEvent(this.actionsApi, 'changeNblur', this.propName, event.value);
     }
     getLocalizedOptionValue(opt) {
         return this.pConn$.getLocalizedValue(opt.value, this.localePath, this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName));
@@ -7896,6 +7909,8 @@ class TextAreaComponent {
         this.displayMode$ = this.configProps$.displayMode;
         this.label$ = this.configProps$.label;
         this.helperText = this.configProps$.helperText;
+        this.actionsApi = this.pConn$.getActionsApi();
+        this.propName = this.pConn$.getStateProps().value;
         // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
         setTimeout(() => {
             if (this.configProps$.required != null) {
@@ -7929,13 +7944,14 @@ class TextAreaComponent {
             });
         }
     }
-    fieldOnChange(event) {
-        // PConnect wants to use changeHandler for onChange
-        this.angularPConnectData.actions?.onChange(this, event);
+    fieldOnChange() {
+        this.pConn$.clearErrorMessages({
+            property: this.propName
+        });
     }
     fieldOnBlur(event) {
-        // PConnect wants to use eventHandler for onBlur
-        this.angularPConnectData.actions?.onBlur(this, event);
+        const value = event?.target?.value;
+        handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
     }
     getErrorMessage() {
         // field control gets error message from here
@@ -7954,11 +7970,11 @@ class TextAreaComponent {
         return errMessage;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.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: "18.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(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i4.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i4.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i5.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i5.MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => 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(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.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()\"\n            (blur)=\"fieldOnBlur($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(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i4.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i4.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i5.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i5.MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => 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(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TextAreaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-text-area', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)], 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"] }]
+            args: [{ selector: 'app-text-area', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)], 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()\"\n            (blur)=\"fieldOnBlur($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"] }]
         }], ctorParameters: () => [{ type: AngularPConnectService }, { type: i0.ChangeDetectorRef }, { type: Utils }], propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
@@ -8085,13 +8101,15 @@ class TextComponent {
         return this.utils.generateDateTime(value, 'DateTime-Long-YYYY-Custom');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TextComponent, deps: [{ token: AngularPConnectService }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: TextComponent, isStandalone: true, selector: "app-text", inputs: { pConn$: "pConn$", formatAs$: "formatAs$" }, 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=\"bVisible$ !== false\" class=\"psdk-label-infix-readonly\">\n    <span class=\"psdk-label-wrapper-readonly\">\n      <label class=\"psdk-label-readonly\">{{ label$ }}</label>\n    </span>\n    <div class=\"psdk-data-readonly\">\n      <label *ngIf=\"formatAs$ != 'url'\">{{ formattedValue$ }}</label>\n      <a *ngIf=\"formatAs$ == 'url'\" href=\"{{ formattedUrl$ }}\">{{ formattedValue$ }}</a>\n    </div>\n  </div>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.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-grid-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-details-fields-label{color:var(--app-label-color);margin:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: TextComponent, isStandalone: true, selector: "app-text", inputs: { pConn$: "pConn$", formGroup$: "formGroup$", formatAs$: "formatAs$" }, 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=\"bVisible$ !== false\" class=\"psdk-label-infix-readonly\">\n    <span class=\"psdk-label-wrapper-readonly\">\n      <label class=\"psdk-label-readonly\">{{ label$ }}</label>\n    </span>\n    <div class=\"psdk-data-readonly\">\n      <label *ngIf=\"formatAs$ != 'url'\">{{ formattedValue$ }}</label>\n      <a *ngIf=\"formatAs$ == 'url'\" href=\"{{ formattedUrl$ }}\">{{ formattedValue$ }}</a>\n    </div>\n  </div>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.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-grid-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-details-fields-label{color:var(--app-label-color);margin:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-text', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], 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=\"bVisible$ !== false\" class=\"psdk-label-infix-readonly\">\n    <span class=\"psdk-label-wrapper-readonly\">\n      <label class=\"psdk-label-readonly\">{{ label$ }}</label>\n    </span>\n    <div class=\"psdk-data-readonly\">\n      <label *ngIf=\"formatAs$ != 'url'\">{{ formattedValue$ }}</label>\n      <a *ngIf=\"formatAs$ == 'url'\" href=\"{{ formattedUrl$ }}\">{{ formattedValue$ }}</a>\n    </div>\n  </div>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.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-grid-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-details-fields-label{color:var(--app-label-color);margin:8px 0}\n"] }]
         }], ctorParameters: () => [{ type: AngularPConnectService }, { type: Utils }], propDecorators: { pConn$: [{
                 type: Input
+            }], formGroup$: [{
+                type: Input
             }], formatAs$: [{
                 type: Input
             }] } });
@@ -8229,6 +8247,8 @@ class TextInputComponent {
         this.label$ = this.configProps$.label;
         this.displayMode$ = this.configProps$.displayMode;
         this.componentReference = this.pConn$.getStateProps().value;
+        this.actionsApi = this.pConn$.getActionsApi();
+        this.propName = this.pConn$.getStateProps().value;
         if (this.configProps$.visibility != null) {
             this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
         }
@@ -8263,12 +8283,14 @@ class TextInputComponent {
             });
         }
     }
-    fieldOnChange(event) {
-        this.angularPConnectData.actions?.onChange(this, event);
+    fieldOnChange() {
+        this.pConn$.clearErrorMessages({
+            property: this.propName
+        });
     }
     fieldOnBlur(event) {
-        // PConnect wants to use eventHandler for onBlur
-        this.angularPConnectData.actions?.onBlur(this, event);
+        const value = event?.target?.value;
+        handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
     }
     getErrorMessage() {
         let errMessage = '';
@@ -8286,11 +8308,11 @@ class TextInputComponent {
         return errMessage;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.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: "18.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(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i4.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i4.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i5.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i5.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i5.MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => 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(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.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()\"\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(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i4.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i4.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i5.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i5.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i5.MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => 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(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-text-input', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)], 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"] }]
+            args: [{ selector: 'app-text-input', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)], 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()\"\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"] }]
         }], ctorParameters: () => [{ type: AngularPConnectService }, { type: i0.ChangeDetectorRef }, { type: Utils }], propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
@@ -8367,6 +8389,8 @@ class TimeComponent {
         }
         this.helperText = this.configProps$.helperText;
         this.placeholder = this.configProps$.placeholder || '';
+        this.actionsApi = this.pConn$.getActionsApi();
+        this.propName = this.pConn$.getStateProps().value;
         // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
         setTimeout(() => {
             if (this.configProps$.required != null) {
@@ -8374,6 +8398,11 @@ class TimeComponent {
             }
             this.cdRef.detectChanges();
         });
+        if (this.displayMode$ === 'DISPLAY_ONLY' || this.displayMode$ === 'STACKED_LARGE_VAL') {
+            this.formattedValue$ = format(this.value$, 'timeonly', {
+                format: 'hh:mm a'
+            });
+        }
         if (this.configProps$.visibility != null) {
             this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
         }
@@ -8400,14 +8429,14 @@ class TimeComponent {
             });
         }
     }
-    fieldOnChange(event) {
-        event.value = event.target.value;
-        this.angularPConnectData.actions?.onChange(this, event);
+    fieldOnChange() {
+        this.pConn$.clearErrorMessages({
+            property: this.propName
+        });
     }
     fieldOnBlur(event) {
-        // PConnect wants to use eventHandler for onBlur
-        event.value = event.target.value;
-        this.angularPConnectData.actions?.onBlur(this, event);
+        const value = event?.target?.value;
+        handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
     }
     getErrorMessage() {
         let errMessage = '';
@@ -8425,11 +8454,11 @@ class TimeComponent {
         return errMessage;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.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: "18.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(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i4.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i4.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i5.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i5.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i5.MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => 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(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.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$: formattedValue$, 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()\"\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(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i4.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i4.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i5.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i5.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i5.MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => 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(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TimeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-time', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)], 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"] }]
+            args: [{ selector: 'app-time', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$: formattedValue$, 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()\"\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"] }]
         }], ctorParameters: () => [{ type: AngularPConnectService }, { type: i0.ChangeDetectorRef }, { type: Utils }], propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
@@ -8507,6 +8536,8 @@ class UrlComponent {
         this.displayMode$ = this.configProps$.displayMode;
         this.helperText = this.configProps$.helperText;
         this.placeholder = this.configProps$.placeholder || '';
+        this.actionsApi = this.pConn$.getActionsApi();
+        this.propName = this.pConn$.getStateProps().value;
         // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
         setTimeout(() => {
             if (this.configProps$.required != null) {
@@ -8540,12 +8571,14 @@ class UrlComponent {
             });
         }
     }
-    fieldOnChange(event) {
-        this.angularPConnectData.actions?.onChange(this, event);
+    fieldOnChange() {
+        this.pConn$.clearErrorMessages({
+            property: this.propName
+        });
     }
     fieldOnBlur(event) {
-        // PConnect wants to use eventHandler for onBlur
-        this.angularPConnectData.actions?.onBlur(this, event);
+        const value = event?.target?.value;
+        handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
     }
     getErrorMessage() {
         let errMessage = '';
@@ -8563,11 +8596,11 @@ class UrlComponent {
         return errMessage;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.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: "18.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(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i4.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i4.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i5.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i5.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i5.MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => 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(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.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()\"\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(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i4.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => 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(() => i4.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i4.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i5.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i5.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i5.MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => 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(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: UrlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-url', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)], 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"] }]
+            args: [{ selector: 'app-url', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)], 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()\"\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"] }]
         }], ctorParameters: () => [{ type: AngularPConnectService }, { type: i0.ChangeDetectorRef }, { type: Utils }], propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
@@ -8646,6 +8679,8 @@ class UserReferenceComponent {
         this.displayMode$ = displayMode;
         const { readOnly, required } = props;
         [this.bReadonly$, this.bRequired$] = [readOnly, required].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));
+        this.actionsApi = this.pConn$.getActionsApi();
+        this.propName = this.pConn$.getStateProps().value;
         const isUserNameAvailable = user => {
             return typeof user === 'object' && user !== null && user.userName;
         };
@@ -8691,7 +8726,8 @@ class UserReferenceComponent {
         if (event?.target) {
             this.filterValue = event.target.value;
         }
-        this.angularPConnectData.actions?.onChange(this, event);
+        const value = event?.target?.value;
+        handleEvent(this.actionsApi, 'change', this.propName, value);
     }
     fieldOnBlur(event) {
         let key = '';
@@ -8699,11 +8735,10 @@ 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 = {
+        const value = {
             value: key
         };
-        // PConnect wants to use eventHandler for onBlur
-        this.angularPConnectData.actions?.onChange(this, eve);
+        handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
     }
     getErrorMessage() {
         let errMessage = '';
@@ -8807,14 +8842,14 @@ class ScalarListComponent {
                 type: componentType,
                 config: {
                     value: scalarValue,
-                    displayMode: 'LABELS_LEFT',
+                    displayMode: 'DISPLAY_ONLY',
                     label: this.label$,
                     ...restProps,
                     readOnly: true
                 }
             }, '', 0, {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional;
         });
-        this.isDisplayModeEnabled = ['LABELS_LEFT', 'STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(this.displayMode$);
+        this.isDisplayModeEnabled = ['STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(this.displayMode$);
         this.value$ = this.items;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ScalarListComponent, deps: [{ token: AngularPConnectService }], target: i0.ɵɵFactoryTarget.Component }); }
@@ -8882,6 +8917,8 @@ class RichTextComponent {
         this.placeholder = this.configProps$.placeholder;
         this.info = stateProps?.validatemessage || this.configProps$.helperText;
         this.error = stateProps?.status === 'error';
+        this.actionsApi = this.pConn$.getActionsApi();
+        this.propName = this.pConn$.getStateProps().value;
         if (this.configProps$.required != null) {
             this.bRequired$ = this.utils.getBooleanValue(this.configProps$.required);
         }
@@ -8897,7 +8934,7 @@ class RichTextComponent {
     }
     fieldOnChange() {
         if (this.status === 'error') {
-            const property = this.pConn$.getStateProps().value;
+            const property = this.propName;
             this.pConn$.clearErrorMessages({
                 property,
                 category: '',
@@ -8906,10 +8943,7 @@ class RichTextComponent {
         }
     }
     fieldOnBlur(editorValue) {
-        // PConnect wants to use eventHandler for onBlur
-        const actionsApi = this.pConn$?.getActionsApi();
-        const propName = this.pConn$?.getStateProps()?.value;
-        handleEvent(actionsApi, 'changeNblur', propName, editorValue);
+        handleEvent(this.actionsApi, 'changeNblur', this.propName, editorValue);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: RichTextComponent, deps: [{ token: AngularPConnectService }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: RichTextComponent, isStandalone: true, selector: "app-rich-text", 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$, isHtml$: true }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$; else noEdit\">\n    <div *ngIf=\"bVisible$\">\n      <component-mapper\n        name=\"RichTextEditor\"\n        [props]=\"{ placeholder, required: bRequired$, disabled: bDisabled$, label: label$, readonly: false, error, info, testId, value: value$ }\"\n        [parent]=\"this\"\n        [outputEvents]=\"{ onBlur: fieldOnBlur, onChange: fieldOnChange }\"\n      ></component-mapper>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <div *ngIf=\"bVisible$ !== false\">\n    <component-mapper name=\"RichTextEditor\" [props]=\"{ label: label$, value: value$, readonly: true, testId }\" [parent]=\"this\"></component-mapper>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
@@ -9521,7 +9555,7 @@ class DataReferenceComponent {
         this.refList = this.rawViewMetadata.config.referenceList;
         this.canBeChangedInReviewMode = theConfigProps.allowAndPersistChangesInReviewMode && (displayAs === 'autocomplete' || displayAs === 'dropdown');
         // this.childrenToRender = this.children;
-        this.isDisplayModeEnabled = ['LABELS_LEFT', 'STACKED_LARGE_VAL'].includes(displayMode);
+        this.isDisplayModeEnabled = ['DISPLAY_ONLY', 'STACKED_LARGE_VAL'].includes(displayMode);
         if (this.firstChildMeta?.type !== 'Region') {
             this.firstChildPConnect = this.pConn$.getChildren()[0].getPConnect;
             /* remove refresh When condition from those old view so that it will not be used for runtime */
@@ -9674,6 +9708,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
                 type: Input
             }] } });
 
+class FormTemplateBaseComponent {
+    ngOnDestroy() {
+        PCore.getContextTreeManager().removeContextTreeNode(this.pConn$.getContextName());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormTemplateBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.12", type: FormTemplateBaseComponent, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormTemplateBaseComponent, decorators: [{
+            type: Directive
+        }] });
+
 class TemplateUtils {
     /**
      * Determine if the current view is the view of the case step/assignment.
@@ -9728,8 +9773,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
                 }]
         }] });
 
-class DefaultFormComponent {
+class DefaultFormComponent extends FormTemplateBaseComponent {
     constructor(templateUtils) {
+        super();
         this.templateUtils = templateUtils;
         this.NO_HEADER_TEMPLATES = [
             'SubTabs',
@@ -9771,7 +9817,7 @@ class DefaultFormComponent {
         this.arChildren$ = ReferenceComponent.normalizePConnArray(kids[0].getPConnect().getChildren());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: DefaultFormComponent, deps: [{ token: TemplateUtils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.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(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: DefaultFormComponent, isStandalone: true, selector: "app-default-form", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, usesInheritance: true, 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(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: DefaultFormComponent, decorators: [{
             type: Component,
@@ -9838,7 +9884,7 @@ class DetailsComponent {
                 if (theCompType === 'reference' || theCompType === 'group') {
                     const configProps = thePConn.getConfigProps();
                     configProps.readOnly = true;
-                    configProps.displayMode = 'LABELS_LEFT';
+                    configProps.displayMode = 'DISPLAY_ONLY';
                     const propToUse = { ...thePConn.getInheritedProps() };
                     configProps.label = propToUse?.label;
                     const options = {
@@ -9993,7 +10039,7 @@ class DetailsOneColumnComponent {
                 return field;
             });
         }
-        this.pConn$.setInheritedProp('displayMode', 'LABELS_LEFT');
+        this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
         this.pConn$.setInheritedProp('readOnly', true);
         const kids = this.pConn$.getChildren();
         for (const kid of kids) {
@@ -10120,7 +10166,7 @@ class DetailsThreeColumnComponent {
                 return field;
             });
         }
-        this.pConn$.setInheritedProp('displayMode', 'LABELS_LEFT');
+        this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
         this.pConn$.setInheritedProp('readOnly', true);
         const kids = this.pConn$.getChildren();
         for (const kid of kids) {
@@ -10187,7 +10233,7 @@ class DetailsTwoColumnComponent {
         this.showHighlightedData = rawMetaData?.showHighlightedData;
         if (this.showHighlightedData) {
             const highlightedData = rawMetaData?.highlightedData;
-            this.highlightedDataArr = highlightedData.map(field => {
+            this.highlightedDataArr = highlightedData?.map(field => {
                 field.config.displayMode = 'STACKED_LARGE_VAL';
                 if (field.config.value === '@P .pyStatusWork') {
                     field.type = 'TextInput';
@@ -10196,7 +10242,7 @@ class DetailsTwoColumnComponent {
                 return field;
             });
         }
-        this.pConn$.setInheritedProp('displayMode', 'LABELS_LEFT');
+        this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
         this.pConn$.setInheritedProp('readOnly', true);
         const kids = this.pConn$.getChildren();
         for (const kid of kids) {
@@ -10269,7 +10315,7 @@ class DetailsWideNarrowComponent {
                 return field;
             });
         }
-        this.pConn$.setInheritedProp('displayMode', 'LABELS_LEFT');
+        this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
         this.pConn$.setInheritedProp('readOnly', true);
         const kids = this.pConn$.getChildren();
         for (const kid of kids) {
@@ -10336,8 +10382,8 @@ const buildView = (pConn, index, viewConfigPath) => {
         }
     };
     const view = PCore.createPConnect(config);
-    if (pConn.getConfigProps()?.displayMode === 'LABELS_LEFT') {
-        view.getPConnect()?.setInheritedProp('displayMode', 'LABELS_LEFT');
+    if (pConn.getConfigProps()?.displayMode === 'DISPLAY_ONLY') {
+        view.getPConnect()?.setInheritedProp('displayMode', 'DISPLAY_ONLY');
     }
     return view;
 };
@@ -10372,7 +10418,7 @@ class DynamicTabsComponent {
         const { referenceList } = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
         const { tablabel } = this.pConn$.getComponentConfig();
         const tablabelProp = PCore.getAnnotationUtils().getPropertyName(tablabel);
-        this.pConn$.setInheritedProp('displayMode', 'LABELS_LEFT');
+        this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
         this.pConn$.setInheritedProp('readOnly', true);
         const referenceListData = this.pConn$.getValue(`${referenceList}.pxResults`, ''); // 2nd arg empty string until typedefs properly allow optional
         this.tabsItems =
@@ -10476,7 +10522,7 @@ class FieldGroupTemplateComponent {
         this.allowAddEdit = this.configProps$.allowTableEdit;
         const renderMode = this.configProps$.renderMode;
         const displayMode = this.configProps$.displayMode;
-        this.readonlyMode = renderMode === 'ReadOnly' || displayMode === 'LABELS_LEFT';
+        this.readonlyMode = renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY';
         this.contextClass = this.configProps$.contextClass;
         const lookForChildInConfig = this.configProps$.lookForChildInConfig;
         this.heading = this.configProps$.heading ?? 'Row';
@@ -10485,7 +10531,7 @@ class FieldGroupTemplateComponent {
         this.pageReference = `${this.pConn$.getPageReference()}${resolvedList}`;
         this.pConn$.setReferenceList(resolvedList);
         if (this.readonlyMode) {
-            this.pConn$.setInheritedProp('displayMode', 'LABELS_LEFT');
+            this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
         }
         this.referenceList = this.configProps$.referenceList;
         if (this.prevRefLength != this.referenceList.length) {
@@ -10532,11 +10578,11 @@ class FieldValueListComponent {
         this.isHtml$ = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FieldValueListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: FieldValueListComponent, isStandalone: true, selector: "app-field-value-list", inputs: { label$: "label$", value$: "value$", displayMode$: "displayMode$", isHtml$: "isHtml$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$ === 'LABELS_LEFT'; else STACKED_LARGE_VAL\" class=\"psdk-container-labels-left\">\n  <div class=\"psdk-grid-label\">{{ label$ }}</div>\n  <div class=\"psdk-val-labels-left\">\n    <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n  </div>\n</div>\n\n<ng-template #STACKED_LARGE_VAL>\n  <div *ngIf=\"displayMode$ === 'STACKED_LARGE_VAL'\" class=\"psdk-container-stacked-large-val\">\n    <div class=\"psdk-grid-label\">{{ label$ }}</div>\n    <div class=\"psdk-val-stacked\">\n      <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #valueTemplate>\n  <div *ngIf=\"isHtml$; else valueOnly\" id=\"instruction-text\" [innerHTML]=\"value$ || '---'\"></div>\n  <ng-template #valueOnly>{{ value$ || '---' }}</ng-template>\n</ng-template>\n", styles: [".psdk-container-labels-left{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-value{margin:8px 0}.psdk-value-hf{margin:8px 0;font-weight:500;font-size:1.25rem}.psdk-val-labels-left{margin:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: FieldValueListComponent, isStandalone: true, selector: "app-field-value-list", inputs: { label$: "label$", value$: "value$", displayMode$: "displayMode$", isHtml$: "isHtml$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$ === 'DISPLAY_ONLY'; else STACKED_LARGE_VAL\" class=\"psdk-container-labels-left\">\n  <div class=\"psdk-grid-label\">{{ label$ }}</div>\n  <div class=\"psdk-val-labels-left\">\n    <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n  </div>\n</div>\n\n<ng-template #STACKED_LARGE_VAL>\n  <div *ngIf=\"displayMode$ === 'STACKED_LARGE_VAL'\" class=\"psdk-container-stacked-large-val\">\n    <div class=\"psdk-grid-label\">{{ label$ }}</div>\n    <div class=\"psdk-val-stacked\">\n      <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #valueTemplate>\n  <div *ngIf=\"isHtml$; else valueOnly\" id=\"instruction-text\" [innerHTML]=\"value$ || '---'\"></div>\n  <ng-template #valueOnly>{{ value$ || '---' }}</ng-template>\n</ng-template>\n", styles: [".psdk-container-labels-left{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start;padding-block:8px}.psdk-value{margin:8px 0}.psdk-value-hf{margin:8px 0;font-weight:500;font-size:1.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FieldValueListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-field-value-list', standalone: true, imports: [CommonModule], template: "<div *ngIf=\"displayMode$ === 'LABELS_LEFT'; else STACKED_LARGE_VAL\" class=\"psdk-container-labels-left\">\n  <div class=\"psdk-grid-label\">{{ label$ }}</div>\n  <div class=\"psdk-val-labels-left\">\n    <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n  </div>\n</div>\n\n<ng-template #STACKED_LARGE_VAL>\n  <div *ngIf=\"displayMode$ === 'STACKED_LARGE_VAL'\" class=\"psdk-container-stacked-large-val\">\n    <div class=\"psdk-grid-label\">{{ label$ }}</div>\n    <div class=\"psdk-val-stacked\">\n      <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #valueTemplate>\n  <div *ngIf=\"isHtml$; else valueOnly\" id=\"instruction-text\" [innerHTML]=\"value$ || '---'\"></div>\n  <ng-template #valueOnly>{{ value$ || '---' }}</ng-template>\n</ng-template>\n", styles: [".psdk-container-labels-left{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-value{margin:8px 0}.psdk-value-hf{margin:8px 0;font-weight:500;font-size:1.25rem}.psdk-val-labels-left{margin:8px 0}\n"] }]
+            args: [{ selector: 'app-field-value-list', standalone: true, imports: [CommonModule], template: "<div *ngIf=\"displayMode$ === 'DISPLAY_ONLY'; else STACKED_LARGE_VAL\" class=\"psdk-container-labels-left\">\n  <div class=\"psdk-grid-label\">{{ label$ }}</div>\n  <div class=\"psdk-val-labels-left\">\n    <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n  </div>\n</div>\n\n<ng-template #STACKED_LARGE_VAL>\n  <div *ngIf=\"displayMode$ === 'STACKED_LARGE_VAL'\" class=\"psdk-container-stacked-large-val\">\n    <div class=\"psdk-grid-label\">{{ label$ }}</div>\n    <div class=\"psdk-val-stacked\">\n      <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #valueTemplate>\n  <div *ngIf=\"isHtml$; else valueOnly\" id=\"instruction-text\" [innerHTML]=\"value$ || '---'\"></div>\n  <ng-template #valueOnly>{{ value$ || '---' }}</ng-template>\n</ng-template>\n", styles: [".psdk-container-labels-left{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start;padding-block:8px}.psdk-value{margin:8px 0}.psdk-value-hf{margin:8px 0;font-weight:500;font-size:1.25rem}\n"] }]
         }], propDecorators: { label$: [{
                 type: Input
             }], value$: [{
@@ -12266,7 +12312,7 @@ class ListViewComponent {
     }
     filterDataWithDate(item, filterObj, filterValue) {
         let bKeep;
-        let value = item[filterObj.ref] != null ?? item[filterObj.ref] != '' ? getSeconds(item[filterObj.ref]) : null;
+        let value = item[filterObj.ref] != null || item[filterObj.ref] != '' ? getSeconds(item[filterObj.ref]) : null;
         filterValue = filterObj.containsFilterValue != null && filterObj.containsFilterValue != '' ? getSeconds(filterObj.containsFilterValue) : null;
         switch (filterObj.containsFilter) {
             case 'notequal':
@@ -13095,6 +13141,8 @@ class MultiselectComponent {
         else {
             this.fieldControl.enable();
         }
+        this.actionsApi = this.pConn$.getActionsApi();
+        this.propName = this.pConn$.getStateProps().value;
         if (this.listType !== 'associated') {
             PCore.getDataApi()
                 ?.init(dataConfig, contextName)
@@ -13153,7 +13201,9 @@ class MultiselectComponent {
         this.getCaseListBasedOnParams(this.value$, '', [...this.selectedItems], [...this.itemsTree], true);
     }
     optionChanged(event) {
-        this.angularPConnectData.actions?.onChange(this, event);
+        let value = event?.target?.value;
+        value = value?.substring(1);
+        handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
     }
     setSelectedItemsForReferenceList(data) {
         // Clear error messages if any
@@ -13234,7 +13284,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
                 type: Input
             }] } });
 
-class OneColumnComponent {
+class OneColumnComponent extends FormTemplateBaseComponent {
     ngOnInit() {
         this.updateSelf();
     }
@@ -13247,8 +13297,8 @@ class OneColumnComponent {
     updateSelf() {
         this.arChildren$ = this.pConn$.getChildren();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: OneColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: OneColumnComponent, isStandalone: true, selector: "app-one-column", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, usesOnChanges: true, ngImport: i0, template: "<div *ngFor=\"let kid of arChildren$\">\n  <div *ngIf=\"kid.getPConnect().getRawMetadata()['type'] === 'Region' && kid.getPConnect().getRawMetadata()['name'] === 'A'\">\n    <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n  </div>\n  <div *ngIf=\"kid.getPConnect().getRawMetadata()['type'] === 'View'\">\n    <component-mapper name=\"View\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n  </div>\n  <div *ngIf=\"kid.getPConnect().getRawMetadata()['type'] === 'CaseCreateStage'\">\n    <component-mapper name=\"CaseCreateStage\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: OneColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: OneColumnComponent, isStandalone: true, selector: "app-one-column", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div *ngFor=\"let kid of arChildren$\">\n  <div *ngIf=\"kid.getPConnect().getRawMetadata()['type'] === 'Region' && kid.getPConnect().getRawMetadata()['name'] === 'A'\">\n    <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n  </div>\n  <div *ngIf=\"kid.getPConnect().getRawMetadata()['type'] === 'View'\">\n    <component-mapper name=\"View\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n  </div>\n  <div *ngIf=\"kid.getPConnect().getRawMetadata()['type'] === 'CaseCreateStage'\">\n    <component-mapper name=\"CaseCreateStage\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: OneColumnComponent, decorators: [{
             type: Component,
@@ -13312,6 +13362,8 @@ class PageComponent {
         if (operator && operator != '') {
             this.title$ += `, ${operator}`;
         }
+        // when showing a page, similar to updating root, need to cause viewContainer to call "initContainer"
+        sessionStorage.setItem('hasViewContainer', 'false');
     }
     ngOnDestroy() {
         if (this.angularPConnectData.unsubscribeFn) {
@@ -13660,7 +13712,7 @@ const createMetaForTable = (fields, renderMode) => {
 };
 const filterDataByDate = (item, filterObj) => {
     let bKeep;
-    let value = item[filterObj.ref] != null ?? item[filterObj.ref] != '' ? getSeconds(item[filterObj.ref]) : null;
+    let value = item[filterObj.ref] != null || item[filterObj.ref] != '' ? getSeconds(item[filterObj.ref]) : null;
     let filterValue = filterObj.containsFilterValue != null && filterObj.containsFilterValue != '' ? getSeconds(filterObj.containsFilterValue) : null;
     switch (filterObj.containsFilter) {
         case 'notequal':
@@ -14732,7 +14784,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
                 type: Input
             }] } });
 
-class ThreeColumnComponent {
+class ThreeColumnComponent extends FormTemplateBaseComponent {
     ngOnInit() {
         this.updateSelf();
     }
@@ -14745,8 +14797,8 @@ class ThreeColumnComponent {
     updateSelf() {
         this.arChildren$ = this.pConn$.getChildren();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ThreeColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: ThreeColumnComponent, isStandalone: true, selector: "app-three-column", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"psdk-three-column\">\n  <div *ngFor=\"let kid of arChildren$\">\n    <div class=\"psdk-three-column-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'a'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-three-column-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'b'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-three-column-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'c'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}.psdk-three-column{display:flow-root;height:100%}.psdk-three-column-column{width:33%;float:left;padding:0rem .3125rem;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ThreeColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: ThreeColumnComponent, isStandalone: true, selector: "app-three-column", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"psdk-three-column\">\n  <div *ngFor=\"let kid of arChildren$\">\n    <div class=\"psdk-three-column-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'a'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-three-column-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'b'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-three-column-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'c'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}.psdk-three-column{display:flow-root;height:100%}.psdk-three-column-column{width:33%;float:left;padding:0rem .3125rem;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ThreeColumnComponent, decorators: [{
             type: Component,
@@ -14770,7 +14822,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
                 type: Input
             }] } });
 
-class TwoColumnComponent {
+class TwoColumnComponent extends FormTemplateBaseComponent {
     ngOnInit() {
         this.updateSelf();
     }
@@ -14783,8 +14835,8 @@ class TwoColumnComponent {
     updateSelf() {
         this.arChildren$ = this.pConn$.getChildren();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TwoColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: TwoColumnComponent, isStandalone: true, selector: "app-two-column", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"psdk-two-column\">\n  <div *ngFor=\"let kid of arChildren$\">\n    <div class=\"psdk-two-column-left\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'left'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-two-column-right\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'right'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-two-column-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'a'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-two-column-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'b'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}.psdk-two-column{display:flow-root;height:100%}.psdk-two-column-column{width:50%;float:left;padding:0rem .3125rem;height:100%}.psdk-two-column-left{float:left;min-width:50%;padding:0rem .3125rem}.psdk-two-column-right{float:left;width:50%;padding:0rem .3125rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TwoColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: TwoColumnComponent, isStandalone: true, selector: "app-two-column", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"psdk-two-column\">\n  <div *ngFor=\"let kid of arChildren$\">\n    <div class=\"psdk-two-column-left\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'left'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-two-column-right\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'right'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-two-column-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'a'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-two-column-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'b'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}.psdk-two-column{display:flow-root;height:100%}.psdk-two-column-column{width:50%;float:left;padding:0rem .3125rem;height:100%}.psdk-two-column-left{float:left;min-width:50%;padding:0rem .3125rem}.psdk-two-column-right{float:left;width:50%;padding:0rem .3125rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TwoColumnComponent, decorators: [{
             type: Component,
@@ -14856,7 +14908,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
                 type: Input
             }] } });
 
-class WideNarrowFormComponent {
+class WideNarrowFormComponent extends FormTemplateBaseComponent {
     ngOnInit() {
         this.updateSelf();
     }
@@ -14869,8 +14921,8 @@ class WideNarrowFormComponent {
     updateSelf() {
         this.arChildren$ = this.pConn$.getChildren();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: WideNarrowFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: WideNarrowFormComponent, isStandalone: true, selector: "app-wide-narrow-form", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"psdk-narrow-wide-column\">\n  <div *ngFor=\"let kid of arChildren$\">\n    <div class=\"psdk-wide-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'left'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-narrow-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'right'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-wide-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'a'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-narrow-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'b'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}.psdk-narrow-wide-column{display:flow-root;height:100%}.psdk-narrow-column{float:left;min-width:30%;padding:0rem .3125rem}.psdk-wide-column{float:left;width:70%;padding:0rem .3125rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: WideNarrowFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: WideNarrowFormComponent, isStandalone: true, selector: "app-wide-narrow-form", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"psdk-narrow-wide-column\">\n  <div *ngFor=\"let kid of arChildren$\">\n    <div class=\"psdk-wide-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'left'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-narrow-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'right'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-wide-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'a'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-narrow-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'b'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}.psdk-narrow-wide-column{display:flow-root;height:100%}.psdk-narrow-column{float:left;min-width:30%;padding:0rem .3125rem}.psdk-wide-column{float:left;width:70%;padding:0rem .3125rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: WideNarrowFormComponent, decorators: [{
             type: Component,
@@ -17268,7 +17320,10 @@ class MaterialDetailsFieldsComponent {
     constructor(utils) {
         this.utils = utils;
     }
-    _getValue(configValue) {
+    _getValue(configValue, field = {}) {
+        if (field?.type === 'userreference') {
+            return configValue.userName;
+        }
         if (configValue && configValue != '') {
             return configValue;
         }
@@ -17278,11 +17333,11 @@ class MaterialDetailsFieldsComponent {
         return this.utils.generateDate(dateValue, dateFormat);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: MaterialDetailsFieldsComponent, deps: [{ token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: MaterialDetailsFieldsComponent, isStandalone: true, selector: "app-material-details-fields", inputs: { arFields$: "arFields$", arHighlightedFields: "arHighlightedFields" }, ngImport: i0, template: "<div id=\"details-fields-list\">\n  <div *ngFor=\"let field of arFields$\">\n    <div *ngIf=\"field.type === 'group'; else noGroup\">\n      <component-mapper name=\"Group\" [props]=\"{ pConn$: field.pConn }\"></component-mapper>\n    </div>\n    <ng-template #noGroup>\n      <div *ngIf=\"field.type === 'reference'; else showDetails\">\n        <component-mapper name=\"View\" [props]=\"{ pConn$: field.pConn }\"></component-mapper>\n      </div>\n    </ng-template>\n\n    <ng-template #showDetails>\n      <div class=\"psdk-grid-filter\" *ngIf=\"field.config.label\">\n        <div class=\"psdk-details-fields-label\">\n          {{ field.config.label }}\n        </div>\n        <div [ngSwitch]=\"field.type.toLowerCase()\" class=\"psdk-csf-primary-field-value\">\n          <span *ngSwitchCase=\"'textinput'\" class=\"psdk-details-text-style\">{{ _getValue(field.config.value) }}</span>\n          <span *ngSwitchCase=\"'status'\" class=\"psdk-details-status-style\">{{ _getValue(field.config.value) }}</span>\n          <a *ngSwitchCase=\"'phone'\" as=\"a\" href=\"tel: {{ field.config.value }}\">{{ _getValue(field.config.value) }}</a>\n          <a *ngSwitchCase=\"'email'\" href=\"mailto: {{ field.config.value }}\">{{ _getValue(field.config.value) }}</a>\n          <span *ngSwitchCase=\"'date'\" class=\"psdk-details-text-style\">{{ _formatDate(field.config.value, field.type) }}</span>\n          <span *ngSwitchCase=\"'caseoperator'\"></span>\n          <span *ngSwitchDefault>{{ _getValue(field.config.value) }}</span>\n        </div>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", styles: [".psdk-details-fields-label{color:var(--app-label-color);margin:8px 0}span.psdk-details-text-style-hf{font-weight:700}span.psdk-details-status-style-hf{background-color:var(--app-details-status-background);border-radius:.125rem;color:var(--app-details-status-color);display:inline-block;font-size:.75rem;font-weight:700;line-height:1.25rem;height:1.25rem;padding:0 .5rem;text-transform:uppercase}.psdk-grid-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-csf-primary-field-value{margin:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgSwitch), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgSwitchCase), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgSwitchDefault), selector: "[ngSwitchDefault]" }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: MaterialDetailsFieldsComponent, isStandalone: true, selector: "app-material-details-fields", inputs: { arFields$: "arFields$", arHighlightedFields: "arHighlightedFields" }, ngImport: i0, template: "<div id=\"details-fields-list\">\n  <div *ngFor=\"let field of arFields$\">\n    <div *ngIf=\"field.type === 'group'; else noGroup\">\n      <component-mapper name=\"Group\" [props]=\"{ pConn$: field.pConn }\"></component-mapper>\n    </div>\n    <ng-template #noGroup>\n      <div *ngIf=\"field.type === 'reference'; else showDetails\">\n        <component-mapper name=\"View\" [props]=\"{ pConn$: field.pConn }\"></component-mapper>\n      </div>\n    </ng-template>\n\n    <ng-template #showDetails>\n      <div class=\"psdk-grid-filter\" *ngIf=\"field.config.label\">\n        <div class=\"psdk-details-fields-label\">\n          {{ field.config.label }}\n        </div>\n        <div [ngSwitch]=\"field.type.toLowerCase()\" class=\"psdk-csf-primary-field-value\">\n          <span *ngSwitchCase=\"'textinput'\" class=\"psdk-details-text-style\">{{ _getValue(field.config.value) }}</span>\n          <span *ngSwitchCase=\"'status'\" class=\"psdk-details-status-style\">{{ _getValue(field.config.value) }}</span>\n          <a *ngSwitchCase=\"'phone'\" as=\"a\" href=\"tel: {{ field.config.value }}\">{{ _getValue(field.config.value) }}</a>\n          <a *ngSwitchCase=\"'email'\" href=\"mailto: {{ field.config.value }}\">{{ _getValue(field.config.value) }}</a>\n          <span *ngSwitchCase=\"'date'\" class=\"psdk-details-text-style\">{{ _formatDate(field.config.value, field.type) }}</span>\n          <span *ngSwitchCase=\"'caseoperator'\"></span>\n          <span *ngSwitchDefault>{{ _getValue(field.config.value, field) }}</span>\n        </div>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", styles: [".psdk-details-fields-label{color:var(--app-label-color);margin:8px 0}span.psdk-details-text-style-hf{font-weight:700}span.psdk-details-status-style-hf{background-color:var(--app-details-status-background);border-radius:.125rem;color:var(--app-details-status-color);display:inline-block;font-size:.75rem;font-weight:700;line-height:1.25rem;height:1.25rem;padding:0 .5rem;text-transform:uppercase}.psdk-grid-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-csf-primary-field-value{margin:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgSwitch), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgSwitchCase), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgSwitchDefault), selector: "[ngSwitchDefault]" }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: MaterialDetailsFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-material-details-fields', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div id=\"details-fields-list\">\n  <div *ngFor=\"let field of arFields$\">\n    <div *ngIf=\"field.type === 'group'; else noGroup\">\n      <component-mapper name=\"Group\" [props]=\"{ pConn$: field.pConn }\"></component-mapper>\n    </div>\n    <ng-template #noGroup>\n      <div *ngIf=\"field.type === 'reference'; else showDetails\">\n        <component-mapper name=\"View\" [props]=\"{ pConn$: field.pConn }\"></component-mapper>\n      </div>\n    </ng-template>\n\n    <ng-template #showDetails>\n      <div class=\"psdk-grid-filter\" *ngIf=\"field.config.label\">\n        <div class=\"psdk-details-fields-label\">\n          {{ field.config.label }}\n        </div>\n        <div [ngSwitch]=\"field.type.toLowerCase()\" class=\"psdk-csf-primary-field-value\">\n          <span *ngSwitchCase=\"'textinput'\" class=\"psdk-details-text-style\">{{ _getValue(field.config.value) }}</span>\n          <span *ngSwitchCase=\"'status'\" class=\"psdk-details-status-style\">{{ _getValue(field.config.value) }}</span>\n          <a *ngSwitchCase=\"'phone'\" as=\"a\" href=\"tel: {{ field.config.value }}\">{{ _getValue(field.config.value) }}</a>\n          <a *ngSwitchCase=\"'email'\" href=\"mailto: {{ field.config.value }}\">{{ _getValue(field.config.value) }}</a>\n          <span *ngSwitchCase=\"'date'\" class=\"psdk-details-text-style\">{{ _formatDate(field.config.value, field.type) }}</span>\n          <span *ngSwitchCase=\"'caseoperator'\"></span>\n          <span *ngSwitchDefault>{{ _getValue(field.config.value) }}</span>\n        </div>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", styles: [".psdk-details-fields-label{color:var(--app-label-color);margin:8px 0}span.psdk-details-text-style-hf{font-weight:700}span.psdk-details-status-style-hf{background-color:var(--app-details-status-background);border-radius:.125rem;color:var(--app-details-status-color);display:inline-block;font-size:.75rem;font-weight:700;line-height:1.25rem;height:1.25rem;padding:0 .5rem;text-transform:uppercase}.psdk-grid-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-csf-primary-field-value{margin:8px 0}\n"] }]
+            args: [{ selector: 'app-material-details-fields', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div id=\"details-fields-list\">\n  <div *ngFor=\"let field of arFields$\">\n    <div *ngIf=\"field.type === 'group'; else noGroup\">\n      <component-mapper name=\"Group\" [props]=\"{ pConn$: field.pConn }\"></component-mapper>\n    </div>\n    <ng-template #noGroup>\n      <div *ngIf=\"field.type === 'reference'; else showDetails\">\n        <component-mapper name=\"View\" [props]=\"{ pConn$: field.pConn }\"></component-mapper>\n      </div>\n    </ng-template>\n\n    <ng-template #showDetails>\n      <div class=\"psdk-grid-filter\" *ngIf=\"field.config.label\">\n        <div class=\"psdk-details-fields-label\">\n          {{ field.config.label }}\n        </div>\n        <div [ngSwitch]=\"field.type.toLowerCase()\" class=\"psdk-csf-primary-field-value\">\n          <span *ngSwitchCase=\"'textinput'\" class=\"psdk-details-text-style\">{{ _getValue(field.config.value) }}</span>\n          <span *ngSwitchCase=\"'status'\" class=\"psdk-details-status-style\">{{ _getValue(field.config.value) }}</span>\n          <a *ngSwitchCase=\"'phone'\" as=\"a\" href=\"tel: {{ field.config.value }}\">{{ _getValue(field.config.value) }}</a>\n          <a *ngSwitchCase=\"'email'\" href=\"mailto: {{ field.config.value }}\">{{ _getValue(field.config.value) }}</a>\n          <span *ngSwitchCase=\"'date'\" class=\"psdk-details-text-style\">{{ _formatDate(field.config.value, field.type) }}</span>\n          <span *ngSwitchCase=\"'caseoperator'\"></span>\n          <span *ngSwitchDefault>{{ _getValue(field.config.value, field) }}</span>\n        </div>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", styles: [".psdk-details-fields-label{color:var(--app-label-color);margin:8px 0}span.psdk-details-text-style-hf{font-weight:700}span.psdk-details-status-style-hf{background-color:var(--app-details-status-background);border-radius:.125rem;color:var(--app-details-status-color);display:inline-block;font-size:.75rem;font-weight:700;line-height:1.25rem;height:1.25rem;padding:0 .5rem;text-transform:uppercase}.psdk-grid-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-csf-primary-field-value{margin:8px 0}\n"] }]
         }], ctorParameters: () => [{ type: Utils }], propDecorators: { arFields$: [{
                 type: Input
             }], arHighlightedFields: [{
@@ -18292,5 +18347,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, FlowContainerBaseComponent, FlowContainerComponent, Group$1 as Group, HybridViewContainerComponent, InlineDashboardComponent, InlineDashboardPageComponent, IntegerComponent, ListPageComponent, ListUtilityComponent, ListViewComponent, MaterialCaseSummaryComponent, MaterialDetailsComponent, MaterialDetailsFieldsComponent, MaterialSummaryItemComponent, MaterialSummaryListComponent, MaterialUtilityComponent, MaterialVerticalTabsComponent, ModalViewContainerComponent, MultiReferenceReadonlyComponent, MultiStepComponent, NarrowWideFormComponent, NavbarComponent, OneColumnComponent, OneColumnPageComponent, OneColumnTabComponent, OperatorComponent, PageComponent, PercentageComponent, PhoneComponent, PreviewViewContainerComponent, ProgressSpinnerService, PromotedFiltersComponent, PulseComponent, RadioButtonsComponent, ReferenceComponent, RegionComponent, RepeatingStructuresComponent, 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, 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, FormTemplateBaseComponent, Group$1 as Group, HybridViewContainerComponent, InlineDashboardComponent, InlineDashboardPageComponent, IntegerComponent, ListPageComponent, ListUtilityComponent, ListViewComponent, MaterialCaseSummaryComponent, MaterialDetailsComponent, MaterialDetailsFieldsComponent, MaterialSummaryItemComponent, MaterialSummaryListComponent, MaterialUtilityComponent, MaterialVerticalTabsComponent, ModalViewContainerComponent, MultiReferenceReadonlyComponent, MultiStepComponent, NarrowWideFormComponent, NavbarComponent, OneColumnComponent, OneColumnPageComponent, OneColumnTabComponent, OperatorComponent, PageComponent, PercentageComponent, PhoneComponent, PreviewViewContainerComponent, ProgressSpinnerService, PromotedFiltersComponent, PulseComponent, RadioButtonsComponent, ReferenceComponent, RegionComponent, RepeatingStructuresComponent, 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, insertInstruction, loginBoxType, populateRowKey, sdkVersion, showBanner, tabClick, updateNewInstructions, updateWorkList };
 //# sourceMappingURL=pega-angular-sdk-components.mjs.map