@pega/angular-sdk-components 0.242.3 → 0.242.4

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

@@ -49,10 +49,10 @@ 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';
@@ -3581,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
@@ -3628,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() {
@@ -3732,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$: [{
@@ -6095,9 +6097,9 @@ class CurrencyComponent {
         this.placeholder = this.configProps$.placeholder || '';
         const currencyISOCode = this.configProps$?.currencyISOCode ?? '';
         const theSymbols = getCurrencyCharacters(currencyISOCode);
-        this.currSym = theSymbols.theCurrencySymbol;
-        this.currSep = theSymbols.theDigitGroupSeparator;
-        this.currDec = theSymbols.theDecimalIndicator;
+        this.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);
@@ -6150,12 +6152,14 @@ class CurrencyComponent {
         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, '.');
+        // 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);
     }
@@ -6175,11 +6179,11 @@ class CurrencyComponent {
         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: 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"] }] }); }
+    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: 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"] }]
+            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$: [{
@@ -6463,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);
@@ -6523,7 +6527,7 @@ class DateTimeComponent {
         });
         if (this.displayMode$ === 'DISPLAY_ONLY' || this.displayMode$ === 'STACKED_LARGE_VAL') {
             this.formattedValue$ = format(this.value$, 'datetime', {
-                format: `${this.theDateFormat.dateFormatString} hh:mm a`
+                format: `${this.theDateFormat.dateFormatString} hh:mm A`
             });
         }
         if (this.configProps$.visibility != null) {
@@ -6614,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
@@ -6676,8 +6681,8 @@ 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) {
@@ -6710,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;
@@ -6722,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);
     }
@@ -6747,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,
@@ -6759,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$ = '';
@@ -6796,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);
@@ -6842,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) {
@@ -6849,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);
         }
@@ -6866,12 +6909,14 @@ 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';
         }
+        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();
@@ -6894,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;
     }
@@ -6927,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
@@ -7388,17 +7480,18 @@ class PercentageComponent {
         const nValue = this.configProps$.value;
         if (nValue) {
             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 = format(nValue, 'percentage');
+            this.formattedValue = nValue ? format(nValue, 'percentage') : '';
         }
         // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
         setTimeout(() => {
@@ -7442,12 +7535,16 @@ class PercentageComponent {
     fieldOnBlur(event) {
         let value = event?.target?.value;
         value = value ? value.replace(/%/g, '') : '';
-        if (this.currSep === '.') {
-            value = value?.replace(/\./g, '');
-            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, '');
+        // replacing decimal separator with '.'
+        if (this.decimalSeparator !== '.') {
+            const regExp = new RegExp(String.raw `${this.decimalSeparator}`, 'g');
+            value = value.replace(regExp, '.');
         }
         handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
     }
@@ -7468,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$: formattedValue, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <input\n          type=\"text\"\n          matInput\n          currencyMask\n          [options]=\"{\n            prefix: '',\n            suffix: '%',\n            thousands: currSep,\n            decimal: currDec,\n            align: 'left',\n            nullable: true,\n            precision: decimalPrecision,\n            inputMode: inputMode\n          }\"\n          [placeholder]=\"placeholder\"\n          step=\".01\"\n          [formControlName]=\"controlName$\"\n          [required]=\"bRequired$\"\n          [formControl]=\"fieldControl\"\n          [attr.data-test-id]=\"testId\"\n          (change)=\"fieldOnChange()\"\n          (blur)=\"fieldOnBlur($event)\"\n          [readonly]=\"bReadonly$\"\n          [value]=\"value$\"\n        />\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i4.DefaultValueAccessor), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(() => i4.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i4.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i4.RequiredValidator), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(() => i4.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i4.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i4.FormControlName), selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i5.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i5.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i5.MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatInputModule) }, { kind: "directive", type: i0.forwardRef(() => i6$1.MatInput), selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i0.forwardRef(() => NgxCurrencyDirective), selector: "input[currencyMask]", inputs: ["currencyMask", "options"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    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$: formattedValue, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"bHasForm$; else noEdit\">\n    <div [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\">\n        <mat-label>{{ label$ }}</mat-label>\n        <input\n          type=\"text\"\n          matInput\n          currencyMask\n          [options]=\"{\n            prefix: '',\n            suffix: '%',\n            thousands: currSep,\n            decimal: currDec,\n            align: 'left',\n            nullable: true,\n            precision: decimalPrecision,\n            inputMode: inputMode\n          }\"\n          [placeholder]=\"placeholder\"\n          step=\".01\"\n          [formControlName]=\"controlName$\"\n          [required]=\"bRequired$\"\n          [formControl]=\"fieldControl\"\n          [attr.data-test-id]=\"testId\"\n          (change)=\"fieldOnChange()\"\n          (blur)=\"fieldOnBlur($event)\"\n          [readonly]=\"bReadonly$\"\n          [value]=\"value$\"\n        />\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}\n"] }]
+            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$: [{
@@ -7778,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,
@@ -8400,7 +8497,7 @@ class TimeComponent {
         });
         if (this.displayMode$ === 'DISPLAY_ONLY' || this.displayMode$ === 'STACKED_LARGE_VAL') {
             this.formattedValue$ = format(this.value$, 'timeonly', {
-                format: 'hh:mm a'
+                format: 'hh:mm A'
             });
         }
         if (this.configProps$.visibility != null) {
@@ -8756,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,
@@ -9777,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';
@@ -9817,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$: [{
@@ -10415,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');
@@ -10432,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$: [{
@@ -10578,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;padding-block:8px}.psdk-value{margin:8px 0}.psdk-value-hf{margin:8px 0;font-weight:500;font-size:1.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    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;padding-block:8px}.psdk-value{margin:8px 0}.psdk-value-hf{margin:8px 0;font-weight:500;font-size:1.25rem}\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$: [{
@@ -11583,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() {
@@ -11626,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();
@@ -11648,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 => {
@@ -12680,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);
@@ -12708,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,
@@ -12731,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]
@@ -14622,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,
@@ -14638,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]
@@ -15560,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,
@@ -17270,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$: [{
@@ -18195,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,