@pega/angular-sdk-components 0.242.2 → 0.242.4

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

@@ -44,15 +44,15 @@ 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';
+import * as i7$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import { NgxMatIntlTelInputComponent } from 'ngx-mat-intl-tel-input';
-import * as i7$1 from '@angular/material/radio';
+import * as i7$2 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
 import * as i4$4 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
@@ -60,9 +60,9 @@ import * as i2$2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i14 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import * as i7$2 from '@angular/material/sort';
+import * as i7$3 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
-import * as i6$3 from '@angular/material/table';
+import * as i6$2 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import * as i8$2 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
@@ -2363,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'
@@ -2488,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
             }] } });
@@ -3432,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
             }] } });
@@ -3580,6 +3581,7 @@ function filterForFieldValueList(fields) {
     }));
 }
 
+const NO_HEADER_TEMPLATES = ['SubTabs', 'SimpleTable', 'Confirmation', 'DynamicTabs', 'DetailsSubTabs'];
 /**
  * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
  * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
@@ -3627,9 +3629,10 @@ class ViewComponent {
         this.utils = utils;
         // @Input() updateToken$: number;
         this.angularPConnectData = {};
+        this.noHeaderTemplates = NO_HEADER_TEMPLATES;
         this.title$ = '';
         this.label$ = '';
-        this.showLabel$ = true;
+        this.showLabel$ = false;
         this.visibility$ = true;
     }
     ngOnInit() {
@@ -3731,11 +3734,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 *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"] }] }); }
+    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$ && !noHeaderTemplates.includes(templateName$)\" 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 *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"] }]
+            args: [{ selector: 'app-view', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"visibility$ !== false\" class=\"ng-view-top\">\n  <div *ngIf=\"showLabel$ && label$ && !noHeaderTemplates.includes(templateName$)\" 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$: [{
@@ -4168,6 +4171,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) {
@@ -4300,11 +4305,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 = '';
@@ -4314,9 +4321,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);
@@ -4582,8 +4587,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) {
@@ -4628,14 +4633,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) {
@@ -5727,233 +5734,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 || '';
@@ -5984,10 +5764,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
@@ -6090,7 +5868,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);
 }
@@ -6103,9 +5881,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
@@ -6126,8 +5904,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;
@@ -6181,6 +5957,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 };
@@ -6220,13 +6002,261 @@ function format(value, type, options = {}) {
             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;
 }
 
-/* eslint-disable max-classes-per-file */
+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.currencySymbol = theSymbols.theCurrencySymbol;
+        this.thousandSeparator = theSymbols.theDigitGroupSeparator;
+        this.decimalSeparator = 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);
+        // replacing thousand separator with empty string as not required in api call
+        const thousandSep = this.thousandSeparator === '.' ? '\\.' : this.thousandSeparator;
+        let regExp = new RegExp(String.raw `${thousandSep}`, 'g');
+        value = value?.replace(regExp, '');
+        // replacing decimal separator with '.'
+        if (this.decimalSeparator !== '.') {
+            regExp = new RegExp(String.raw `${this.decimalSeparator}`, 'g');
+            value = value.replace(regExp, '.');
+        }
+        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$: 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: currencySymbol,\n              thousands: thousandSeparator,\n              decimal: decimalSeparator,\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: currencySymbol,\n              thousands: thousandSeparator,\n              decimal: decimalSeparator,\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;
+};
+
 class MyFormat {
     constructor() {
         this.theDateFormat = getDateFormatInfo();
@@ -6314,26 +6344,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) {
@@ -6341,6 +6359,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);
         }
@@ -6369,19 +6392,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';
@@ -6401,13 +6416,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,
@@ -6420,7 +6430,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]
@@ -6457,7 +6467,7 @@ class DateTimeComponent {
         this.theDateFormat = getDateFormatInfo();
     }
     ngOnInit() {
-        this.placeholder = `${this.theDateFormat.dateFormatStringLC}, hh:mm a`;
+        this.placeholder = `${this.theDateFormat.dateFormatStringLC}, hh:mm A`;
         // 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);
@@ -6515,6 +6525,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);
         }
@@ -6532,6 +6547,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(() => {
@@ -6547,14 +6564,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 = '';
@@ -6572,7 +6582,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,
@@ -6585,7 +6595,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$: [{
@@ -6608,6 +6618,7 @@ class DecimalComponent {
         this.bHasForm$ = true;
         this.componentReference = '';
         this.fieldControl = new FormControl(null, null);
+        this.currencySymbol = '';
     }
     ngOnInit() {
         // First thing in initialization is registering and subscribing to the AngularPConnect service
@@ -6670,15 +6681,15 @@ class DecimalComponent {
         const showGroupSeparators = this.configProps$.showGroupSeparators;
         const currencyISOCode = this.configProps$?.currencyISOCode ?? '';
         const theSymbols = getCurrencyCharacters(currencyISOCode);
-        this.currDec = theSymbols.theDecimalIndicator;
-        this.currSep = showGroupSeparators ? theSymbols.theDigitGroupSeparator : '';
+        this.decimalSeparator = theSymbols.theDecimalIndicator;
+        this.thousandSeparator = 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(() => {
@@ -6704,10 +6715,7 @@ class DecimalComponent {
             this.fieldControl.enable();
         }
         if (this.bReadonly$ && this.formatter === 'Currency') {
-            this.currSym = theSymbols.theCurrencySymbol;
-        }
-        else {
-            this.currSym = '';
+            this.currencySymbol = theSymbols.theCurrencySymbol;
         }
         this.decimalPrecision = this.configProps$?.decimalPrecision ?? 2;
         this.componentReference = this.pConn$.getStateProps().value;
@@ -6716,12 +6724,16 @@ class DecimalComponent {
         const actionsApi = this.pConn$?.getActionsApi();
         const propName = this.pConn$?.getStateProps().value;
         let value = event?.target?.value;
-        if (this.currSep === ',') {
-            value = value.replace(/,/g, '');
+        // replacing thousand separator with empty string as not required in api call
+        if (this.configProps$.showGroupSeparators) {
+            const thousandSep = this.thousandSeparator === '.' ? '\\.' : this.thousandSeparator;
+            const regExp = new RegExp(String.raw `${thousandSep}`, 'g');
+            value = value?.replace(regExp, '');
         }
-        else {
-            value = value?.replace(/\./g, '');
-            value = value?.replace(/,/g, '.');
+        // replacing decimal separator with '.'
+        if (this.decimalSeparator !== '.') {
+            const regExp = new RegExp(String.raw `${this.decimalSeparator}`, 'g');
+            value = value.replace(regExp, '.');
         }
         handleEvent(actionsApi, 'changeNblur', propName, value);
     }
@@ -6741,7 +6753,7 @@ class DecimalComponent {
         return errMessage;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: DecimalComponent, deps: [{ token: AngularPConnectService }, { token: i0.ChangeDetectorRef }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: DecimalComponent, isStandalone: true, selector: "app-decimal", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$: 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: bReadonly$ && formatter === 'Currency' ? currSym : '',\n            thousands: currSep,\n            decimal: currDec,\n            align: 'left',\n            nullable: true,\n            precision: decimalPrecision,\n            inputMode: inputMode\n          }\"\n          [placeholder]=\"placeholder\"\n          step=\"0.01\"\n          [formControlName]=\"controlName$\"\n          [required]=\"bRequired$\"\n          [formControl]=\"fieldControl\"\n          [attr.data-test-id]=\"testId\"\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(() => FormsModule) }, { 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: DecimalComponent, isStandalone: true, selector: "app-decimal", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$: 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: currencySymbol,\n            thousands: thousandSeparator,\n            decimal: decimalSeparator,\n            align: 'left',\n            nullable: true,\n            precision: decimalPrecision,\n            inputMode: inputMode\n          }\"\n          [placeholder]=\"placeholder\"\n          step=\"0.01\"\n          [formControlName]=\"controlName$\"\n          [required]=\"bRequired$\"\n          [formControl]=\"fieldControl\"\n          [attr.data-test-id]=\"testId\"\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(() => FormsModule) }, { 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: DecimalComponent, decorators: [{
             type: Component,
@@ -6753,18 +6765,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
                         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: bReadonly$ && formatter === 'Currency' ? currSym : '',\n            thousands: currSep,\n            decimal: currDec,\n            align: 'left',\n            nullable: true,\n            precision: decimalPrecision,\n            inputMode: inputMode\n          }\"\n          [placeholder]=\"placeholder\"\n          step=\"0.01\"\n          [formControlName]=\"controlName$\"\n          [required]=\"bRequired$\"\n          [formControl]=\"fieldControl\"\n          [attr.data-test-id]=\"testId\"\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"] }]
+                    ], 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: currencySymbol,\n            thousands: thousandSeparator,\n            decimal: decimalSeparator,\n            align: 'left',\n            nullable: true,\n            precision: decimalPrecision,\n            inputMode: inputMode\n          }\"\n          [placeholder]=\"placeholder\"\n          step=\"0.01\"\n          [formControlName]=\"controlName$\"\n          [required]=\"bRequired$\"\n          [formControl]=\"fieldControl\"\n          [attr.data-test-id]=\"testId\"\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"] }]
         }], ctorParameters: () => [{ type: AngularPConnectService }, { type: i0.ChangeDetectorRef }, { type: Utils }], propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
                 type: Input
             }] } });
 
+function flattenParameters(params = {}) {
+    const flatParams = {};
+    Object.keys(params).forEach(key => {
+        const { name, value: theVal } = params[key];
+        flatParams[name] = theVal;
+    });
+    return flatParams;
+}
+function preProcessColumns$1(columnList) {
+    return columnList.map(col => {
+        const tempColObj = { ...col };
+        tempColObj.value = col.value && col.value.startsWith('.') ? col.value.substring(1) : col.value;
+        return tempColObj;
+    });
+}
+function getDisplayFieldsMetaData$1(columnList) {
+    const displayColumns = columnList.filter(col => col.display === 'true');
+    const metaDataObj = { key: '', primary: '', secondary: [] };
+    const keyCol = columnList.filter(col => col.key === 'true');
+    metaDataObj.key = keyCol.length > 0 ? keyCol[0].value : 'auto';
+    for (let index = 0; index < displayColumns.length; index += 1) {
+        if (displayColumns[index].primary === 'true') {
+            metaDataObj.primary = displayColumns[index].value;
+        }
+        else {
+            metaDataObj.secondary.push(displayColumns[index].value);
+        }
+    }
+    return metaDataObj;
+}
 class DropdownComponent {
-    constructor(angularPConnect, cdRef, utils) {
+    constructor(angularPConnect, cdRef, utils, dataPageService) {
         this.angularPConnect = angularPConnect;
         this.cdRef = cdRef;
         this.utils = utils;
+        this.dataPageService = dataPageService;
         // Used with AngularPConnect
         this.angularPConnectData = {};
         this.label$ = '';
@@ -6790,8 +6833,9 @@ class DropdownComponent {
         this.controlName$ = this.angularPConnect.getComponentID(this);
         // Then, continue on with other initialization
         // call updateSelf when initializing
-        // this.updateSelf();
         this.checkAndUpdate();
+        // this should get called afer checkAndUpdate
+        this.getDatapageData();
         if (this.formGroup$) {
             // add control to formGroup
             this.formGroup$.addControl(this.controlName$, this.fieldControl);
@@ -6836,6 +6880,7 @@ class DropdownComponent {
         this.label$ = this.configProps$.label;
         this.helperText = this.configProps$.helperText;
         this.hideLabel = this.configProps$.hideLabel;
+        const datasource = this.configProps$.datasource;
         // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
         setTimeout(() => {
             if (this.configProps$.required != null) {
@@ -6843,6 +6888,10 @@ class DropdownComponent {
             }
             this.cdRef.detectChanges();
         });
+        if (!isEqual(datasource, this.theDatasource)) {
+            // inbound datasource is different, so update theDatasource
+            this.theDatasource = datasource || null;
+        }
         if (this.configProps$.visibility != null) {
             this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
         }
@@ -6860,15 +6909,18 @@ class DropdownComponent {
             this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
         }
         this.componentReference = this.pConn$.getStateProps().value;
-        const optionsList = [...this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject())];
-        optionsList?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
-        this.options$ = optionsList;
         if (this.value$ === '' && !this.bReadonly$) {
             this.value$ = 'Select';
         }
-        const propName = this.pConn$.getStateProps().value;
+        if (this.theDatasource) {
+            const optionsList = [...this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject())];
+            optionsList?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
+            this.options$ = optionsList;
+        }
+        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,6 +6939,53 @@ class DropdownComponent {
             });
         }
     }
+    getDatapageData() {
+        const configProps = this.pConn$.getConfigProps();
+        let { listType, parameters, datasource = [], columns = [] } = configProps;
+        const { deferDatasource, datasourceMetadata } = configProps;
+        const context = this.pConn$.getContextName();
+        if (deferDatasource && datasourceMetadata?.datasource?.name) {
+            listType = 'datapage';
+            datasource = datasourceMetadata.datasource.name;
+            const { parameters: dataSourceParameters, propertyForDisplayText, propertyForValue } = datasourceMetadata.datasource;
+            parameters = flattenParameters(dataSourceParameters);
+            const displayProp = propertyForDisplayText?.startsWith('@P') ? propertyForDisplayText.substring(3) : propertyForDisplayText;
+            const valueProp = propertyForValue?.startsWith('@P') ? propertyForValue.substring(3) : propertyForValue;
+            columns = [
+                {
+                    key: 'true',
+                    setProperty: 'Associated property',
+                    value: valueProp
+                },
+                {
+                    display: 'true',
+                    primary: 'true',
+                    useForSearch: true,
+                    value: displayProp
+                }
+            ];
+        }
+        columns = preProcessColumns$1(columns) || [];
+        if (!this.displayMode$ && listType !== 'associated' && typeof datasource === 'string') {
+            this.getData(datasource, parameters, columns, context);
+        }
+    }
+    getData(datasource, parameters, columns, context) {
+        this.dataPageService.getDataPageData(datasource, parameters, context).then((results) => {
+            const optionsData = [];
+            const displayColumn = getDisplayFieldsMetaData$1(columns);
+            results?.forEach(element => {
+                const val = element[displayColumn.primary]?.toString();
+                const obj = {
+                    key: element[displayColumn.key] || element.pyGUID,
+                    value: val
+                };
+                optionsData.push(obj);
+            });
+            optionsData?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
+            this.options$ = optionsData;
+        });
+    }
     isSelected(buttonValue) {
         return this.value$ === buttonValue;
     }
@@ -6894,16 +6993,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));
@@ -6923,13 +7019,13 @@ class DropdownComponent {
         }
         return errMessage;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: DropdownComponent, deps: [{ token: AngularPConnectService }, { token: i0.ChangeDetectorRef }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: DropdownComponent, isStandalone: true, selector: "app-dropdown", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper\n    *ngIf=\"bVisible$ !== false\"\n    name=\"FieldValueList\"\n    [props]=\"{ label$, value$: this.localizedValue, displayMode$ }\"\n  ></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-select\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [attr.data-test-id]=\"testId\"\n          (selectionChange)=\"fieldOnChange($event)\"\n          [formControl]=\"fieldControl\"\n        >\n          <mat-option *ngFor=\"let opt of options$\" [value]=\"opt.key\">\n            {{ getLocalizedOptionValue(opt) }}\n          </mat-option>\n        </mat-select>\n        <mat-label>{{ label$ }}</mat-label>\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-form{min-width:9.375rem;width:100%}.psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => 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.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(() => MatSelectModule) }, { kind: "component", type: i0.forwardRef(() => i6$2.MatSelect), selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i0.forwardRef(() => i7.MatOption), selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatOptionModule) }, { kind: "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: DropdownComponent, deps: [{ token: AngularPConnectService }, { token: i0.ChangeDetectorRef }, { token: Utils }, { token: DatapageService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: DropdownComponent, isStandalone: true, selector: "app-dropdown", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper\n    *ngIf=\"bVisible$ !== false\"\n    name=\"FieldValueList\"\n    [props]=\"{ label$, value$: this.localizedValue, displayMode$ }\"\n  ></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-select\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [attr.data-test-id]=\"testId\"\n          (selectionChange)=\"fieldOnChange($event)\"\n          [formControl]=\"fieldControl\"\n        >\n          <mat-option *ngFor=\"let opt of options$\" [value]=\"opt.key\">\n            {{ getLocalizedOptionValue(opt) }}\n          </mat-option>\n        </mat-select>\n        <mat-label>{{ label$ }}</mat-label>\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-form{min-width:9.375rem;width:100%}.psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => 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.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(() => MatSelectModule) }, { kind: "component", type: i0.forwardRef(() => i7$1.MatSelect), selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i0.forwardRef(() => i7.MatOption), selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatOptionModule) }, { kind: "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: DropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-dropdown', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatSelectModule, MatOptionModule, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper\n    *ngIf=\"bVisible$ !== false\"\n    name=\"FieldValueList\"\n    [props]=\"{ label$, value$: this.localizedValue, displayMode$ }\"\n  ></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"!bReadonly$ && bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-select\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [attr.data-test-id]=\"testId\"\n          (selectionChange)=\"fieldOnChange($event)\"\n          [formControl]=\"fieldControl\"\n        >\n          <mat-option *ngFor=\"let opt of options$\" [value]=\"opt.key\">\n            {{ getLocalizedOptionValue(opt) }}\n          </mat-option>\n        </mat-select>\n        <mat-label>{{ label$ }}</mat-label>\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-form{min-width:9.375rem;width:100%}.psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"] }]
-        }], ctorParameters: () => [{ type: AngularPConnectService }, { type: i0.ChangeDetectorRef }, { type: Utils }], propDecorators: { pConn$: [{
+        }], ctorParameters: () => [{ type: AngularPConnectService }, { type: i0.ChangeDetectorRef }, { type: Utils }, { type: DatapageService }], propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
                 type: Input
@@ -7027,6 +7123,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 != '') {
@@ -7038,11 +7136,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 = '';
@@ -7201,6 +7303,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) {
@@ -7234,12 +7338,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
@@ -7258,11 +7364,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$: [{
@@ -7371,19 +7477,22 @@ 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.fieldControl.setValue(nValue);
         }
         this.helperText = this.configProps$.helperText;
         this.placeholder = this.configProps$.placeholder || '';
         const showGroupSeparators = this.configProps$.showGroupSeparators;
         const theSymbols = getCurrencyCharacters('');
-        this.currDec = theSymbols.theDecimalIndicator || '2';
-        this.currSep = showGroupSeparators ? theSymbols.theDigitGroupSeparator : '';
+        this.decimalSeparator = theSymbols.theDecimalIndicator;
+        this.thousandSeparator = 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 = nValue ? format(nValue, 'percentage') : '';
+        }
         // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
         setTimeout(() => {
             if (this.configProps$.required != null) {
@@ -7418,22 +7527,26 @@ 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, '');
+        // replacing thousand separator with empty string as not required in api call
+        if (this.configProps$.showGroupSeparators) {
+            const thousandSep = this.thousandSeparator === '.' ? '\\.' : this.thousandSeparator;
+            const regExp = new RegExp(String.raw `${thousandSep}`, 'g');
+            value = value?.replace(regExp, '');
         }
-        else {
-            value = value?.replace(/\./g, '');
-            value = value?.replace(/,/g, '.');
+        // replacing decimal separator with '.'
+        if (this.decimalSeparator !== '.') {
+            const regExp = new RegExp(String.raw `${this.decimalSeparator}`, 'g');
+            value = value.replace(regExp, '.');
         }
-        handleEvent(actionsApi, 'changeNblur', propName, value);
+        handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
     }
     getErrorMessage() {
         // field control gets error message from here
@@ -7452,11 +7565,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: thousandSeparator,\n            decimal: decimalSeparator,\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        />\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: thousandSeparator,\n            decimal: decimalSeparator,\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        />\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$: [{
@@ -7535,6 +7648,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) {
@@ -7570,25 +7685,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)
@@ -7605,11 +7711,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$: [{
@@ -7722,9 +7828,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;
@@ -7747,11 +7854,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));
@@ -7772,7 +7875,7 @@ class RadioButtonsComponent {
         return errMessage;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: RadioButtonsComponent, deps: [{ token: AngularPConnectService }, { token: i0.ChangeDetectorRef }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: RadioButtonsComponent, isStandalone: true, selector: "app-radio-buttons", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, providers: [Utils], ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper\n    *ngIf=\"bVisible$ !== false\"\n    name=\"FieldValueList\"\n    [props]=\"{ label$, value$: this.localizedValue, displayMode$ }\"\n  ></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n    <mat-form-field class=\"psdk-radio-form\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n      <span class=\"psdk-label-wrapper-readonly\">\n        <label class=\"psdk-label-readonly\">{{ label$ }}</label>\n      </span>\n      <!-- <mat-label>{{label$}}</mat-label> -->\n      <input matInput [placeholder]=\"placeholder\" style=\"display: none\" />\n      <mat-radio-group\n        [value]=\"value$\"\n        [required]=\"bRequired$\"\n        [formControl]=\"fieldControl\"\n        [attr.data-test-id]=\"testId\"\n        (change)=\"fieldOnChange($event)\"\n        class=\"{{ bInline$ ? 'psdk-radio-horizontal' : 'psdk-radio-vertical' }}\"\n      >\n        <mat-radio-button\n          *ngFor=\"let opt of options$\"\n          [checked]=\"isSelected(opt.key)\"\n          [disabled]=\"bReadonly$\"\n          [value]=\"opt.key\"\n          class=\"psdk-radio-button\"\n        >\n          {{ getLocalizedOptionValue(opt) }}\n        </mat-radio-button>\n      </mat-radio-group>\n      <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n    </mat-form-field>\n  </div>\n</ng-template>\n", styles: [".psdk-label-readonly{opacity:54%;font-size:.7rem}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}.psdk-radio-horizontal{display:flex;flex-direction:row}.psdk-radio-vertical{display:flex;flex-direction:column}.psdk-radio-button{padding:.3125rem 0}.psdk-radio-form{width:100%}.psdk-radio-form ::ng-deep .mat-form-field-underline{background-color:transparent}.psdk-radio-form ::ng-deep .mat-form-field-label{top:0}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => 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.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: "ngmodule", type: i0.forwardRef(() => MatRadioModule) }, { kind: "directive", type: i0.forwardRef(() => i7$1.MatRadioGroup), selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i0.forwardRef(() => i7$1.MatRadioButton), selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { 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: RadioButtonsComponent, isStandalone: true, selector: "app-radio-buttons", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, providers: [Utils], ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper\n    *ngIf=\"bVisible$ !== false\"\n    name=\"FieldValueList\"\n    [props]=\"{ label$, value$: this.localizedValue, displayMode$ }\"\n  ></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n    <mat-form-field class=\"psdk-radio-form\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n      <span class=\"psdk-label-wrapper-readonly\">\n        <label class=\"psdk-label-readonly\">{{ label$ }}</label>\n      </span>\n      <!-- <mat-label>{{label$}}</mat-label> -->\n      <input matInput [placeholder]=\"placeholder\" style=\"display: none\" />\n      <mat-radio-group\n        [value]=\"value$\"\n        [required]=\"bRequired$\"\n        [formControl]=\"fieldControl\"\n        [attr.data-test-id]=\"testId\"\n        (change)=\"fieldOnChange($event)\"\n        class=\"{{ bInline$ ? 'psdk-radio-horizontal' : 'psdk-radio-vertical' }}\"\n      >\n        <mat-radio-button\n          *ngFor=\"let opt of options$\"\n          [checked]=\"isSelected(opt.key)\"\n          [disabled]=\"bReadonly$\"\n          [value]=\"opt.key\"\n          class=\"psdk-radio-button\"\n        >\n          {{ getLocalizedOptionValue(opt) }}\n        </mat-radio-button>\n      </mat-radio-group>\n      <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n    </mat-form-field>\n  </div>\n</ng-template>\n", styles: [".psdk-label-readonly{opacity:54%;font-size:.7rem}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}.psdk-radio-horizontal{display:flex;flex-direction:row}.psdk-radio-vertical{display:flex;flex-direction:column}.psdk-radio-button{padding:.3125rem 0}.psdk-radio-form{width:100%}.psdk-radio-form ::ng-deep .mat-form-field-underline{background-color:transparent}.psdk-radio-form ::ng-deep .mat-form-field-label{top:0}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => 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.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: "ngmodule", type: i0.forwardRef(() => MatRadioModule) }, { kind: "directive", type: i0.forwardRef(() => i7$2.MatRadioGroup), selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i0.forwardRef(() => i7$2.MatRadioButton), selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { 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: RadioButtonsComponent, decorators: [{
             type: Component,
@@ -7903,6 +8006,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) {
@@ -7936,13 +8041,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
@@ -7961,11 +8067,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$: [{
@@ -8092,13 +8198,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
             }] } });
@@ -8236,6 +8344,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);
         }
@@ -8270,12 +8380,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 = '';
@@ -8293,11 +8405,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$: [{
@@ -8374,6 +8486,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) {
@@ -8381,6 +8495,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);
         }
@@ -8407,14 +8526,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 = '';
@@ -8432,11 +8551,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$: [{
@@ -8514,6 +8633,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) {
@@ -8547,12 +8668,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 = '';
@@ -8570,11 +8693,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$: [{
@@ -8653,6 +8776,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;
         };
@@ -8698,7 +8823,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 = '';
@@ -8706,11 +8832,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 = '';
@@ -8728,7 +8853,7 @@ class UserReferenceComponent {
         return errMessage;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: UserReferenceComponent, deps: [{ token: AngularPConnectService }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: UserReferenceComponent, isStandalone: true, selector: "app-user-reference", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div class=\"psdk-user-reference\">\n  <div *ngIf=\"displayMode$; else noDisplayMode\">\n    <component-mapper name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n  </div>\n  <ng-template #noDisplayMode>\n    <div *ngIf=\"type === 'operator'\">\n      <component-mapper name=\"Operator\" [props]=\"{ pConn$ }\"></component-mapper>\n    </div>\n    <div [formGroup]=\"formGroup$\" *ngIf=\"type === 'dropdown'\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-select\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [formControl]=\"fieldControl\"\n          [attr.data-test-id]=\"testId\"\n          (selectionChange)=\"fieldOnChange($event)\"\n        >\n          <mat-option *ngFor=\"let opt of options$\" [value]=\"opt.key\">\n            {{ opt.value }}\n          </mat-option>\n        </mat-select>\n        <mat-label>{{ label$ }}</mat-label>\n        <mat-error *ngIf=\"fieldControl.invalid\">\n          {{ getErrorMessage() }}\n        </mat-error>\n      </mat-form-field>\n    </div>\n    <div [formGroup]=\"formGroup$\" *ngIf=\"type === 'searchbox'\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <input\n          matInput\n          [placeholder]=\"placeholder\"\n          [formControl]=\"fieldControl\"\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [matAutocomplete]=\"auto\"\n          [attr.data-test-id]=\"testId\"\n          (change)=\"fieldOnChange($event)\"\n          (blur)=\"fieldOnBlur($event)\"\n        />\n        <mat-autocomplete #auto=\"matAutocomplete\">\n          <mat-option *ngFor=\"let opt of filteredOptions | async\" [value]=\"opt.value\">\n            <span>{{ opt.value }}</span>\n          </mat-option>\n        </mat-autocomplete>\n        <mat-error *ngIf=\"fieldControl.invalid\">\n          {{ getErrorMessage() }}\n        </mat-error>\n      </mat-form-field>\n    </div>\n  </ng-template>\n</div>\n", styles: [".psdk-user-reference{font-size:.8rem;color:var(--app-neutral-color)}.psdk-single{flex:1}.psdk-double{flex:2}.psdk-top-pad{padding-top:10px}.psdk-full-width{width:100%;padding-left:.625rem}dt{flex:1}dd{flex:2}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => 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: "pipe", type: i0.forwardRef(() => i3.AsyncPipe), name: "async" }, { 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(() => MatSelectModule) }, { kind: "component", type: i0.forwardRef(() => i6$2.MatSelect), selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i0.forwardRef(() => i7.MatOption), selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatOptionModule) }, { kind: "ngmodule", type: i0.forwardRef(() => 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(() => MatAutocompleteModule) }, { kind: "component", type: i0.forwardRef(() => i8.MatAutocomplete), selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i0.forwardRef(() => i8.MatAutocompleteTrigger), selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { 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: UserReferenceComponent, isStandalone: true, selector: "app-user-reference", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div class=\"psdk-user-reference\">\n  <div *ngIf=\"displayMode$; else noDisplayMode\">\n    <component-mapper name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n  </div>\n  <ng-template #noDisplayMode>\n    <div *ngIf=\"type === 'operator'\">\n      <component-mapper name=\"Operator\" [props]=\"{ pConn$ }\"></component-mapper>\n    </div>\n    <div [formGroup]=\"formGroup$\" *ngIf=\"type === 'dropdown'\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-select\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [formControl]=\"fieldControl\"\n          [attr.data-test-id]=\"testId\"\n          (selectionChange)=\"fieldOnChange($event)\"\n        >\n          <mat-option *ngFor=\"let opt of options$\" [value]=\"opt.key\">\n            {{ opt.value }}\n          </mat-option>\n        </mat-select>\n        <mat-label>{{ label$ }}</mat-label>\n        <mat-error *ngIf=\"fieldControl.invalid\">\n          {{ getErrorMessage() }}\n        </mat-error>\n      </mat-form-field>\n    </div>\n    <div [formGroup]=\"formGroup$\" *ngIf=\"type === 'searchbox'\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <input\n          matInput\n          [placeholder]=\"placeholder\"\n          [formControl]=\"fieldControl\"\n          [value]=\"value$\"\n          [required]=\"bRequired$\"\n          [matAutocomplete]=\"auto\"\n          [attr.data-test-id]=\"testId\"\n          (change)=\"fieldOnChange($event)\"\n          (blur)=\"fieldOnBlur($event)\"\n        />\n        <mat-autocomplete #auto=\"matAutocomplete\">\n          <mat-option *ngFor=\"let opt of filteredOptions | async\" [value]=\"opt.value\">\n            <span>{{ opt.value }}</span>\n          </mat-option>\n        </mat-autocomplete>\n        <mat-error *ngIf=\"fieldControl.invalid\">\n          {{ getErrorMessage() }}\n        </mat-error>\n      </mat-form-field>\n    </div>\n  </ng-template>\n</div>\n", styles: [".psdk-user-reference{font-size:.8rem;color:var(--app-neutral-color)}.psdk-single{flex:1}.psdk-double{flex:2}.psdk-top-pad{padding-top:10px}.psdk-full-width{width:100%;padding-left:.625rem}dt{flex:1}dd{flex:2}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => 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: "pipe", type: i0.forwardRef(() => i3.AsyncPipe), name: "async" }, { 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(() => MatSelectModule) }, { kind: "component", type: i0.forwardRef(() => i7$1.MatSelect), selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i0.forwardRef(() => i7.MatOption), selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatOptionModule) }, { kind: "ngmodule", type: i0.forwardRef(() => 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(() => MatAutocompleteModule) }, { kind: "component", type: i0.forwardRef(() => i8.MatAutocomplete), selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i0.forwardRef(() => i8.MatAutocompleteTrigger), selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { 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: UserReferenceComponent, decorators: [{
             type: Component,
@@ -8889,6 +9014,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);
         }
@@ -8904,7 +9031,7 @@ class RichTextComponent {
     }
     fieldOnChange() {
         if (this.status === 'error') {
-            const property = this.pConn$.getStateProps().value;
+            const property = this.propName;
             this.pConn$.clearErrorMessages({
                 property,
                 category: '',
@@ -8913,10 +9040,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"] }] }); }
@@ -9750,23 +9874,9 @@ class DefaultFormComponent extends FormTemplateBaseComponent {
     constructor(templateUtils) {
         super();
         this.templateUtils = templateUtils;
-        this.NO_HEADER_TEMPLATES = [
-            'SubTabs',
-            'SimpleTable',
-            'Details',
-            'DetailsTwoColumn',
-            'DetailsThreeColumn',
-            'NarrowWideDetails',
-            'WideNarrowDetails',
-            'Confirmation'
-        ];
     }
     ngOnInit() {
         const configProps = this.pConn$.getConfigProps();
-        this.template = configProps?.template;
-        const propToUse = { ...this.pConn$.getInheritedProps() };
-        this.showLabel = propToUse?.showLabel;
-        this.label = propToUse?.label;
         const kids = this.pConn$.getChildren();
         this.instructions = this.templateUtils.getInstructions(this.pConn$, configProps?.instructions);
         const numCols = configProps.NumCols ? configProps.NumCols : '1';
@@ -9790,11 +9900,11 @@ class DefaultFormComponent extends FormTemplateBaseComponent {
         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$" }, 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"] }] }); }
+    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: "<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,
-            args: [{ selector: 'app-default-form', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<!-- When adding a component here, add the same component in 'region' template as well -->\n<div *ngIf=\"!NO_HEADER_TEMPLATES.includes(template) && showLabel\">\n  <div class=\"template-title-container\">{{ label }}</div>\n</div>\n<div *ngIf=\"instructions\" class=\"psdk-default-form-instruction-text\">\n  <div key=\"instructions\" id=\"instruction-text\" [innerHTML]=\"instructions\"></div>\n</div>\n<div [className]=\"divClass$\">\n  <div *ngFor=\"let kid of arChildren$\" [ngClass]=\"{ 'grid-column': kid.getPConnect().getComponentName() === 'View' }\">\n    <component-mapper\n      [name]=\"kid.getPConnect().getComponentName()\"\n      [props]=\"{\n        pConn$: kid.getPConnect(),\n        formGroup$: formGroup$\n      }\"\n      errorMsg=\"DefaultForm wants component not yet available: {{ kid.getPConnect().getComponentName() }}\"\n    ></component-mapper>\n  </div>\n</div>\n", styles: [".psdk-default-form-one-column{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));column-gap:1rem}.psdk-default-form-two-column{display:grid;grid-template-columns:repeat(2,1fr);column-gap:1rem}.psdk-default-form-three-column{display:grid;grid-template-columns:repeat(3,1fr);column-gap:1rem}.psdk-default-form-three-column .grid-column{grid-column:1/span 3}.psdk-default-form-two-column .grid-column{grid-column:1/span 2}.psdk-default-form-one-column .grid-column{grid-column:1}.template-title-container{font-size:.9375rem;font-weight:600;margin:10px 0}.psdk-default-form-instruction-text{padding-top:.625rem;padding-bottom:.625rem}\n"] }]
+            args: [{ selector: 'app-default-form', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"instructions\" class=\"psdk-default-form-instruction-text\">\n  <div key=\"instructions\" id=\"instruction-text\" [innerHTML]=\"instructions\"></div>\n</div>\n<div [className]=\"divClass$\">\n  <div *ngFor=\"let kid of arChildren$\" [ngClass]=\"{ 'grid-column': kid.getPConnect().getComponentName() === 'View' }\">\n    <component-mapper\n      [name]=\"kid.getPConnect().getComponentName()\"\n      [props]=\"{\n        pConn$: kid.getPConnect(),\n        formGroup$: formGroup$\n      }\"\n      errorMsg=\"DefaultForm wants component not yet available: {{ kid.getPConnect().getComponentName() }}\"\n    ></component-mapper>\n  </div>\n</div>\n", styles: [".psdk-default-form-one-column{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));column-gap:1rem}.psdk-default-form-two-column{display:grid;grid-template-columns:repeat(2,1fr);column-gap:1rem}.psdk-default-form-three-column{display:grid;grid-template-columns:repeat(3,1fr);column-gap:1rem}.psdk-default-form-three-column .grid-column{grid-column:1/span 3}.psdk-default-form-two-column .grid-column{grid-column:1/span 2}.psdk-default-form-one-column .grid-column{grid-column:1}.template-title-container{font-size:.9375rem;font-weight:600;margin:10px 0}.psdk-default-form-instruction-text{padding-top:.625rem;padding-bottom:.625rem}\n"] }]
         }], ctorParameters: () => [{ type: TemplateUtils }], propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
@@ -10206,7 +10316,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';
@@ -10388,7 +10498,8 @@ class DynamicTabsComponent {
         }
     }
     updateSelf() {
-        const { referenceList } = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
+        const { referenceList, label, showLabel } = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
+        this.propsToUse = { label, showLabel, ...this.pConn$.getInheritedProps() };
         const { tablabel } = this.pConn$.getComponentConfig();
         const tablabelProp = PCore.getAnnotationUtils().getPropertyName(tablabel);
         this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
@@ -10405,11 +10516,11 @@ class DynamicTabsComponent {
             }) || [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: DynamicTabsComponent, deps: [{ token: AngularPConnectService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: DynamicTabsComponent, isStandalone: true, selector: "app-dynamic-tabs", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<mat-tab-group id=\"dynamic-tabs\" mat-stretch-tabs=\"false\" animationDuration=\"0\">\n  <mat-tab *ngFor=\"let tab of tabsItems\" [label]=\"tab.name\">\n    <component-mapper name=\"View\" [props]=\"{ pConn$: tab.content.getPConnect() }\"></component-mapper>\n  </mat-tab>\n</mat-tab-group>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatTabsModule) }, { kind: "component", type: i0.forwardRef(() => i2$1.MatTab), selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i0.forwardRef(() => i2$1.MatTabGroup), selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { 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: DynamicTabsComponent, isStandalone: true, selector: "app-dynamic-tabs", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<div *ngIf=\"propsToUse.showLabel && propsToUse.label\" class=\"template-title-container\">\n  <span>{{ propsToUse.label }}</span>\n</div>\n<mat-tab-group id=\"dynamic-tabs\" mat-stretch-tabs=\"false\" animationDuration=\"0\">\n  <mat-tab *ngFor=\"let tab of tabsItems\" [label]=\"tab.name\">\n    <component-mapper name=\"View\" [props]=\"{ pConn$: tab.content.getPConnect() }\"></component-mapper>\n  </mat-tab>\n</mat-tab-group>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatTabsModule) }, { kind: "component", type: i0.forwardRef(() => i2$1.MatTab), selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i0.forwardRef(() => i2$1.MatTabGroup), selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { 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: DynamicTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-dynamic-tabs', standalone: true, imports: [CommonModule, MatTabsModule, forwardRef(() => ComponentMapperComponent)], template: "<mat-tab-group id=\"dynamic-tabs\" mat-stretch-tabs=\"false\" animationDuration=\"0\">\n  <mat-tab *ngFor=\"let tab of tabsItems\" [label]=\"tab.name\">\n    <component-mapper name=\"View\" [props]=\"{ pConn$: tab.content.getPConnect() }\"></component-mapper>\n  </mat-tab>\n</mat-tab-group>\n" }]
+            args: [{ selector: 'app-dynamic-tabs', standalone: true, imports: [CommonModule, MatTabsModule, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"propsToUse.showLabel && propsToUse.label\" class=\"template-title-container\">\n  <span>{{ propsToUse.label }}</span>\n</div>\n<mat-tab-group id=\"dynamic-tabs\" mat-stretch-tabs=\"false\" animationDuration=\"0\">\n  <mat-tab *ngFor=\"let tab of tabsItems\" [label]=\"tab.name\">\n    <component-mapper name=\"View\" [props]=\"{ pConn$: tab.content.getPConnect() }\"></component-mapper>\n  </mat-tab>\n</mat-tab-group>\n" }]
         }], ctorParameters: () => [{ type: AngularPConnectService }], propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
@@ -10551,11 +10662,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$ === '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}.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}.psdk-val-labels-left{white-space:break-spaces}\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$ === '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}.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}.psdk-val-labels-left{white-space:break-spaces}\n"] }]
         }], propDecorators: { label$: [{
                 type: Input
             }], value$: [{
@@ -11556,7 +11667,6 @@ function init(props) {
     });
 }
 
-/* eslint-disable max-classes-per-file */
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
 let Group$1 = class Group {
     constructor() {
@@ -11599,6 +11709,7 @@ class ListViewComponent {
         this.query = null;
         this.xRayApis = PCore.getDebugger().getXRayRuntime();
         this.xRayUid = this.xRayApis.startXRay();
+        this.label = '';
     }
     ngOnInit() {
         this.configProps$ = this.pConn$.getConfigProps();
@@ -11621,6 +11732,17 @@ class ListViewComponent {
         this.checkBoxValue = this.configProps$.value;
         this.arFilterMainButtons$.push({ actionID: 'submit', jsAction: 'submit', name: 'Submit' });
         this.arFilterSecondaryButtons$.push({ actionID: 'cancel', jsAction: 'cancel', name: 'Cancel' });
+        let title = this.configProps$?.title || this.configProps$?.label || 'List';
+        const inheritedProps = this.configProps$?.inheritedProps;
+        if (title === 'List' && inheritedProps) {
+            for (const inheritedProp of inheritedProps) {
+                if (inheritedProp?.prop === 'label') {
+                    title = inheritedProp?.value;
+                    break;
+                }
+            }
+        }
+        this.label = title;
         this.searchIcon$ = this.utils.getImageSrc('search', this.utils.getSDKStaticContentUrl());
         setTimeout(() => {
             PCore.getPubSubUtils().subscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE, data => {
@@ -12653,6 +12775,10 @@ class ListViewComponent {
         });
         return listFields;
     }
+    getResultsText() {
+        const recordsCount = this.repeatList$?.paginator?.length || 0;
+        return `${recordsCount || 0} result${recordsCount > 1 ? 's' : ''}`;
+    }
     getField(fieldDefs, columnId) {
         const fieldsMap = this.getFieldsMap(fieldDefs);
         return fieldsMap.get(columnId);
@@ -12681,7 +12807,7 @@ class ListViewComponent {
         return select;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ListViewComponent, deps: [{ token: ProgressSpinnerService }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: ListViewComponent, isStandalone: true, selector: "app-list-view", inputs: { pConn$: "pConn$", bInForm$: "bInForm$", payload: "payload" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div class=\"psdk-list-header\">\n  <div>\n    <mat-form-field class=\"psdk-search\" *ngIf=\"bShowSearch$\">\n      <mat-label><img class=\"psdk-icon-search\" src=\"{{ searchIcon$ }}\" /> <span class=\"psdk-search-label\">Search</span> </mat-label>\n      <input matInput id=\"search\" (keyup)=\"applySearch($event)\" placeholder=\"\" />\n    </mat-form-field>\n\n    <div *ngIf=\"!bInForm$\" class=\"psdk-outer-div-in-form\">\n      <div class=\"psdk-inner-div-in-form\" *ngIf=\"bColumnReorder$\">\n        <div>\n          <table\n            mat-table\n            id=\"list-view\"\n            [dataSource]=\"repeatList$\"\n            matSort\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            (cdkDropListDropped)=\"drop($event)\"\n          >\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\" sticky=\"true\">\n              <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\" (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\" cdkDrag>\n                {{ dCol.config.label }}\n                <div class=\"psdk-mat-header-filter\">\n                  <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n                </div>\n                <div class=\"psdk-mat-header-arrow\">\n                  <img class=\"psdk-arrow-svg-icon\" arrow=\"none\" [attr.arrowid]=\"dCol.config.name\" />\n                </div>\n                <div class=\"psdk-mat-header-button\" (click)=\"$event.stopPropagation()\">\n                  <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n                    <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n                  </button>\n                  <mat-menu #groupMenu>\n                    <button *ngIf=\"!_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_groupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n                    </button>\n                    <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n                    </button>\n                    <button mat-menu-item (click)=\"_filter($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n                    </button>\n                  </mat-menu>\n                </div>\n              </th>\n              <td mat-cell *matCellDef=\"let element; index as i\">\n                <button\n                  *ngIf=\"_showButton(dCol.config.name, dCol); else regular\"\n                  mat-button\n                  color=\"primary\"\n                  (click)=\"_listViewClick(dCol.config, element)\"\n                >\n                  {{ element[dCol.config.name] || '---' }}\n                </button>\n                <ng-template #regular>\n                  {{ element[dCol.config.name] || '---' }}\n                </ng-template>\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n\n            <!-- Group header -->\n            <ng-container matColumnDef=\"groupHeader\">\n              <td mat-cell colspan=\"999\" *matCellDef=\"let group\">\n                <mat-icon *ngIf=\"group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_less</mat-icon>\n                <mat-icon *ngIf=\"!group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_more</mat-icon>\n                <strong\n                  >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{\n                    group.totalCounts\n                  }})</strong\n                >\n              </td>\n            </ng-container>\n\n            <tr mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroup\" (click)=\"_groupHeaderClick(row)\"></tr>\n          </table>\n        </div>\n      </div>\n      <div class=\"psdk-inner-div-in-form\" *ngIf=\"!bColumnReorder$\">\n        <div>\n          <table mat-table id=\"list-view\" [dataSource]=\"repeatList$\" matSort>\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\" sticky=\"true\">\n              <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\" (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n                {{ dCol.config.label }}\n                <div class=\"psdk-mat-header-filter\">\n                  <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n                </div>\n                <div class=\"psdk-mat-header-arrow\">\n                  <img class=\"psdk-arrow-svg-icon\" arrow=\"none\" [attr.arrowid]=\"dCol.config.name\" />\n                </div>\n                <div class=\"psdk-mat-header-button\" (click)=\"$event.stopPropagation()\">\n                  <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n                    <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n                  </button>\n                  <mat-menu #groupMenu>\n                    <button *ngIf=\"!_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_groupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n                    </button>\n                    <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n                    </button>\n                    <button mat-menu-item (click)=\"_filter($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n                    </button>\n                  </mat-menu>\n                </div>\n              </th>\n              <td mat-cell *matCellDef=\"let element; index as i\">\n                <button\n                  *ngIf=\"_showButton(dCol.config.name, dCol); else regular\"\n                  mat-button\n                  color=\"primary\"\n                  (click)=\"_listViewClick(dCol.config, element)\"\n                >\n                  {{ element[dCol.config.name] || '---' }}\n                </button>\n                <ng-template #regular>\n                  {{ element[dCol.config.name] || '---' }}\n                </ng-template>\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n\n            <!-- Group header -->\n            <ng-container matColumnDef=\"groupHeader\">\n              <td mat-cell colspan=\"999\" *matCellDef=\"let group\">\n                <mat-icon *ngIf=\"group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_less</mat-icon>\n                <mat-icon *ngIf=\"!group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_more</mat-icon>\n                <strong\n                  >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{\n                    group.totalCounts\n                  }})</strong\n                >\n              </td>\n            </ng-container>\n\n            <tr mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroup\" (click)=\"_groupHeaderClick(row)\"></tr>\n          </table>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"bInForm$\">\n      <div>\n        <div class=\"psdk-inner-div-in-form\">\n          <table id=\"list-view\" *ngIf=\"repeatListData.length > 0\" mat-table [dataSource]=\"repeatList$\" matSort>\n            <ng-container *ngIf=\"singleSelectionMode\" matColumnDef=\"select\">\n              <th mat-header-cell *matHeaderCellDef></th>\n              <td mat-cell *matCellDef=\"let row\">\n                <mat-radio-button [value]=\"row[rowID]\" [checked]=\"row[rowID] === checkBoxValue\" (change)=\"fieldOnChange(row)\"></mat-radio-button>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"multiSelectionMode\" matColumnDef=\"select\">\n              <th mat-header-cell *matHeaderCellDef></th>\n              <td mat-cell *matCellDef=\"let row\">\n                <mat-checkbox [value]=\"row[rowID]\" [checked]=\"isChecked(row)\" (change)=\"onCheckboxClick(row, $event)\"></mat-checkbox>\n              </td>\n            </ng-container>\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\">\n              <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n                {{ dCol.config.label }}\n              </th>\n              <td mat-cell *matCellDef=\"let element\">{{ element[dCol.config.name] || '---' }}</td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n          </table>\n          <div *ngIf=\"repeatListData?.length === 0\">\n            <table id=\"list-view\" *ngIf=\"repeatListData?.length === 0\" mat-table [dataSource]=\"repeatList$\">\n              <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\">\n                <th mat-header-cell *matHeaderCellDef>{{ dCol.config.label }}</th>\n              </ng-container>\n              <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n            </table>\n          </div>\n          <div class=\"psdk-no-records\" *ngIf=\"repeatListData?.length === 0\">No Records Found.</div>\n        </div>\n      </div>\n    </div>\n\n    <mat-paginator id=\"pagination\" *ngIf=\"bInForm$\" [pageSizeOptions]=\"[10, 20, 50, 100, 500, 1000]\" showFirstLastButtons></mat-paginator>\n    <mat-paginator id=\"pagination\" *ngIf=\"!bInForm$\" [pageSizeOptions]=\"[10, 20, 50, 100, 500]\" showFirstLastButtons></mat-paginator>\n  </div>\n\n  <!-- pop overs for filters-->\n  <div *ngIf=\"bShowFilterPopover$\" class=\"psdk-dialog-background\">\n    <div class=\"psdk-modal-file-top\">\n      <h4>\n        Filter:<b> {{ filterContainsLabel$ }}</b>\n      </h4>\n      <div *ngIf=\"bContains$\">\n        <mat-form-field class=\"psdk-full-width\">\n          <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n            <mat-option value=\"contains\">Contains</mat-option>\n            <mat-option value=\"equals\">Equals</mat-option>\n            <mat-option value=\"startswith\">Starts with</mat-option>\n          </mat-select>\n        </mat-form-field>\n\n        <mat-form-field class=\"psdk-full-width\">\n          <input matInput type=\"text\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsValue($event)\" />\n        </mat-form-field>\n      </div>\n\n      <div *ngIf=\"bDateTime$\">\n        <mat-form-field class=\"psdk-full-width\">\n          <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n            <mat-option value=\"notequal\">is not equal to</mat-option>\n            <mat-option value=\"after\">after</mat-option>\n            <mat-option value=\"before\">before</mat-option>\n            <mat-option value=\"null\">is null</mat-option>\n            <mat-option value=\"notnull\">is not null</mat-option>\n          </mat-select>\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsDate$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Date</mat-label>\n          <input\n            matInput\n            #dateInput\n            [matDatepicker]=\"pegadate\"\n            type=\"text\"\n            [value]=\"filterContainsValue$\"\n            (dateChange)=\"_filterContainsDateValue($event, dateInput.value)\"\n          />\n          <mat-datepicker-toggle matSuffix [for]=\"pegadate\"></mat-datepicker-toggle>\n          <mat-datepicker #pegadate [startAt]=\"filterContainsValue$\"></mat-datepicker>\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsDateTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Date time</mat-label>\n          <input matInput type=\"datetime-local\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsDateTimeValue($event)\" />\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Time</mat-label>\n          <input matInput type=\"time\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsTimeValue($event)\" />\n        </mat-form-field>\n      </div>\n\n      <component-mapper\n        name=\"ActionButtons\"\n        [props]=\"{ arMainButtons$: arFilterMainButtons$, arSecondaryButtons$: arFilterSecondaryButtons$ }\"\n        [parent]=\"this\"\n        [outputEvents]=\"{ actionButtonClick: _onFilterActionButtonClick }\"\n      ></component-mapper>\n    </div>\n  </div>\n</div>\n", styles: [".psdk-list-header{background-color:var(--app-form-color);padding:1rem;margin:.5rem;border-radius:.6125rem}table{width:100%}::ng-deep .mat-sort-header-content{white-space:nowrap}::ng-deep td.mat-mdc-cell{white-space:nowrap}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{padding:0rem .188rem}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:nowrap;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem;padding-right:.625rem}.psdk-icon-search{vertical-align:sub;padding:.125rem;min-width:unset;width:1.1rem}.psdk-outer-div-in-form{padding:1rem;overflow:hidden}.psdk-inner-div-in-form{height:auto;position:relative;width:100%;overflow:auto;max-height:550px;min-height:auto}.psdk-list-view-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-filter-svg-icon,.psdk-arrow-svg-icon{width:1rem;display:inline-block;vertical-align:middle;filter:var(--app-neutral-color-filter)}.psdk-filter-popover{display:table;margin:auto;min-width:100px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color);position:absolute;z-index:99}.psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-dialog-background-color);position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color)}.psdk-no-records{height:56px;justify-content:center;display:flex;align-items:center;border:1px solid var(--app-neutral-light-color);border-top:none}.psdk-table-field-link{color:var(--app-primary-color);padding:0;cursor:pointer;border:0;background-color:transparent;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i5.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i5.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i5.MatSuffix), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => i6$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(() => MatTableModule) }, { kind: "component", type: i0.forwardRef(() => i6$3.MatTable), selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i0.forwardRef(() => i6$3.MatHeaderCellDef), selector: "[matHeaderCellDef]" }, { kind: "directive", type: i0.forwardRef(() => i6$3.MatHeaderRowDef), selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i0.forwardRef(() => i6$3.MatColumnDef), selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i0.forwardRef(() => i6$3.MatCellDef), selector: "[matCellDef]" }, { kind: "directive", type: i0.forwardRef(() => i6$3.MatRowDef), selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i0.forwardRef(() => i6$3.MatHeaderCell), selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i0.forwardRef(() => i6$3.MatCell), selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i0.forwardRef(() => i6$3.MatHeaderRow), selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i0.forwardRef(() => i6$3.MatRow), selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatSortModule) }, { kind: "directive", type: i0.forwardRef(() => i7$2.MatSort), selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i0.forwardRef(() => i7$2.MatSortHeader), selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: i0.forwardRef(() => DragDropModule) }, { kind: "directive", type: i0.forwardRef(() => i8$2.CdkDropList), selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i0.forwardRef(() => i8$2.CdkDrag), selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i3$1.MatButton), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(() => i3$1.MatIconButton), selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatMenuModule) }, { kind: "component", type: i0.forwardRef(() => i6.MatMenu), selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(() => i6.MatMenuItem), selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(() => i6.MatMenuTrigger), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i2$2.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatRadioModule) }, { kind: "component", type: i0.forwardRef(() => i7$1.MatRadioButton), selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatCheckboxModule) }, { kind: "component", type: i0.forwardRef(() => i5$3.MatCheckbox), selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatPaginatorModule) }, { kind: "component", type: i0.forwardRef(() => i14.MatPaginator), selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatSelectModule) }, { kind: "component", type: i0.forwardRef(() => i6$2.MatSelect), selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i0.forwardRef(() => i7.MatOption), selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatOptionModule) }, { kind: "ngmodule", type: i0.forwardRef(() => MatDatepickerModule) }, { kind: "component", type: i0.forwardRef(() => i4$2.MatDatepicker), selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i0.forwardRef(() => i4$2.MatDatepickerInput), selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i0.forwardRef(() => i4$2.MatDatepickerToggle), selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: ListViewComponent, isStandalone: true, selector: "app-list-view", inputs: { pConn$: "pConn$", bInForm$: "bInForm$", payload: "payload" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div class=\"psdk-list-header\">\n  <div>\n    <h3 *ngIf=\"label\" class=\"label\" style=\"font-weight: bold\">\n      {{ label }} <span class=\"results-count\">{{ getResultsText() }}</span>\n    </h3>\n    <mat-form-field class=\"psdk-search\" *ngIf=\"bShowSearch$\">\n      <mat-label><img class=\"psdk-icon-search\" src=\"{{ searchIcon$ }}\" /> <span class=\"psdk-search-label\">Search</span> </mat-label>\n      <input matInput id=\"search\" (keyup)=\"applySearch($event)\" placeholder=\"\" />\n    </mat-form-field>\n\n    <div *ngIf=\"!bInForm$\" class=\"psdk-outer-div-in-form\">\n      <div class=\"psdk-inner-div-in-form\" *ngIf=\"bColumnReorder$\">\n        <div>\n          <table\n            mat-table\n            id=\"list-view\"\n            [dataSource]=\"repeatList$\"\n            matSort\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            (cdkDropListDropped)=\"drop($event)\"\n          >\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\" sticky=\"true\">\n              <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\" (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\" cdkDrag>\n                {{ dCol.config.label }}\n                <div class=\"psdk-mat-header-filter\">\n                  <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n                </div>\n                <div class=\"psdk-mat-header-arrow\">\n                  <img class=\"psdk-arrow-svg-icon\" arrow=\"none\" [attr.arrowid]=\"dCol.config.name\" />\n                </div>\n                <div class=\"psdk-mat-header-button\" (click)=\"$event.stopPropagation()\">\n                  <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n                    <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n                  </button>\n                  <mat-menu #groupMenu>\n                    <button *ngIf=\"!_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_groupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n                    </button>\n                    <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n                    </button>\n                    <button mat-menu-item (click)=\"_filter($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n                    </button>\n                  </mat-menu>\n                </div>\n              </th>\n              <td mat-cell *matCellDef=\"let element; index as i\">\n                <button\n                  *ngIf=\"_showButton(dCol.config.name, dCol); else regular\"\n                  mat-button\n                  color=\"primary\"\n                  (click)=\"_listViewClick(dCol.config, element)\"\n                >\n                  {{ element[dCol.config.name] || '---' }}\n                </button>\n                <ng-template #regular>\n                  {{ element[dCol.config.name] || '---' }}\n                </ng-template>\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n\n            <!-- Group header -->\n            <ng-container matColumnDef=\"groupHeader\">\n              <td mat-cell colspan=\"999\" *matCellDef=\"let group\">\n                <mat-icon *ngIf=\"group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_less</mat-icon>\n                <mat-icon *ngIf=\"!group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_more</mat-icon>\n                <strong\n                  >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{\n                    group.totalCounts\n                  }})</strong\n                >\n              </td>\n            </ng-container>\n\n            <tr mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroup\" (click)=\"_groupHeaderClick(row)\"></tr>\n          </table>\n        </div>\n      </div>\n      <div class=\"psdk-inner-div-in-form\" *ngIf=\"!bColumnReorder$\">\n        <div>\n          <table mat-table id=\"list-view\" [dataSource]=\"repeatList$\" matSort>\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\" sticky=\"true\">\n              <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\" (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n                {{ dCol.config.label }}\n                <div class=\"psdk-mat-header-filter\">\n                  <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n                </div>\n                <div class=\"psdk-mat-header-arrow\">\n                  <img class=\"psdk-arrow-svg-icon\" arrow=\"none\" [attr.arrowid]=\"dCol.config.name\" />\n                </div>\n                <div class=\"psdk-mat-header-button\" (click)=\"$event.stopPropagation()\">\n                  <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n                    <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n                  </button>\n                  <mat-menu #groupMenu>\n                    <button *ngIf=\"!_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_groupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n                    </button>\n                    <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n                    </button>\n                    <button mat-menu-item (click)=\"_filter($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n                    </button>\n                  </mat-menu>\n                </div>\n              </th>\n              <td mat-cell *matCellDef=\"let element; index as i\">\n                <button\n                  *ngIf=\"_showButton(dCol.config.name, dCol); else regular\"\n                  mat-button\n                  color=\"primary\"\n                  (click)=\"_listViewClick(dCol.config, element)\"\n                >\n                  {{ element[dCol.config.name] || '---' }}\n                </button>\n                <ng-template #regular>\n                  {{ element[dCol.config.name] || '---' }}\n                </ng-template>\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n\n            <!-- Group header -->\n            <ng-container matColumnDef=\"groupHeader\">\n              <td mat-cell colspan=\"999\" *matCellDef=\"let group\">\n                <mat-icon *ngIf=\"group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_less</mat-icon>\n                <mat-icon *ngIf=\"!group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_more</mat-icon>\n                <strong\n                  >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{\n                    group.totalCounts\n                  }})</strong\n                >\n              </td>\n            </ng-container>\n\n            <tr mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroup\" (click)=\"_groupHeaderClick(row)\"></tr>\n          </table>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"bInForm$\">\n      <div>\n        <div class=\"psdk-inner-div-in-form\">\n          <table id=\"list-view\" *ngIf=\"repeatListData.length > 0\" mat-table [dataSource]=\"repeatList$\" matSort>\n            <ng-container *ngIf=\"singleSelectionMode\" matColumnDef=\"select\">\n              <th mat-header-cell *matHeaderCellDef></th>\n              <td mat-cell *matCellDef=\"let row\">\n                <mat-radio-button [value]=\"row[rowID]\" [checked]=\"row[rowID] === checkBoxValue\" (change)=\"fieldOnChange(row)\"></mat-radio-button>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"multiSelectionMode\" matColumnDef=\"select\">\n              <th mat-header-cell *matHeaderCellDef></th>\n              <td mat-cell *matCellDef=\"let row\">\n                <mat-checkbox [value]=\"row[rowID]\" [checked]=\"isChecked(row)\" (change)=\"onCheckboxClick(row, $event)\"></mat-checkbox>\n              </td>\n            </ng-container>\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\">\n              <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n                {{ dCol.config.label }}\n              </th>\n              <td mat-cell *matCellDef=\"let element\">{{ element[dCol.config.name] || '---' }}</td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n          </table>\n          <div *ngIf=\"repeatListData?.length === 0\">\n            <table id=\"list-view\" *ngIf=\"repeatListData?.length === 0\" mat-table [dataSource]=\"repeatList$\">\n              <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\">\n                <th mat-header-cell *matHeaderCellDef>{{ dCol.config.label }}</th>\n              </ng-container>\n              <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n            </table>\n          </div>\n          <div class=\"psdk-no-records\" *ngIf=\"repeatListData?.length === 0\">No Records Found.</div>\n        </div>\n      </div>\n    </div>\n\n    <mat-paginator id=\"pagination\" *ngIf=\"bInForm$\" [pageSizeOptions]=\"[10, 20, 50, 100, 500, 1000]\" showFirstLastButtons></mat-paginator>\n    <mat-paginator id=\"pagination\" *ngIf=\"!bInForm$\" [pageSizeOptions]=\"[10, 20, 50, 100, 500]\" showFirstLastButtons></mat-paginator>\n  </div>\n\n  <!-- pop overs for filters-->\n  <div *ngIf=\"bShowFilterPopover$\" class=\"psdk-dialog-background\">\n    <div class=\"psdk-modal-file-top\">\n      <h4>\n        Filter:<b> {{ filterContainsLabel$ }}</b>\n      </h4>\n      <div *ngIf=\"bContains$\">\n        <mat-form-field class=\"psdk-full-width\">\n          <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n            <mat-option value=\"contains\">Contains</mat-option>\n            <mat-option value=\"equals\">Equals</mat-option>\n            <mat-option value=\"startswith\">Starts with</mat-option>\n          </mat-select>\n        </mat-form-field>\n\n        <mat-form-field class=\"psdk-full-width\">\n          <input matInput type=\"text\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsValue($event)\" />\n        </mat-form-field>\n      </div>\n\n      <div *ngIf=\"bDateTime$\">\n        <mat-form-field class=\"psdk-full-width\">\n          <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n            <mat-option value=\"notequal\">is not equal to</mat-option>\n            <mat-option value=\"after\">after</mat-option>\n            <mat-option value=\"before\">before</mat-option>\n            <mat-option value=\"null\">is null</mat-option>\n            <mat-option value=\"notnull\">is not null</mat-option>\n          </mat-select>\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsDate$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Date</mat-label>\n          <input\n            matInput\n            #dateInput\n            [matDatepicker]=\"pegadate\"\n            type=\"text\"\n            [value]=\"filterContainsValue$\"\n            (dateChange)=\"_filterContainsDateValue($event, dateInput.value)\"\n          />\n          <mat-datepicker-toggle matSuffix [for]=\"pegadate\"></mat-datepicker-toggle>\n          <mat-datepicker #pegadate [startAt]=\"filterContainsValue$\"></mat-datepicker>\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsDateTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Date time</mat-label>\n          <input matInput type=\"datetime-local\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsDateTimeValue($event)\" />\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Time</mat-label>\n          <input matInput type=\"time\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsTimeValue($event)\" />\n        </mat-form-field>\n      </div>\n\n      <component-mapper\n        name=\"ActionButtons\"\n        [props]=\"{ arMainButtons$: arFilterMainButtons$, arSecondaryButtons$: arFilterSecondaryButtons$ }\"\n        [parent]=\"this\"\n        [outputEvents]=\"{ actionButtonClick: _onFilterActionButtonClick }\"\n      ></component-mapper>\n    </div>\n  </div>\n</div>\n", styles: [".psdk-list-header{background-color:var(--app-form-color);padding:1rem;margin:.5rem;border-radius:.6125rem}table{width:100%}::ng-deep .mat-sort-header-content{white-space:nowrap}::ng-deep td.mat-mdc-cell{white-space:nowrap}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{padding:0rem .188rem}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:nowrap;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem;padding-right:.625rem}.psdk-icon-search{vertical-align:sub;padding:.125rem;min-width:unset;width:1.1rem}.psdk-outer-div-in-form{padding:1rem;overflow:hidden}.psdk-inner-div-in-form{height:auto;position:relative;width:100%;overflow:auto;max-height:550px;min-height:auto}.psdk-list-view-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-filter-svg-icon,.psdk-arrow-svg-icon{width:1rem;display:inline-block;vertical-align:middle;filter:var(--app-neutral-color-filter)}.psdk-filter-popover{display:table;margin:auto;min-width:100px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color);position:absolute;z-index:99}.psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-dialog-background-color);position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color)}.psdk-no-records{height:56px;justify-content:center;display:flex;align-items:center;border:1px solid var(--app-neutral-light-color);border-top:none}.psdk-table-field-link{color:var(--app-primary-color);padding:0;cursor:pointer;border:0;background-color:transparent;align-items:center}.results-count{opacity:.7;font-size:.8rem;font-weight:700;margin-inline-start:.625rem}.label{margin:8px}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i5.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i5.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i5.MatSuffix), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => i6$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(() => MatTableModule) }, { kind: "component", type: i0.forwardRef(() => i6$2.MatTable), selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i0.forwardRef(() => i6$2.MatHeaderCellDef), selector: "[matHeaderCellDef]" }, { kind: "directive", type: i0.forwardRef(() => i6$2.MatHeaderRowDef), selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i0.forwardRef(() => i6$2.MatColumnDef), selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i0.forwardRef(() => i6$2.MatCellDef), selector: "[matCellDef]" }, { kind: "directive", type: i0.forwardRef(() => i6$2.MatRowDef), selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i0.forwardRef(() => i6$2.MatHeaderCell), selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i0.forwardRef(() => i6$2.MatCell), selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i0.forwardRef(() => i6$2.MatHeaderRow), selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i0.forwardRef(() => i6$2.MatRow), selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatSortModule) }, { kind: "directive", type: i0.forwardRef(() => i7$3.MatSort), selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i0.forwardRef(() => i7$3.MatSortHeader), selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: i0.forwardRef(() => DragDropModule) }, { kind: "directive", type: i0.forwardRef(() => i8$2.CdkDropList), selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i0.forwardRef(() => i8$2.CdkDrag), selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i3$1.MatButton), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(() => i3$1.MatIconButton), selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatMenuModule) }, { kind: "component", type: i0.forwardRef(() => i6.MatMenu), selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(() => i6.MatMenuItem), selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(() => i6.MatMenuTrigger), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i2$2.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatRadioModule) }, { kind: "component", type: i0.forwardRef(() => i7$2.MatRadioButton), selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatCheckboxModule) }, { kind: "component", type: i0.forwardRef(() => i5$3.MatCheckbox), selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatPaginatorModule) }, { kind: "component", type: i0.forwardRef(() => i14.MatPaginator), selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatSelectModule) }, { kind: "component", type: i0.forwardRef(() => i7$1.MatSelect), selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i0.forwardRef(() => i7.MatOption), selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatOptionModule) }, { kind: "ngmodule", type: i0.forwardRef(() => MatDatepickerModule) }, { kind: "component", type: i0.forwardRef(() => i4$2.MatDatepicker), selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i0.forwardRef(() => i4$2.MatDatepickerInput), selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i0.forwardRef(() => i4$2.MatDatepickerToggle), selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ListViewComponent, decorators: [{
             type: Component,
@@ -12704,7 +12830,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
                         MatOptionModule,
                         MatDatepickerModule,
                         forwardRef(() => ComponentMapperComponent)
-                    ], template: "<div class=\"psdk-list-header\">\n  <div>\n    <mat-form-field class=\"psdk-search\" *ngIf=\"bShowSearch$\">\n      <mat-label><img class=\"psdk-icon-search\" src=\"{{ searchIcon$ }}\" /> <span class=\"psdk-search-label\">Search</span> </mat-label>\n      <input matInput id=\"search\" (keyup)=\"applySearch($event)\" placeholder=\"\" />\n    </mat-form-field>\n\n    <div *ngIf=\"!bInForm$\" class=\"psdk-outer-div-in-form\">\n      <div class=\"psdk-inner-div-in-form\" *ngIf=\"bColumnReorder$\">\n        <div>\n          <table\n            mat-table\n            id=\"list-view\"\n            [dataSource]=\"repeatList$\"\n            matSort\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            (cdkDropListDropped)=\"drop($event)\"\n          >\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\" sticky=\"true\">\n              <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\" (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\" cdkDrag>\n                {{ dCol.config.label }}\n                <div class=\"psdk-mat-header-filter\">\n                  <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n                </div>\n                <div class=\"psdk-mat-header-arrow\">\n                  <img class=\"psdk-arrow-svg-icon\" arrow=\"none\" [attr.arrowid]=\"dCol.config.name\" />\n                </div>\n                <div class=\"psdk-mat-header-button\" (click)=\"$event.stopPropagation()\">\n                  <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n                    <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n                  </button>\n                  <mat-menu #groupMenu>\n                    <button *ngIf=\"!_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_groupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n                    </button>\n                    <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n                    </button>\n                    <button mat-menu-item (click)=\"_filter($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n                    </button>\n                  </mat-menu>\n                </div>\n              </th>\n              <td mat-cell *matCellDef=\"let element; index as i\">\n                <button\n                  *ngIf=\"_showButton(dCol.config.name, dCol); else regular\"\n                  mat-button\n                  color=\"primary\"\n                  (click)=\"_listViewClick(dCol.config, element)\"\n                >\n                  {{ element[dCol.config.name] || '---' }}\n                </button>\n                <ng-template #regular>\n                  {{ element[dCol.config.name] || '---' }}\n                </ng-template>\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n\n            <!-- Group header -->\n            <ng-container matColumnDef=\"groupHeader\">\n              <td mat-cell colspan=\"999\" *matCellDef=\"let group\">\n                <mat-icon *ngIf=\"group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_less</mat-icon>\n                <mat-icon *ngIf=\"!group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_more</mat-icon>\n                <strong\n                  >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{\n                    group.totalCounts\n                  }})</strong\n                >\n              </td>\n            </ng-container>\n\n            <tr mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroup\" (click)=\"_groupHeaderClick(row)\"></tr>\n          </table>\n        </div>\n      </div>\n      <div class=\"psdk-inner-div-in-form\" *ngIf=\"!bColumnReorder$\">\n        <div>\n          <table mat-table id=\"list-view\" [dataSource]=\"repeatList$\" matSort>\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\" sticky=\"true\">\n              <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\" (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n                {{ dCol.config.label }}\n                <div class=\"psdk-mat-header-filter\">\n                  <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n                </div>\n                <div class=\"psdk-mat-header-arrow\">\n                  <img class=\"psdk-arrow-svg-icon\" arrow=\"none\" [attr.arrowid]=\"dCol.config.name\" />\n                </div>\n                <div class=\"psdk-mat-header-button\" (click)=\"$event.stopPropagation()\">\n                  <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n                    <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n                  </button>\n                  <mat-menu #groupMenu>\n                    <button *ngIf=\"!_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_groupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n                    </button>\n                    <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n                    </button>\n                    <button mat-menu-item (click)=\"_filter($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n                    </button>\n                  </mat-menu>\n                </div>\n              </th>\n              <td mat-cell *matCellDef=\"let element; index as i\">\n                <button\n                  *ngIf=\"_showButton(dCol.config.name, dCol); else regular\"\n                  mat-button\n                  color=\"primary\"\n                  (click)=\"_listViewClick(dCol.config, element)\"\n                >\n                  {{ element[dCol.config.name] || '---' }}\n                </button>\n                <ng-template #regular>\n                  {{ element[dCol.config.name] || '---' }}\n                </ng-template>\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n\n            <!-- Group header -->\n            <ng-container matColumnDef=\"groupHeader\">\n              <td mat-cell colspan=\"999\" *matCellDef=\"let group\">\n                <mat-icon *ngIf=\"group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_less</mat-icon>\n                <mat-icon *ngIf=\"!group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_more</mat-icon>\n                <strong\n                  >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{\n                    group.totalCounts\n                  }})</strong\n                >\n              </td>\n            </ng-container>\n\n            <tr mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroup\" (click)=\"_groupHeaderClick(row)\"></tr>\n          </table>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"bInForm$\">\n      <div>\n        <div class=\"psdk-inner-div-in-form\">\n          <table id=\"list-view\" *ngIf=\"repeatListData.length > 0\" mat-table [dataSource]=\"repeatList$\" matSort>\n            <ng-container *ngIf=\"singleSelectionMode\" matColumnDef=\"select\">\n              <th mat-header-cell *matHeaderCellDef></th>\n              <td mat-cell *matCellDef=\"let row\">\n                <mat-radio-button [value]=\"row[rowID]\" [checked]=\"row[rowID] === checkBoxValue\" (change)=\"fieldOnChange(row)\"></mat-radio-button>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"multiSelectionMode\" matColumnDef=\"select\">\n              <th mat-header-cell *matHeaderCellDef></th>\n              <td mat-cell *matCellDef=\"let row\">\n                <mat-checkbox [value]=\"row[rowID]\" [checked]=\"isChecked(row)\" (change)=\"onCheckboxClick(row, $event)\"></mat-checkbox>\n              </td>\n            </ng-container>\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\">\n              <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n                {{ dCol.config.label }}\n              </th>\n              <td mat-cell *matCellDef=\"let element\">{{ element[dCol.config.name] || '---' }}</td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n          </table>\n          <div *ngIf=\"repeatListData?.length === 0\">\n            <table id=\"list-view\" *ngIf=\"repeatListData?.length === 0\" mat-table [dataSource]=\"repeatList$\">\n              <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\">\n                <th mat-header-cell *matHeaderCellDef>{{ dCol.config.label }}</th>\n              </ng-container>\n              <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n            </table>\n          </div>\n          <div class=\"psdk-no-records\" *ngIf=\"repeatListData?.length === 0\">No Records Found.</div>\n        </div>\n      </div>\n    </div>\n\n    <mat-paginator id=\"pagination\" *ngIf=\"bInForm$\" [pageSizeOptions]=\"[10, 20, 50, 100, 500, 1000]\" showFirstLastButtons></mat-paginator>\n    <mat-paginator id=\"pagination\" *ngIf=\"!bInForm$\" [pageSizeOptions]=\"[10, 20, 50, 100, 500]\" showFirstLastButtons></mat-paginator>\n  </div>\n\n  <!-- pop overs for filters-->\n  <div *ngIf=\"bShowFilterPopover$\" class=\"psdk-dialog-background\">\n    <div class=\"psdk-modal-file-top\">\n      <h4>\n        Filter:<b> {{ filterContainsLabel$ }}</b>\n      </h4>\n      <div *ngIf=\"bContains$\">\n        <mat-form-field class=\"psdk-full-width\">\n          <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n            <mat-option value=\"contains\">Contains</mat-option>\n            <mat-option value=\"equals\">Equals</mat-option>\n            <mat-option value=\"startswith\">Starts with</mat-option>\n          </mat-select>\n        </mat-form-field>\n\n        <mat-form-field class=\"psdk-full-width\">\n          <input matInput type=\"text\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsValue($event)\" />\n        </mat-form-field>\n      </div>\n\n      <div *ngIf=\"bDateTime$\">\n        <mat-form-field class=\"psdk-full-width\">\n          <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n            <mat-option value=\"notequal\">is not equal to</mat-option>\n            <mat-option value=\"after\">after</mat-option>\n            <mat-option value=\"before\">before</mat-option>\n            <mat-option value=\"null\">is null</mat-option>\n            <mat-option value=\"notnull\">is not null</mat-option>\n          </mat-select>\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsDate$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Date</mat-label>\n          <input\n            matInput\n            #dateInput\n            [matDatepicker]=\"pegadate\"\n            type=\"text\"\n            [value]=\"filterContainsValue$\"\n            (dateChange)=\"_filterContainsDateValue($event, dateInput.value)\"\n          />\n          <mat-datepicker-toggle matSuffix [for]=\"pegadate\"></mat-datepicker-toggle>\n          <mat-datepicker #pegadate [startAt]=\"filterContainsValue$\"></mat-datepicker>\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsDateTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Date time</mat-label>\n          <input matInput type=\"datetime-local\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsDateTimeValue($event)\" />\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Time</mat-label>\n          <input matInput type=\"time\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsTimeValue($event)\" />\n        </mat-form-field>\n      </div>\n\n      <component-mapper\n        name=\"ActionButtons\"\n        [props]=\"{ arMainButtons$: arFilterMainButtons$, arSecondaryButtons$: arFilterSecondaryButtons$ }\"\n        [parent]=\"this\"\n        [outputEvents]=\"{ actionButtonClick: _onFilterActionButtonClick }\"\n      ></component-mapper>\n    </div>\n  </div>\n</div>\n", styles: [".psdk-list-header{background-color:var(--app-form-color);padding:1rem;margin:.5rem;border-radius:.6125rem}table{width:100%}::ng-deep .mat-sort-header-content{white-space:nowrap}::ng-deep td.mat-mdc-cell{white-space:nowrap}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{padding:0rem .188rem}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:nowrap;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem;padding-right:.625rem}.psdk-icon-search{vertical-align:sub;padding:.125rem;min-width:unset;width:1.1rem}.psdk-outer-div-in-form{padding:1rem;overflow:hidden}.psdk-inner-div-in-form{height:auto;position:relative;width:100%;overflow:auto;max-height:550px;min-height:auto}.psdk-list-view-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-filter-svg-icon,.psdk-arrow-svg-icon{width:1rem;display:inline-block;vertical-align:middle;filter:var(--app-neutral-color-filter)}.psdk-filter-popover{display:table;margin:auto;min-width:100px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color);position:absolute;z-index:99}.psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-dialog-background-color);position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color)}.psdk-no-records{height:56px;justify-content:center;display:flex;align-items:center;border:1px solid var(--app-neutral-light-color);border-top:none}.psdk-table-field-link{color:var(--app-primary-color);padding:0;cursor:pointer;border:0;background-color:transparent;align-items:center}\n"] }]
+                    ], template: "<div class=\"psdk-list-header\">\n  <div>\n    <h3 *ngIf=\"label\" class=\"label\" style=\"font-weight: bold\">\n      {{ label }} <span class=\"results-count\">{{ getResultsText() }}</span>\n    </h3>\n    <mat-form-field class=\"psdk-search\" *ngIf=\"bShowSearch$\">\n      <mat-label><img class=\"psdk-icon-search\" src=\"{{ searchIcon$ }}\" /> <span class=\"psdk-search-label\">Search</span> </mat-label>\n      <input matInput id=\"search\" (keyup)=\"applySearch($event)\" placeholder=\"\" />\n    </mat-form-field>\n\n    <div *ngIf=\"!bInForm$\" class=\"psdk-outer-div-in-form\">\n      <div class=\"psdk-inner-div-in-form\" *ngIf=\"bColumnReorder$\">\n        <div>\n          <table\n            mat-table\n            id=\"list-view\"\n            [dataSource]=\"repeatList$\"\n            matSort\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            (cdkDropListDropped)=\"drop($event)\"\n          >\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\" sticky=\"true\">\n              <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\" (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\" cdkDrag>\n                {{ dCol.config.label }}\n                <div class=\"psdk-mat-header-filter\">\n                  <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n                </div>\n                <div class=\"psdk-mat-header-arrow\">\n                  <img class=\"psdk-arrow-svg-icon\" arrow=\"none\" [attr.arrowid]=\"dCol.config.name\" />\n                </div>\n                <div class=\"psdk-mat-header-button\" (click)=\"$event.stopPropagation()\">\n                  <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n                    <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n                  </button>\n                  <mat-menu #groupMenu>\n                    <button *ngIf=\"!_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_groupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n                    </button>\n                    <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n                    </button>\n                    <button mat-menu-item (click)=\"_filter($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n                    </button>\n                  </mat-menu>\n                </div>\n              </th>\n              <td mat-cell *matCellDef=\"let element; index as i\">\n                <button\n                  *ngIf=\"_showButton(dCol.config.name, dCol); else regular\"\n                  mat-button\n                  color=\"primary\"\n                  (click)=\"_listViewClick(dCol.config, element)\"\n                >\n                  {{ element[dCol.config.name] || '---' }}\n                </button>\n                <ng-template #regular>\n                  {{ element[dCol.config.name] || '---' }}\n                </ng-template>\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n\n            <!-- Group header -->\n            <ng-container matColumnDef=\"groupHeader\">\n              <td mat-cell colspan=\"999\" *matCellDef=\"let group\">\n                <mat-icon *ngIf=\"group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_less</mat-icon>\n                <mat-icon *ngIf=\"!group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_more</mat-icon>\n                <strong\n                  >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{\n                    group.totalCounts\n                  }})</strong\n                >\n              </td>\n            </ng-container>\n\n            <tr mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroup\" (click)=\"_groupHeaderClick(row)\"></tr>\n          </table>\n        </div>\n      </div>\n      <div class=\"psdk-inner-div-in-form\" *ngIf=\"!bColumnReorder$\">\n        <div>\n          <table mat-table id=\"list-view\" [dataSource]=\"repeatList$\" matSort>\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\" sticky=\"true\">\n              <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\" (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n                {{ dCol.config.label }}\n                <div class=\"psdk-mat-header-filter\">\n                  <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n                </div>\n                <div class=\"psdk-mat-header-arrow\">\n                  <img class=\"psdk-arrow-svg-icon\" arrow=\"none\" [attr.arrowid]=\"dCol.config.name\" />\n                </div>\n                <div class=\"psdk-mat-header-button\" (click)=\"$event.stopPropagation()\">\n                  <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n                    <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n                  </button>\n                  <mat-menu #groupMenu>\n                    <button *ngIf=\"!_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_groupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n                    </button>\n                    <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n                    </button>\n                    <button mat-menu-item (click)=\"_filter($event, dCol)\">\n                      <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n                    </button>\n                  </mat-menu>\n                </div>\n              </th>\n              <td mat-cell *matCellDef=\"let element; index as i\">\n                <button\n                  *ngIf=\"_showButton(dCol.config.name, dCol); else regular\"\n                  mat-button\n                  color=\"primary\"\n                  (click)=\"_listViewClick(dCol.config, element)\"\n                >\n                  {{ element[dCol.config.name] || '---' }}\n                </button>\n                <ng-template #regular>\n                  {{ element[dCol.config.name] || '---' }}\n                </ng-template>\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n\n            <!-- Group header -->\n            <ng-container matColumnDef=\"groupHeader\">\n              <td mat-cell colspan=\"999\" *matCellDef=\"let group\">\n                <mat-icon *ngIf=\"group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_less</mat-icon>\n                <mat-icon *ngIf=\"!group.expanded\" [attr.style]=\"_getIconStyle(group.level)\">expand_more</mat-icon>\n                <strong\n                  >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{\n                    group.totalCounts\n                  }})</strong\n                >\n              </td>\n            </ng-container>\n\n            <tr mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroup\" (click)=\"_groupHeaderClick(row)\"></tr>\n          </table>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"bInForm$\">\n      <div>\n        <div class=\"psdk-inner-div-in-form\">\n          <table id=\"list-view\" *ngIf=\"repeatListData.length > 0\" mat-table [dataSource]=\"repeatList$\" matSort>\n            <ng-container *ngIf=\"singleSelectionMode\" matColumnDef=\"select\">\n              <th mat-header-cell *matHeaderCellDef></th>\n              <td mat-cell *matCellDef=\"let row\">\n                <mat-radio-button [value]=\"row[rowID]\" [checked]=\"row[rowID] === checkBoxValue\" (change)=\"fieldOnChange(row)\"></mat-radio-button>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"multiSelectionMode\" matColumnDef=\"select\">\n              <th mat-header-cell *matHeaderCellDef></th>\n              <td mat-cell *matCellDef=\"let row\">\n                <mat-checkbox [value]=\"row[rowID]\" [checked]=\"isChecked(row)\" (change)=\"onCheckboxClick(row, $event)\"></mat-checkbox>\n              </td>\n            </ng-container>\n            <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\">\n              <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n                {{ dCol.config.label }}\n              </th>\n              <td mat-cell *matCellDef=\"let element\">{{ element[dCol.config.name] || '---' }}</td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n          </table>\n          <div *ngIf=\"repeatListData?.length === 0\">\n            <table id=\"list-view\" *ngIf=\"repeatListData?.length === 0\" mat-table [dataSource]=\"repeatList$\">\n              <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.config.name\">\n                <th mat-header-cell *matHeaderCellDef>{{ dCol.config.label }}</th>\n              </ng-container>\n              <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n            </table>\n          </div>\n          <div class=\"psdk-no-records\" *ngIf=\"repeatListData?.length === 0\">No Records Found.</div>\n        </div>\n      </div>\n    </div>\n\n    <mat-paginator id=\"pagination\" *ngIf=\"bInForm$\" [pageSizeOptions]=\"[10, 20, 50, 100, 500, 1000]\" showFirstLastButtons></mat-paginator>\n    <mat-paginator id=\"pagination\" *ngIf=\"!bInForm$\" [pageSizeOptions]=\"[10, 20, 50, 100, 500]\" showFirstLastButtons></mat-paginator>\n  </div>\n\n  <!-- pop overs for filters-->\n  <div *ngIf=\"bShowFilterPopover$\" class=\"psdk-dialog-background\">\n    <div class=\"psdk-modal-file-top\">\n      <h4>\n        Filter:<b> {{ filterContainsLabel$ }}</b>\n      </h4>\n      <div *ngIf=\"bContains$\">\n        <mat-form-field class=\"psdk-full-width\">\n          <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n            <mat-option value=\"contains\">Contains</mat-option>\n            <mat-option value=\"equals\">Equals</mat-option>\n            <mat-option value=\"startswith\">Starts with</mat-option>\n          </mat-select>\n        </mat-form-field>\n\n        <mat-form-field class=\"psdk-full-width\">\n          <input matInput type=\"text\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsValue($event)\" />\n        </mat-form-field>\n      </div>\n\n      <div *ngIf=\"bDateTime$\">\n        <mat-form-field class=\"psdk-full-width\">\n          <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n            <mat-option value=\"notequal\">is not equal to</mat-option>\n            <mat-option value=\"after\">after</mat-option>\n            <mat-option value=\"before\">before</mat-option>\n            <mat-option value=\"null\">is null</mat-option>\n            <mat-option value=\"notnull\">is not null</mat-option>\n          </mat-select>\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsDate$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Date</mat-label>\n          <input\n            matInput\n            #dateInput\n            [matDatepicker]=\"pegadate\"\n            type=\"text\"\n            [value]=\"filterContainsValue$\"\n            (dateChange)=\"_filterContainsDateValue($event, dateInput.value)\"\n          />\n          <mat-datepicker-toggle matSuffix [for]=\"pegadate\"></mat-datepicker-toggle>\n          <mat-datepicker #pegadate [startAt]=\"filterContainsValue$\"></mat-datepicker>\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsDateTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Date time</mat-label>\n          <input matInput type=\"datetime-local\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsDateTimeValue($event)\" />\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"bIsTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n          <mat-label>Time</mat-label>\n          <input matInput type=\"time\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsTimeValue($event)\" />\n        </mat-form-field>\n      </div>\n\n      <component-mapper\n        name=\"ActionButtons\"\n        [props]=\"{ arMainButtons$: arFilterMainButtons$, arSecondaryButtons$: arFilterSecondaryButtons$ }\"\n        [parent]=\"this\"\n        [outputEvents]=\"{ actionButtonClick: _onFilterActionButtonClick }\"\n      ></component-mapper>\n    </div>\n  </div>\n</div>\n", styles: [".psdk-list-header{background-color:var(--app-form-color);padding:1rem;margin:.5rem;border-radius:.6125rem}table{width:100%}::ng-deep .mat-sort-header-content{white-space:nowrap}::ng-deep td.mat-mdc-cell{white-space:nowrap}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{padding:0rem .188rem}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:nowrap;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem;padding-right:.625rem}.psdk-icon-search{vertical-align:sub;padding:.125rem;min-width:unset;width:1.1rem}.psdk-outer-div-in-form{padding:1rem;overflow:hidden}.psdk-inner-div-in-form{height:auto;position:relative;width:100%;overflow:auto;max-height:550px;min-height:auto}.psdk-list-view-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-filter-svg-icon,.psdk-arrow-svg-icon{width:1rem;display:inline-block;vertical-align:middle;filter:var(--app-neutral-color-filter)}.psdk-filter-popover{display:table;margin:auto;min-width:100px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color);position:absolute;z-index:99}.psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-dialog-background-color);position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color)}.psdk-no-records{height:56px;justify-content:center;display:flex;align-items:center;border:1px solid var(--app-neutral-light-color);border-top:none}.psdk-table-field-link{color:var(--app-primary-color);padding:0;cursor:pointer;border:0;background-color:transparent;align-items:center}.results-count{opacity:.7;font-size:.8rem;font-weight:700;margin-inline-start:.625rem}.label{margin:8px}\n"] }]
         }], ctorParameters: () => [{ type: ProgressSpinnerService }, { type: Utils }], propDecorators: { paginator: [{
                 type: ViewChild,
                 args: [MatPaginator]
@@ -13114,6 +13240,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)
@@ -13172,7 +13300,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
@@ -14591,7 +14721,7 @@ class SimpleTableManualComponent {
         this.elementsData = eleData;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: SimpleTableManualComponent, deps: [{ token: AngularPConnectService }, { token: Utils }, { token: DatapageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: SimpleTableManualComponent, isStandalone: true, selector: "app-simple-table-manual", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"bVisible$\">\n  <div class=\"simple-table-wrapper\">\n    <h3 *ngIf=\"label\" className=\"label\" style=\"font-weight: bold\">\n      {{ label }} <span class=\"results-count\">{{ getResultsText() }}</span>\n    </h3>\n    <table *ngIf=\"readOnlyMode || allowEditingInModal\" mat-table [dataSource]=\"rowData\" class=\"mat-elevation-z8\" id=\"readonly-table\" matSort>\n      <ng-container *ngFor=\"let dCol of processedFields\" [matColumnDef]=\"dCol.config.name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n          <div>{{ dCol.config.label }}</div>\n          <div class=\"psdk-mat-header-filter\">\n            <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n          </div>\n          <div (click)=\"$event.stopPropagation()\">\n            <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n              <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n            </button>\n            <mat-menu #groupMenu>\n              <button mat-menu-item (click)=\"_groupBy($event, dCol)\">\n                <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n              </button>\n              <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n                <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n              </button>\n              <button mat-menu-item (click)=\"_filter($event, dCol)\">\n                <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n              </button>\n            </mat-menu>\n          </div>\n        </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element[dCol.config.name] || '---' }}</td>\n      </ng-container>\n      <ng-container matColumnDef=\"DeleteIcon\">\n        <div *ngIf=\"allowEditingInModal\">\n          <th mat-header-cell *matHeaderCellDef></th>\n          <td mat-cell *matCellDef=\"let element; index as j\">\n            <div class=\"header-icon\">\n              <button mat-icon-button [matMenuTriggerFor]=\"utilityMenu\">\n                <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n              </button>\n              <mat-menu #utilityMenu=\"matMenu\" overlapTrigger=\"false\">\n                <button mat-menu-item (click)=\"editRecord(element, j)\">Edit</button>\n                <button mat-menu-item (click)=\"deleteRecord(j)\">Delete</button>\n              </mat-menu>\n            </div>\n          </td>\n        </div>\n      </ng-container>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n    <table *ngIf=\"editableMode && !allowEditingInModal\" mat-table [dataSource]=\"elementsData\" class=\"mat-elevation-z8\" id=\"editable-table\">\n      <ng-container *ngFor=\"let dCol of fieldDefs; let i = index\">\n        <ng-container *ngIf=\"dCol.name != 'DeleteIcon'\" [matColumnDef]=\"dCol.name\">\n          <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\">{{ dCol.label }}</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <component-mapper\n              [name]=\"element[i].getPConnect().getComponentName()\"\n              [props]=\"{\n                pConn$: element[i].getPConnect(),\n                formGroup$: formGroup$\n              }\"\n              errorMsg=\"Table wants component not yet available: {{ element[i].getPConnect().getComponentName() }}\"\n            ></component-mapper>\n          </td>\n        </ng-container>\n      </ng-container>\n      <ng-container matColumnDef=\"DeleteIcon\">\n        <th mat-header-cell *matHeaderCellDef></th>\n        <td mat-cell *matCellDef=\"let element; index as j\">\n          <button id=\"delete-button\" mat-icon-button (click)=\"deleteRecord(j)\">\n            <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ menuIconOverride$ }}\" />\n          </button>\n        </td>\n      </ng-container>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n    <div class=\"psdk-no-records\" id=\"no-records\" *ngIf=\"editableMode && referenceList?.length === 0\">No Records Found.</div>\n    <div class=\"psdk-no-records\" id=\"no-records\" *ngIf=\"readOnlyMode && rowData?.data?.length === 0\">No Records Found.</div>\n  </div>\n  <button *ngIf=\"showAddRowButton\" mat-button color=\"primary\" style=\"font-size: 16px\" (click)=\"addRecord()\">+ Add</button>\n</ng-container>\n\n<!-- pop overs for filters-->\n<div *ngIf=\"bShowFilterPopover$\" class=\"psdk-dialog-background\">\n  <div class=\"psdk-modal-file-top\">\n    <h4>\n      Filter:<b> {{ filterContainsLabel$ }}</b>\n    </h4>\n    <div *ngIf=\"bContains$\">\n      <mat-form-field class=\"psdk-full-width\">\n        <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n          <mat-option value=\"contains\">Contains</mat-option>\n          <mat-option value=\"equals\">Equals</mat-option>\n          <mat-option value=\"startswith\">Starts with</mat-option>\n        </mat-select>\n      </mat-form-field>\n\n      <mat-form-field class=\"psdk-full-width\">\n        <input matInput type=\"text\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsValue($event)\" />\n      </mat-form-field>\n    </div>\n\n    <div *ngIf=\"bDateTime$\">\n      <mat-form-field class=\"psdk-full-width\">\n        <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n          <mat-option value=\"notequal\">is not equal to</mat-option>\n          <mat-option value=\"after\">after</mat-option>\n          <mat-option value=\"before\">before</mat-option>\n          <mat-option value=\"null\">is null</mat-option>\n          <mat-option value=\"notnull\">is not null</mat-option>\n        </mat-select>\n      </mat-form-field>\n\n      <mat-form-field *ngIf=\"bIsDate$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n        <mat-label>Date</mat-label>\n        <input\n          matInput\n          #dateInput\n          [matDatepicker]=\"pegadate\"\n          type=\"text\"\n          [value]=\"filterContainsValue$\"\n          (dateChange)=\"_filterContainsDateValue($event, dateInput.value)\"\n        />\n        <mat-datepicker-toggle matSuffix [for]=\"pegadate\"></mat-datepicker-toggle>\n        <mat-datepicker #pegadate [startAt]=\"filterContainsValue$\"></mat-datepicker>\n      </mat-form-field>\n\n      <mat-form-field *ngIf=\"bIsDateTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n        <mat-label>Date time</mat-label>\n        <input matInput type=\"datetime-local\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsDateTimeValue($event)\" />\n      </mat-form-field>\n\n      <mat-form-field *ngIf=\"bIsTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n        <mat-label>Time</mat-label>\n        <input matInput type=\"time\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsTimeValue($event)\" />\n      </mat-form-field>\n    </div>\n\n    <component-mapper\n      name=\"ActionButtons\"\n      [props]=\"{ arMainButtons$: arFilterMainButtons$, arSecondaryButtons$: arFilterSecondaryButtons$ }\"\n      [parent]=\"this\"\n      [outputEvents]=\"{ actionButtonClick: _onFilterActionButtonClick }\"\n    ></component-mapper>\n  </div>\n</div>\n", styles: [".simple-table-wrapper{width:100%;margin-top:.5rem;margin-bottom:.5rem}table{width:100%}::ng-deep .mat-sort-header-content{white-space:normal}::ng-deep td.mat-mdc-cell{white-space:normal}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{border-right:1px solid var(--app-neutral-light-color);padding:8px!important}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:normal;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem}.psdk-icon-search{vertical-align:sub;padding:0rem .125rem;min-width:unset;width:1.1rem}.psdk-outer-div-in-form{display:inline-grid}.psdk-inner-div-in-form{height:auto;position:relative;width:100%;overflow:auto;max-height:550px;min-height:auto}.psdk-list-view-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-filter-svg-icon,.psdk-arrow-svg-icon{width:1rem;display:inline-block;vertical-align:middle;filter:var(--app-neutral-color-filter)}.psdk-filter-popover{display:table;margin:auto;min-width:100px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color);position:absolute;z-index:99}.psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-dialog-background-color);position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color)}tr.mat-mdc-row{cursor:pointer}tr.mat-mdc-header-row{background:var(--app-table-header-background-color)}.psdk-data-readonly{margin-top:.625rem;width:100%}.psdk-no-records{height:56px;justify-content:center;display:flex;align-items:center;border:1px solid var(--app-neutral-light-color);border-top:none;background:var(--app-form-color)}.psdk-utility-card-action-svg-icon{width:1.4rem}.label{margin:8px}.results-count{opacity:.7;font-size:.8rem;font-weight:700;margin-inline-start:.625rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatTableModule) }, { kind: "component", type: i0.forwardRef(() => i6$3.MatTable), selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i0.forwardRef(() => i6$3.MatHeaderCellDef), selector: "[matHeaderCellDef]" }, { kind: "directive", type: i0.forwardRef(() => i6$3.MatHeaderRowDef), selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i0.forwardRef(() => i6$3.MatColumnDef), selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i0.forwardRef(() => i6$3.MatCellDef), selector: "[matCellDef]" }, { kind: "directive", type: i0.forwardRef(() => i6$3.MatRowDef), selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i0.forwardRef(() => i6$3.MatHeaderCell), selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i0.forwardRef(() => i6$3.MatCell), selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i0.forwardRef(() => i6$3.MatHeaderRow), selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i0.forwardRef(() => i6$3.MatRow), selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i3$1.MatButton), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(() => i3$1.MatIconButton), selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatSortModule) }, { kind: "directive", type: i0.forwardRef(() => i7$2.MatSort), selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i0.forwardRef(() => i7$2.MatSortHeader), selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatMenuModule) }, { kind: "component", type: i0.forwardRef(() => i6.MatMenu), selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(() => i6.MatMenuItem), selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(() => i6.MatMenuTrigger), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i5.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i5.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i5.MatSuffix), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(() => 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(() => MatOptionModule) }, { kind: "component", type: i0.forwardRef(() => i7.MatOption), selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatSelectModule) }, { kind: "component", type: i0.forwardRef(() => i6$2.MatSelect), selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "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: SimpleTableManualComponent, isStandalone: true, selector: "app-simple-table-manual", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"bVisible$\">\n  <div class=\"simple-table-wrapper\">\n    <h3 *ngIf=\"label\" className=\"label\" style=\"font-weight: bold\">\n      {{ label }} <span class=\"results-count\">{{ getResultsText() }}</span>\n    </h3>\n    <table *ngIf=\"readOnlyMode || allowEditingInModal\" mat-table [dataSource]=\"rowData\" class=\"mat-elevation-z8\" id=\"readonly-table\" matSort>\n      <ng-container *ngFor=\"let dCol of processedFields\" [matColumnDef]=\"dCol.config.name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n          <div>{{ dCol.config.label }}</div>\n          <div class=\"psdk-mat-header-filter\">\n            <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n          </div>\n          <div (click)=\"$event.stopPropagation()\">\n            <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n              <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n            </button>\n            <mat-menu #groupMenu>\n              <button mat-menu-item (click)=\"_groupBy($event, dCol)\">\n                <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n              </button>\n              <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n                <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n              </button>\n              <button mat-menu-item (click)=\"_filter($event, dCol)\">\n                <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n              </button>\n            </mat-menu>\n          </div>\n        </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element[dCol.config.name] || '---' }}</td>\n      </ng-container>\n      <ng-container matColumnDef=\"DeleteIcon\">\n        <div *ngIf=\"allowEditingInModal\">\n          <th mat-header-cell *matHeaderCellDef></th>\n          <td mat-cell *matCellDef=\"let element; index as j\">\n            <div class=\"header-icon\">\n              <button mat-icon-button [matMenuTriggerFor]=\"utilityMenu\">\n                <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n              </button>\n              <mat-menu #utilityMenu=\"matMenu\" overlapTrigger=\"false\">\n                <button mat-menu-item (click)=\"editRecord(element, j)\">Edit</button>\n                <button mat-menu-item (click)=\"deleteRecord(j)\">Delete</button>\n              </mat-menu>\n            </div>\n          </td>\n        </div>\n      </ng-container>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n    <table *ngIf=\"editableMode && !allowEditingInModal\" mat-table [dataSource]=\"elementsData\" class=\"mat-elevation-z8\" id=\"editable-table\">\n      <ng-container *ngFor=\"let dCol of fieldDefs; let i = index\">\n        <ng-container *ngIf=\"dCol.name != 'DeleteIcon'\" [matColumnDef]=\"dCol.name\">\n          <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\">{{ dCol.label }}</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <component-mapper\n              [name]=\"element[i].getPConnect().getComponentName()\"\n              [props]=\"{\n                pConn$: element[i].getPConnect(),\n                formGroup$: formGroup$\n              }\"\n              errorMsg=\"Table wants component not yet available: {{ element[i].getPConnect().getComponentName() }}\"\n            ></component-mapper>\n          </td>\n        </ng-container>\n      </ng-container>\n      <ng-container matColumnDef=\"DeleteIcon\">\n        <th mat-header-cell *matHeaderCellDef></th>\n        <td mat-cell *matCellDef=\"let element; index as j\">\n          <button id=\"delete-button\" mat-icon-button (click)=\"deleteRecord(j)\">\n            <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ menuIconOverride$ }}\" />\n          </button>\n        </td>\n      </ng-container>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n    <div class=\"psdk-no-records\" id=\"no-records\" *ngIf=\"editableMode && referenceList?.length === 0\">No Records Found.</div>\n    <div class=\"psdk-no-records\" id=\"no-records\" *ngIf=\"readOnlyMode && rowData?.data?.length === 0\">No Records Found.</div>\n  </div>\n  <button *ngIf=\"showAddRowButton\" mat-button color=\"primary\" style=\"font-size: 16px\" (click)=\"addRecord()\">+ Add</button>\n</ng-container>\n\n<!-- pop overs for filters-->\n<div *ngIf=\"bShowFilterPopover$\" class=\"psdk-dialog-background\">\n  <div class=\"psdk-modal-file-top\">\n    <h4>\n      Filter:<b> {{ filterContainsLabel$ }}</b>\n    </h4>\n    <div *ngIf=\"bContains$\">\n      <mat-form-field class=\"psdk-full-width\">\n        <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n          <mat-option value=\"contains\">Contains</mat-option>\n          <mat-option value=\"equals\">Equals</mat-option>\n          <mat-option value=\"startswith\">Starts with</mat-option>\n        </mat-select>\n      </mat-form-field>\n\n      <mat-form-field class=\"psdk-full-width\">\n        <input matInput type=\"text\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsValue($event)\" />\n      </mat-form-field>\n    </div>\n\n    <div *ngIf=\"bDateTime$\">\n      <mat-form-field class=\"psdk-full-width\">\n        <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n          <mat-option value=\"notequal\">is not equal to</mat-option>\n          <mat-option value=\"after\">after</mat-option>\n          <mat-option value=\"before\">before</mat-option>\n          <mat-option value=\"null\">is null</mat-option>\n          <mat-option value=\"notnull\">is not null</mat-option>\n        </mat-select>\n      </mat-form-field>\n\n      <mat-form-field *ngIf=\"bIsDate$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n        <mat-label>Date</mat-label>\n        <input\n          matInput\n          #dateInput\n          [matDatepicker]=\"pegadate\"\n          type=\"text\"\n          [value]=\"filterContainsValue$\"\n          (dateChange)=\"_filterContainsDateValue($event, dateInput.value)\"\n        />\n        <mat-datepicker-toggle matSuffix [for]=\"pegadate\"></mat-datepicker-toggle>\n        <mat-datepicker #pegadate [startAt]=\"filterContainsValue$\"></mat-datepicker>\n      </mat-form-field>\n\n      <mat-form-field *ngIf=\"bIsDateTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n        <mat-label>Date time</mat-label>\n        <input matInput type=\"datetime-local\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsDateTimeValue($event)\" />\n      </mat-form-field>\n\n      <mat-form-field *ngIf=\"bIsTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n        <mat-label>Time</mat-label>\n        <input matInput type=\"time\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsTimeValue($event)\" />\n      </mat-form-field>\n    </div>\n\n    <component-mapper\n      name=\"ActionButtons\"\n      [props]=\"{ arMainButtons$: arFilterMainButtons$, arSecondaryButtons$: arFilterSecondaryButtons$ }\"\n      [parent]=\"this\"\n      [outputEvents]=\"{ actionButtonClick: _onFilterActionButtonClick }\"\n    ></component-mapper>\n  </div>\n</div>\n", styles: [".simple-table-wrapper{width:100%;margin-top:.5rem;margin-bottom:.5rem;overflow-y:auto}table{width:100%}::ng-deep .mat-sort-header-content{white-space:normal}::ng-deep td.mat-mdc-cell{white-space:normal}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{border-right:1px solid var(--app-neutral-light-color);padding:8px!important}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:normal;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem}.psdk-icon-search{vertical-align:sub;padding:0rem .125rem;min-width:unset;width:1.1rem}.psdk-outer-div-in-form{display:inline-grid}.psdk-inner-div-in-form{height:auto;position:relative;width:100%;overflow:auto;max-height:550px;min-height:auto}.psdk-list-view-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-filter-svg-icon,.psdk-arrow-svg-icon{width:1rem;display:inline-block;vertical-align:middle;filter:var(--app-neutral-color-filter)}.psdk-filter-popover{display:table;margin:auto;min-width:100px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color);position:absolute;z-index:99}.psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-dialog-background-color);position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color)}tr.mat-mdc-row{cursor:pointer}tr.mat-mdc-header-row{background:var(--app-table-header-background-color)}.psdk-data-readonly{margin-top:.625rem;width:100%}.psdk-no-records{height:56px;justify-content:center;display:flex;align-items:center;border:1px solid var(--app-neutral-light-color);border-top:none;background:var(--app-form-color)}.psdk-utility-card-action-svg-icon{width:1.4rem}.label{margin:8px}.results-count{opacity:.7;font-size:.8rem;font-weight:700;margin-inline-start:.625rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatTableModule) }, { kind: "component", type: i0.forwardRef(() => i6$2.MatTable), selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i0.forwardRef(() => i6$2.MatHeaderCellDef), selector: "[matHeaderCellDef]" }, { kind: "directive", type: i0.forwardRef(() => i6$2.MatHeaderRowDef), selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i0.forwardRef(() => i6$2.MatColumnDef), selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i0.forwardRef(() => i6$2.MatCellDef), selector: "[matCellDef]" }, { kind: "directive", type: i0.forwardRef(() => i6$2.MatRowDef), selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i0.forwardRef(() => i6$2.MatHeaderCell), selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i0.forwardRef(() => i6$2.MatCell), selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i0.forwardRef(() => i6$2.MatHeaderRow), selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i0.forwardRef(() => i6$2.MatRow), selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i3$1.MatButton), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(() => i3$1.MatIconButton), selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatSortModule) }, { kind: "directive", type: i0.forwardRef(() => i7$3.MatSort), selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i0.forwardRef(() => i7$3.MatSortHeader), selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatMenuModule) }, { kind: "component", type: i0.forwardRef(() => i6.MatMenu), selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(() => i6.MatMenuItem), selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(() => i6.MatMenuTrigger), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i5.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i5.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i5.MatSuffix), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(() => 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(() => MatOptionModule) }, { kind: "component", type: i0.forwardRef(() => i7.MatOption), selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatSelectModule) }, { kind: "component", type: i0.forwardRef(() => i7$1.MatSelect), selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "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: SimpleTableManualComponent, decorators: [{
             type: Component,
@@ -14607,7 +14737,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
                         MatSelectModule,
                         MatInputModule,
                         forwardRef(() => ComponentMapperComponent)
-                    ], template: "<ng-container *ngIf=\"bVisible$\">\n  <div class=\"simple-table-wrapper\">\n    <h3 *ngIf=\"label\" className=\"label\" style=\"font-weight: bold\">\n      {{ label }} <span class=\"results-count\">{{ getResultsText() }}</span>\n    </h3>\n    <table *ngIf=\"readOnlyMode || allowEditingInModal\" mat-table [dataSource]=\"rowData\" class=\"mat-elevation-z8\" id=\"readonly-table\" matSort>\n      <ng-container *ngFor=\"let dCol of processedFields\" [matColumnDef]=\"dCol.config.name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n          <div>{{ dCol.config.label }}</div>\n          <div class=\"psdk-mat-header-filter\">\n            <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n          </div>\n          <div (click)=\"$event.stopPropagation()\">\n            <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n              <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n            </button>\n            <mat-menu #groupMenu>\n              <button mat-menu-item (click)=\"_groupBy($event, dCol)\">\n                <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n              </button>\n              <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n                <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n              </button>\n              <button mat-menu-item (click)=\"_filter($event, dCol)\">\n                <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n              </button>\n            </mat-menu>\n          </div>\n        </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element[dCol.config.name] || '---' }}</td>\n      </ng-container>\n      <ng-container matColumnDef=\"DeleteIcon\">\n        <div *ngIf=\"allowEditingInModal\">\n          <th mat-header-cell *matHeaderCellDef></th>\n          <td mat-cell *matCellDef=\"let element; index as j\">\n            <div class=\"header-icon\">\n              <button mat-icon-button [matMenuTriggerFor]=\"utilityMenu\">\n                <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n              </button>\n              <mat-menu #utilityMenu=\"matMenu\" overlapTrigger=\"false\">\n                <button mat-menu-item (click)=\"editRecord(element, j)\">Edit</button>\n                <button mat-menu-item (click)=\"deleteRecord(j)\">Delete</button>\n              </mat-menu>\n            </div>\n          </td>\n        </div>\n      </ng-container>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n    <table *ngIf=\"editableMode && !allowEditingInModal\" mat-table [dataSource]=\"elementsData\" class=\"mat-elevation-z8\" id=\"editable-table\">\n      <ng-container *ngFor=\"let dCol of fieldDefs; let i = index\">\n        <ng-container *ngIf=\"dCol.name != 'DeleteIcon'\" [matColumnDef]=\"dCol.name\">\n          <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\">{{ dCol.label }}</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <component-mapper\n              [name]=\"element[i].getPConnect().getComponentName()\"\n              [props]=\"{\n                pConn$: element[i].getPConnect(),\n                formGroup$: formGroup$\n              }\"\n              errorMsg=\"Table wants component not yet available: {{ element[i].getPConnect().getComponentName() }}\"\n            ></component-mapper>\n          </td>\n        </ng-container>\n      </ng-container>\n      <ng-container matColumnDef=\"DeleteIcon\">\n        <th mat-header-cell *matHeaderCellDef></th>\n        <td mat-cell *matCellDef=\"let element; index as j\">\n          <button id=\"delete-button\" mat-icon-button (click)=\"deleteRecord(j)\">\n            <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ menuIconOverride$ }}\" />\n          </button>\n        </td>\n      </ng-container>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n    <div class=\"psdk-no-records\" id=\"no-records\" *ngIf=\"editableMode && referenceList?.length === 0\">No Records Found.</div>\n    <div class=\"psdk-no-records\" id=\"no-records\" *ngIf=\"readOnlyMode && rowData?.data?.length === 0\">No Records Found.</div>\n  </div>\n  <button *ngIf=\"showAddRowButton\" mat-button color=\"primary\" style=\"font-size: 16px\" (click)=\"addRecord()\">+ Add</button>\n</ng-container>\n\n<!-- pop overs for filters-->\n<div *ngIf=\"bShowFilterPopover$\" class=\"psdk-dialog-background\">\n  <div class=\"psdk-modal-file-top\">\n    <h4>\n      Filter:<b> {{ filterContainsLabel$ }}</b>\n    </h4>\n    <div *ngIf=\"bContains$\">\n      <mat-form-field class=\"psdk-full-width\">\n        <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n          <mat-option value=\"contains\">Contains</mat-option>\n          <mat-option value=\"equals\">Equals</mat-option>\n          <mat-option value=\"startswith\">Starts with</mat-option>\n        </mat-select>\n      </mat-form-field>\n\n      <mat-form-field class=\"psdk-full-width\">\n        <input matInput type=\"text\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsValue($event)\" />\n      </mat-form-field>\n    </div>\n\n    <div *ngIf=\"bDateTime$\">\n      <mat-form-field class=\"psdk-full-width\">\n        <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n          <mat-option value=\"notequal\">is not equal to</mat-option>\n          <mat-option value=\"after\">after</mat-option>\n          <mat-option value=\"before\">before</mat-option>\n          <mat-option value=\"null\">is null</mat-option>\n          <mat-option value=\"notnull\">is not null</mat-option>\n        </mat-select>\n      </mat-form-field>\n\n      <mat-form-field *ngIf=\"bIsDate$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n        <mat-label>Date</mat-label>\n        <input\n          matInput\n          #dateInput\n          [matDatepicker]=\"pegadate\"\n          type=\"text\"\n          [value]=\"filterContainsValue$\"\n          (dateChange)=\"_filterContainsDateValue($event, dateInput.value)\"\n        />\n        <mat-datepicker-toggle matSuffix [for]=\"pegadate\"></mat-datepicker-toggle>\n        <mat-datepicker #pegadate [startAt]=\"filterContainsValue$\"></mat-datepicker>\n      </mat-form-field>\n\n      <mat-form-field *ngIf=\"bIsDateTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n        <mat-label>Date time</mat-label>\n        <input matInput type=\"datetime-local\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsDateTimeValue($event)\" />\n      </mat-form-field>\n\n      <mat-form-field *ngIf=\"bIsTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n        <mat-label>Time</mat-label>\n        <input matInput type=\"time\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsTimeValue($event)\" />\n      </mat-form-field>\n    </div>\n\n    <component-mapper\n      name=\"ActionButtons\"\n      [props]=\"{ arMainButtons$: arFilterMainButtons$, arSecondaryButtons$: arFilterSecondaryButtons$ }\"\n      [parent]=\"this\"\n      [outputEvents]=\"{ actionButtonClick: _onFilterActionButtonClick }\"\n    ></component-mapper>\n  </div>\n</div>\n", styles: [".simple-table-wrapper{width:100%;margin-top:.5rem;margin-bottom:.5rem}table{width:100%}::ng-deep .mat-sort-header-content{white-space:normal}::ng-deep td.mat-mdc-cell{white-space:normal}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{border-right:1px solid var(--app-neutral-light-color);padding:8px!important}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:normal;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem}.psdk-icon-search{vertical-align:sub;padding:0rem .125rem;min-width:unset;width:1.1rem}.psdk-outer-div-in-form{display:inline-grid}.psdk-inner-div-in-form{height:auto;position:relative;width:100%;overflow:auto;max-height:550px;min-height:auto}.psdk-list-view-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-filter-svg-icon,.psdk-arrow-svg-icon{width:1rem;display:inline-block;vertical-align:middle;filter:var(--app-neutral-color-filter)}.psdk-filter-popover{display:table;margin:auto;min-width:100px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color);position:absolute;z-index:99}.psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-dialog-background-color);position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color)}tr.mat-mdc-row{cursor:pointer}tr.mat-mdc-header-row{background:var(--app-table-header-background-color)}.psdk-data-readonly{margin-top:.625rem;width:100%}.psdk-no-records{height:56px;justify-content:center;display:flex;align-items:center;border:1px solid var(--app-neutral-light-color);border-top:none;background:var(--app-form-color)}.psdk-utility-card-action-svg-icon{width:1.4rem}.label{margin:8px}.results-count{opacity:.7;font-size:.8rem;font-weight:700;margin-inline-start:.625rem}\n"] }]
+                    ], template: "<ng-container *ngIf=\"bVisible$\">\n  <div class=\"simple-table-wrapper\">\n    <h3 *ngIf=\"label\" className=\"label\" style=\"font-weight: bold\">\n      {{ label }} <span class=\"results-count\">{{ getResultsText() }}</span>\n    </h3>\n    <table *ngIf=\"readOnlyMode || allowEditingInModal\" mat-table [dataSource]=\"rowData\" class=\"mat-elevation-z8\" id=\"readonly-table\" matSort>\n      <ng-container *ngFor=\"let dCol of processedFields\" [matColumnDef]=\"dCol.config.name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header (click)=\"_headerSortClick($event, dCol)\" arrowPosition=\"before\">\n          <div>{{ dCol.config.label }}</div>\n          <div class=\"psdk-mat-header-filter\">\n            <img class=\"psdk-filter-svg-icon\" name=\"filterOnIcon\" />\n          </div>\n          <div (click)=\"$event.stopPropagation()\">\n            <button mat-icon-button [matMenuTriggerFor]=\"groupMenu\">\n              <img class=\"psdk-list-view-svg-icon\" src=\"{{ menuSvgIcon$ }}\" />\n            </button>\n            <mat-menu #groupMenu>\n              <button mat-menu-item (click)=\"_groupBy($event, dCol)\">\n                <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Group By</span>\n              </button>\n              <button *ngIf=\"_showUnGroupBy(dCol) && bGrouping$\" mat-menu-item (click)=\"_unGroupBy($event, dCol)\">\n                <img class=\"psdk-list-view-svg-icon\" src=\"{{ groupBySvgIcon$ }}\" /><span>Ungroup</span>\n              </button>\n              <button mat-menu-item (click)=\"_filter($event, dCol)\">\n                <img class=\"psdk-list-view-svg-icon\" src=\"{{ filterSvgIcon$ }}\" /><span>Filter</span>\n              </button>\n            </mat-menu>\n          </div>\n        </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element[dCol.config.name] || '---' }}</td>\n      </ng-container>\n      <ng-container matColumnDef=\"DeleteIcon\">\n        <div *ngIf=\"allowEditingInModal\">\n          <th mat-header-cell *matHeaderCellDef></th>\n          <td mat-cell *matCellDef=\"let element; index as j\">\n            <div class=\"header-icon\">\n              <button mat-icon-button [matMenuTriggerFor]=\"utilityMenu\">\n                <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n              </button>\n              <mat-menu #utilityMenu=\"matMenu\" overlapTrigger=\"false\">\n                <button mat-menu-item (click)=\"editRecord(element, j)\">Edit</button>\n                <button mat-menu-item (click)=\"deleteRecord(j)\">Delete</button>\n              </mat-menu>\n            </div>\n          </td>\n        </div>\n      </ng-container>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n    <table *ngIf=\"editableMode && !allowEditingInModal\" mat-table [dataSource]=\"elementsData\" class=\"mat-elevation-z8\" id=\"editable-table\">\n      <ng-container *ngFor=\"let dCol of fieldDefs; let i = index\">\n        <ng-container *ngIf=\"dCol.name != 'DeleteIcon'\" [matColumnDef]=\"dCol.name\">\n          <th mat-header-cell *matHeaderCellDef class=\"psdk-mat-header\">{{ dCol.label }}</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <component-mapper\n              [name]=\"element[i].getPConnect().getComponentName()\"\n              [props]=\"{\n                pConn$: element[i].getPConnect(),\n                formGroup$: formGroup$\n              }\"\n              errorMsg=\"Table wants component not yet available: {{ element[i].getPConnect().getComponentName() }}\"\n            ></component-mapper>\n          </td>\n        </ng-container>\n      </ng-container>\n      <ng-container matColumnDef=\"DeleteIcon\">\n        <th mat-header-cell *matHeaderCellDef></th>\n        <td mat-cell *matCellDef=\"let element; index as j\">\n          <button id=\"delete-button\" mat-icon-button (click)=\"deleteRecord(j)\">\n            <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ menuIconOverride$ }}\" />\n          </button>\n        </td>\n      </ng-container>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n    <div class=\"psdk-no-records\" id=\"no-records\" *ngIf=\"editableMode && referenceList?.length === 0\">No Records Found.</div>\n    <div class=\"psdk-no-records\" id=\"no-records\" *ngIf=\"readOnlyMode && rowData?.data?.length === 0\">No Records Found.</div>\n  </div>\n  <button *ngIf=\"showAddRowButton\" mat-button color=\"primary\" style=\"font-size: 16px\" (click)=\"addRecord()\">+ Add</button>\n</ng-container>\n\n<!-- pop overs for filters-->\n<div *ngIf=\"bShowFilterPopover$\" class=\"psdk-dialog-background\">\n  <div class=\"psdk-modal-file-top\">\n    <h4>\n      Filter:<b> {{ filterContainsLabel$ }}</b>\n    </h4>\n    <div *ngIf=\"bContains$\">\n      <mat-form-field class=\"psdk-full-width\">\n        <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n          <mat-option value=\"contains\">Contains</mat-option>\n          <mat-option value=\"equals\">Equals</mat-option>\n          <mat-option value=\"startswith\">Starts with</mat-option>\n        </mat-select>\n      </mat-form-field>\n\n      <mat-form-field class=\"psdk-full-width\">\n        <input matInput type=\"text\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsValue($event)\" />\n      </mat-form-field>\n    </div>\n\n    <div *ngIf=\"bDateTime$\">\n      <mat-form-field class=\"psdk-full-width\">\n        <mat-select [value]=\"filterContainsType$\" (selectionChange)=\"_filterContainsType($event)\">\n          <mat-option value=\"notequal\">is not equal to</mat-option>\n          <mat-option value=\"after\">after</mat-option>\n          <mat-option value=\"before\">before</mat-option>\n          <mat-option value=\"null\">is null</mat-option>\n          <mat-option value=\"notnull\">is not null</mat-option>\n        </mat-select>\n      </mat-form-field>\n\n      <mat-form-field *ngIf=\"bIsDate$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n        <mat-label>Date</mat-label>\n        <input\n          matInput\n          #dateInput\n          [matDatepicker]=\"pegadate\"\n          type=\"text\"\n          [value]=\"filterContainsValue$\"\n          (dateChange)=\"_filterContainsDateValue($event, dateInput.value)\"\n        />\n        <mat-datepicker-toggle matSuffix [for]=\"pegadate\"></mat-datepicker-toggle>\n        <mat-datepicker #pegadate [startAt]=\"filterContainsValue$\"></mat-datepicker>\n      </mat-form-field>\n\n      <mat-form-field *ngIf=\"bIsDateTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n        <mat-label>Date time</mat-label>\n        <input matInput type=\"datetime-local\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsDateTimeValue($event)\" />\n      </mat-form-field>\n\n      <mat-form-field *ngIf=\"bIsTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'\" class=\"psdk-full-width\">\n        <mat-label>Time</mat-label>\n        <input matInput type=\"time\" [value]=\"filterContainsValue$\" (change)=\"_filterContainsTimeValue($event)\" />\n      </mat-form-field>\n    </div>\n\n    <component-mapper\n      name=\"ActionButtons\"\n      [props]=\"{ arMainButtons$: arFilterMainButtons$, arSecondaryButtons$: arFilterSecondaryButtons$ }\"\n      [parent]=\"this\"\n      [outputEvents]=\"{ actionButtonClick: _onFilterActionButtonClick }\"\n    ></component-mapper>\n  </div>\n</div>\n", styles: [".simple-table-wrapper{width:100%;margin-top:.5rem;margin-bottom:.5rem;overflow-y:auto}table{width:100%}::ng-deep .mat-sort-header-content{white-space:normal}::ng-deep td.mat-mdc-cell{white-space:normal}::ng-deep th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{border-right:1px solid var(--app-neutral-light-color);padding:8px!important}::ng-deep .mat-mdc-button{padding:0;text-align:left}.mat-mdc-icon-button{width:fit-content}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-mat-header{white-space:normal;padding-right:5px}.psdk-mat-header-button{display:inline-grid}.psdk-mat-header-arrow,.psdk-mat-header-filter{display:inline-grid;vertical-align:middle}.psdk-full-width{width:100%}.psdk-search{padding-left:.625rem}.psdk-icon-search{vertical-align:sub;padding:0rem .125rem;min-width:unset;width:1.1rem}.psdk-outer-div-in-form{display:inline-grid}.psdk-inner-div-in-form{height:auto;position:relative;width:100%;overflow:auto;max-height:550px;min-height:auto}.psdk-list-view-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-filter-svg-icon,.psdk-arrow-svg-icon{width:1rem;display:inline-block;vertical-align:middle;filter:var(--app-neutral-color-filter)}.psdk-filter-popover{display:table;margin:auto;min-width:100px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color);position:absolute;z-index:99}.psdk-dialog-background{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-dialog-background-color);position:fixed;z-index:999;top:0;left:0}.psdk-modal-file-top{display:table;margin:auto;min-width:150px;background-color:var(--app-form-color);border:1px solid var(--app-inverse-form-color);border-radius:10px;padding:20px;box-shadow:0 0 10px 3px var(--app-box-shadow-color)}tr.mat-mdc-row{cursor:pointer}tr.mat-mdc-header-row{background:var(--app-table-header-background-color)}.psdk-data-readonly{margin-top:.625rem;width:100%}.psdk-no-records{height:56px;justify-content:center;display:flex;align-items:center;border:1px solid var(--app-neutral-light-color);border-top:none;background:var(--app-form-color)}.psdk-utility-card-action-svg-icon{width:1.4rem}.label{margin:8px}.results-count{opacity:.7;font-size:.8rem;font-weight:700;margin-inline-start:.625rem}\n"] }]
         }], ctorParameters: () => [{ type: AngularPConnectService }, { type: Utils }, { type: DatapageService }], propDecorators: { sort: [{
                 type: ViewChild,
                 args: [MatSort]
@@ -15529,7 +15659,7 @@ class CaseHistoryComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: CaseHistoryComponent, deps: [{ token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: CaseHistoryComponent, isStandalone: true, selector: "app-case-history", inputs: { pConn$: "pConn$" }, ngImport: i0, template: "<div>\n  <h2 class=\"psdk-case-history-title\">{{ configProps$.label }}</h2>\n  <table mat-table [dataSource]=\"repeatList$\">\n    <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.fieldName\">\n      <th mat-header-cell *matHeaderCellDef>{{ dCol.label }}</th>\n      <td mat-cell *matCellDef=\"let element\">{{ element[dCol.fieldName] }}</td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n  </table>\n</div>\n", styles: ["table{width:100%}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-search{padding-left:.625rem}.psdk-icon-search{vertical-align:sub;padding:0rem .125rem;min-width:unset;width:1.1rem}.psdk-case-history-title{margin-left:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i6$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: CaseHistoryComponent, isStandalone: true, selector: "app-case-history", inputs: { pConn$: "pConn$" }, ngImport: i0, template: "<div>\n  <h2 class=\"psdk-case-history-title\">{{ configProps$.label }}</h2>\n  <table mat-table [dataSource]=\"repeatList$\">\n    <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.fieldName\">\n      <th mat-header-cell *matHeaderCellDef>{{ dCol.label }}</th>\n      <td mat-cell *matCellDef=\"let element\">{{ element[dCol.fieldName] }}</td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\"></tr>\n  </table>\n</div>\n", styles: ["table{width:100%}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-search{padding-left:.625rem}.psdk-icon-search{vertical-align:sub;padding:0rem .125rem;min-width:unset;width:1.1rem}.psdk-case-history-title{margin-left:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i6$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: CaseHistoryComponent, decorators: [{
             type: Component,
@@ -17239,11 +17369,11 @@ class MaterialCaseSummaryComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: MaterialCaseSummaryComponent, deps: [{ token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: MaterialCaseSummaryComponent, isStandalone: true, selector: "app-material-case-summary", inputs: { status$: "status$", bShowStatus$: "bShowStatus$", primaryFields$: "primaryFields$", secondaryFields$: "secondaryFields$" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"psdk-case-summary-fields\">\n  <dl class=\"psdk-case-summary-fields-primary\">\n    <div *ngFor=\"let field of primaryFieldsWithStatus$\" class=\"psdk-csf-primary-field\">\n      <dt class=\"psdk-csf-primary-field-header\">\n        {{ field.config?.label }}\n      </dt>\n      <dd *ngIf=\"field.config.value === ''; else hasValue\" class=\"psdk-csf-primary-field-data\">\n        <ng-container [ngSwitch]=\"field.type.toLowerCase()\">\n          <label *ngSwitchCase=\"'caseoperator'\">operator</label>\n          <span *ngSwitchDefault class=\"psdk-csf-text-style\">---</span>\n        </ng-container>\n      </dd>\n      <ng-template #hasValue>\n        <dd class=\"psdk-csf-primary-field-data\" [ngSwitch]=\"field.type.toLowerCase()\">\n          <span *ngSwitchCase=\"'textinput'\" class=\"psdk-csf-text-style\">{{ field.config.value }}</span>\n          <span *ngSwitchCase=\"'status'\" class=\"psdk-csf-status-style\">{{ field.config.value }}</span>\n          <a *ngSwitchCase=\"'phone'\" as=\"a\" href=\"tel: {{ field.config.value }}\">{{ field.config.value }}</a>\n          <a *ngSwitchCase=\"'email'\" href=\"mailto: {{ field.config.value }}\">{{ field.config.value }}</a>\n          <span *ngSwitchCase=\"'date'\" class=\"psdk-csf-text-style\">{{ field.config.value }}</span>\n          <label *ngSwitchCase=\"'caseoperator'\">operator</label>\n          <span *ngSwitchDefault class=\"psdk-csf-text-style\">{{ field.config.value }}</span>\n        </dd>\n      </ng-template>\n    </div>\n  </dl>\n</div>\n<div class=\"psdk-case-summary-fields\">\n  <dl *ngFor=\"let field of secondaryFields$\" class=\"psdk-case-summary-fields-secondary\">\n    <div\n      *ngIf=\"\n        field?.config?.label?.toLowerCase() == 'create operator' ||\n          field?.displayLabel?.toLowerCase() == 'create operator' ||\n          field?.config?.label?.toLowerCase() == 'update operator' ||\n          field?.displayLabel?.toLowerCase() == 'update operator';\n        else hasSecondaryValue\n      \"\n    >\n      <component-mapper name=\"Operator\" [props]=\"{ pConn$: field?.kid, displayLabel: field?.displayLabel }\"></component-mapper>\n    </div>\n    <ng-template #hasSecondaryValue>\n      <div class=\"psdk-csf-secondary-field\">\n        <dt class=\"psdk-csf-secondary-field-header\">\n          {{ field.config?.displayLabel || field.config?.label }}\n        </dt>\n        <dd class=\"psdk-csf-secondary-field-data\">\n          <div [ngSwitch]=\"field.type\">\n            <label *ngSwitchCase=\"'UserReference'\" class=\"psdk-secondary-value\">{{ field.config.value.userName || '---' }}</label>\n            <label *ngSwitchCase=\"'Checkbox'\" class=\"psdk-secondary-value\">{{ field.config.falseLabel || '---' }}</label>\n            <label *ngSwitchDefault class=\"psdk-secondary-value\">{{ field.config.value || '---' }}</label>\n          </div>\n        </dd>\n      </div>\n    </ng-template>\n  </dl>\n</div>\n", styles: [".psdk-case-summary{display:block;margin:.625rem}.psdk-case-summary-primary,.psdk-case-summary-secondary,.psdk-case-summary-status{text-align:left;margin-bottom:.75rem}.psdk-case-summary-status-data{display:block;background-color:var(--app-primary-lightest-color);color:var(--app-primary-color);padding:0rem .625rem;display:inline;font-size:.75rem;font-weight:700;text-transform:uppercase;line-height:1.5rem}.psdk-case-summary-primary .label{font-weight:600}.psdk-case-summary-primary .data{font-weight:600;font-size:1.625rem}.psdk-case-summary-secondary .label{font-weight:600}.psdk-case-summary-secondary .data{font-weight:600;padding-left:1.25rem}.psdk-case-summary-fields{padding:1rem;display:grid;grid-row-gap:1rem}.psdk-case-summary-fields-primary{grid-template-columns:20ch 1fr;display:grid;grid-column-gap:1rem;grid-row-gap:1rem}.psdk-csf-primary-field{display:grid;grid-template-columns:1fr;grid-column-gap:0rem}.psdk-csf-primary-field-header{word-break:break-word;grid-column-start:1;grid-row-start:1;max-width:max-content;font-size:.8125rem;font-weight:400;color:var(--app-field-header-color)}.psdk-csf-primary-field-data{word-break:break-word;grid-column-start:1;grid-row-start:2;margin-inline-start:unset}.psdk-case-summary-fields-secondary{width:100%;display:grid;grid-template-columns:1fr;grid-column-gap:1rem;grid-row-gap:.5rem}.psdk-csf-secondary-field{display:grid;grid-template-columns:auto;grid-column-gap:1rem}.psdk-csf-secondary-field-header{word-break:break-word;grid-column-start:1;grid-row-start:1;max-width:max-content;font-size:.8125rem;font-weight:400;color:var(--app-field-header-color);align-items:center;display:flex}.psdk-csf-secondary-field-data{word-break:break-word;grid-column-start:2;grid-row-start:1;margin-inline-start:unset}span.psdk-csf-text-style{font-size:1.125rem;font-weight:600}span.psdk-csf-status-style{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-secondary-value{font-size:1rem}\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: MaterialCaseSummaryComponent, isStandalone: true, selector: "app-material-case-summary", inputs: { status$: "status$", bShowStatus$: "bShowStatus$", primaryFields$: "primaryFields$", secondaryFields$: "secondaryFields$" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"psdk-case-summary-fields\">\n  <dl class=\"psdk-case-summary-fields-primary\">\n    <div *ngFor=\"let field of primaryFieldsWithStatus$\" class=\"psdk-csf-primary-field\">\n      <dt class=\"psdk-csf-primary-field-header\">\n        {{ field.config?.label }}\n      </dt>\n      <dd *ngIf=\"field.config.value === ''; else hasValue\" class=\"psdk-csf-primary-field-data\">\n        <ng-container [ngSwitch]=\"field.type.toLowerCase()\">\n          <label *ngSwitchCase=\"'caseoperator'\">operator</label>\n          <span *ngSwitchDefault class=\"psdk-csf-text-style\">---</span>\n        </ng-container>\n      </dd>\n      <ng-template #hasValue>\n        <dd class=\"psdk-csf-primary-field-data\" [ngSwitch]=\"field.type.toLowerCase()\">\n          <span *ngSwitchCase=\"'textinput'\" class=\"psdk-csf-text-style\">{{ field.config.value }}</span>\n          <span *ngSwitchCase=\"'status'\" class=\"psdk-csf-status-style\">{{ field.config.value }}</span>\n          <a *ngSwitchCase=\"'phone'\" as=\"a\" href=\"tel: {{ field.config.value }}\">{{ field.config.value }}</a>\n          <a *ngSwitchCase=\"'email'\" href=\"mailto: {{ field.config.value }}\">{{ field.config.value }}</a>\n          <span *ngSwitchCase=\"'date'\" class=\"psdk-csf-text-style\">{{ field.config.value }}</span>\n          <label *ngSwitchCase=\"'caseoperator'\">operator</label>\n          <span *ngSwitchDefault class=\"psdk-csf-text-style\">{{ field.config.value }}</span>\n        </dd>\n      </ng-template>\n    </div>\n  </dl>\n</div>\n<div class=\"psdk-case-summary-fields\">\n  <dl *ngFor=\"let field of secondaryFields$\" class=\"psdk-case-summary-fields-secondary\">\n    <div\n      *ngIf=\"\n        field?.config?.label?.toLowerCase() == 'create operator' ||\n          field?.displayLabel?.toLowerCase() == 'create operator' ||\n          field?.config?.label?.toLowerCase() == 'update operator' ||\n          field?.displayLabel?.toLowerCase() == 'update operator';\n        else hasSecondaryValue\n      \"\n    >\n      <component-mapper name=\"Operator\" [props]=\"{ pConn$: field?.kid, displayLabel: field?.displayLabel }\"></component-mapper>\n    </div>\n    <ng-template #hasSecondaryValue>\n      <div class=\"psdk-csf-secondary-field\">\n        <dt class=\"psdk-csf-secondary-field-header\">\n          {{ field.config?.displayLabel || field.config?.label }}\n        </dt>\n        <dd class=\"psdk-csf-secondary-field-data\">\n          <div [ngSwitch]=\"field.type\">\n            <label *ngSwitchCase=\"'UserReference'\" class=\"psdk-secondary-value\">{{ field.config.value.userName || '---' }}</label>\n            <label *ngSwitchCase=\"'Checkbox'\" class=\"psdk-secondary-value\">{{ field.config.falseLabel || '---' }}</label>\n            <label *ngSwitchDefault class=\"psdk-secondary-value\">{{ field.config.value || '---' }}</label>\n          </div>\n        </dd>\n      </div>\n    </ng-template>\n  </dl>\n</div>\n", styles: [".psdk-case-summary{display:block;margin:.625rem}.psdk-case-summary-primary,.psdk-case-summary-secondary,.psdk-case-summary-status{text-align:left;margin-bottom:.75rem}.psdk-case-summary-status-data{display:block;background-color:var(--app-primary-lightest-color);color:var(--app-primary-color);padding:0rem .625rem;display:inline;font-size:.75rem;font-weight:700;text-transform:uppercase;line-height:1.5rem}.psdk-case-summary-primary .label{font-weight:600}.psdk-case-summary-primary .data{font-weight:600;font-size:1.625rem}.psdk-case-summary-secondary .label{font-weight:600}.psdk-case-summary-secondary .data{font-weight:600;padding-left:1.25rem}.psdk-case-summary-fields{display:grid;grid-row-gap:1rem}.psdk-case-summary-fields-primary{grid-template-columns:20ch 1fr;display:grid;grid-column-gap:1rem;grid-row-gap:1rem}.psdk-csf-primary-field{display:grid;grid-template-columns:1fr;grid-column-gap:0rem}.psdk-csf-primary-field-header{word-break:break-word;grid-column-start:1;grid-row-start:1;max-width:max-content;font-size:.8125rem;font-weight:400;color:var(--app-field-header-color)}.psdk-csf-primary-field-data{word-break:break-word;grid-column-start:1;grid-row-start:2;margin-inline-start:unset}.psdk-case-summary-fields-secondary{width:100%;display:grid;grid-template-columns:1fr;grid-column-gap:1rem;grid-row-gap:.5rem;margin:0}.psdk-csf-secondary-field{display:grid;grid-template-columns:auto;grid-column-gap:1rem}.psdk-csf-secondary-field-header{word-break:break-word;grid-column-start:1;grid-row-start:1;max-width:max-content;font-size:.8125rem;font-weight:400;color:var(--app-field-header-color);align-items:center;display:flex}.psdk-csf-secondary-field-data{word-break:break-word;grid-column-start:2;grid-row-start:1;margin-inline-start:unset}span.psdk-csf-text-style{font-size:1.125rem;font-weight:600}span.psdk-csf-status-style{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-secondary-value{font-size:1rem}\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: MaterialCaseSummaryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-material-case-summary', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div class=\"psdk-case-summary-fields\">\n  <dl class=\"psdk-case-summary-fields-primary\">\n    <div *ngFor=\"let field of primaryFieldsWithStatus$\" class=\"psdk-csf-primary-field\">\n      <dt class=\"psdk-csf-primary-field-header\">\n        {{ field.config?.label }}\n      </dt>\n      <dd *ngIf=\"field.config.value === ''; else hasValue\" class=\"psdk-csf-primary-field-data\">\n        <ng-container [ngSwitch]=\"field.type.toLowerCase()\">\n          <label *ngSwitchCase=\"'caseoperator'\">operator</label>\n          <span *ngSwitchDefault class=\"psdk-csf-text-style\">---</span>\n        </ng-container>\n      </dd>\n      <ng-template #hasValue>\n        <dd class=\"psdk-csf-primary-field-data\" [ngSwitch]=\"field.type.toLowerCase()\">\n          <span *ngSwitchCase=\"'textinput'\" class=\"psdk-csf-text-style\">{{ field.config.value }}</span>\n          <span *ngSwitchCase=\"'status'\" class=\"psdk-csf-status-style\">{{ field.config.value }}</span>\n          <a *ngSwitchCase=\"'phone'\" as=\"a\" href=\"tel: {{ field.config.value }}\">{{ field.config.value }}</a>\n          <a *ngSwitchCase=\"'email'\" href=\"mailto: {{ field.config.value }}\">{{ field.config.value }}</a>\n          <span *ngSwitchCase=\"'date'\" class=\"psdk-csf-text-style\">{{ field.config.value }}</span>\n          <label *ngSwitchCase=\"'caseoperator'\">operator</label>\n          <span *ngSwitchDefault class=\"psdk-csf-text-style\">{{ field.config.value }}</span>\n        </dd>\n      </ng-template>\n    </div>\n  </dl>\n</div>\n<div class=\"psdk-case-summary-fields\">\n  <dl *ngFor=\"let field of secondaryFields$\" class=\"psdk-case-summary-fields-secondary\">\n    <div\n      *ngIf=\"\n        field?.config?.label?.toLowerCase() == 'create operator' ||\n          field?.displayLabel?.toLowerCase() == 'create operator' ||\n          field?.config?.label?.toLowerCase() == 'update operator' ||\n          field?.displayLabel?.toLowerCase() == 'update operator';\n        else hasSecondaryValue\n      \"\n    >\n      <component-mapper name=\"Operator\" [props]=\"{ pConn$: field?.kid, displayLabel: field?.displayLabel }\"></component-mapper>\n    </div>\n    <ng-template #hasSecondaryValue>\n      <div class=\"psdk-csf-secondary-field\">\n        <dt class=\"psdk-csf-secondary-field-header\">\n          {{ field.config?.displayLabel || field.config?.label }}\n        </dt>\n        <dd class=\"psdk-csf-secondary-field-data\">\n          <div [ngSwitch]=\"field.type\">\n            <label *ngSwitchCase=\"'UserReference'\" class=\"psdk-secondary-value\">{{ field.config.value.userName || '---' }}</label>\n            <label *ngSwitchCase=\"'Checkbox'\" class=\"psdk-secondary-value\">{{ field.config.falseLabel || '---' }}</label>\n            <label *ngSwitchDefault class=\"psdk-secondary-value\">{{ field.config.value || '---' }}</label>\n          </div>\n        </dd>\n      </div>\n    </ng-template>\n  </dl>\n</div>\n", styles: [".psdk-case-summary{display:block;margin:.625rem}.psdk-case-summary-primary,.psdk-case-summary-secondary,.psdk-case-summary-status{text-align:left;margin-bottom:.75rem}.psdk-case-summary-status-data{display:block;background-color:var(--app-primary-lightest-color);color:var(--app-primary-color);padding:0rem .625rem;display:inline;font-size:.75rem;font-weight:700;text-transform:uppercase;line-height:1.5rem}.psdk-case-summary-primary .label{font-weight:600}.psdk-case-summary-primary .data{font-weight:600;font-size:1.625rem}.psdk-case-summary-secondary .label{font-weight:600}.psdk-case-summary-secondary .data{font-weight:600;padding-left:1.25rem}.psdk-case-summary-fields{padding:1rem;display:grid;grid-row-gap:1rem}.psdk-case-summary-fields-primary{grid-template-columns:20ch 1fr;display:grid;grid-column-gap:1rem;grid-row-gap:1rem}.psdk-csf-primary-field{display:grid;grid-template-columns:1fr;grid-column-gap:0rem}.psdk-csf-primary-field-header{word-break:break-word;grid-column-start:1;grid-row-start:1;max-width:max-content;font-size:.8125rem;font-weight:400;color:var(--app-field-header-color)}.psdk-csf-primary-field-data{word-break:break-word;grid-column-start:1;grid-row-start:2;margin-inline-start:unset}.psdk-case-summary-fields-secondary{width:100%;display:grid;grid-template-columns:1fr;grid-column-gap:1rem;grid-row-gap:.5rem}.psdk-csf-secondary-field{display:grid;grid-template-columns:auto;grid-column-gap:1rem}.psdk-csf-secondary-field-header{word-break:break-word;grid-column-start:1;grid-row-start:1;max-width:max-content;font-size:.8125rem;font-weight:400;color:var(--app-field-header-color);align-items:center;display:flex}.psdk-csf-secondary-field-data{word-break:break-word;grid-column-start:2;grid-row-start:1;margin-inline-start:unset}span.psdk-csf-text-style{font-size:1.125rem;font-weight:600}span.psdk-csf-status-style{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-secondary-value{font-size:1rem}\n"] }]
+            args: [{ selector: 'app-material-case-summary', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div class=\"psdk-case-summary-fields\">\n  <dl class=\"psdk-case-summary-fields-primary\">\n    <div *ngFor=\"let field of primaryFieldsWithStatus$\" class=\"psdk-csf-primary-field\">\n      <dt class=\"psdk-csf-primary-field-header\">\n        {{ field.config?.label }}\n      </dt>\n      <dd *ngIf=\"field.config.value === ''; else hasValue\" class=\"psdk-csf-primary-field-data\">\n        <ng-container [ngSwitch]=\"field.type.toLowerCase()\">\n          <label *ngSwitchCase=\"'caseoperator'\">operator</label>\n          <span *ngSwitchDefault class=\"psdk-csf-text-style\">---</span>\n        </ng-container>\n      </dd>\n      <ng-template #hasValue>\n        <dd class=\"psdk-csf-primary-field-data\" [ngSwitch]=\"field.type.toLowerCase()\">\n          <span *ngSwitchCase=\"'textinput'\" class=\"psdk-csf-text-style\">{{ field.config.value }}</span>\n          <span *ngSwitchCase=\"'status'\" class=\"psdk-csf-status-style\">{{ field.config.value }}</span>\n          <a *ngSwitchCase=\"'phone'\" as=\"a\" href=\"tel: {{ field.config.value }}\">{{ field.config.value }}</a>\n          <a *ngSwitchCase=\"'email'\" href=\"mailto: {{ field.config.value }}\">{{ field.config.value }}</a>\n          <span *ngSwitchCase=\"'date'\" class=\"psdk-csf-text-style\">{{ field.config.value }}</span>\n          <label *ngSwitchCase=\"'caseoperator'\">operator</label>\n          <span *ngSwitchDefault class=\"psdk-csf-text-style\">{{ field.config.value }}</span>\n        </dd>\n      </ng-template>\n    </div>\n  </dl>\n</div>\n<div class=\"psdk-case-summary-fields\">\n  <dl *ngFor=\"let field of secondaryFields$\" class=\"psdk-case-summary-fields-secondary\">\n    <div\n      *ngIf=\"\n        field?.config?.label?.toLowerCase() == 'create operator' ||\n          field?.displayLabel?.toLowerCase() == 'create operator' ||\n          field?.config?.label?.toLowerCase() == 'update operator' ||\n          field?.displayLabel?.toLowerCase() == 'update operator';\n        else hasSecondaryValue\n      \"\n    >\n      <component-mapper name=\"Operator\" [props]=\"{ pConn$: field?.kid, displayLabel: field?.displayLabel }\"></component-mapper>\n    </div>\n    <ng-template #hasSecondaryValue>\n      <div class=\"psdk-csf-secondary-field\">\n        <dt class=\"psdk-csf-secondary-field-header\">\n          {{ field.config?.displayLabel || field.config?.label }}\n        </dt>\n        <dd class=\"psdk-csf-secondary-field-data\">\n          <div [ngSwitch]=\"field.type\">\n            <label *ngSwitchCase=\"'UserReference'\" class=\"psdk-secondary-value\">{{ field.config.value.userName || '---' }}</label>\n            <label *ngSwitchCase=\"'Checkbox'\" class=\"psdk-secondary-value\">{{ field.config.falseLabel || '---' }}</label>\n            <label *ngSwitchDefault class=\"psdk-secondary-value\">{{ field.config.value || '---' }}</label>\n          </div>\n        </dd>\n      </div>\n    </ng-template>\n  </dl>\n</div>\n", styles: [".psdk-case-summary{display:block;margin:.625rem}.psdk-case-summary-primary,.psdk-case-summary-secondary,.psdk-case-summary-status{text-align:left;margin-bottom:.75rem}.psdk-case-summary-status-data{display:block;background-color:var(--app-primary-lightest-color);color:var(--app-primary-color);padding:0rem .625rem;display:inline;font-size:.75rem;font-weight:700;text-transform:uppercase;line-height:1.5rem}.psdk-case-summary-primary .label{font-weight:600}.psdk-case-summary-primary .data{font-weight:600;font-size:1.625rem}.psdk-case-summary-secondary .label{font-weight:600}.psdk-case-summary-secondary .data{font-weight:600;padding-left:1.25rem}.psdk-case-summary-fields{display:grid;grid-row-gap:1rem}.psdk-case-summary-fields-primary{grid-template-columns:20ch 1fr;display:grid;grid-column-gap:1rem;grid-row-gap:1rem}.psdk-csf-primary-field{display:grid;grid-template-columns:1fr;grid-column-gap:0rem}.psdk-csf-primary-field-header{word-break:break-word;grid-column-start:1;grid-row-start:1;max-width:max-content;font-size:.8125rem;font-weight:400;color:var(--app-field-header-color)}.psdk-csf-primary-field-data{word-break:break-word;grid-column-start:1;grid-row-start:2;margin-inline-start:unset}.psdk-case-summary-fields-secondary{width:100%;display:grid;grid-template-columns:1fr;grid-column-gap:1rem;grid-row-gap:.5rem;margin:0}.psdk-csf-secondary-field{display:grid;grid-template-columns:auto;grid-column-gap:1rem}.psdk-csf-secondary-field-header{word-break:break-word;grid-column-start:1;grid-row-start:1;max-width:max-content;font-size:.8125rem;font-weight:400;color:var(--app-field-header-color);align-items:center;display:flex}.psdk-csf-secondary-field-data{word-break:break-word;grid-column-start:2;grid-row-start:1;margin-inline-start:unset}span.psdk-csf-text-style{font-size:1.125rem;font-weight:600}span.psdk-csf-status-style{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-secondary-value{font-size:1rem}\n"] }]
         }], ctorParameters: () => [{ type: Utils }], propDecorators: { status$: [{
                 type: Input
             }], bShowStatus$: [{
@@ -17289,7 +17419,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;
         }
@@ -17299,11 +17432,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: [{
@@ -18161,7 +18294,7 @@ class RepeatingStructuresComponent {
         return fields.map((field) => field.name);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: RepeatingStructuresComponent, deps: [{ token: ProgressSpinnerService }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: RepeatingStructuresComponent, isStandalone: true, selector: "app-repeating-structures", inputs: { pConn$: "pConn$" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div>\n  <mat-form-field class=\"psdk-search\">\n    <mat-label\n      ><mat-icon class=\"psdk-icon-search\" style=\"transform: scale(1.2); width: 2rem; vertical-align: sub\" svgIcon=\"magnify\" mastListIcon></mat-icon>\n      Search</mat-label\n    >\n    <input matInput (keyup)=\"applySearch($event)\" placeholder=\"\" />\n  </mat-form-field>\n\n  <table mat-table [dataSource]=\"repeatList$\" matSort>\n    <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.name\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ dCol.label }}</th>\n      <td mat-cell *matCellDef=\"let element\">{{ element[dCol.name] }}</td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\" (click)=\"rowClick(row)\"></tr>\n  </table>\n\n  <mat-paginator [pageSizeOptions]=\"[10, 20, 50, 100, 500]\" showFirstLastButtons></mat-paginator>\n</div>\n", styles: ["table{width:100%}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-search{padding-left:.625rem}.psdk-icon-search{vertical-align:sub;padding:0rem .125rem;min-width:unset}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i6$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i7$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i14.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: RepeatingStructuresComponent, isStandalone: true, selector: "app-repeating-structures", inputs: { pConn$: "pConn$" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div>\n  <mat-form-field class=\"psdk-search\">\n    <mat-label\n      ><mat-icon class=\"psdk-icon-search\" style=\"transform: scale(1.2); width: 2rem; vertical-align: sub\" svgIcon=\"magnify\" mastListIcon></mat-icon>\n      Search</mat-label\n    >\n    <input matInput (keyup)=\"applySearch($event)\" placeholder=\"\" />\n  </mat-form-field>\n\n  <table mat-table [dataSource]=\"repeatList$\" matSort>\n    <ng-container *ngFor=\"let dCol of fields$\" [matColumnDef]=\"dCol.name\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ dCol.label }}</th>\n      <td mat-cell *matCellDef=\"let element\">{{ element[dCol.name] }}</td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns$\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns$\" (click)=\"rowClick(row)\"></tr>\n  </table>\n\n  <mat-paginator [pageSizeOptions]=\"[10, 20, 50, 100, 500]\" showFirstLastButtons></mat-paginator>\n</div>\n", styles: ["table{width:100%}.mat-mdc-row .mat-mdc-cell{text-align:left}.psdk-search{padding-left:.625rem}.psdk-icon-search{vertical-align:sub;padding:0rem .125rem;min-width:unset}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i6$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i7$3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i14.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: RepeatingStructuresComponent, decorators: [{
             type: Component,
@@ -18313,5 +18446,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, 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 };
+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